/* ============================================================
   LUX — designløft-lag for dvbad.no
   Lastes ETTER style.css + app.css. Rører ingen JS-hooks:
   #heroBg, #heroCard, #heroCount, .reveal-observeren i app.js
   beholder sine roller — dette laget forfiner kun presentasjonen.
   Fjernes trygt ved å slette <link> i index.html.
   ============================================================ */

/* ---------- 1. Typografisk presisjon ---------- */
body.lux h1{font-weight:420;letter-spacing:-.032em}
body.lux h2{font-weight:460;letter-spacing:-.028em;line-height:1.05}
body.lux .eyebrow{font-size:10.5px;letter-spacing:.3em;gap:14px}
body.lux .eyebrow::before{width:36px}
body.lux .hero p.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6}

/* ---------- 2. Hero: cinematisk scene ---------- */
body.lux .hero{min-height:96svh;padding:60px 0 90px}

/* aura + dybde bak produktbildet */
body.lux .hero::before{content:"";position:absolute;right:-8%;top:-14%;width:62vw;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 62% 44%,rgba(200,155,106,.20),transparent 68%),
    radial-gradient(30% 34% at 40% 70%,rgba(158,117,66,.10),transparent 70%)}
[data-theme="dark"] body.lux .hero::before,body.lux[data-theme] .hero::before{opacity:.9}

/* tynn sirkel-arkitektur bak produktrammen (galleri-detalj) */
body.lux .hero::after{content:"";position:absolute;right:2%;top:46%;width:min(50vw,720px);aspect-ratio:1;transform:translateY(-50%);z-index:0;border-radius:50%;pointer-events:none;
  border:1px solid var(--line);opacity:.8}
@media (max-width:1100px){body.lux .hero::after,body.lux .hero::before{display:none}}

/* produktbildet: hvite produktfoto → presis galleri-ramme med dybde */
body.lux .hero-bg-img{right:4.5%;top:11%;width:42%;height:74%;border-radius:28px;background-color:#fff;
  box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(11,21,24,.25),0 80px 140px -50px rgba(11,21,24,.3);
  border:1px solid var(--line);will-change:transform;animation:luxFloat 10s ease-in-out infinite}
body.lux .hero-bg-img::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(155deg,rgba(200,155,106,.06),transparent 42%);pointer-events:none}
@keyframes luxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* rutenettet: mykere, forsvinner mot kantene */
body.lux .hero-grid{opacity:.22;background-size:110px 110px;
  mask-image:radial-gradient(ellipse at 38% 46%,#000 22%,transparent 68%)}

/* intro-koreografi ved lasting (kun hero, kun én gang) */
@media (prefers-reduced-motion:no-preference){
  body.lux .hero-content>*{opacity:0;transform:translateY(38px);animation:luxRise 1.15s cubic-bezier(.16,1,.3,1) forwards}
  body.lux .hero-content>.eyebrow{animation-delay:.12s}
  body.lux .hero-content>h1{animation-delay:.26s}
  body.lux .hero-content>.lead{animation-delay:.46s}
  body.lux .hero-content>.cta-row{animation-delay:.62s}
  body.lux .hero-content>.hero-stats{animation-delay:.8s}
  body.lux .hero-bg-img,body.lux .hero-card{opacity:0;animation:luxFade 1.4s cubic-bezier(.16,1,.3,1) .5s forwards, luxFloat 9s ease-in-out 1.9s infinite}
  body.lux .hero-card{animation:luxFade 1.2s cubic-bezier(.16,1,.3,1) .95s forwards}
}
@keyframes luxRise{to{opacity:1;transform:none}}
@keyframes luxFade{to{opacity:1}}

/* stats: gullstrek-markering */
body.lux .hero-stats{gap:0;max-width:640px;border-top:0;padding-top:0;margin-top:64px}
body.lux .hero-stats .stat{flex:1;padding:26px 26px 0 0;border-top:1px solid var(--line);position:relative}
body.lux .hero-stats .stat::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--accent-dark)}
body.lux .hero-stats .num{font-size:clamp(26px,2.6vw,36px)}

/* ---------- 3. Scroll-koreografi (bygger på .reveal → .in fra app.js) ---------- */
body.lux .reveal{transform:translateY(44px);transition-duration:1.25s}

/* barne-stagger: når seksjonen får .in, følger barna etter i sekvens */
body.lux .reveal .cat-grid>*,
body.lux .reveal .steps>*,
body.lux .reveal .review-grid>*,
body.lux .reveal .carousel .card,
body.lux .reveal .look-grid>*{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
body.lux .reveal.in .cat-grid>*,
body.lux .reveal.in .steps>*,
body.lux .reveal.in .review-grid>*,
body.lux .reveal.in .carousel .card,
body.lux .reveal.in .look-grid>*{opacity:1;transform:none}
body.lux .reveal.in :is(.cat-grid,.steps,.review-grid,.look-grid)>*:nth-child(2),body.lux .reveal.in .carousel .card:nth-child(2){transition-delay:.1s}
body.lux .reveal.in :is(.cat-grid,.steps,.review-grid,.look-grid)>*:nth-child(3),body.lux .reveal.in .carousel .card:nth-child(3){transition-delay:.2s}
body.lux .reveal.in :is(.cat-grid,.steps,.review-grid,.look-grid)>*:nth-child(4),body.lux .reveal.in .carousel .card:nth-child(4){transition-delay:.3s}
body.lux .reveal.in :is(.cat-grid,.steps,.review-grid,.look-grid)>*:nth-child(5),body.lux .reveal.in .carousel .card:nth-child(5){transition-delay:.4s}
body.lux .reveal.in :is(.cat-grid,.steps,.review-grid,.look-grid)>*:nth-child(n+6),body.lux .reveal.in .carousel .card:nth-child(n+6){transition-delay:.5s}

@media (prefers-reduced-motion:reduce){
  body.lux .reveal .cat-grid>*,body.lux .reveal .steps>*,body.lux .reveal .review-grid>*,
  body.lux .reveal .carousel .card,body.lux .reveal .look-grid>*{opacity:1!important;transform:none!important;transition:none!important}
  body.lux .hero-bg-img{animation:none}
}

/* ---------- 4. Seksjonsrytme & luft ---------- */
body.lux section.block,body.lux .products,body.lux .how-to,body.lux .reviews,
body.lux .faq,body.lux .look,body.lux .story{padding-top:clamp(110px,12vw,170px);padding-bottom:clamp(110px,12vw,170px)}
body.lux .section-head{margin-bottom:clamp(48px,6vw,80px)}

/* store seksjonsindekser i margen */
body.lux .section-head .title{position:relative}
body.lux .section-head .eyebrow{margin-bottom:2px}

/* ---------- 5. Ticker: galleri-følelse ---------- */
body.lux .ticker{padding:26px 0;border-top:1px solid rgba(246,244,239,.1);border-bottom:1px solid rgba(246,244,239,.1)}
body.lux .ticker-track{font-size:clamp(24px,2.6vw,34px);animation-duration:56s;font-weight:340}
body.lux .ticker-track em{color:var(--accent);font-size:.6em;vertical-align:middle}
@media (prefers-reduced-motion:reduce){body.lux .ticker-track{animation:none}}

/* ---------- 6. Kort & flater: dypere håndverk ---------- */
body.lux .card{border-radius:18px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
body.lux .card:hover{transform:translateY(-8px);box-shadow:0 34px 70px -28px rgba(11,21,24,.22)}
body.lux .card-name a{background-image:linear-gradient(var(--accent-dark),var(--accent-dark));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s cubic-bezier(.16,1,.3,1)}
body.lux .card:hover .card-name a{background-size:100% 1px}
body.lux .cat{border-radius:22px}
body.lux .cat-img{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
body.lux .cat:hover .cat-img{transform:scale(1.08)}

/* ---------- 7. Knapper: sheen-sveip ---------- */
body.lux .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-18deg)}
body.lux .btn-primary:hover::after{animation:luxSheen .85s cubic-bezier(.4,0,.2,1)}
@keyframes luxSheen{to{left:130%}}

/* ---------- 8. Header: presis elevasjon ved scroll ---------- */
body.lux .header{transition:box-shadow .45s,background .45s}
body.lux.lux-scrolled .header{box-shadow:0 14px 40px -22px rgba(11,21,24,.28)}

/* ---------- 9. Mørk CTA-seksjon: gull-horisont ---------- */
body.lux .local{padding:clamp(120px,13vw,180px) 0}
body.lux .local::before{background:
  radial-gradient(ellipse at 50% 130%,rgba(200,155,106,.4),transparent 58%),
  radial-gradient(ellipse at 12% -10%,rgba(200,155,106,.07),transparent 50%)}
body.lux .local h2{font-size:clamp(34px,5vw,64px)}

/* ---------- 10. Footer: signatur ---------- */
body.lux footer{padding-top:120px}
body.lux footer::after{content:"dvbad.no";position:absolute;left:50%;bottom:-.14em;transform:translateX(-50%);
  font-family:'Fraunces',serif;font-weight:560;font-size:clamp(90px,17vw,260px);line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(246,244,239,.07);pointer-events:none;white-space:nowrap}
body.lux footer .bottom{position:relative;z-index:1}

/* ---------- 11. Mobil: samme presisjon, ingen tapt fart ---------- */
@media (max-width:1100px){
  body.lux .hero{min-height:auto;padding:48px 0 70px}
  body.lux .hero-stats{margin-top:44px}
  body.lux .hero-stats .stat{padding-right:14px}
  body.lux .scroll-ind{display:none}
  body.lux footer::after{font-size:clamp(70px,20vw,140px)}
}
@media (max-width:640px){
  body.lux .hero-stats{flex-wrap:wrap;gap:0 18px}
  body.lux .hero-stats .stat{flex:1 1 40%;padding-top:18px;margin-bottom:8px}
  body.lux .ticker-track{font-size:20px}
}