/* ---- Hero → card scroll morph ----
   Default (no JS / reduced motion): plain document flow.
   With html.morph-on, scrolling plays two phases inside a 300vh zone:
   1. the hero frames into a rounded card with EQUAL padding on every side
      (nav-gap == sides == bottom) via clip-path — no scaling/distortion,
      no reflow of the WebGL. The nav lifts into its own floating card.
   2. the card tilts back in 3D and dims while the content that follows
      (.postmorph — marquee + Proof of Work) slides up over it. */

:root { --mgap: clamp(14px, 1.7vw, 22px); }

html.morph-on .morph { height: 300vh; position: relative; }
html.morph-on .morph__sticky {
  position: sticky; top: 0; height: 100svh; overflow: hidden; background: #0A0A0A;
  perspective: 1400px;
}
html.morph-on .morph__card {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(0 round 0);
  transform-origin: 50% 35%;
  will-change: clip-path, transform;
}
html.morph-on .morph .hero { position: absolute; inset: 0; height: auto; min-height: 0; }

/* Hero content shrinks with the card; the WebGL canvas keeps its size (only framed) */
html.morph-on .morph .hero__overlay { transform-origin: 50% 50%; will-change: transform; }
html.morph-on .morph .hero__device { will-change: transform; }

/* Darkens the card as it recedes (clipped with the card) */
html.morph-on .morph__dim {
  position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none;
}

/* Thin ring + shadow that traces the card edge (clip-path can't carry a border) */
html.morph-on .morph__frame {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  border: 1px solid rgba(245, 241, 234, 0.16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  transform-origin: 50% 35%;
  will-change: top, left, right, bottom, border-radius, opacity, transform;
}

/* Everything after the hero rides up over the tilting card */
html.morph-on .postmorph {
  position: relative; z-index: 2;
  margin-top: -100vh;
  background: #0A0A0A;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55);
}

/* Nav: full-width bar → its own floating card, same margin as the hero card */
html.morph-on .nav {
  transition:
    top .45s cubic-bezier(.16, 1, .3, 1), left .45s cubic-bezier(.16, 1, .3, 1),
    right .45s cubic-bezier(.16, 1, .3, 1), border-radius .45s cubic-bezier(.16, 1, .3, 1),
    background-color .45s ease, box-shadow .45s ease, border-color .45s ease;
  border: 1px solid transparent;
}
html.morph-on.nav-carded .nav {
  top: var(--mgap); left: var(--mgap); right: var(--mgap);
  border-radius: 16px;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-color: rgba(245, 241, 234, 0.14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  html.morph-on .morph { height: auto; }
  html.morph-on .morph__sticky { position: static; height: auto; perspective: none; }
  html.morph-on .morph__card { clip-path: none; transform: none; }
  html.morph-on .morph .hero__overlay { transform: none; }
  html.morph-on .morph__frame, html.morph-on .morph__dim { display: none; }
  html.morph-on .postmorph { margin-top: 0; border-radius: 0; box-shadow: none; }
}