/* blindsens.com – forside (v3). Ét levende øjeblik (arenaen), alt andet roligt og præcist. */

/* ---------- intro: mærket tegnes, sømmen trækkes, låget åbner ---------- */
.intro{position:fixed;inset:0;z-index:100;display:none}
html.intro-on .intro{display:block}
.intro .t,.intro .b{position:absolute;left:0;right:0;height:50.1%;background:#000}
.intro .t{top:0}.intro .b{bottom:0}
.intro .s{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--lime);transform:scaleX(0)}
.intro svg{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;overflow:visible}
.intro .ring{stroke-dasharray:107;stroke-dashoffset:107}
.intro .band{transform-box:fill-box;transform-origin:50% 50%;transform:scaleY(0)}
.intro .dot{transform-box:fill-box;transform-origin:50% 50%;transform:scale(0)}
.intro.run .ring{animation:iRing .5s cubic-bezier(.2,.7,.2,1) .1s forwards}
.intro.run .band{animation:iBand .5s cubic-bezier(.2,.7,.2,1) .56s forwards}
.intro.run .dot{animation:iPop .36s cubic-bezier(.3,1.6,.5,1) .98s forwards}
.intro.run svg{animation:iOut .28s ease-in 1.42s forwards}
.intro.run .s{animation:iSeam .42s var(--e-seam) 1.46s forwards,iFade .3s linear 2.2s forwards}
.intro.run .t{animation:iUp .82s var(--e-lid) 1.9s forwards}
.intro.run .b{animation:iDown .82s var(--e-lid) 1.9s forwards}
.intro.done{display:none!important}
@keyframes iRing{to{stroke-dashoffset:0}}@keyframes iBand{to{transform:scaleY(1)}}@keyframes iPop{to{transform:scale(1)}}
@keyframes iOut{to{opacity:0;transform:scale(.7)}}@keyframes iSeam{to{transform:scaleX(1)}}@keyframes iFade{to{opacity:0}}
@keyframes iUp{to{transform:translateY(-101%)}}@keyframes iDown{to{transform:translateY(101%)}}

/* ---------- hero: levende arena ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;overflow:hidden;background:#07080a;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .hin{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,380px);column-gap:clamp(32px,calc(var(--vw) * 4),72px);align-content:end;align-items:end;padding-bottom:clamp(36px,8vh,104px);pointer-events:none}
.hero .hin > *{pointer-events:auto}
.hero h1{font-size:clamp(50px,calc(var(--vw) * 7.7),108px);line-height:.95;max-width:none}
.hero .side{display:flex;flex-direction:column;gap:28px;padding-bottom:.5em}
.hero .lead{color:#c9c9c9}
.js .hero .up{opacity:0;transform:translateY(14px)}
.js .hero.go .up{opacity:1;transform:none;transition:opacity .7s linear 1.05s,transform .9s var(--e-out) 1.05s}
.js .hero.go .up.u2{transition-delay:1.18s}
.hud{position:absolute;left:50%;top:calc(var(--nav) + clamp(14px,2.6vh,28px));z-index:2;display:flex;width:max-content;transform:translateX(-50%);border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(0,0,0,.62);pointer-events:none;font-feature-settings:"tnum" 1}
.hud > div{min-width:104px;padding:9px 18px 10px;text-align:center}
.hud > div + div{border-left:1px solid rgba(255,255,255,.1)}
.hud .k{display:block;font:600 9.5px/1 var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.hud b{display:block;margin-top:7px;font:600 21px/1 var(--fd);letter-spacing:-.01em;color:var(--t1)}
.hud b.lit{color:var(--lime)}
.hud-note{position:absolute;left:50%;top:calc(var(--nav) + clamp(14px,2.6vh,28px) + 70px);z-index:2;width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);text-align:center;font:500 14px/1.4 var(--fb);color:var(--t1);pointer-events:none;opacity:0;transition:opacity .5s}
.hud-note.on{opacity:1}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none}
.hero-foot .in{display:flex;justify-content:space-between;align-items:center;height:clamp(36px,5vh,48px);font:500 13px/1 var(--fb);color:var(--t3)}
.hero-foot .sc{display:inline-flex;align-items:center;gap:10px}
.hero-foot .sc i{position:relative;display:block;width:1px;height:18px;background:var(--ln3);overflow:hidden}
.hero-foot .sc i::after{content:"";position:absolute;left:0;top:0;width:1px;height:8px;background:var(--t1);animation:scrollhint 1.8s var(--e-lid) infinite}
@keyframes scrollhint{0%{transform:translateY(-8px)}100%{transform:translateY(18px)}}
.hero.aim{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg stroke-linecap='round' fill='none'%3E%3Cpath d='M16 4v7M16 21v7M4 16h7M21 16h7' stroke='%23000' stroke-width='4.6'/%3E%3Cpath d='M16 4v7M16 21v7M4 16h7M21 16h7' stroke='%23fff' stroke-width='2'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.7' fill='%23e4ff33'/%3E%3C/svg%3E") 16 16,crosshair}
.hero.aim a,.hero.aim button{cursor:pointer}
.hero.aim h1,.hero.aim .lead{pointer-events:none}
@media (max-width:900px){
  .hero .hin{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .hero .side{gap:22px;padding-bottom:0}
  .hero-foot{display:none}
  .hero .hin{padding-bottom:28px}
}
@media (max-width:560px){
  .hud > div{min-width:0;padding:8px 13px 9px}
  .hud b{font-size:17px;margin-top:6px}
  .hud .k{font-size:8.5px;letter-spacing:.16em}
  .hud-note{top:calc(var(--nav) + 76px);font-size:13px}
  .hero .ctas{flex-direction:column;align-items:stretch;gap:6px}
  .hero .ctas .btn{width:100%}
  .hero .ctas .steam{justify-content:center}
}
@media (max-height:700px) and (min-width:901px){.hero h1{font-size:clamp(50px,calc(var(--vw) * 6.6),120px)}}

/* ---------- vanen ---------- */
.habit{padding-block:clamp(150px,22vh,280px)}
.habit .say{font:600 clamp(30px,calc(var(--vw) * 4.6),72px)/1.1 var(--fd);letter-spacing:-.034em;color:var(--t1);max-width:16.5em;text-wrap:balance}
.js .habit .say .w8{opacity:.16;transition:opacity .25s linear}
.js .habit .say .w8.on{opacity:1}

/* ---------- fem skjulte trin ---------- */
.blind{padding-top:0;scroll-margin-top:clamp(28px,calc(var(--vw) * 4),56px)}
.slots{margin-top:clamp(56px,calc(var(--vw) * 6),96px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,calc(var(--vw) * 1.2),16px)}
.slot{position:relative;aspect-ratio:3/4;border:1px solid var(--ln2);border-radius:clamp(12px,calc(var(--vw) * 1.5),20px);overflow:hidden;background:#000;will-change:transform}
.slot .v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:200 clamp(21px,calc(var(--vw) * 4.6),68px)/1 var(--fb);letter-spacing:-.045em;font-feature-settings:"tnum" 1;color:var(--t1);white-space:nowrap}
.slot .v small{font-size:.52em;font-weight:300;color:var(--t3);margin-right:.04em;letter-spacing:0}
.slot .tag{position:absolute;left:clamp(10px,calc(var(--vw) * 1.3),18px);top:clamp(10px,calc(var(--vw) * 1.3),18px);display:flex;align-items:center;gap:8px;font:500 clamp(11px,calc(var(--vw) * 1),14px)/1 var(--fb);color:var(--t2);white-space:nowrap}
.slot .tag i{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:none}
.slot::before,.slot::after{content:"";position:absolute;left:0;right:0;height:50.2%;background:#151515;z-index:2;transition:transform .55s var(--e-lid)}
.slot::before{top:0;transform:translateY(-101%)}
.slot::after{bottom:0;transform:translateY(101%)}
.slot .seam{position:absolute;left:12%;right:12%;top:50%;height:2px;margin-top:-1px;background:var(--lime);z-index:3;transform:scaleX(0);transition:transform .32s var(--e-seam) .26s}
.slots.shut .slot::before,.slots.shut .slot::after{transform:none}
.slots.shut .slot .seam{transform:scaleX(1)}
.slots.opening .slot .seam{transition:transform .2s var(--e-seam)}
@media (max-width:640px){.slot{aspect-ratio:3/5}.slot .tag span{display:none}}
.facts3{margin-top:clamp(40px,calc(var(--vw) * 4),64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln)}
.facts3 > div{padding:24px 24px 0 0;min-width:0}
.facts3 > div + div{padding-left:clamp(16px,calc(var(--vw) * 2),28px);border-left:1px solid var(--ln)}
.facts3 b{display:block;font:200 clamp(40px,calc(var(--vw) * 4.6),72px)/1 var(--fb);letter-spacing:-.045em;font-feature-settings:"tnum" 1;color:var(--t1)}
.facts3 span{display:block;margin-top:12px;font-size:15px;line-height:1.45;color:var(--t3)}
@media (max-width:640px){.facts3{grid-template-columns:minmax(0,1fr)}.facts3 > div,.facts3 > div + div{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:baseline;column-gap:16px;padding:18px 0;border-left:0;border-bottom:1px solid var(--ln)}.facts3 b{font-size:44px}.facts3 span{margin-top:0}}

/* ---------- metoden (fastlåst, styres af scroll) ---------- */
.pin{position:relative;height:340vh;height:340svh;border-top:1px solid var(--ln)}
.pin .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center}
.pin .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:calc(100% / 12);align-items:center;padding-top:calc(var(--nav) + 8px)}
.pin h2{max-width:8em}
.steps{margin-top:clamp(18px,3.2vh,40px);border-top:1px solid var(--ln)}
.steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);padding:clamp(12px,2vh,20px) 0;border-bottom:1px solid var(--ln);opacity:.3;transition:opacity .35s}
.steps li.on{opacity:1}
.steps li.done{opacity:.5}
.steps .n{font:500 14px/26px var(--fb);color:var(--t3);font-feature-settings:"tnum" 1}
.steps li.on .n{color:var(--lime)}
.steps h3{font:600 clamp(19px,calc(var(--vw) * 1.75),25px)/1.15 var(--fd);letter-spacing:-.02em}
.steps p{margin-top:6px;font-size:clamp(14.5px,calc(var(--vw) * 1.1),16px);line-height:1.5;color:var(--t2)}
.steps .bar{position:absolute;left:44px;right:0;bottom:-1px;height:1px;overflow:hidden}
.steps .bar b{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
.segs{display:none}
.pin .fig{min-width:0;container-type:inline-size}
.chart{position:relative;width:100%;height:min(60cqw,calc(100vh - var(--nav) - 190px));height:min(60cqw,calc(100svh - var(--nav) - 190px));min-height:220px}
.chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart text{font-family:var(--fb);font-feature-settings:"tnum" 1}
.chart .tk{font-size:12.5px;fill:var(--t3)}
.chart .tk.me{fill:var(--t1)}
.chart .ax{stroke:#2f2f2f;stroke-width:1}
.chart .gl{stroke:#181818;stroke-width:1}
.chart .ttl{font-size:12px;fill:var(--t3)}
.chart .col{fill:var(--lime);opacity:0;transition:opacity .16s linear}
.chart .col.on{opacity:.14}
.chart .dot{opacity:0;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.3);transition:opacity .2s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.chart .dot.on{opacity:1;transform:none}
.chart .bs{fill:none;stroke:#fff;stroke-opacity:.075;stroke-width:1.2;opacity:0;transition:opacity .25s}
.chart .bs.on{opacity:1}
.chart .fit{fill:none;stroke:var(--lime);stroke-width:3;stroke-linecap:round}
.chart .band{fill:var(--lime);fill-opacity:.1;transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(0)}
.chart .mk{opacity:0;transition:opacity .3s}
.chart .mk.on{opacity:1}
.chart .lbl{font-size:12px;font-weight:600;letter-spacing:.06em}
.chart .tagt{font:600 10.5px var(--fd);letter-spacing:.18em;fill:#000}
.chart .lg{font-size:12.5px;fill:var(--t2)}
.readout{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;margin-top:18px;min-height:52px}
.readout .k{font:600 10.5px/1 var(--fd);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.readout b{font:600 clamp(28px,calc(var(--vw) * 2.8),42px)/1 var(--fd);letter-spacing:-.02em;font-feature-settings:"tnum" 1;color:var(--t1);min-width:5.4ch}
.readout b.lit{color:var(--lime)}
.readout .s{font-size:15px;color:var(--t2)}
@media (max-width:1023px),(max-height:620px){
  .pin{height:320vh;height:320svh}
  .pin .grid{grid-template-columns:minmax(0,1fr);row-gap:14px;align-content:center}
  .pin h2{max-width:none;font-size:clamp(26px,calc(var(--vw) * 6.4),40px)}
  .pin .fig{order:2}
  .pin .txt{order:3}
  .pin .hd{order:1}
  .chart{height:min(64cqw,38vh);height:min(64cqw,38svh)}
  .readout{margin-top:8px;min-height:0}
  .readout b{font-size:26px}
  .segs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:14px}
  .segs i{height:2px;background:var(--ln2);overflow:hidden}
  .segs i b{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
  .steps{display:grid;margin-top:0;border-top:0}
  .steps li{grid-area:1/1;opacity:0;border-bottom:0;padding:0;transition:opacity .3s}
  .steps li.on{opacity:1}
  .steps li.done{opacity:0}
  .steps .bar{display:none}
}
@media (max-height:540px),(max-width:1023px) and (max-height:600px){
  .pin{height:auto}
  .pin .stage{position:relative;height:auto;padding-block:var(--sec)}
  .steps li,.steps li.done{grid-area:auto;opacity:1}
  .segs{display:none}
}
.pin.static{height:auto}
.pin.static .stage{position:relative;height:auto;padding-block:var(--sec)}
.pin.static .steps li,.pin.static .steps li.done{opacity:1;grid-area:auto}
.pin.static .steps li + li{margin-top:18px}
.pin.static .segs{display:none}
@media (min-width:1024px) and (min-height:621px){.pin .hd{grid-column:1;grid-row:1;align-self:end}.pin .txt{grid-column:1;grid-row:2;align-self:start}.pin .fig{grid-column:2;grid-row:1 / span 2}}

/* ---------- resultatet ---------- */
.result{border-top:1px solid var(--ln)}
.result h2{max-width:8.6em}
.odo{margin-top:clamp(32px,calc(var(--vw) * 4),64px);display:flex;align-items:baseline;flex-wrap:wrap;gap:0 clamp(14px,calc(var(--vw) * 2.2),36px)}
.odo .old{font:200 clamp(26px,calc(var(--vw) * 3.6),58px)/1 var(--fb);letter-spacing:-.03em;color:var(--t3);font-feature-settings:"tnum" 1;text-decoration:line-through;text-decoration-thickness:2px}
.odo .was{display:inline-flex;align-items:center;gap:clamp(12px,calc(var(--vw) * 1.8),30px)}
.odo .arr{width:clamp(22px,calc(var(--vw) * 3),48px);height:auto;color:var(--t3);flex:none}
.odo .new{display:inline-flex;font:200 clamp(92px,calc(var(--vw) * 19.5),310px)/1 var(--fb);letter-spacing:-.06em;color:var(--lime);font-feature-settings:"tnum" 1;margin-left:-.04em}
.odo .new .dg{display:inline-block;height:1em;overflow:hidden}
.odo .new .dg > span{display:block;transition:transform 1.7s var(--e-out)}
.odo .new .dg b{display:block;height:1em;font-weight:200;color:inherit}
.odo .new .pt{display:inline-block}
.odo .new{transition:color .7s ease}
.odo .new.pre{color:var(--t1)}
.facts4{margin-top:clamp(28px,calc(var(--vw) * 3),48px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ln)}
.facts4 > div{padding:18px 20px 0 0;min-width:0}
.facts4 > div + div{padding-left:clamp(14px,calc(var(--vw) * 1.7),24px);border-left:1px solid var(--ln)}
.facts4 dt{font-size:14px;color:var(--t3)}
.facts4 dd{margin-top:6px;font:400 clamp(17px,calc(var(--vw) * 1.45),21px)/1.3 var(--fb);color:var(--t1);font-feature-settings:"tnum" 1}
@media (max-width:760px){.facts4{grid-template-columns:repeat(2,minmax(0,1fr))}.facts4 > div:nth-child(3){padding-left:0;border-left:0}.facts4 > div:nth-child(n+3){margin-top:18px;border-top:1px solid var(--ln)}}
.shot{margin-top:clamp(56px,calc(var(--vw) * 7),112px)}
.frame{position:relative;border:1px solid var(--ln2);border-radius:clamp(12px,calc(var(--vw) * 1.6),22px);overflow:hidden;background:#000}
.frame img{width:100%;height:auto;transform:scale(1.03);transition:transform 1.6s var(--e-out) .3s}
.js .frame::before,.js .frame::after{content:"";position:absolute;left:0;right:0;height:50.2%;background:#000;z-index:2;transition:transform 1s var(--e-lid) .28s}
.js .frame::before{top:0}.js .frame::after{bottom:0}
.frame .seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--lime);z-index:3;transform:scaleX(0);transform-origin:0 50%;transition:transform .42s var(--e-seam),opacity .3s linear .9s}
.frame.in::before{transform:translateY(-101%)}.frame.in::after{transform:translateY(101%)}
.frame.in .seam{transform:scaleX(1);opacity:0}
.frame.in img{transform:none}
.pa{position:absolute;left:var(--x);top:var(--y);z-index:4;width:0;height:0}
.pa .no{position:absolute;left:-14px;top:-14px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--lime);color:#000;font:600 13px/1 var(--fb);transition:transform .35s var(--e-out)}
.pa.hot .no{transform:scale(1.25)}
.js .pa{opacity:0;transform:scale(.6);transition:opacity .35s,transform .6s cubic-bezier(.3,1.6,.5,1)}
.frame.in .pa{opacity:1;transform:none}
.frame.in .pa:nth-of-type(1){transition-delay:1.2s}.frame.in .pa:nth-of-type(2){transition-delay:1.34s}.frame.in .pa:nth-of-type(3){transition-delay:1.48s}
@media (max-width:640px){.pa .no{left:-11px;top:-11px;width:22px;height:22px;font-size:11.5px}}
.legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(100% / 12);row-gap:20px;margin-top:22px}
.legend li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:start;font-size:15px;line-height:1.5;color:var(--t2)}
.legend li > span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--lime);color:var(--lime);font:600 13px/1 var(--fb)}
.legend b{display:block;font:600 16px/1.3 var(--fd);letter-spacing:-.01em;margin:3px 0 4px}
@media (max-width:860px){.legend{grid-template-columns:minmax(0,1fr)}}
.tips{margin-top:clamp(40px,calc(var(--vw) * 4),64px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(100% / 12)}
.tips h3{font:600 18px/1.3 var(--fd);letter-spacing:-.01em}
.tips p{margin-top:8px;font-size:15.5px;color:var(--t2)}
@media (max-width:760px){.tips{grid-template-columns:minmax(0,1fr);row-gap:24px}}

/* ---------- alle spil ---------- */
.games{border-top:1px solid var(--ln)}
.games .cm{justify-self:end;text-align:right}
.games .cm b{display:block;font:200 clamp(64px,calc(var(--vw) * 9.4),150px)/.9 var(--fb);letter-spacing:-.05em;font-feature-settings:"tnum" 1;color:var(--t1)}
.games .cm span{display:block;margin-top:12px;font-size:15px;color:var(--t3)}
@media (max-width:900px){.games .cm{justify-self:start;text-align:left}}
.conv{margin-top:clamp(48px,calc(var(--vw) * 5),80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(100% / 12);border-top:1px solid var(--ln)}
.conv > div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:20px;padding:18px 0;border-bottom:1px solid var(--ln)}
.conv dt{font:500 clamp(17px,calc(var(--vw) * 1.4),20px)/1.3 var(--fb);color:var(--t1)}
.conv dt small{display:block;margin-top:3px;font-size:13.5px;font-weight:400;color:var(--t3)}
.conv dd{font:300 clamp(22px,calc(var(--vw) * 2),30px)/1 var(--fb);letter-spacing:-.02em;font-feature-settings:"tnum" 1;color:var(--t1)}
.conv .src dd{color:var(--lime)}
@media (max-width:700px){.conv{grid-template-columns:minmax(0,1fr)}}
.more{margin-top:28px;max-width:62em;font-size:15.5px;line-height:1.75;color:var(--t3)}
.more span{color:var(--t2)}
.games .gl{margin-top:28px}

/* ---------- helte og roller ---------- */
.heroes{border-top:1px solid var(--ln)}
.roles{margin-top:clamp(48px,calc(var(--vw) * 5),88px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:calc(100% / 12);align-items:start}
.tabs{border-top:1px solid var(--ln)}
.tab{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;column-gap:16px;width:100%;padding:20px 0;border-bottom:1px solid var(--ln);text-align:left;color:var(--t3);transition:color .25s}
.tab svg{width:26px;height:26px;transition:color .25s}
.tab b{display:block;font:600 clamp(19px,calc(var(--vw) * 1.6),23px)/1.2 var(--fd);letter-spacing:-.015em;color:inherit;transition:color .25s}
.tab small{display:block;margin-top:5px;font-size:14px;line-height:1.35;color:var(--t3)}
.tab .rn{font:300 clamp(20px,calc(var(--vw) * 1.7),26px)/1 var(--fb);letter-spacing:-.02em;font-feature-settings:"tnum" 1;color:var(--t3);transition:color .25s}
.tab:hover{color:var(--t2)}
.tab[aria-selected="true"]{color:var(--t1)}
.tab[aria-selected="true"] svg{color:var(--rc,var(--t1))}
.tab[aria-selected="true"] .rn{color:var(--lime)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--t1);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e-out)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.roles .ex{margin-top:16px;font-size:14px;line-height:1.5;color:var(--t3)}
.panel{min-width:0}
.stagebox{position:relative;aspect-ratio:3/2;border:1px solid var(--ln2);border-radius:clamp(12px,calc(var(--vw) * 1.6),22px);overflow:hidden;background:#0d0e11}
.stagebox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.stagebox img.on{opacity:1}
.stagebox .cap{position:absolute;left:16px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.7);font:500 13px/1 var(--fb);color:var(--t1)}
.pdata{margin-top:24px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;row-gap:18px;align-items:start}
.pdata dt{font-size:14px;line-height:34px;color:var(--t3)}
.pdata dd{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--ln3);font:500 14px/1 var(--fb);color:var(--t2);white-space:nowrap;transition:color .2s,border-color .2s,background-color .2s}
.chip:hover{color:var(--t1);border-color:var(--t2)}
.chip[aria-pressed="true"]{background:var(--t1);border-color:var(--t1);color:#000}
.who{font-size:15.5px;line-height:34px;color:var(--t2)}
.who p{line-height:1.6;padding-top:6px}
.zoom{margin-top:10px;font-size:15px;line-height:1.55;color:var(--t2)}
.zoom b{font-weight:500;color:var(--lime);font-feature-settings:"tnum" 1}
.also{margin-top:clamp(28px,calc(var(--vw) * 3),40px);font-size:15px;color:var(--t3)}
.js .panel .fx{transition:opacity .3s}
.js .panel.swap .fx{opacity:0}
@media (max-width:900px){.roles{grid-template-columns:minmax(0,1fr);row-gap:28px}.pdata{grid-template-columns:minmax(0,1fr);row-gap:8px}.pdata dt{line-height:1.4}}

/* ---------- bygget til at måle ---------- */
.built{border-top:1px solid var(--ln)}
.specs{margin-top:clamp(48px,calc(var(--vw) * 5),88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ln)}
.specs li{padding:28px 24px 0 0;min-width:0}
.specs li + li{padding-left:clamp(16px,calc(var(--vw) * 2),28px);border-left:1px solid var(--ln)}
.specs .num{display:block;font-size:clamp(46px,calc(var(--vw) * 5),84px);line-height:1;white-space:nowrap}
.specs .num small{font-size:.42em;font-weight:300;letter-spacing:0;margin-left:.12em;color:var(--t2)}
.specs h3{margin-top:22px;font:600 18px/1.3 var(--fd);letter-spacing:-.01em}
.specs p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--t3)}
@media (max-width:980px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.specs li:nth-child(3){padding-left:0;border-left:0}.specs li:nth-child(n+3){margin-top:28px;border-top:1px solid var(--ln)}}
@media (max-width:520px){.specs{grid-template-columns:minmax(0,1fr)}.specs li,.specs li + li{padding-left:0;border-left:0}.specs li + li{margin-top:28px;border-top:1px solid var(--ln)}}

/* ---------- traileren ---------- */
.cinema{border-top:1px solid var(--ln)}
.cin-head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:12px 24px;margin-bottom:clamp(24px,calc(var(--vw) * 3),40px)}
.cin-head span{font-size:15px;color:var(--t3);font-feature-settings:"tnum" 1}
.screen{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--ln2);border-radius:clamp(12px,calc(var(--vw) * 1.6),22px);overflow:hidden;background:#000;text-align:left}
.screen img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e-out)}
.screen:hover img{transform:scale(1.02)}
.screen .play{position:absolute;left:clamp(14px,calc(var(--vw) * 2.2),32px);top:clamp(14px,calc(var(--vw) * 2.2),32px);display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 16px;border-radius:999px;background:var(--lime);color:#000;font:600 15px/1 var(--fb);transition:opacity .25s,transform .5s var(--e-out)}
.screen .play svg{width:14px;height:14px}
.screen .cur{position:absolute;left:0;top:0;z-index:3;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:var(--lime);color:#000;display:grid;place-items:center;font:600 15px/1 var(--fb);pointer-events:none;opacity:0;transform:translate3d(var(--cx,50%),var(--cy,50%),0) scale(.4);transition:opacity .25s,transform .45s var(--e-out)}
.screen.hov{cursor:none}
.screen.hov .cur{opacity:1;transform:translate3d(var(--cx),var(--cy),0) scale(1)}
.screen.hov .play{opacity:0;transform:scale(.9)}
@media (max-width:560px){.screen .play{height:40px;padding:0 16px 0 13px;font-size:14px}}

/* fuld skærm */
.tv{position:fixed;inset:0;z-index:95;background:#000;display:none;align-items:center;justify-content:center;padding:clamp(12px,calc(var(--vw) * 4),64px)}
.tv.on{display:flex}
.tv .scr{position:relative;width:min(100%,calc((100vh - 2 * clamp(12px,calc(var(--vw) * 4),64px)) * 16 / 9));aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.tv video{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.tv .ctl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgba(0,0,0,.75);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--e-out)}
.tv.act .ctl,.tv.paused .ctl,.tv .ctl:focus-within{opacity:1;transform:none}
.tv .ctl button{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--t1);transition:color .2s,background-color .2s}
.tv .ctl button:hover{color:var(--lime);background:rgba(255,255,255,.06)}
.tv .ctl svg{width:20px;height:20px}
.tv .i-play,.tv.paused .i-pause,.tv .i-off,.tv.muted .i-snd{display:none}
.tv.paused .i-play,.tv.muted .i-off{display:inline}
.tv .trk{position:relative;flex:1;height:24px;cursor:pointer;touch-action:none}
.tv .trk::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:rgba(255,255,255,.18);border-radius:2px}
.tv .trk i{position:absolute;left:0;right:0;top:11px;height:2px;background:var(--lime);border-radius:2px;transform-origin:0 50%;transform:scaleX(0)}
.tv .tm{font:500 13px/1 var(--fb);color:var(--t2);font-feature-settings:"tnum" 1;white-space:nowrap;min-width:78px;text-align:right}
.tv .x{position:absolute;right:clamp(12px,calc(var(--vw) * 2),28px);top:clamp(12px,calc(var(--vw) * 2),24px);width:48px;height:48px;border-radius:50%;border:1px solid var(--ln3);display:grid;place-items:center;color:var(--t1);transition:border-color .25s,transform .45s var(--e-out)}
.tv .x:hover{border-color:var(--lime);transform:rotate(90deg)}
.tv .x svg{width:18px;height:18px}
@media (max-width:560px){.tv .ctl{gap:8px;padding:10px 12px}.tv .tm{min-width:0;font-size:12px}}
html.tv-on,html.tv-on body{overflow:hidden}

/* ---------- slutning ---------- */
.fin{border-top:1px solid var(--ln);padding-block:clamp(150px,calc(var(--vw) * 19),300px);text-align:center}
.fin h2 .t.ac{color:var(--lime)}
.fin p{margin:clamp(28px,calc(var(--vw) * 3),44px) auto 0;max-width:31em;font-size:clamp(17px,calc(var(--vw) * 1.4),20px);color:var(--t2)}
.fin .ctas{justify-content:center;margin-top:36px}

@media (prefers-reduced-motion:reduce){
  .js .eye .t{transform:none;opacity:1}
  .js .eye .w::after{display:none}
  .js .hero .up{opacity:1;transform:none}
  .js .habit .say .w8{opacity:1}
  .js .frame::before,.js .frame::after,.frame .seam{display:none}
  .frame img{transform:none}
  .js .pa{opacity:1;transform:none}
  .hero-foot .sc i::after{animation:none}
}