/* =========================================================================
   motion.css — bevegelseslag for Reflection Ink
   Lastes ETTER style.css på begge variantene (index.html + index-dark.html).

   Konsept: bevegelsen handler om LYS SOM TREFFER METALL, ikke generisk
   fade-in. Tre virkemidler går igjen:
     1. sveip   — en lysstripe som passerer over en flate én gang
     2. maske   — innhold som skyves opp bak en kant (som en polert kant)
     3. treghet — tunge ting (krom-R, bilder) henger etter lette ting (tekst)

   Alt er transform/opacity/clip-path (GPU), alt er dekket av
   prefers-reduced-motion nederst i fila.
   ========================================================================= */

/* ---------- 0. scroll-progresjon (krom-hårlinje øverst) ---------- */
.sprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:var(--chrome);background-size:200% 100%;
  opacity:0;transition:opacity .4s ease}
.sprog.on{opacity:1}
/* liten glød i front så linja leser som lys, ikke som en grå strek */
.sprog::after{content:"";position:absolute;right:0;top:-3px;width:60px;height:8px;
  background:radial-gradient(50% 50% at 100% 50%,rgba(255,255,255,.9),transparent 70%)}

/* ---------- 1. linjemaske for overskrifter ---------- */
/* JS (motion.js) deler overskrifter på <br> og pakker hver linje i
   .ln > .ln-i. Linja skyves opp bak .ln sin overflow-kant.
   padding/margin-paret hindrer at nedstreker (g, j, y) klippes. */
/* padding/margin-paret gir nedstreker (g, j, y) plass uten å flytte layout.
   .2em er satt for Bodoni, som har dypere nedstreker enn Oswald. */
.ln{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.ln-i{display:block;transform:translateY(105%);
  transition:transform .9s cubic-bezier(.16,.84,.28,1)}
.lift.in .ln-i{transform:translateY(0)}
.lift.in .ln:nth-child(2) .ln-i{transition-delay:.09s}
.lift.in .ln:nth-child(3) .ln-i{transition-delay:.18s}
.lift.in .ln:nth-child(n+4) .ln-i{transition-delay:.26s}
/* .lift erstatter .rv sin egen bevegelse på samme element (ellers dobbelt opp) */
.lift.rv{opacity:1;transform:none;filter:none;transition:none}

/* ---------- 2. lyssveip over overskrifter ved avsløring ---------- */
/* Én gjennomkjøring. Ligger som eget lag over teksten og bruker
   mix-blend-mode så den leser som refleks, ikke som en hvit boks. */
.swp{position:relative}
.swp::after{content:"";position:absolute;inset:-6% -12%;pointer-events:none;z-index:2;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);
  mix-blend-mode:overlay;opacity:0;transform:translateX(-60%)}
.swp.in::after{animation:swpPass 1.5s cubic-bezier(.3,.6,.2,1) .35s both}
@keyframes swpPass{
  0%{opacity:0;transform:translateX(-60%)}
  18%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:translateX(60%)}
}
/* på mørk flate leser overlay dårlig — screen gir riktig «lys på metall» */
.is-dark .swp::after{mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%)}

/* ---------- 3. bildeavsløring (polersveip) ---------- */
/* Bildet ligger litt for stort og krymper på plass mens en maske åpner
   nedenfra. Gir følelsen av at flaten pusses frem. */
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,.84,.28,1)}
.reveal-img>img,.reveal-img>picture>img{transform:scale(1.14);
  transition:transform 1.4s cubic-bezier(.16,.84,.28,1)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
.reveal-img.in>img,.reveal-img.in>picture>img{transform:scale(1)}

/* ---------- 4. treghet / parallakse ---------- */
/* --py settes av motion.js. Vi rører ALDRI .hero-logo sin egen transform
   (den bærer sentreringen) — parallaksen legges på barna i stedet. */
.hero-logo .hero-r-base,
.hero-logo canvas.hero-r{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
.hero-copy{will-change:transform;transform:translate3d(0,var(--pc,0px),0)}
/* bilder inne i kort driver saktere enn kortet selv */
[data-drift]{will-change:transform;transform:translate3d(0,var(--pd,0px),0) scale(1.06)}

/* (5. hastighets-skjæring på galleribåndene er fjernet — kunden syntes
   skew-effekten ved rask scroll føltes rar. Se motion.js pkt. 5.) */

/* ---------- 6. magnetiske knapper ---------- */
/* --mx/--my settes av motion.js innenfor en radius. Kun fin peker. */
@media (hover:hover) and (pointer:fine){
  [data-mag]{transform:translate3d(var(--mx,0px),var(--my,0px),0);
    transition:transform .35s cubic-bezier(.16,.84,.28,1),
               background .25s,color .25s,box-shadow .25s}
  [data-mag]:hover{transition-duration:.12s,.25s,.25s,.25s}
  /* .btn.solid:hover sin egen translateY(-2px) ville nullet magnetismen —
     løftet flyttes derfor til skyggen alene på magnetiske knapper */
  .btn.solid[data-mag]:hover{transform:translate3d(var(--mx,0px),calc(var(--my,0px) - 2px),0)}
}

/* ---------- 7. mikrointeraksjoner ---------- */
/* tall som teller opp får tabulære siffer så bredden ikke hopper */
.stats .n{font-variant-numeric:tabular-nums}

/* kort løfter seg med lys på overkanten (som metall som fanger lys) */
.tcard,.artcard,.svc-card{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .tcard:hover,.artcard:hover{transform:translateY(-6px)}
  .svc-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 24px 50px -30px rgba(27,26,24,.45)}
}

/* usp-ene får en hårlinje som tegner seg inn ved avsløring */
.usp{position:relative;padding-top:20px}
.usp::before{content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:linear-gradient(90deg,var(--ink),transparent);
  transition:width 1s cubic-bezier(.16,.84,.28,1)}
.rv.in .usp::before{width:100%}
.rv.in .usp:nth-child(2)::before{transition-delay:.12s}
.rv.in .usp:nth-child(3)::before{transition-delay:.24s}

/* prosess-stegene: ikonet får et lite «tenn»-blink når steget blir aktivt */
.step.active .ic{filter:drop-shadow(0 0 10px rgba(255,255,255,.55))}

/* eyebrow-streken vokser ut i stedet for å bare stå der */
.rv .eyebrow::before,.lift .eyebrow::before{width:0;transition:width .8s cubic-bezier(.16,.84,.28,1) .2s}
.rv.in .eyebrow::before,.lift.in .eyebrow::before{width:30px}

/* scrollcue får en liten «puls ned» i stedet for bare skalering */
.scrollcue{transition:opacity .4s ease}
.hero.scrolled-past .scrollcue{opacity:0}

/* ---------- 8. redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce){
  .sprog{display:none}
  .ln-i{transform:none;transition:none}
  .swp::after{display:none}
  .reveal-img{clip-path:none;transition:none}
  .reveal-img>img,.reveal-img>picture>img{transform:none;transition:none}
  .hero-logo .hero-r-base,.hero-logo canvas.hero-r,.hero-copy,[data-drift]{transform:none}
  .marquee span,.grow img{transform:none}
  [data-mag]{transform:none}
  .usp::before{width:100%;transition:none}
  .rv .eyebrow::before,.lift .eyebrow::before{width:30px;transition:none}
  .tcard:hover,.artcard:hover{transform:none}
}