/* ============================================================================
   StilledInk — Cosmic hero + motion-layer chrome
   Loaded only on index.html, after scenes.css.

   Composition target:
   - floating pill nav has a protected safe zone
   - StilledInk wordmark sits below the nav, never underneath it
   - straight front-facing phone is the central product object
   - phone is large, physical, and premium like a product poster
   - hero-wide stage floor makes the phone feel grounded
   - tight contact glow anchors the phone to the floor
   - hero dissolves into the thought scene without a rectangular band
   ========================================================================== */

/* --- Split-text reveal primitive (GSAP-driven; gated on cinema-on) --------
   Hidden only when motion is on, so motion.js can reveal it after splitting.
   With no JS / reduced-motion, [data-split] stays plainly visible.            */
.cinema-on [data-split] { visibility: hidden; }

/* ============================================================================
   COSMIC HERO
   ========================================================================== */
.cosmic {
  position: relative;
  z-index: 2;

  /*
    Poster composition:
    The target image works because the hero feels like one controlled product
    poster: nav → huge wordmark → large phone → warm floor → Write emerges.
    This height gives the phone enough room to be large without colliding with
    the first thought word.
  */
  min-height: calc(132svh - var(--nav-h));

  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;

  /*
    Clip only the wide stage/glow horizontally so it cannot create mobile
    side-scroll. Vertical overflow stays visible for the floor/fade spill into
    the thought scene.
  */
  overflow-x: clip;
  overflow-y: visible;

  /*
    Safe space for the fixed floating nav, but not so much that the wordmark
    becomes detached from the phone.
  */
  padding-top: calc(var(--nav-h) + clamp(24px, 4.4vh, 58px));
  padding-bottom: clamp(130px, 20vh, 240px);

  background:
    radial-gradient(
      ellipse 86% 64% at 50% 25%,
      rgba(39, 44, 52, 0.84) 0%,
      rgba(14, 16, 19, 0.93) 42%,
      rgba(11, 12, 14, 0.985) 78%,
      var(--ink-900) 100%
    );
}

/* night-sky canvas: starfield + shooting stars */
.cosmic__sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* CSS halo — always present, so reduced-motion / no-canvas still has depth */
.cosmic__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 35%;
  width: min(88vw, 980px);
  height: min(88vw, 980px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(111, 163, 206, 0.18) 0%,
      rgba(62, 110, 158, 0.10) 38%,
      transparent 72%
    );
  filter: blur(12px);
}

.cosmic__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      120% 92% at 50% 36%,
      transparent 48%,
      rgba(8, 9, 11, 0.42) 82%,
      rgba(8, 9, 11, 0.80) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 9, 11, 0.08) 0%,
      transparent 42%,
      rgba(8, 9, 11, 0.36) 100%
    );
}

/*
  Feathered hero-to-thought blend.

  This is not a layout block and not a rectangular bridge. It is a visual mist:
  the phone's warm stage glow spills down and dissolves before the lower thought
  scene takes over.
*/
.cosmic__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(-360px, -35vh, -220px);
  height: clamp(560px, 76vh, 880px);
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 34% 18% at 50% 4%,
      rgba(246, 244, 239, 0.15) 0%,
      rgba(185, 138, 94, 0.30) 26%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 56% 32% at 50% 16%,
      rgba(185, 138, 94, 0.18) 0%,
      rgba(185, 138, 94, 0.09) 42%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 78% 44% at 50% 32%,
      rgba(62, 110, 158, 0.11) 0%,
      rgba(62, 110, 158, 0.05) 42%,
      transparent 78%
    ),
    linear-gradient(
      180deg,
      rgba(11, 12, 14, 0) 0%,
      rgba(11, 12, 14, 0.10) 22%,
      rgba(11, 12, 14, 0.28) 52%,
      rgba(11, 12, 14, 0.16) 78%,
      rgba(11, 12, 14, 0) 100%
    );

  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.58) 15%,
      rgba(0, 0, 0, 1) 42%,
      rgba(0, 0, 0, 0.70) 74%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.58) 15%,
      rgba(0, 0, 0, 1) 42%,
      rgba(0, 0, 0, 0.70) 74%,
      transparent 100%
    );
}

.cosmic__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: flex-start;
}

.cosmic__inner::before {
  content: none;
}

/* ============================================================================
   HERO GLOW & RINGS (LUMEN-style effect)
   ========================================================================== */
.hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 700px;
  height: 700px;
  background: radial-gradient(
    ellipse at center,
    rgba(185, 138, 94, 0.16) 0%,
    rgba(185, 138, 94, 0.05) 35%,
    transparent 70%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: pulse-glow 4s ease-in-out infinite alternate;
}
@keyframes pulse-glow {
  from {
    opacity: 0.7;
    transform: translate(-50%, -55%) scale(1);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -55%) scale(1.08);
  }
}

.hero-ring {
  position: absolute;
  top: 60%;
  left: 50%;
  width: clamp(280px, 32vw, 360px);
  height: clamp(280px, 32vw, 360px);
  border: 1px solid rgba(185, 138, 94, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-ring 30s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.hero-ring::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  background: var(--ember-400);
  border-radius: 50%;
  transform: translateX(-50%);
}

.hero-ring-2 {
  position: absolute;
  top: 60%;
  left: 50%;
  width: clamp(440px, 48vw, 540px);
  height: clamp(440px, 48vw, 540px);
  border: 1px dashed rgba(185, 138, 94, 0.05);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: rotate-ring 60s linear infinite reverse;
  pointer-events: none;
  z-index: 1;
}
@keyframes rotate-ring {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--ember-400);
  border-radius: 50%;
  opacity: 0;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 0.6;
    transform: translateY(-10px) scale(1);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) scale(0.5);
  }
}

/*
  Hero-wide stage floor.

  This dedicated hero-level layer creates the dark reflective product surface.
  It is not attached to the content column or phone wrapper, so it can sit
  naturally behind the device without tilting or clipping the phone.
*/
.cosmic__stage {
  position: absolute;
  left: 50%;
  bottom: clamp(92px, 14vh, 190px);
  width: min(176vw, 1480px);
  height: clamp(300px, 40vh, 520px);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 24% 9% at 50% 42%,
      rgba(246, 244, 239, 0.12) 0%,
      rgba(185, 138, 94, 0.26) 32%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 54% 24% at 50% 48%,
      rgba(185, 138, 94, 0.16) 0%,
      rgba(62, 110, 158, 0.09) 42%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 92% 42% at 50% 58%,
      rgba(39, 44, 52, 0.34) 0%,
      rgba(20, 23, 27, 0.20) 50%,
      transparent 86%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(246, 244, 239, 0.028) 20%,
      rgba(39, 44, 52, 0.18) 42%,
      rgba(11, 12, 14, 0.20) 70%,
      transparent 100%
    );

  border-radius: 48% 48% 42% 42% / 38% 38% 52% 52%;
  opacity: 0.9;

  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%),
    radial-gradient(
      ellipse at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.88) 42%,
      rgba(0, 0, 0, 0.34) 72%,
      transparent 100%
    );
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%),
    radial-gradient(
      ellipse at 50% 50%,
      #000 0%,
      rgba(0, 0, 0, 0.88) 42%,
      rgba(0, 0, 0, 0.34) 72%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Keep actual hero content above the stage floor. */
.cosmic__wordmark,
.cosmic__tagline,
.cosmic__phone {
  position: relative;
  z-index: 2;
}

/* ============================================================================
   WORDMARK
   ========================================================================== */
.cosmic__wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--paper-50);
  font-size: clamp(4.8rem, 11.8vw, 10.2rem);
  text-shadow:
    0 8px 60px rgba(62, 110, 158, 0.26),
    0 0 80px rgba(246, 244, 239, 0.05);
}

.cosmic__wordmark em {
  font-style: italic;
  font-weight: 520;
  color: #cbb8ff;
  text-shadow:
    0 0 38px rgba(203, 184, 255, 0.18),
    0 8px 60px rgba(62, 110, 158, 0.22);
}

.cosmic__tagline {
  margin-top: clamp(8px, 1.2vh, 16px);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.68rem);
  color: var(--paper-400);
  letter-spacing: 0.01em;
  opacity: 0.92;
}

/* Hero CTA removed — downloads now live in the Product section. The hero
   stays poster-clean: wordmark + tagline + phone, no buttons. */

/* ============================================================================
   STRAIGHT PRODUCT PHONE
   ========================================================================== */
.cosmic__phone {
  z-index: 5;
  margin-top: clamp(20px, 2.8vh, 34px);
  display: flex;
  justify-content: center;
  perspective: 1500px;
  animation: none;
}

/* Remove older phone-attached floor effects. The real floor is .cosmic__stage. */
.cosmic__phone::before,
.cosmic__phone::after {
  content: none;
}

/*
  The phone is intentionally large. The previous composition was technically
  correct, but the phone was too small to feel like the hero product object.
*/
.device3d {
  --rx: 0deg;
  --ry: 0deg;

  position: relative;
  z-index: 2;
  height: clamp(650px, 76svh, 860px);
  aspect-ratio: 1344 / 2992;

  border-radius: 48px;
  padding: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04) 10%, transparent 22%, transparent 78%, rgba(255,255,255,0.10) 92%, rgba(255,255,255,0.24)),
    linear-gradient(150deg, #545962 0%, #282c32 28%, #12151a 58%, #07080a 100%);

  transform-style: preserve-3d;
  transform: rotateY(var(--ry)) rotateX(var(--rx));
  transition: transform 0.18s ease-out;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px rgba(0, 0, 0, 0.72),
    0 2px 1px rgba(246, 244, 239, 0.16) inset,
    0 0 0 1px rgba(0, 0, 0, 0.82),
    0 44px 110px rgba(0, 0, 0, 0.68),
    0 0 120px rgba(62, 110, 158, 0.24);

  will-change: transform;
}

.device3d::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48px;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.22),
      transparent 18%,
      transparent 74%,
      rgba(255, 255, 255, 0.08)
    );
  pointer-events: none;
  z-index: 3;
}

.device3d::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 28%;
  width: 4px;
  height: 92px;
  border-radius: 0 4px 4px 0;
  background:
    linear-gradient(180deg, rgba(190, 194, 202, 0.75), rgba(73, 77, 86, 0.85));
  box-shadow:
    -1px 0 0 rgba(255,255,255,0.12) inset,
    0 14px 0 -8px rgba(12,13,15,0.9);
  pointer-events: none;
  z-index: 1;
}

.device3d__camera {
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 38%, rgba(111, 163, 206, 0.44) 0 14%, transparent 18%),
    radial-gradient(circle at 50% 50%, #050607 0 52%, rgba(255,255,255,0.11) 54% 68%, transparent 70%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.88),
    inset 0 -1px 2px rgba(255,255,255,0.14);
}

.device3d__screen {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 40px;
  background: var(--ink-900);
}

.device3d__glare {
  position: absolute;
  inset: 8px;
  border-radius: 40px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(
      125deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.055) 17%,
      transparent 43%
    ),
    radial-gradient(
      ellipse 80% 42% at 50% 0%,
      rgba(255, 255, 255, 0.07),
      transparent 68%
    );
  mix-blend-mode: screen;
  opacity: 0.86;
}

/*
  Contact glow.

  The broad floor is handled by .cosmic__stage.
  This layer is tighter and closer to the phone so it reads as contact light
  where the device meets the surface.
*/
.device3d__shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(-20px, -2.3vh, -14px);
  width: min(76%, 320px);
  height: clamp(34px, 5vh, 62px);
  transform: translateX(-50%);
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 42% 36% at 50% 42%,
      rgba(246, 244, 239, 0.20) 0%,
      rgba(185, 138, 94, 0.36) 32%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 78% 54% at 50% 52%,
      rgba(0, 0, 0, 0.70) 0%,
      rgba(0, 0, 0, 0.36) 48%,
      transparent 78%
    );

  filter: blur(12px);
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1180px) {
  .device3d {
    height: clamp(610px, 74svh, 800px);
  }

  .cosmic {
    min-height: calc(130svh - var(--nav-h));
  }
}

@media (max-width: 900px) {
  .cosmic {
    min-height: calc(124svh - var(--nav-h));
    padding-top: calc(var(--nav-h) + clamp(26px, 5vh, 64px));
    padding-bottom: clamp(110px, 18vh, 210px);
  }

  .cosmic__wordmark {
    font-size: clamp(3.8rem, 16vw, 7.4rem);
  }

  .device3d {
    height: clamp(520px, 68svh, 700px);
  }

  .cosmic__stage {
    bottom: clamp(86px, 13vh, 170px);
    width: min(178vw, 1060px);
    height: clamp(260px, 38vh, 430px);
  }
}

@media (max-width: 600px) {
  .cosmic {
    min-height: calc(118svh - var(--nav-h));
    padding-top: calc(var(--nav-h) + clamp(20px, 3.5vh, 46px));
    padding-bottom: clamp(92px, 15vh, 170px);
  }

  .cosmic__wordmark {
    font-size: clamp(3.25rem, 16.5vw, 5.8rem);
  }

  .cosmic__tagline {
    font-size: clamp(1rem, 4.6vw, 1.28rem);
  }

  .cosmic__phone {
    margin-top: clamp(20px, 3vh, 34px);
  }

  .cosmic__stage {
    bottom: clamp(78px, 12vh, 145px);
    width: min(185vw, 780px);
    height: clamp(220px, 31vh, 330px);
  }

  .device3d {
    --rx: 0deg;
    --ry: 0deg;
    height: clamp(430px, 61svh, 580px);
    border-radius: 42px;
    padding: 7px;
  }

  .device3d::before {
    border-radius: 42px;
  }

  .device3d__screen,
  .device3d__glare {
    border-radius: 35px;
  }

  .device3d__camera {
    top: 13px;
    width: 10px;
    height: 10px;
  }

  .cosmic__fade {
    bottom: clamp(-290px, -32vh, -200px);
    height: clamp(430px, 66vh, 660px);
  }

  .device3d__shadow {
    width: min(82%, 280px);
    height: clamp(30px, 4.8vh, 54px);
    bottom: clamp(-18px, -2.2vh, -12px);
  }
}

@media (max-width: 420px) {
  .device3d {
    height: clamp(400px, 58svh, 535px);
  }

  .cosmic__wordmark {
    font-size: clamp(3rem, 16vw, 5.2rem);
  }
}

/* ============================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-glow,
  .hero-ring,
  .hero-ring-2,
  .particle {
    animation: none !important;
  }
  
  .particle {
    display: none !important;
  }

  .cosmic__phone {
    animation: none !important;
  }

  .device3d {
    transition: none !important;
    --rx: 0deg;
    --ry: 0deg;
  }
}