/* Omgång 6: Apple-heron i vitt. Scenen fyller heron; kortet är startsidans systemkort i kod (designbredd 600 px, skalas med --k).
   Kameran och kortet animeras bara med transform och opacity. Minskad rörelse visar hela kortet stilla med svaret upplyst.
   Mått sätts av vit.js: --k (kortets skala), --kw/--kh (kortets storlek i scenen), --x1..3/--y1..3 (talens läge), --z1..3 (zoom). */
@font-face{font-family:"EkInter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/InterVariable-latin.woff2") format("woff2")}
body.vit{background:#fff}

/* Heron: telefon först (namn och slogan överst, scenen under), dator i @media längre ner */
.ah{position:relative;display:flex;flex-direction:column;background:#fff;color:#1d1d1f;font-family:"Google Sans",system-ui,sans-serif;overflow:hidden}
.ah-text{order:-1;position:relative;z-index:3;text-align:center;padding:22px 20px 0}
.ah-namn{margin:0;font-size:24px;line-height:1.15;font-weight:600;letter-spacing:-.012em;color:#1d1d1f}
.ah-tag{margin:4px 0 0;font-size:54px;line-height:1.02;font-weight:700;letter-spacing:-.035em;color:#1d1d1f}
.ah-scen{position:relative;height:clamp(380px,calc(100svh - 230px),560px);overflow:hidden;--k:.56;--kw:336px;--kh:230px}
/* Mjuka kanter: vita toningar ovanpå scenen (ingen CSS-mask, den ger trasiga lager i Safari när kameran zoomar) */
.ah-scen::before,.ah-scen::after{content:"";position:absolute;left:0;right:0;z-index:4;pointer-events:none}
.ah-scen::before{top:0;height:52px;background:linear-gradient(#fff,rgba(255,255,255,0))}
.ah-scen::after{bottom:0;height:56px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.ah-kamera,.ah-lyft{position:absolute;inset:0}
.ah-kamera{transform-origin:50% 50%;perspective:1200px;animation:kam 12s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
.ah-efter{text-align:center;padding:16px 0 4px}
.ah-sub{max-width:520px;margin:0 auto;padding:0 24px;font-size:16.5px;line-height:1.5;color:#3f3f46}

/* Köppillret: i telefon glider det upp när man skrollat lite, på dator står det nere till höger */
.ah-pill{position:fixed;z-index:70;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 7px 7px 18px;border-radius:999px;background:rgba(246,246,248,.84);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.05);font-family:"Google Sans",system-ui,sans-serif;
  transform:translate3d(0,160%,0);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ah-pill.syns{transform:none}
.ah-pill span{font-size:12.5px;line-height:1.3;color:#48484a}
.ah-pill span b{display:block;font-size:14px;color:#1d1d1f;font-weight:600}
.ah-pill a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#1ed760;color:#04140a;font-size:15px;font-weight:600;text-decoration:none}
.ah-pill a:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 5px #0f9d58}
@media (hover:hover){.ah-pill a{transition:opacity .16s}.ah-pill a:hover{opacity:.88}}

/* Kortet: startsidans systemkort */
.ek{position:absolute;left:50%;top:50%;width:600px;border-radius:26px;padding:1.5px;overflow:hidden;background:#2a2b2e;
  transform:translate(-50%,-50%) scale(var(--k));transform-origin:50% 50%;font-family:"EkInter",system-ui,sans-serif;color:#f5f5f7;
  -webkit-font-smoothing:antialiased;box-shadow:0 50px 90px -40px rgba(3,30,16,.55),0 18px 36px -24px rgba(0,0,0,.35)}
.ek-spar{position:absolute;inset:-70%;opacity:0;background:conic-gradient(from 0deg,transparent 0 280deg,rgba(30,215,96,.18) 312deg,#1ed760 350deg,#d9ffe9 356deg,transparent 360deg)}
.ek-inre{position:relative;z-index:1;border-radius:24.5px;background:#161719;padding:30px 32px}
.ek-topp{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ek-et{font-size:15px;font-weight:650;letter-spacing:.16em;color:#34d399}
.ek-meta{font-size:16px;color:#8e9196}
.ek-titel{display:block;font-size:30px;line-height:1.2;font-weight:650;letter-spacing:-.01em;margin-top:10px}
.ek-gra{color:#8e9196}
.ek-bol{display:inline-flex;align-items:center;gap:12px;font-size:19px;font-weight:550}
.ek-logga{width:34px;height:34px;border-radius:9px;display:block;flex:none}
.ek-chip{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#1ed760;color:#04140a;font-weight:650;font-size:16.5px;
  white-space:nowrap;box-shadow:0 0 22px rgba(30,215,96,.35)}
.ek-ruta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 16px;border-radius:14px;border:2px solid #1ed760;color:#34d399;
  font-size:30px;font-weight:700;box-shadow:0 0 24px rgba(30,215,96,.28),inset 0 0 18px rgba(30,215,96,.08)}
/* value */
.ek-bolrad{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.ek-botten{display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.ek-odds{display:inline-flex;gap:8px;align-items:baseline;font-size:22px}
.ek-odds b{font-weight:650}
.ek-edge{display:inline-flex;align-items:center;gap:14px;font-size:20px}
.ek-bar{height:5px;border-radius:5px;background:#26282b;margin-top:24px;overflow:hidden}
.ek-bar i{display:block;height:100%;background:#1ed760;border-radius:5px}
/* arbitrage */
.ek-benrad{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.ek-ben{border-radius:16px;background:#1d1f21;border:1px solid #2a2c2f;padding:16px 16px 14px}
.ek-ben .ek-bol{font-size:18px}
.ek-ben .ek-logga{width:30px;height:30px}
.ek-utfall{display:block;font-size:15px;margin-top:8px}
.ek-tal{display:flex;justify-content:space-between;margin-top:14px}
.ek-tal span{display:grid;gap:4px}
.ek-tal small{font-size:12.5px;letter-spacing:.14em;color:#6f7378}
.ek-tal b{font-size:24px;font-weight:650}
.ek-tal i{font-style:normal;font-size:15px;color:#8e9196;font-weight:500}
.ek-marginal{display:flex;justify-content:space-between;align-items:center;margin-top:16px;min-height:58px;padding:0 20px;border-radius:16px;border:2px solid #1ed760;
  box-shadow:0 0 26px rgba(30,215,96,.3)}
.ek-marginal span{font-size:18px}
.ek-marginal b{font-size:30px;font-weight:700;color:#34d399}
.ek-hoger{display:flex;justify-content:flex-end;margin-top:12px}
/* boost */
.ek-sub{display:block;font-size:17px;margin-top:6px}
.ek-bol--stor{margin-top:24px;font-size:20px}
.ek-bol--stor .ek-logga{width:40px;height:40px;border-radius:10px}
.ek-botten--boost{margin-top:26px;padding-top:22px;border-top:1px solid #26282b}
.ek-boostad{flex-direction:column;align-items:flex-start;min-height:0;padding:10px 18px 8px}
.ek-boostad small{font-size:15px;color:#8e9196;font-weight:500}
.ek-boostad b{font-size:44px;line-height:1.05;font-weight:700;color:#34d399}
.ek-fran{display:grid;justify-items:end;gap:2px}
.ek-fran small{font-size:15px;color:#8e9196}
.ek-fran s{font-size:26px;color:#a1a4a9;font-weight:600}
/* bonus */
.ek-bonustopp{display:flex;justify-content:space-between;align-items:center}
.ek-minikort{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:14px;background:#1d1f21;border:1px solid #2a2c2f}
.ek-minikort>span{display:grid}
.ek-minikort b{font-size:18px}
.ek-minikort small{font-size:14px;color:#8e9196}
.ek-panel{display:grid;gap:10px;margin-top:16px;padding:12px;border-radius:18px;border:2px solid #1ed760;box-shadow:0 0 26px rgba(30,215,96,.25)}
.ek-brad{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#1d1f21}
.ek-brad .ek-logga{width:40px;height:40px}
.ek-bnamn{display:grid;gap:3px;min-width:0}
.ek-bnamn b{font-size:18px}
.ek-bnamn span{font-size:14px;color:#a1a4a9;white-space:nowrap}
.ek-bnamn em{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:#8e9196;background:#2a2c2f;border-radius:6px;padding:3px 6px;margin-right:8px}
.ek-cell{display:grid;justify-items:center;gap:4px}
.ek-cell small{font-size:12.5px;color:#8e9196}
.ek-cell b{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 10px;border-radius:10px;border:1px solid #34373b;font-size:19px;font-weight:650}
.ek-cell--bred b{min-width:96px}
.ek-datum{display:block;margin-top:14px;font-size:14px;color:#6f7378}
/* casino */
.ek-hoger--topp{margin:0 0 12px}
.ek-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;padding:18px;border-radius:18px;border:2px solid #1ed760;box-shadow:0 0 26px rgba(30,215,96,.22)}
.ek-glogga{width:100%;aspect-ratio:1;border-radius:10px;display:block}
.ek-castext{display:block;margin-top:14px;font-size:17px}

/* Glöden runt det som räknats: ett tal i taget, svaret sist */
[data-mal]{position:relative}
[data-mal]::after{content:"";position:absolute;inset:-7px;border-radius:18px;pointer-events:none;opacity:0;box-shadow:0 0 0 2.5px #1ed760,0 0 30px 4px rgba(30,215,96,.55)}
.ek-chip[data-mal]::after{border-radius:999px}
.ek-ruta[data-mal]::after,.ek-marginal[data-mal]::after,.ek-panel[data-mal]::after,.ek-grid[data-mal]::after{inset:-9px;border-radius:22px}
.ah-lyft [data-mal="1"]::after{animation:ring1 12s infinite}
.ah-lyft [data-mal="2"]::after{animation:ring2 12s infinite}
.ah-lyft [data-mal="3"]::after{animation:ring3 12s infinite}
@keyframes ring1{0%,27%{opacity:0}31%,42%{opacity:1}46%,100%{opacity:0}}
@keyframes ring2{0%,44%{opacity:0}48%,56%{opacity:1}60%,100%{opacity:0}}
@keyframes ring3{0%,58%{opacity:0}62%{opacity:1}67%{opacity:.6}72%{opacity:1}77%{opacity:.65}84%,91%{opacity:1}96%,100%{opacity:0}}
.ah-bloom{position:absolute;left:50%;top:50%;width:calc(var(--kw) * 1.55);height:calc(var(--kh) * 2.1);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(30,215,96,.30),rgba(30,215,96,.09) 55%,transparent);opacity:.3;animation:bloom 12s ease-in-out infinite}
@keyframes bloom{0%,58%{opacity:.3}64%,90%{opacity:1}97%,100%{opacity:.3}}
.ah-skugga{position:absolute;left:50%;top:calc(50% + var(--kh) / 2 - 8px);width:calc(var(--kw) * .9);height:46px;transform:translate(-50%,0);border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,30,20,.22),transparent);opacity:0;pointer-events:none}

/* Kameran: in till tal 1, tal 2, svaret, ut igen */
@keyframes kam{
  0%,24%{transform:none}
  33%,40%{transform:translate(calc(var(--x1) * var(--z1) * -1),calc(var(--y1) * var(--z1) * -1)) scale(var(--z1))}
  48%,54%{transform:translate(calc(var(--x2) * var(--z2) * -1),calc(var(--y2) * var(--z2) * -1)) scale(var(--z2))}
  63%,73%{transform:translate(calc(var(--x3) * var(--z3) * -1),calc(var(--y3) * var(--z3) * -1)) scale(var(--z3))}
  84%,100%{transform:none}}

/* 1 Uppresningen: kortet ligger platt på golvet och reser sig */
.ah--lyft .ah-lyft{transform-origin:50% 72%;animation:lyft 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes lyft{0%{transform:translateY(16%) rotateX(70deg) scale(.9);opacity:0}3%{opacity:1}
  13%{transform:none;opacity:1}86%{transform:none;opacity:1}97%,100%{transform:translateY(16%) rotateX(70deg) scale(.9);opacity:0}}
.ah--lyft .ah-skugga{animation:skugga 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes skugga{0%{opacity:0;transform:translate(-50%,-160%) scale(1.15,1.6)}3%{opacity:.9}13%,86%{opacity:1;transform:translate(-50%,0)}97%,100%{opacity:0;transform:translate(-50%,-160%) scale(1.15,1.6)}}

/* 2 Ljusspåret: ett ljus springer runt kanten */
.ah--spar .ek-spar{opacity:1;animation:ek-spar 3.4s linear infinite}
@keyframes ek-spar{to{transform:rotate(1turn)}}
.ah--spar .ah-lyft{animation:spar 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes spar{0%{transform:scale(.88) rotateX(16deg);opacity:0}8%{transform:scale(1.02) rotateX(0);opacity:1}12%,90%{transform:none;opacity:1}100%{transform:scale(.94);opacity:0}}

/* 3 Monumentet: EDGE i silver bakom kortet */
.mo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;animation:mo 12s cubic-bezier(.65,0,.35,1) infinite}
.mo-ord{grid-area:1/1;font-family:"Google Sans",system-ui,sans-serif;font-weight:700;font-size:var(--mo,150px);line-height:.8;letter-spacing:-.05em;padding:0 .04em;
  background:linear-gradient(180deg,#f3f5f7 0%,#a3adb8 30%,#eef1f4 47%,#c4ccd4 56%,#6c7783 84%,#b9c1c9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.9)) drop-shadow(0 22px 26px rgba(15,23,42,.22))}
.mo-glans{background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.95) 46%,rgba(186,255,214,.95) 50%,rgba(255,255,255,.95) 54%,transparent 65%);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;filter:none;animation:mo-glans 6s ease-in-out infinite}
@keyframes mo-glans{0%{background-position:110% 0}55%,100%{background-position:-10% 0}}
@keyframes mo{0%{opacity:0;transform:scale(.95)}8%,90%{opacity:1;transform:none}100%{opacity:0;transform:scale(.95)}}
.ah--monument .ah-lyft{transform-origin:50% 60%;animation:mon 12s cubic-bezier(.65,0,.35,1) infinite}
@keyframes mon{0%{transform:translateY(8%) rotateX(66deg) scale(.96);opacity:0}6%{transform:translateY(4%) rotateX(64deg) scale(.96);opacity:1}
  17%{transform:translateY(4%) rotateX(64deg) scale(.96);opacity:1}26%,86%{transform:none;opacity:1}
  94%{transform:translateY(4%) rotateX(64deg) scale(.96);opacity:1}100%{transform:translateY(8%) rotateX(66deg) scale(.96);opacity:0}}

/* 4 Djupet: loggor och svaga kort i lager bakåt */
.dj{position:absolute;inset:0;pointer-events:none}
.dj-golv{position:absolute;left:-50%;right:-50%;bottom:-6%;height:62%;transform-origin:50% 100%;transform:perspective(600px) rotateX(72deg);
  background-image:linear-gradient(rgba(15,23,42,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.07) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 80%,transparent)}
.dj-lager{position:absolute;inset:0;transform-origin:50% 50%;animation:dj-dolly 12s cubic-bezier(.45,0,.55,1) infinite}
@keyframes dj-dolly{0%,100%{transform:scale(.84)}50%{transform:scale(1.14)}}
.dj-logga{position:absolute;left:var(--x);top:var(--y);opacity:var(--o);transform:scale(var(--s));animation:dj-flyt 9s ease-in-out infinite;animation-delay:var(--d)}
.dj-logga img{width:46px;height:46px;border-radius:12px;display:block;box-shadow:0 10px 20px -10px rgba(0,0,0,.35)}
@keyframes dj-flyt{0%,100%{translate:0 0}50%{translate:0 -12px}}
.dj-mini{position:absolute;left:var(--x);top:var(--y);width:0;height:0;opacity:.13;filter:blur(1.4px);--k:var(--s)}
.dj-mini [data-mal]::after{display:none}
.ah--djup .ah-lyft{animation:djup 12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes djup{0%{transform:scale(.4) translateY(-8%);opacity:0}4%{opacity:.45}14%,88%{transform:none;opacity:1}100%{transform:scale(.4) translateY(-8%);opacity:0}}

/* 5 Kameraåkningen: snett över ytan, sedan hela kortet */
.ah--glid .ah-scen{perspective:950px}
.ah--glid .ah-kamera{perspective:none;animation-name:glid}
@keyframes glid{
  0%{transform:rotateX(30deg) rotateZ(-8deg) translate(calc(var(--x1) * var(--g) * -1 + 60px),calc(var(--y1) * var(--g) * -1)) scale(var(--g));opacity:0}
  5%{opacity:1}
  22%{transform:rotateX(30deg) rotateZ(-8deg) translate(calc(var(--x1) * var(--g) * -1),calc(var(--y1) * var(--g) * -1)) scale(var(--g));opacity:1}
  38%{transform:rotateX(28deg) rotateZ(-6deg) translate(calc(var(--x2) * var(--g) * -1),calc(var(--y2) * var(--g) * -1)) scale(var(--g))}
  54%,62%{transform:rotateX(22deg) rotateZ(-4deg) translate(calc(var(--x3) * var(--g) * -1),calc(var(--y3) * var(--g) * -1)) scale(var(--g))}
  76%,88%{transform:none;opacity:1}
  100%{transform:rotateX(30deg) rotateZ(-8deg) translate(calc(var(--x1) * var(--g) * -1 + 60px),calc(var(--y1) * var(--g) * -1)) scale(var(--g));opacity:0}}
.ah--glid .ah-lyft [data-mal="1"]::after{animation-name:gring1}
.ah--glid .ah-lyft [data-mal="2"]::after{animation-name:gring2}
.ah--glid .ah-lyft [data-mal="3"]::after{animation-name:gring3}
@keyframes gring1{0%,8%{opacity:0}12%,24%{opacity:1}28%,100%{opacity:0}}
@keyframes gring2{0%,30%{opacity:0}34%,42%{opacity:1}46%,100%{opacity:0}}
@keyframes gring3{0%,48%{opacity:0}54%{opacity:1}60%{opacity:.6}66%,88%{opacity:1}94%,100%{opacity:0}}
.ah--glid .ah-bloom{animation-name:gbloom}
@keyframes gbloom{0%,48%{opacity:.3}56%,88%{opacity:1}96%,100%{opacity:.3}}

/* Telefon: en bild, ingen film (som Apple). Varje variant visar sitt kännetecken stilla; i bygget är det Remotions stillbild. */
@media (max-width:899px){
  .ah-kamera,.ah-lyft,.ah-skugga,.mo,.mo-glans,.dj-lager,.dj-logga,.ek-spar,.ah-bloom,.ah-lyft [data-mal]::after{animation:none!important}
  .ah-lyft [data-mal="3"]::after{opacity:1}
  .ah-bloom{opacity:1}
  .ah--lyft .ah-lyft{transform-origin:50% 60%;transform:rotateX(12deg) rotateY(-9deg)}
  .ah--lyft .ah-skugga{opacity:1}
  .ah--spar .ek-spar{transform:rotate(38deg)}
  .ah--monument .mo{transform:translateY(-24%)}
  .ah--monument .ah-lyft{transform:translateY(8%) rotateX(12deg) rotateY(-10deg)}
  .ah--djup .dj-lager{transform:scale(1.02)}
  .ah--glid .ah-kamera{transform:rotateX(22deg) rotateZ(-4deg) translate(calc(var(--xs) * var(--g) * -1),calc(var(--ys) * var(--g) * -1)) scale(var(--g))}
}
@media (prefers-reduced-motion:reduce){
  .ah-kamera,.ah-lyft,.ah-skugga,.mo,.mo-glans,.dj-lager,.dj-logga,.ek-spar,.ah-bloom,.ah-lyft [data-mal]::after{animation:none!important}
  .ah-kamera,.ah-lyft{transform:none!important;opacity:1!important}
  .ah-lyft .ek-nyckel::after{opacity:1}
  .ah-bloom{opacity:.8}
  .ah-pill{transition:none}
}
@media (min-width:900px){
  .ah{display:block;height:calc(100svh - 72px);min-height:660px;max-height:1000px}
  .ah-scen{position:absolute;inset:0 0 210px 0;height:auto}
  .ah-scen::before{height:40px}
  .ah-scen::after{height:64px}
  .ah-text{position:absolute;left:clamp(32px,6vw,112px);bottom:46px;text-align:left;padding:0}
  .ah-namn{font-size:30px}
  .ah-tag{font-size:clamp(68px,7.2vw,112px);margin-top:6px}
  .ah-efter{padding-top:40px}
  .ah-pill{left:auto;right:clamp(24px,5vw,88px);bottom:40px;padding:8px 8px 8px 22px;gap:18px}
  .ah-pill span{font-size:13px}
  .ah-pill span b{font-size:15px}
}