/* ============================================================
   THE GRAMPS — PROFESSIONAL ENHANCEMENT LAYER  (v4)
   Strictly additive. Designed to NEVER break the existing
   layout: sections stay opaque, the hero pin is untouched,
   and nothing transparent ever sits over the pinned hero.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);
}

/* ----------------------------------------------------------
   0. SAFETY: every content section paints a SOLID layer.
   This is invisible (same color as the page) but guarantees
   the pinned hero can never bleed through or steal clicks.
   ---------------------------------------------------------- */
#collection, #showcase, #stats, #faq, #contact, footer {
  position: relative;
  z-index: 1;
  background-color: var(--bg);
}

/* Anchor jumps land below the fixed nav instead of under it. */
html { scroll-padding-top: 92px; }


/* ----------------------------------------------------------
   1. CUSTOM SCROLLBAR + SELECTION
   ---------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(196,168,130,.4) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(196,168,130,.3); border-radius: 10px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(196,168,130,.55); }
::selection { background: rgba(196,168,130,.35); color: var(--accent); }

/* Accessibility: visible focus for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px; border-radius: 4px;
}


/* ----------------------------------------------------------
   2. SCROLL PROGRESS BAR
   ---------------------------------------------------------- */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 9996; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--primary), var(--highlight), var(--accent));
  box-shadow: 0 0 12px rgba(196,168,130,.55);
  will-change: transform;
}


/* ----------------------------------------------------------
   3. FILM GRAIN — removed: a full-screen mix-blend-mode layer is a
   constant per-frame compositing cost, so it's disabled for performance.
   ---------------------------------------------------------- */
#grain { display: none !important; }


/* ----------------------------------------------------------
   4. NAV — glass on scroll + animated link underline
   ---------------------------------------------------------- */
nav {
  transition: transform .45s var(--ease-out), padding .4s var(--ease-out);
  border-bottom: 1px solid transparent;
  will-change: transform;
}
nav.scrolled {
  /* translucent bar removed per request — nav stays clean over content */
  padding-top: 14px; padding-bottom: 14px;
}
/* hide on scroll-down, reveal on scroll-up */
nav.nav-hidden { transform: translateY(-100%); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--highlight);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .4s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
/* active section (scrollspy) */
.nav-links a.active { color: var(--highlight); }
.nav-links a.active::after { transform: scaleX(1); transform-origin: 0 50%; }


/* ----------------------------------------------------------
   4b. BACK-TO-TOP + CONTEXTUAL CURSOR LABEL
   ---------------------------------------------------------- */
#to-top {
  position: fixed; right: clamp(18px,3vw,34px); bottom: clamp(18px,3vw,34px);
  z-index: 90; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: none;
  background: rgba(8,15,28,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196,168,130,.28); color: var(--accent);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
              background .25s, border-color .25s, color .25s;
}
#to-top.show { opacity: 1; transform: none; pointer-events: auto; }
#to-top:hover { background: var(--highlight); border-color: var(--highlight); color: var(--bg); }
#to-top svg { width: 16px; height: 16px; }

#cursor-label {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  padding: 5px 11px; border-radius: 40px;
  background: var(--highlight); color: var(--bg);
  font-family: var(--fd); font-size: .56rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transform: translate(-50%,-50%) scale(.5); opacity: 0;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
#cursor-label.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }

@media (hover: none), (pointer: coarse) {
  #cursor-label { display: none; }
  #to-top { cursor: pointer; }
}


/* ----------------------------------------------------------
   5. BUTTON SHINE (CTA, waitlist, view-details)
   ---------------------------------------------------------- */
.pd-cta, .wl-form button {
  position: relative; overflow: hidden; isolation: isolate;
}
.pd-cta::after, .wl-form button::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform: translateX(-120%); transition: transform .6s var(--ease-out);
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.22), transparent 80%);
}
.pd-cta:hover::after, .wl-form button:hover::after {
  transform: translateX(120%);
}


/* ----------------------------------------------------------
   6. SCROLL-REVEAL utility
   ---------------------------------------------------------- */
/* Hidden state only applies once JS is confirmed (html.enh), so content
   is never stuck invisible if the script fails to load. */
.enh .reveal { opacity: 0; transform: translateY(40px) scale(.985); filter: blur(7px); will-change: transform, opacity, filter; }
.enh .reveal.in {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1s var(--ease-out), transform 1.15s var(--ease-out), filter .9s var(--ease-out);
}
.enh .reveal.d1 { transition-delay: .1s; }
.enh .reveal.d2 { transition-delay: .2s; }
.enh .reveal.d3 { transition-delay: .3s; }

/* clip-path heading reveal (gradient-safe) — JS drives the open */
.r-clip { will-change: clip-path, transform, filter; }

/* scroll-scrubbed word illumination — JS splits text + drives opacity */
.r-words .rw { will-change: opacity; }


/* ----------------------------------------------------------
   7. NEW SECTION — THE PROCESS  (3 steps, fully self-contained)
   ---------------------------------------------------------- */
/* Local heading classes — kept separate from .section-tag/.section-title
   because script.js animates those globally via a #collection trigger. */
.eh-tag {
  display: block; font-family: var(--fd); font-size: .68rem;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--highlight); margin-bottom: 14px;
}
.eh-title {
  font-family: var(--fd); font-size: clamp(1.8rem,3.5vw,3rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.04;
  color: var(--accent);
}

/* (The former About + Process sections are now story beats inside the hero scroll.) */


/* ----------------------------------------------------------
   7b. NEW SECTION — INTERACTIVE 3D SHOWCASE (drag + AR)
   ---------------------------------------------------------- */
#showcase { padding: 120px 8vw; text-align: center; overflow: hidden; }
#showcase::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(10,49,68,.32) 0%, transparent 62%);
}
.showcase-head { max-width: 720px; margin: 0 auto 30px; }
.showcase-sub {
  font-size: .98rem; line-height: 1.7;
  color: rgba(240,236,228,.5); margin-top: 16px;
}
.showcase-stage {
  position: relative; width: 100%; max-width: 760px;
  height: min(68vh, 600px); margin: 0 auto;
}
#showcase-mv {
  position: relative; z-index: 2; width: 100%; height: 100%;
  background: transparent; --poster-color: transparent; cursor: grab;
}
#showcase-mv:active { cursor: grabbing; }
.showcase-glow {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  transform: translate(-50%,-50%); width: 52%; aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; filter: blur(34px);
  background: radial-gradient(circle, rgba(196,168,130,.16), transparent 60%);
  animation: scGlow 6s ease-in-out infinite;
}
@keyframes scGlow { 0%,100%{opacity:.55} 50%{opacity:1} }
.showcase-ring {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  transform: translate(-50%,-50%); width: min(64%,470px); aspect-ratio: 1;
  border-radius: 50%; border: 1px dashed rgba(196,168,130,.22);
  pointer-events: none; animation: scRing 45s linear infinite;
}
.showcase-ring::after {
  content: ''; position: absolute; inset: 13%;
  border-radius: 50%; border: 1px solid rgba(232,224,208,.06);
}
@keyframes scRing { to { transform: translate(-50%,-50%) rotate(360deg); } }
.showcase-hint {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-family: var(--fd); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(240,236,228,.42);
  transition: opacity .5s var(--ease-out);
}
.showcase-hint svg { width: 18px; height: 18px; opacity: .65; }
.showcase-hint.hide { opacity: 0; }
@media (max-width: 560px) {
  #showcase { padding: 80px 6vw; }
  .showcase-stage { height: 64vh; }
}


/* ----------------------------------------------------------
   8. NEW SECTION — FAQ accordion (accessible)
   ---------------------------------------------------------- */
#faq { padding: 110px 8vw; }
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-head { margin-bottom: 48px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(232,224,208,.08); }
.faq-item:first-child { border-top: 1px solid rgba(232,224,208,.08); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 26px 4px; background: none; border: none; cursor: none;
  text-align: left; font-family: var(--fd); font-weight: 500;
  font-size: clamp(1rem,1.6vw,1.18rem); letter-spacing: -.01em;
  color: var(--accent); transition: color .25s;
}
.faq-q:hover { color: var(--highlight); }
.faq-icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  background: var(--highlight); transition: transform .35s var(--ease-out);
}
.faq-icon::before { width: 16px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-icon::after  { width: 1.5px; height: 16px; transform: translate(-50%,-50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a {
  overflow: hidden; max-height: 0;
  transition: max-height .45s var(--ease-io);
}
.faq-a p {
  padding: 0 4px 26px; font-size: .95rem; line-height: 1.75;
  color: rgba(240,236,228,.55); max-width: 90%;
}
@media (max-width: 560px) { #faq { padding: 80px 6vw; } }


/* ----------------------------------------------------------
   9. POLISH on existing pieces (non-breaking)
   ---------------------------------------------------------- */
/* stat numbers get an underline accent on reveal */
.stat-num { position: relative; display: inline-block; }
.stat-num::after {
  content: ''; position: absolute; left: 50%; bottom: -14px;
  width: 0; height: 2px; background: var(--highlight);
  transform: translateX(-50%); transition: width .8s var(--ease-out) .3s;
}
.stat.in-view .stat-num::after { width: 34px; }

/* form focus glow */
.wl-form:focus-within {
  border-color: rgba(196,168,130,.5);
  box-shadow: 0 0 0 4px rgba(196,168,130,.08);
}
.wl-form { transition: border-color .3s, box-shadow .3s; }

/* product page glow pulse — styling lives in product.css */
@keyframes pdpulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* product spec rows get a subtle hover */
.specs-row { transition: padding-left .35s var(--ease-out), background .35s; }
.specs-row:hover {
  padding-left: 14px;
  background: linear-gradient(90deg, rgba(196,168,130,.05), transparent);
}
.specs-row:hover .sk { color: var(--highlight); }


/* ----------------------------------------------------------
   11. LENIS SMOOTH SCROLL
   ---------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
/* Lenis owns the scroll, so disable the native smooth to avoid double-easing */
html.lenis { scroll-behavior: auto; }


/* ----------------------------------------------------------
   12. COLLECTION CARDS — 3D depth polish (JS adds the tilt)
   ---------------------------------------------------------- */
.card { will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; }
.card-scene { will-change: transform; }


/* ----------------------------------------------------------
   13. SHOWCASE / COLLECTION / CONTACT — cinematic lift
   ---------------------------------------------------------- */
/* richer ambient field behind the interactive 3D stage */
#showcase::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(42,164,207,.10), transparent 60%);
  opacity: .9;
}
.showcase-glow {
  background: radial-gradient(circle, rgba(196,168,130,.22), rgba(42,164,207,.06) 45%, transparent 62%) !important;
  filter: blur(40px) !important;
}

/* collection: flat background, identical to the hero — no seam on transition */
#collection { position: relative; }

/* contact ambient glow handled by the cheap .contact-glow element in styles.css */


/* ----------------------------------------------------------
   14. SECTION HEADINGS — gradient accent on big titles
   ---------------------------------------------------------- */
.eh-title, .section-title, .about-headline, .contact-title {
  background: linear-gradient(180deg, var(--accent) 0%, #d8cdb8 60%, var(--highlight) 130%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}


/* ----------------------------------------------------------
   15. HEADING LINE REVEAL (clip-mask rise) + micro-interactions
   ---------------------------------------------------------- */
.r-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.r-line-i { display: block; will-change: transform; }

/* "In the box" items lift + accent on hover */
.pd-box-item { transition: border-color .35s var(--ease-out); }
.pd-box-item:hover { border-top-color: rgba(196,168,130,.45); }
.pd-box-item:hover .pd-box-n { color: var(--accent); }
.pd-box-n, .pd-box-item h3 { transition: color .3s var(--ease-out); }

/* FAQ rows get a gentle inset + accent on hover */
.faq-q { transition: color .25s, padding-left .35s var(--ease-out); }
.faq-q:hover { padding-left: 8px; }

/* Nav links: a touch of letter-spacing on hover for life */
.nav-links a { transition: color .2s, letter-spacing .25s var(--ease-out); }
.nav-links a:hover { letter-spacing: .22em; }


/* ----------------------------------------------------------
   16. PAGE TRANSITION (branded cover-wipe between pages)
   ---------------------------------------------------------- */
#page-transition {
  position: fixed; inset: 0; z-index: 10001; pointer-events: none;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-100%);          /* parked above (home default) */
  will-change: transform;
}
#page-transition .pt-logo {
  width: clamp(120px, 15vw, 175px);
  filter: brightness(0) invert(1) brightness(.95) sepia(.08);
}
/* a page that ships the element covers on load, then reveals via pure CSS
   (so it can never get stuck even if JS fails to run) */
#page-transition.pt-cover {
  transform: translateY(0);
  animation: pt-reveal .85s cubic-bezier(.76,0,.24,1) .2s forwards;
}
@keyframes pt-reveal { to { transform: translateY(100%); } }


/* ----------------------------------------------------------
   10. REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #grain, .pd-glow, .showcase-ring, .showcase-glow { animation: none !important; }
  #grain { display: none; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .card:hover .cc-img { transform: none; }
  .r-line-i { transform: none !important; }
  .mf-track, .pd-marquee-track { animation: none !important; }
  #page-transition.pt-cover { animation: none; transform: translateY(100%); }
}