/* ============================================================
   Catapulte — css/brutaliste/animations.css
   Brutaliste skin: circular shutter overlay, per-character mask
   system for SplitText wave cascade, stroke initial state for
   em tags, reduced motion guards.

   Loaded as third brutaliste CSS file (after tokens + components).
   z-index hierarchy: content < grain 9998 < cursor 9999 < shutter 10000
   ============================================================ */

/* ── CIRCULAR SHUTTER OVERLAY ──
   Direct body child — required for iOS Safari clip-path + position:fixed
   stacking context compatibility (WebKit bug with transform ancestors).
   Hidden by default via visibility:hidden + collapsed clip-path.
   z-index 10000 sits above header (1000), cursor (9999), grain (9998).
   ──────────────────────────────────────────────────────────── */
.brut-shutter {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  visibility: hidden;
  pointer-events: none;
  clip-path: circle(0px at 50% 50%);
}

/* ── NAVIGATED LOAD GATE STATE ──
   When html has page-transition-active, shutter covers full viewport.
   Gate 4 inline script sets this class before first paint when
   sessionStorage 'catapulte-transition' = 'entering'.
   CSS safety timeout: if JS never removes class, hide after 5s.
   ──────────────────────────────────────────────────────────── */

html.page-transition-active[data-skin="brutaliste"] .brut-shutter {
  visibility: visible;
  pointer-events: all;
  clip-path: circle(150vmax at 50% 50%);
  animation: safety-fade-out 0s ease 5s forwards;
}

[data-skin="brutaliste"] {
  /* ── HERO H1 HIDDEN BEFORE REVEAL ──
     Prevent flash of unstyled text before SplitText + GSAP
     sets per-character initial state. JS sets visibility:visible
     once chars are positioned. Reduced-motion override below.
     ──────────────────────────────────────────────────────────── */
  & .site-hero h1,
  & .page-hero h1 {
    visibility: hidden;

    /* ── SPLITTEXT PER-CHARACTER MASK ──
       Masking is set via JS (gsap.set on _split.words) to guarantee
       inline-style specificity over SplitText's own inline styles.
       CSS only provides display:inline-block fallback for char layout.
       ──────────────────────────────────────────────────────────── */
    & .char {
      display: inline-block;
    }
  }
  /* ── STROKE-ONLY INITIAL STATE FOR EM CHARS ──
     em tags within hero h1 start as stroke outlines (hollow text).
     GSAP animates -webkit-text-fill-color back to var(--text) as
     the wave cascade reaches those characters (stroke-to-fill phase).
     ──────────────────────────────────────────────────────────── */
  & .site-hero h1 em .char,
  & .page-hero h1 em .char {
    -webkit-text-stroke: 2px var(--accent);
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* ── BENTO GRID LAYOUT ──
     12-column asymmetric layout: row 1 = 8/4, row 2 = 6/6, row 3 = 4/8.
     Grid gap uses shared --card-gap token. Mobile collapses to single column.
     CSS toggles: brutaliste hides .services-list, cinematic hides .bento-grid.
     ──────────────────────────────────────────────────────────── */
  & .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--card-gap, 1.5rem);
  }
  /* Row 1: 8 + 4 */
  & .bento-card:nth-child(1) { grid-column: span 8; }
  & .bento-card:nth-child(2) { grid-column: span 4; }
  /* Row 2: 6 + 6 */
  & .bento-card:nth-child(3) { grid-column: span 6; }
  & .bento-card:nth-child(4) { grid-column: span 6; }
  /* Row 3: 4 + 8 */
  & .bento-card:nth-child(5) { grid-column: span 4; }
  & .bento-card:nth-child(6) { grid-column: span 8; }
  /* ── BENTO CARD HOVER-REVEAL PANEL ──
     Panel starts below the card boundary (translateY 100%), slides up on hover.
     overflow:hidden on card clips the panel during transition.
     min-height ensures cards have enough height for the reveal effect.
     ──────────────────────────────────────────────────────────── */
  & .bento-card {
    position: relative;
    overflow: hidden;
    min-height: 220px;
  }
  & .bento-card__reveal {
    position: absolute;
    inset: 0;
    background: var(--accent);
    color: var(--bg);
    display: flex;
    align-items: flex-end;
    padding: var(--card-padding, 2rem);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  & .bento-card:hover .bento-card__reveal {
    transform: translateY(0);
  }
  /* ── SKIN EXCLUSIVITY: hide services-list on brutaliste ── */
  & .services-list {
    display: none;
  }
  /* ── Mobile overrides ── */
  @media (max-width: 768px) {
    /* Bento: single column on mobile */
    & .bento-card {
      grid-column: span 12 !important;
    }
    /* ── BENTO CARD TOUCH-HOVER REVEAL ──
       On mobile touch, .touch-hover class triggers the reveal panel. */
    & .bento-card.touch-hover .bento-card__reveal {
      transform: translateY(0);
    }
  }
}

/* ── CANVAS GRAIN OVERLAY (for Plan 02 — BRUT-06) ──
   Positioned above content but below cursor.
   opacity ~6%: subliminal texture felt more than seen.
   will-change: transform promotes to GPU compositing layer.
   width/height 100vw/vh prevents subpixel gaps on retina.
   ──────────────────────────────────────────────────────────── */
.brut-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.06;
  will-change: transform;
  width: 100vw;
  height: 100vh;
}

/* ── REDUCED MOTION OVERRIDES ──
   All brutaliste animations respect prefers-reduced-motion.
   Shutter transitions are suppressed (JS guards also apply).
   Characters reveal immediately without wave cascade.
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .brut-shutter {
    display: none !important;
  }

  [data-skin="brutaliste"] .site-hero h1,
  [data-skin="brutaliste"] .page-hero h1 {
    visibility: visible;
  }

  [data-skin="brutaliste"] .site-hero h1 .word,
  [data-skin="brutaliste"] .page-hero h1 .word {
    overflow: visible !important;
  }

  [data-skin="brutaliste"] .site-hero h1 em .char,
  [data-skin="brutaliste"] .page-hero h1 em .char {
    -webkit-text-stroke: 0;
    -webkit-text-fill-color: inherit;
    color: inherit;
  }

  .brut-grain {
    display: none;
  }
}