/* ============================================================
   Hero — copy on the left, cursor-reactive output grid on the right.
   Loaded after style.css so it can override the old flex hero.
   ============================================================ */

.hero-outputs{
  display:grid;
  /* copy column carries a 25-character headline line, so it gets the
     larger share — the grid reads fine narrower, the headline does not */
  grid-template-columns:1.32fr .88fr;
  grid-template-areas:
    "strip strip"
    "copy  stage";
  align-items:center;
  column-gap:clamp(24px,4vw,72px);
  min-height:100vh;
  padding-top:96px;
}
.hero-outputs .tag-strip{grid-area:strip;align-self:start}
.hero-outputs .og-stage{grid-area:stage}
.hero-outputs .hero-copy{
  grid-area:copy;
  display:flex;flex-direction:column;gap:26px;
}
.hero-outputs .hero-sub{max-width:52ch}
.hero-outputs .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* ── stage ──────────────────────────────────────────────────── */
.og-stage{
  position:relative;
  /* one soft pool of light behind the grid — no gradient soup */
  isolation:isolate;
  /* the perspective lives on the parent because the GRID is what tilts;
     on the grid itself it would only apply to the tiles inside it */
  perspective:1400px;
  perspective-origin:50% 50%;
}
.og-stage::before{
  content:"";position:absolute;z-index:0;inset:-14% -10%;
  background:radial-gradient(ellipse at 60% 45%,
    rgba(193,255,114,.10) 0%,
    rgba(193,255,114,.03) 42%,
    transparent 72%);
  pointer-events:none;
}

/* ── grid ───────────────────────────────────────────────────── */
.og-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(var(--cols,3),1fr);
  gap:clamp(8px,1vw,14px);
  /* the whole surface leans as one piece, so the shared logo behind the
     tiles stays in register */
  transform-style:preserve-3d;
  will-change:transform;
}

/* --near is 0 at rest and 1 under the cursor. Registering it as a typed
   custom property is what lets GSAP tween it as a number rather than
   swapping strings, and lets it drive filters and opacity below. */
@property --near{
  syntax:'<number>';
  inherits:true;
  initial-value:0;
}

.og-tile{
  --near:0;
  position:relative;
  aspect-ratio:3 / 4;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  /* Tiles are deliberately NOT transformed — see .og-grid. Anything that
     moves one tile relative to its neighbours splits the logo underneath. */
}

/* ── the plate under the paint ───────────────────────────────
   ONE logo behind the entire grid, not one per tile. Each tile paints the
   same three layers, but sized to the grid and shifted by that tile's own
   offset within it (JS sets the --bg and --g vars on every tile), so the
   nine slices line up into a single continuous mark and ground.

   It lives on the tiles rather than on an element behind them so the gaps
   stay empty — the logo exists only where it can be scratched for. */
.og-tile{
  background-image:
    url('../assets/logos/mark.png'),
    radial-gradient(ellipse at 50% 46%, rgba(193,255,114,.16), transparent 62%),
    linear-gradient(160deg, #1B1E17 0%, #101208 58%, #0B0C07 100%);
  background-repeat:no-repeat, no-repeat, no-repeat;
  background-size:
    var(--bgw, 60%) var(--bgh, auto),
    var(--gw, 100%) var(--gh, 100%),
    var(--gw, 100%) var(--gh, 100%);
  background-position:
    var(--bgx, center) var(--bgy, center),
    var(--gx, 0) var(--gy, 0),
    var(--gx, 0) var(--gy, 0);
}

/* ── the paint ───────────────────────────────────────────────
   A canvas, not an <img>: the reveal is done by erasing pixels out of it
   with destination-out, which is what gives the brush a soft edge. */
.og-canvas{
  /* overhangs the tile on every side; the tile clips it. The bleed gives
     the displacement filter real pixels to pull from at the border instead
     of transparency — must stay in step with BLEED in OutputGrid.js */
  --ogb:16px;
  position:absolute;
  inset:calc(var(--ogb) * -1);
  display:block;
  width:calc(100% + var(--ogb) * 2);
  height:calc(100% + var(--ogb) * 2);
  /* at rest the outputs sit back — desaturated and dim. Proximity is what
     brings them to life, so the grid reads as responding, not as a mosaic */
  filter:saturate(calc(.45 + var(--near) * .6))
         brightness(calc(.62 + var(--near) * .48))
         contrast(1.02);
  will-change:filter,opacity;
  cursor:crosshair;
  touch-action:pan-y;          /* never swallow a page scroll on touch */
}

/* accent ring + inner glow, revealed by proximity only */
.og-tile::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  border:1px solid var(--accent);
  box-shadow:0 0 0 1px rgba(193,255,114,.18) inset,
             0 18px 44px rgba(0,0,0,.5);
  opacity:calc(var(--near) * .85);
  pointer-events:none;
  transition:opacity .35s ease;
}
.og-tile.is-scratched::after{opacity:.9}

/* Water only while there is something to ripple. feTurbulence is expensive
   enough that running it on all nine canvases at once drops frames, and a
   healed tile has no boundary to liquefy anyway. */
.og-tile.is-scratched .og-canvas{
  filter:var(--liq)
         saturate(calc(.45 + var(--near) * .6))
         brightness(calc(.62 + var(--near) * .48))
         contrast(1.02);
}

.og-cap{
  position:absolute;left:10px;bottom:9px;z-index:2;
  font-family:var(--font-body);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
  opacity:calc(var(--near) * 1.15);
  transform:translateY(calc((1 - var(--near)) * 6px));
  pointer-events:none;
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero-outputs{grid-template-columns:1.28fr .85fr;column-gap:22px}
}
@media (max-width:760px){
  .hero-outputs{
    grid-template-columns:1fr;
    grid-template-areas:"strip" "copy" "stage";
    row-gap:36px;
    min-height:auto;
    padding-top:84px;padding-bottom:64px;
  }
  .hero-outputs .hero-copy{gap:20px}
  /* full width to work with here, so the headline can take a bigger share
     of it than the desktop cap allows */
  .hero-outputs .hero-title{font-size:clamp(19px,4.7vw,34px)}
  .og-grid{gap:8px}
  .og-cap{font-size:9px;left:8px;bottom:7px}
}

@media (prefers-reduced-motion:reduce){
  .og-canvas{filter:saturate(.9) brightness(.92);cursor:default}
  .og-cap{opacity:.9;transform:none}
}