/* Rörelse: sidbyten, avslöjanden och de få ögonblick som får ta plats.
   Allt animerar transform eller opacity, och allt stängs av för den som vill ha mindre rörelse.
   Regler som skriver över style.css ligger här, så att all rörelse har ett hem. */

/* --- Rörelsetokens (Apple-känsla: lugna kurvor, inga studsar, inget överslag) ------------------------
   Kurvorna är de som apple.com använder i sin egen CSS:
   --e-ut     in i bild och avslöjanden (0, 0, .5, 1: mjuk inbromsning)
   --e-in-ut  saker som byter plats, linjer som ritas (.4, 0, .6, 1: Apples standard)
   --e-ui     små svar på klick och hovring (samma standardkurva)
   --e-in     sådant som lämnar (accelererar ut, används kort)
   --e-nav    lokalnavigering och ytor som byter bakgrund (.28, .11, .32, 1) */
:root {
  --e-ut: cubic-bezier(0, 0, .5, 1);
  --e-in-ut: cubic-bezier(.4, 0, .6, 1);
  --e-ui: cubic-bezier(.4, 0, .6, 1);
  --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-nav: cubic-bezier(.28, .11, .32, 1);
  --r-mikro: .15s;
  --r-kort: .24s;
  --r-mellan: .5s;
  --r-lang: .8s;
  --r-scen: 1s;
  --stagg: 40ms;
  /* Ingen studs någonstans */
  --fjader: cubic-bezier(.28, .11, .32, 1);
}

/* --- Sidbyten (View Transitions mellan sidor) ------------------------------------------------------ */
@view-transition { navigation: auto; }
/* Den nya sidan tonar in OVANPÅ den gamla, som ligger kvar hel och tonar ut först när den nästan är täckt
   (slutar samtidigt som den nya, så att bytet inte blir längre).
   (Tonade båda samtidigt syntes bakgrunden mellan dem: ett vitt/grått blink mellan två mörka sidor.
   mix-blend-mode: normal i stället för webbläsarens plus-lighter, som annars ljusar upp överlappet.) */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-ut var(--r-kort) var(--e-in) calc(var(--r-mellan) + .08s - var(--r-kort)) both; }
::view-transition-new(root) { animation: vt-in var(--r-mellan) var(--e-ut) .08s both; }
/* Sidhuvudet står still medan innehållet byts, certifikatet glider till sin nya plats */
.gh { view-transition-name: topp; }
::view-transition-group(topp), ::view-transition-group(logo) { animation-duration: 0s; }
::view-transition-group(certifikat) { animation-duration: .75s; animation-timing-function: var(--e-in-ut); }
::view-transition-old(certifikat), ::view-transition-new(certifikat) { animation-duration: .45s; height: 100%; }
@keyframes vt-ut { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* --- Gemensamma rörelser ----------------------------------------------------------------------------- */
@keyframes tona-in { from { opacity: 0; } }
@keyframes rita { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tand { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes mal-in { from { transform: scale(.2); opacity: 0; } }

/* --- Scrollstyrda avslöjanden (som apple.com) -------------------------------------------------------
   .avsloja         tonar in och glider upp 24 px när elementet kommer in i bild
   .avsloja-skala   bild/bricka som växer från 94 % till 100 % medan den scrollas in
   .avsloja-grupp   barnen avslöjas ett i taget (--stagg)
   Där webbläsaren kan scroll-drivna animationer kopplas de till scrollen; annars sätter rorelse.js
   klassen .syns när elementet syns. */
/* Döljs bara när skript körs (html.js sätts i base.html), så att inget försvinner om JS saknas */
.js .avsloja, .js .avsloja-grupp > * { opacity: 0; transform: translateY(24px);
  transition: opacity var(--r-lang) var(--e-ut), transform var(--r-scen) var(--e-ut);
  transition-delay: calc(var(--n, 0) * var(--stagg) * 2); }
.js .avsloja.syns, .js .avsloja-grupp.syns > * { opacity: 1; transform: none; }
.js .avsloja-skala { transform: scale(.94); transition: transform 1.2s var(--e-ut); }
.js .avsloja-skala.syns { transform: none; }
@supports (animation-timeline: view()) {
  .js .avsloja-skala, .js .avsloja-skala.syns { transform: none; transition: none;
    animation: skala-in linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
@keyframes skala-in { from { transform: scale(.94); } to { transform: none; } }

/* --- Hero: himlen först, sedan rubriken rad för rad, namnet landar på en stjärna, sist formuläret ---- */
.rad > span { animation: stig var(--r-scen) var(--e-ut) both; animation-delay: .2s; }
.rad:nth-child(2) > span { animation-delay: .31s; }
.rad:nth-child(3) > span { animation-delay: .42s; }
.hero .ingress { animation: tona var(--r-lang) var(--e-ut) .75s both; }
.hero-form { animation: tona var(--r-lang) var(--e-ut) .1s both; }
.hero-not { animation: tona-in var(--r-lang) var(--e-ui) .3s both; }
/* rorelse.js håller formuläret tills namnetiketten har landat (högst 1,8 s efter start) */
.hero.vantar-etikett :is(.hero-form, .hero-not) { animation-play-state: paused; }
.hero canvas { animation: tona-in 1.2s var(--e-ui) both; }

/* När man scrollar vidare drar sig himlen bakåt (kameran åker framåt i sky3d.js) och texten lämnar före */
@supports (animation-timeline: scroll()) {
  .hero-text { animation: hero-ut linear both; animation-timeline: scroll(root); animation-range: 0 75svh; }
  .hero canvas, .hero .himmel-etiketter { animation: tona-in 1.2s var(--e-ui) both, hero-djup linear both;
    animation-timeline: auto, scroll(root); animation-range: normal, 0 100svh; }
  .hero .himmel-etiketter { animation: hero-djup linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
}
@keyframes hero-ut { to { opacity: 0; transform: translateY(-48px); } }
@keyframes hero-djup { to { transform: translateY(32%); } }

/* --- Sektionsrubriker: orden stiger fram ur en mask när rubriken kommer in i bild --------------------- */
.ordmask { display: inline-block; overflow: clip; vertical-align: top;
  padding: .1em .05em .16em; margin: -.1em -.05em -.16em; }
.ordmask > .ordin { display: inline-block; }
.rubrik-fore .ordmask > .ordin { transform: translateY(115%); }
.rubrik-in .ordmask > .ordin { transition: transform var(--r-scen) var(--e-ut) calc(var(--n, 0) * var(--stagg) + .05s); }
/* Felsidorna och söksidan: rubriken är redan i bild, så den spelas direkt */
.enkel h1.ordmaskad { animation: none; }
.felkod::before { transform-origin: left; animation: linje-in var(--r-lang) var(--e-in-ut) .1s both; }
@keyframes linje-in { from { transform: scaleX(0); } }

/* --- Konfiguratorn ------------------------------------------------------------------------------------ */
/* Stjärnbildskortet som väljs ritar sin figur, linje för linje */
.bild.ritas svg path { stroke-dasharray: 1; animation: rita .8s var(--e-in-ut) both; animation-delay: calc(var(--i, 0) * 80ms); }
.bild.ritas svg circle { transform-box: fill-box; transform-origin: center; animation: tand .5s var(--e-ut) both; animation-delay: calc(var(--i, 0) * 30ms); }
.bild { transition: border-color .25s, background .35s var(--e-ui), transform var(--r-mellan) var(--e-ut); }
.bild:active { transform: scale(.98); transition-duration: var(--r-mikro); }
.segment label:active span, .flikar button:active, .produkt-val label:active span { transform: scale(.97); }
.segment span, .flikar button, .produkt-val span { transition-property: background, color, transform; }
.paket label { transition: border-color .3s, background .4s var(--e-ui), transform var(--r-kort) var(--e-ut); }
.paket label:active { transform: scale(.995); }

/* Laddningsskelett medan stjärnbilderna och kartan hämtas */
.bild.skelett { pointer-events: none; overflow: hidden; }
.bild.skelett i { display: block; aspect-ratio: 1.3; margin-bottom: 4px; border-radius: 2px; background: rgba(0, 0, 0, .05); }
.bild.skelett b { display: block; height: 11px; width: 68%; border-radius: 2px; background: rgba(0, 0, 0, .06); }
.bild.skelett b + b { width: 44%; height: 9px; margin-top: 3px; }
.bild.skelett::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
  transform: translateX(-100%); animation: skimmer 1.6s var(--e-in-ut) infinite; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes skimmer { to { transform: translateX(100%); } }
.cert-karta:empty { animation: skelett-puls 1.4s ease-in-out infinite alternate; }
@keyframes skelett-puls { from { opacity: .55; } }
.din-stjarna.laddar { animation: skelett-puls 1.1s ease-in-out infinite alternate; }
/* Stjärnans bild (certifikatet och vyn Stjärnan) medan den hämtas: ytan andas i stället för att stå svart och still */
.cert-bild:not(.laddad, .tom), .kop-foto:not(.laddad) img { animation: bild-laddar 1.2s ease-in-out infinite alternate; }
@keyframes bild-laddar { to { background-color: #1a2030; } }

/* --- Tryck och klick: svar direkt -------------------------------------------------------------------
   touch-action: manipulation tar bort väntan på dubbeltryck (zoom med två fingrar finns kvar), och varje
   valbricka trycks ner en aning medan fingret ligger kvar, så att det syns att trycket gick fram. */
a, button, label, summary, select, input, textarea, [role="button"], [role="radio"] { touch-action: manipulation; }
.val, .fv, .kop-vyval button, .designval label, .tf-val, .pk-prickar button, .mallar button, .hjalplank {
  -webkit-tap-highlight-color: transparent; }
.val, .fv, .designval label, .tf-val { transition-property: border-color, background, box-shadow, transform; }
.val:active, .fv:active, .designval label:active, .tf-val:active { transform: scale(.985); transition-duration: var(--r-mikro); }
.kop-vyval button:active, .mallar button:active, .pk-prickar button:active { transform: scale(.96); transition-duration: var(--r-mikro); }
.kop-vyval button { transition-property: background, box-shadow, color, transform; }

/* Den valda stjärnan: ringen sätter sig på stjärnan utifrån, i stället för att växa ur ingenting */
.cert-karta .mal .ring, .cert-karta .mal .ring2 { animation: ring-satt 1.3s var(--e-ut) .55s both; }
.cert-karta .mal .stralar { animation: tona-in .9s var(--e-ui) .35s both; }
@keyframes ring-satt { from { transform: scale(2.4); opacity: 0; } 35% { opacity: 1; } }
.cert-karta .mal .ring2 { animation-delay: .68s; }

/* Ett ljusstråk som sveper över arket. Stark när stjärnan är klar, svag när kunden ändrar något. */
.cert-glans { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.cert-glans::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 212, .13) 45%, rgba(255, 240, 212, .18) 50%, transparent);
  transform: translateX(-120%) skewX(-8deg); animation: glans 1.9s cubic-bezier(.45, 0, .2, 1) .6s both; }
.cert-glans.latt::before { opacity: .45; animation-duration: 1.25s; animation-delay: .05s; }
@keyframes glans { to { transform: translateX(330%) skewX(-8deg); } }

/* Namnet bläcks in bokstav för bokstav (spannen och gradienten sätts av rorelse.js) */
.cert-namn.inkar { background: none; }
.cert-namn.inkar > span { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(100deg, #b08d52 10%, #e9d5a6 42%, #c9a86a 58%, #a9884f 90%); background-repeat: no-repeat; }

/* Animationer i certifikatets karta är SVG och ritas på huvudtråden: de pausas när arket inte syns */
.cert.vilar *, .cert.vilar *::before, .cert.vilar *::after { animation-play-state: paused !important; }

/* --- Ärligt-sektionen: texten "trycks" fram ord för ord medan man scrollar --------------------------- */
@supports (animation-timeline: view()) {
  .blacka { view-timeline: --blacka block; }
  .blacka .ord { animation: blacka linear both; animation-timeline: --blacka;
    animation-range: cover calc(12% + var(--p) * 30%) cover calc(18% + var(--p) * 30%); }
}
@keyframes blacka { from { opacity: .16; } to { opacity: 1; } }

/* --- Tidslinjen: punkt, linje och text i en rytm ------------------------------------------------------ */
.tidslinje.ritad li::before { transition: transform .8s var(--e-in-ut) calc(var(--i, 0) * .32s + .18s); }
.tidslinje.ritad li::after { transition: transform .6s var(--e-ut) calc(var(--i, 0) * .32s); }
.tidslinje.ritad li > * { transition: opacity .8s var(--e-ut) calc(var(--i, 0) * .32s + .12s), transform .9s var(--e-ut) calc(var(--i, 0) * .32s + .12s); }
.tidslinje.ritad li > :nth-child(2) { transition-delay: calc(var(--i, 0) * .32s + .19s); }
.tidslinje.ritad li > :nth-child(3) { transition-delay: calc(var(--i, 0) * .32s + .26s); }

/* --- Frågorna: svaret glider fram, plustecknet vrids lugnt ------------------------------------------- */
.fragor summary { transition: color .25s, transform var(--r-kort) var(--e-ut); }
.fragor summary:active { transform: translateX(2px); }

/* --- Ordersidan: panelens innehåll byts med en kort förskjutning (rorelse.js) ------------------------- */
.status-steg li.klar::after { animation: steg-klar .9s var(--e-ut) calc(var(--i, 0) * .14s + .3s) both; }
@keyframes steg-klar { 0% { transform: scale(.4); } 100% { transform: none; } }

/* Sigillet: stämpeln pressas ner (accelererar), trycker till och släpper */
.sigill.stamplas { animation: stampel .7s .4s both; }
.sigill.stamplas::after { animation: ring-ut 1.1s var(--e-ut) .74s both; }
.cert.tryckt { animation: tryck .7s var(--e-ut) .4s both; }
@keyframes stampel {
  0% { opacity: 0; transform: rotate(-24deg) scale(1.7); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  48% { opacity: .95; transform: rotate(-11deg) scale(.97); animation-timing-function: var(--e-ut); }
  100% { opacity: .9; transform: rotate(-11deg) scale(1); }
}
@keyframes ring-ut { 0% { opacity: .8; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes tryck { 0%, 46% { transform: none; } 56% { transform: scale(.994); } 100% { transform: none; } }

/* --- Ordersidan: när stjärnan är klar ------------------------------------------------------------------ */
.cert.firar .linjer path { animation: guldlinje 4.5s ease both; }
.cert.firar .mal .sken { animation: bloom 3s var(--e-ut) .3s both, andas 4s ease-in-out 3.3s infinite; }
.cert.firar .mal .ring2 { animation: halo 2.6s var(--e-ut) .5s both; }
@keyframes guldlinje { 0%, 55% { stroke: rgba(232, 211, 162, .95); } 100% { stroke: rgba(243, 238, 226, .5); } }
@keyframes bloom { 0% { transform: scale(1); } 28% { transform: scale(2.8); opacity: 1; } 100% { transform: scale(1); } }
@keyframes halo { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(4.5); opacity: 0; } 71% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: .5; } }
/* Rubriken skrivs fram ord för ord */
.ord-in .ord { display: inline-block; animation: ord-in .9s var(--e-ut) both; animation-delay: calc(var(--n) * 90ms + .2s); }
@keyframes ord-in { from { opacity: 0; transform: translateY(.35em); } }

/* --- Stjärnsidan: namnet skrivs fram när kameran har landat (styrs av skriptet i stjarna.html) -------- */
.avslojande.namnrevy .text .sida { opacity: 1; transform: none; transition: none; }
.namnrevy .text :is(.fore, .efter-t, .halsning) { opacity: 0; transform: translateY(12px); }
.namnrevy .bokstaver { display: inline; }
.namnrevy .bokstaver .bo { display: inline-block; white-space: nowrap; }
.namnrevy .bokstaver .bo > span { display: inline-block; opacity: 0; transform: translateY(.42em); }
.namnrevy.fram .text .fore { opacity: 1; transform: none; transition: opacity 1s var(--e-ui), transform 1.2s var(--e-ut); }
.namnrevy.fram .bokstaver .bo > span { opacity: 1; transform: none;
  transition: opacity .9s var(--e-ui) calc(.18s + var(--i) * 38ms), transform 1.3s var(--e-ut) calc(.18s + var(--i) * 38ms); }
.namnrevy.fram .text .efter-t { opacity: 1; transform: none; transition: opacity 1s var(--e-ui) calc(.5s + var(--slut, .4s)), transform 1.2s var(--e-ut) calc(.5s + var(--slut, .4s)); }
.namnrevy.fram .text .halsning { opacity: 1; transform: none; transition: opacity 1.2s var(--e-ui) calc(.85s + var(--slut, .4s)), transform 1.4s var(--e-ut) calc(.85s + var(--slut, .4s)); }
.hoppa { transition: opacity var(--r-kort) var(--e-ui); }
/* Årtalet räknas bakåt när meningen kommer in i bild */
.ljuset p.stor [data-artal] { font-variant-numeric: tabular-nums lining-nums; }
/* Orden delas i spann för scrollbläcket: bara årtalet ska vara guld */
.ljuset p.stor > .ord { color: inherit; }
.hitta img { transition: opacity 1s var(--e-ui); }
.hitta img.vantar { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .blacka .ord { animation: none !important; opacity: 1 !important; }
  .cert-glans, .bild.skelett::after { display: none; }
  .cert-bild, .kop-foto img { animation: none !important; }
  .val:active, .fv:active, .designval label:active, .tf-val:active, .kop-vyval button:active, .mallar button:active, .pk-prickar button:active { transform: none; }
  .hero-text, .hero canvas, .hero .himmel-etiketter { animation: none !important; }
  .rubrik-fore .ordmask > .ordin, .namnrevy .bokstaver .bo > span, .namnrevy .text :is(.fore, .efter-t, .halsning) { transform: none; opacity: 1; }
  .avsloja, .avsloja-grupp > *, .avsloja-skala { opacity: 1 !important; transform: none !important; animation: none !important; }
}