/* hero.css — architecture from user spec
   KEY RULE: .mirror-card gets ONLY transform. Visual effects live on inner flat layers.
   Flattening trap: opacity/filter/mask/mix-blend-mode on a preserve-3d wrapper = broken 3D.
*/

#hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 46% 42%, rgb(100 55 210 / 0.48), transparent 36%),
    radial-gradient(circle at 64% 76%, rgb(35 84 190 / 0.36), transparent 32%),
    radial-gradient(circle at 26% 68%, rgb(220 50 155 / 0.26), transparent 28%),
    #050510;
  color: #fff;
  padding-top: 70px;
}

/* ── Real copy ────────────────────────────────────────── */
.hero-copy {
  position: absolute;
  left: 6vw;
  bottom: 18vh;
  z-index: 5;
}
.eyebrow, .sub {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: rgba(255,255,255,.42);
  font-size: clamp(1.4rem, 3vw, 3rem);
  margin: 0;
}
.h1-display {
  margin: 0.06em 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: clamp(5rem, 12vw, 11rem);
  letter-spacing: -0.06em;
  line-height: .88;
  color: #f0f0f8;
  animation: fu .85s cubic-bezier(.22,1,.36,1) .1s both;
}
.eyebrow { animation: fu .6s ease 0s both; }
.sub      { animation: fu .6s ease .25s both; }
@keyframes fu { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

/* ── 3D scene — perspective on PARENT, isolation to contain blend modes ── */
.mirror-scene {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 68% 42%;
  transform-style: preserve-3d;
  isolation: isolate;         /* blend modes don't leak to page bg */
  pointer-events: none;
  z-index: 3;
}

/* ── Mirror card: 3D TRANSFORM WRAPPER ONLY ──────────────────────────────
   NO opacity, filter, mask-image, or mix-blend-mode here.
   Any of those would trigger "grouping" and silently flatten preserve-3d.
   MDN CSS Transforms Level 2 / Stacking Context spec.
──────────────────────────────────────────────────────────────────────── */
.mirror-card {
  position: absolute;
  left: var(--x);
  top:  var(--y);
  width:  var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform:
    translate3d(-50%, -50%, var(--z, 0px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, -10deg))
    rotateZ(var(--rz, 0deg));
  will-change: transform;
  /* Float via independent translate — does NOT interfere with transform */
  animation: float 8s ease-in-out infinite;
}
.mirror-card:nth-child(2) { animation-delay: -2.7s; }
.mirror-card:nth-child(3) { animation-delay: -5.1s; }

@keyframes float {
  0%, 100% { translate: 0 0 0; }
  50%       { translate: 0 -18px 0; }
}

/* ── Flat visual layers (surface + ghost) ──────────────────────────────── */
.mirror-card__surface,
.mirror-card__ghost {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 0.18);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 0.11), transparent 30%),
    linear-gradient(180deg, rgb(10 11 24 / 0.88), rgb(4 5 14 / 0.80));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    0 40px 90px rgb(0 0 0 / 0.58);
  overflow: hidden;
}

/* Glass on surface only */
.mirror-card__surface {
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
}

/* ── Mirrored copy — scaleX(-1) ONLY HERE, not on the 3D wrapper ── */
.mirror-card__copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: .25rem;
  padding: 1.2rem;
  transform: scaleX(-1);
  color: rgb(224 220 255 / 0.65);
  font-family: 'Instrument Serif', Georgia, serif;
  text-shadow: 0 0 32px rgb(170 145 255 / 0.20);
}
.mirror-card__copy em    { font-style: italic; font-size: clamp(.8rem,1.3vw,1.3rem); opacity: .68; }
.mirror-card__copy strong { display:block; font-weight:400; font-size:clamp(1.6rem,2.8vw,3.4rem); letter-spacing:-.07em; line-height:.9; margin-top:.06em; }
.mirror-card__copy span  { display:block; font-size:clamp(.65rem,.9vw,1rem); opacity:.42; margin-top:.25em; }

/* Row layout for landscape card */
.mirror-card__copy--row {
  grid-auto-flow: column;
  align-items: center;
  gap: 1rem;
}
.mirror-card__copy--row strong { font-size:clamp(1.2rem,2.2vw,2.6rem); }
.mirror-card__copy--row em, .mirror-card__copy--row span { font-size:clamp(.65rem,.9vw,.9rem); }

/* Light sweep */
.mirror-card__shine {
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgb(255 255 255 / 0.15) 32%,
    transparent 46%
  );
  transform: translateX(-30%) rotate(8deg);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ── Ghost layer: faded duplicate with warp + blend ───────────────────── */
.mirror-card__ghost {
  transform: translate3d(14%, 4%, -28px) rotateY(180deg);
  opacity: 0.22;
  filter: url("#mirror-warp") blur(1px) brightness(1.3);
  mix-blend-mode: screen;
  pointer-events: none;
  /* Fade edges — safe here because ghost is a flat layer, not a 3D wrapper */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 22%, black 62%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, black 22%, black 62%, transparent 100%);
}
.mirror-card__ghost .mirror-card__copy { opacity: .55; }

/* ── Bottom UI ──────────────────────────────────────────────────── */
.hero-ui        { position:absolute; bottom:5.5rem; left:6vw; z-index:10; display:flex; flex-direction:column; gap:1.2rem; }
.hero-eyebrow   { font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.22); animation:fu .6s ease .5s both; }
.hero-actions   { display:flex; gap:1rem; flex-wrap:wrap; animation:fu .6s ease .65s both; }
.sr-only        { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Curved text */
.curved-wrap  { position:absolute; bottom:0; left:0; right:0; height:180px; z-index:10; pointer-events:none; opacity:0; animation:fi 1s ease .9s forwards; }
.curved-svg   { width:100%; height:100%; }
.arc-text     { font-family:'Instrument Serif',serif; font-style:italic; font-size:19px; fill:rgba(255,255,255,.09); }
#arc-tp       { animation:ag 30s linear infinite; }
@keyframes ag { from{startOffset:0%} to{startOffset:-33%} }
@keyframes fi { to{opacity:1} }
#hero::after  { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(255,255,255,.08) 20%,rgba(255,255,255,.08) 80%,transparent); z-index:20; }

@media(max-width:768px) {
  .hero-copy { bottom:22vh; }
  .h1-display { font-size:clamp(3.5rem,16vw,7rem); }
  #mc2 { display:none; }
  .hero-ui { left:1.5rem; bottom:5rem; }
}