/* ==========================================================================
   DARKLIGHT FX — Apple-style experience layer
   Motion: scroll reveals, hero tilt, word highlight, sticky story, rails,
   flyout navigation, bento spotlight. Everything is disabled under
   prefers-reduced-motion and degrades to static content without JS.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---------- Entrance on page load ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: translateY(40px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.js .page-hero .eyebrow, .js .page-hero h1, .js .page-hero .lead, .js .page-hero .btn-row, .js .page-hero .note,
.js .hero .eyebrow, .js .hero h1, .js .hero .lead, .js .hero .btn-row, .js .hero .hero__meta {
  animation: rise-in 1s var(--ease-apple) both;
}
.js .page-hero h1, .js .hero h1 { animation-delay: .08s; }
.js .page-hero .lead, .js .hero .lead { animation-delay: .18s; }
.js .page-hero .btn-row, .js .hero .btn-row { animation-delay: .28s; }
.js .page-hero .note, .js .hero .hero__meta { animation-delay: .36s; }
.js .page-hero__grid > :last-child { animation: scale-in 1.2s var(--ease-apple) .25s both; }

/* ---------- Centered, Apple-like page heroes ---------- */
.page-hero:not(:has(.page-hero__grid)) > .container { text-align: center; }
.page-hero:not(:has(.page-hero__grid)) h1,
.page-hero:not(:has(.page-hero__grid)) .lead { margin-left: auto; margin-right: auto; }
.page-hero:not(:has(.page-hero__grid)) .eyebrow,
.page-hero:not(:has(.page-hero__grid)) .btn-row { justify-content: center; }
.page-hero h1 { max-width: 18ch; }
.page-hero { padding-top: 56px; }

/* ---------- Home hero ---------- */
.hero--center { text-align: center; padding-top: 72px; }
.hero--center h1 { max-width: 14ch; margin: 0 auto; font-size: clamp(2.8rem, 1.4rem + 6vw, 6.4rem); }
.hero--center .lead { margin: 24px auto 0; }
.hero--center .btn-row, .hero--center .hero__meta, .hero--center .eyebrow { justify-content: center; }
.text-gradient {
  background: linear-gradient(100deg, #FFFFFF 10%, #B9FFA6 45%, var(--green) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chip-hero {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03); font-size: .85rem; color: var(--text-2);
  margin-bottom: 26px;
}
.chip-hero b { background: var(--green); color: var(--green-ink); border-radius: 999px; padding: 2px 9px; font-size: .72rem; letter-spacing: .02em; }

.tilt-stage { perspective: 1800px; margin-top: 64px; position: relative; }
.tilt-stage::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 18%; bottom: -6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(57,255,20,.18), transparent 70%); filter: blur(30px);
}
.tilt { transform-origin: 50% 0; will-change: transform; }
.js .tilt { transform: rotateX(var(--rx, 0deg)) scale(var(--s, 1)); }

/* ---------- Scroll reveal (auto-applied by motion.js) ---------- */
.js .mv { opacity: 0; transform: translateY(36px); filter: blur(6px);
  transition: opacity 1s var(--ease-apple), transform 1s var(--ease-apple), filter 1s var(--ease-apple);
  transition-delay: calc(min(var(--i, 0), 6) * 80ms); }
.js .mv.is-in { opacity: 1; transform: none; filter: none; }
.js .mv-scale { opacity: 0; transform: translateY(48px) scale(.94);
  transition: opacity 1.2s var(--ease-apple), transform 1.2s var(--ease-apple); }
.js .mv-scale.is-in { opacity: 1; transform: none; }

/* ---------- Statement: words light up on scroll ---------- */
.statement { padding: calc(var(--section) * 1.1) 0; }
.statement__text {
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em;
  color: var(--text); max-width: 22ch; margin: 0 auto; text-align: center;
}
.js .statement__text .w { color: #3a3a3a; transition: color .25s linear; }
.js .statement__text .w.on { color: var(--text); }
.js .statement__text .w.g.on { color: var(--green); }

/* ---------- Bento grid & spotlight ---------- */
.eco-card { border-radius: 28px; overflow: hidden; isolation: isolate; transition: transform .6s var(--ease-apple), border-color .3s; }
.eco-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(57,255,20,.10), transparent 60%);
}
.eco-card:hover::after { opacity: 1; }
.eco-card:hover { transform: translateY(-4px); }
.eco-card h3 { font-size: 1.45rem; }
.eco-card--feature { background: linear-gradient(160deg, #2b2b2b, #212121 60%); }
.eco-card--feature h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); }
.eco-card__art { margin-top: 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }

/* ---------- Sticky story (scrollytelling) ---------- */
.story__step { padding: 8px 0 56px; }
.story__step h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); margin-bottom: 14px; }
.story__step p { font-size: 1.1rem; }
.story__step .check-list { margin-top: 20px; }
.story__media { margin-top: 28px; }
.story__num { font-family: var(--mono); font-size: .78rem; color: var(--green); letter-spacing: .1em; display: block; margin-bottom: 14px; }
.story__stage { display: none; }

/* ---------- Horizontal rail (Apple "explore" carousel) ---------- */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 24px;
  margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__card {
  scroll-snap-align: start; min-height: 360px; display: flex; flex-direction: column;
  border-radius: 28px; padding: 30px; background: var(--card); border: 1px solid var(--border-soft);
  transition: transform .5s var(--ease-apple), border-color .3s; position: relative; overflow: hidden;
}
.rail__card:hover { transform: scale(1.015); border-color: #444; }
.rail__card .card__icon { width: 52px; height: 52px; border-radius: 14px; }
.rail__card .card__icon svg { width: 26px; height: 26px; }
.rail__card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.rail__card p { font-size: .98rem; }
.rail__card .text-link { margin-top: auto; padding-top: 22px; color: var(--green); }
.rail__card--accent { background: linear-gradient(160deg, rgba(57,255,20,.16), rgba(57,255,20,.02) 60%), var(--card); border-color: var(--green-line); }
.rail__controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.rail__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #333; color: var(--text);
  display: grid; place-items: center; transition: background-color .2s, opacity .2s;
}
.rail__btn:hover { background: #444; }
.rail__btn[disabled] { opacity: .35; cursor: default; }
.rail__btn svg { width: 18px; height: 18px; }
.no-js .rail__controls { display: none; }

/* ---------- Flyout overlay ---------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-apple), visibility 0s linear .35s; pointer-events: none;
}
body.has-flyout .nav-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Desktop: flyout menus, bento layout, sticky story ---------- */
@media (min-width: 1024px) {
  .nav-link, .nav-trigger { font-size: .84rem; font-weight: 500; padding: 6px 12px; }
  .nav-trigger svg { display: none; }

  .dropdown, .js .dropdown, .dropdown--sm, .js .dropdown--sm {
    position: fixed; top: var(--header-h); left: 0; right: 0; width: auto;
    border-radius: 0; border: 0; border-bottom: 1px solid var(--border-soft);
    background: rgba(24,24,24,.97); box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
    padding: 36px 0 44px; transform: translateY(-8px);
    transition: opacity .35s var(--ease-apple), transform .45s var(--ease-apple), visibility 0s linear .35s;
  }
  .dropdown::before { display: none; }
  .dropdown__grid, .dropdown--sm .dropdown__grid {
    max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
    grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px 18px;
  }
  .dropdown__foot { max-width: var(--max); margin: 18px auto 0; padding: 18px var(--gutter) 0; }
  .dropdown__link { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease-apple), transform .4s var(--ease-apple), background-color .2s; }
  .nav-trigger[aria-expanded="true"] + .dropdown .dropdown__link,
  .no-js .nav-item:hover .dropdown__link, .no-js .nav-item:focus-within .dropdown__link {
    opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 25ms + 60ms);
  }
  .dropdown__title { font-size: 1rem; }

  .eco-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 18px; }
  .eco-card { grid-column: span 2; min-height: 300px; }
  .eco-card--wide { grid-column: span 4; }
  .eco-card--full { grid-column: span 6; min-height: 0; }

  .story.is-sticky { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; }
  .story.is-sticky .story__step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 0;
    opacity: .28; transition: opacity .6s var(--ease-apple); }
  .story.is-sticky .story__step.is-active { opacity: 1; }
  .story.is-sticky .story__media { display: none; }
  .story.is-sticky .story__stage {
    display: block; position: sticky; top: calc(var(--header-h) + 8vh); height: 76vh; align-self: start;
  }
  .story__stage .story__slot {
    position: absolute; inset: 0; display: flex; align-items: center;
    opacity: 0; transform: scale(.96) translateY(20px); transition: opacity .7s var(--ease-apple), transform .9s var(--ease-apple);
  }
  .story__stage .story__slot > * { width: 100%; }
  .story__stage .story__slot.is-active { opacity: 1; transform: none; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .story.is-sticky .story__stage { top: calc(var(--header-h) + 3vh); height: 88vh; }
}

/* ---------- Reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .page-hero *, .js .hero *, .js .page-hero__grid > :last-child { animation: none !important; }
  .js .mv, .js .mv-scale { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .tilt { transform: none !important; }
  .js .statement__text .w { color: var(--text) !important; }
  .eco-card:hover, .rail__card:hover { transform: none; }
}

/* Centered hero: center the grid glow */
.hero--center::after {
  -webkit-mask-image: radial-gradient(ellipse 60% 45% at 50% 0%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 45% at 50% 0%, #000 10%, transparent 70%);
}
.hero--center::before { background: radial-gradient(800px 420px at 50% -10%, rgba(57,255,20,.09), transparent 70%), linear-gradient(to bottom, transparent 70%, var(--bg)); }