/* RESAN: producentsidornas 3D-värld. Typografi, färger och knappar är
 * mastrify.com:s egna (mastrify.css laddas först); här ligger bara scenen,
 * banan man scrollar längs och texterna som tänds på vägen. */
:root{--resa-skiva-mitt:36vh;--resa-skiva-radie:150px}
html,body{background:#030305}
body.resa{margin:0;min-height:100%;color:#f7f7fb;overflow-x:hidden}

/* Scenen står still, sidan scrollar under den. Hela fönsterhöjden även när
 * mobilens adressfält fälls ihop, så duken aldrig byter storlek mitt i en scroll. */
.resa-scen{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none}
#varld{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Motorns duk: ritar hela tiden, men syns bara som textur i världen. */
#lp{position:fixed;left:-10000px;top:0;width:640px;height:640px;--lp-scale:.9;pointer-events:none}
@media (max-width:760px){#lp{width:360px;height:360px;--lp-scale:.85}}

/* Banan: nio och en halv skärmhöjd att scrolla genom (Linus 24 sep: två steg
 * till efter tunneln, kanjonen). */
.resa-bana{position:relative;height:950vh;z-index:1}

/* Huvudet: samma märke och knapp som mastrify.com, ovanpå scenen. */
.resa .header{position:fixed;top:0;left:0;right:0;z-index:5;background:linear-gradient(#030305e6,#03030500);border-bottom:0}
.resa .header nav{display:none}
@media (min-width:761px){.resa .header .header-cta{margin-left:auto}}

/* Texterna. De ligger fast i bild och tänds och släcks med resan (resa.js
 * skriver opacity och transform). Rubriker radbryts jämnt, stycken utan
 * ensamma ord på sista raden. */
.resa-stopp{position:fixed;left:0;right:0;z-index:2;opacity:0;visibility:hidden;will-change:opacity,transform;pointer-events:none}
.resa-stopp a,.resa-stopp button{pointer-events:auto}
.resa-stopp .eyebrow{color:#ada7c2;margin:0 0 16px}
.resa-stopp h1,.resa-stopp h2{font-weight:590;color:#f7f7fb;margin:0 0 20px;text-wrap:balance}
.resa-stopp h1 span,.resa-stopp h2 span{background:linear-gradient(100deg,#c3a2ff 5%,#85bfff);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
.resa-stopp p.resa-text{font-size:18px;line-height:1.75;color:#a6a3b9;margin:0;text-wrap:pretty}

/* Hjälten: mitt under skivan, som på mastrify.com. */
.resa-hjalte{top:calc(var(--resa-skiva-mitt) + var(--resa-skiva-radie) + 30px);text-align:center;padding:0 22px}
.resa-hjalte h1{font-size:clamp(46px,5.2vw,70px);line-height:1.035;letter-spacing:-.05em}
.resa-hjalte .resa-text{max-width:600px;margin:0 auto 26px!important;text-wrap:balance}
.resa-hjalte .hero-actions{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.resa-hjalte .hero-note{font-size:13px;color:#737184;margin:14px 0 0}
/* Ledtråden: tydlig, längst ner i mitten, och ett tryck startar resan. Linus 29 sep 2026: "Att man ser
 * SCROLLEN TYDLIGARE!!!" Förut stod SCROLL TO ENTER svagt och smått. Samma idé som på heidicommand.com:
 * fingret sveper UPPÅT på alla skärmar (en pekskärm och en styrplatta med naturlig rullning går båda uppåt
 * för att komma nedåt i sidan). Med mus står det SCROLL, på pekskärm SWIPE UP (resa.js). Den står fast mot
 * fönstrets underkant, så i en telefon hamnar den ovanför webbläsarens verktygsrad. Knappen är bara platsen:
 * resa.js tonar ut den när resan börjar, pillret inuti tänds sist av allt i hjälten och pulserar sedan. */
.resa-ledtrad{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:3;-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.resa-ledtrad:focus-visible{outline:none}
.resa-ledtrad:focus-visible .resa-ledpill{outline:2px solid #b199ff;outline-offset:4px}
.resa-ledpill{display:flex;align-items:center;gap:13px;padding:11px 24px 11px 14px;border:1px solid #b199ff99;border-radius:999px;background:#140e28d9;box-shadow:0 0 0 1px #b199ff1f,0 8px 28px #00000073;font:600 12.5px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.28em;text-transform:uppercase;color:#efeaff;white-space:nowrap;transition:color .2s,border-color .2s}
.resa-ledtrad:hover .resa-ledpill{color:#fff;border-color:#c9b8ffb3}
html:not(.resa-igang) .resa-ledpill{opacity:0}
.resa-igang .resa-ledpill{animation:resa-ledin 1.2s cubic-bezier(.2,.7,.2,1) 2.3s both,resa-ledpuls 2.6s ease-in-out 3.6s infinite}
.resa-ledikon{position:relative;flex:none;display:block;width:18px;height:29px;border:1.6px solid #b199ffd9;border-radius:9px;box-shadow:0 0 14px #8b6cff59;overflow:hidden}
.resa-ledikon i{position:absolute;left:50%;bottom:4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#d6c8ff;box-shadow:0 0 7px #b199ff;animation:resa-ledsvep 1.7s cubic-bezier(.45,0,.55,1) infinite}
.resa-ledikon i::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:9px;margin-left:-1px;border-radius:1px;background:linear-gradient(#b199ffbf,#b199ff00)}
@keyframes resa-ledin{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes resa-ledsvep{0%{transform:translateY(0);opacity:0}15%{opacity:1}75%{transform:translateY(-12px);opacity:0}100%{transform:translateY(-12px);opacity:0}}
@keyframes resa-ledpuls{0%,100%{box-shadow:0 0 0 1px #b199ff1f,0 8px 28px #00000073}50%{box-shadow:0 0 0 1px #b199ff59,0 0 32px 4px #8b6cff80}}
.resa-trangt .resa-ledtrad{display:none}

/* Stoppen längs vägen: till vänster i sajtens spalt, världen får resten. En
 * fast bredd, inte utfyllnad: på breda skärmar kollapsade texten annars till
 * en bokstav per rad. En mjuk skugga bakom håller texten läsbar när portarna
 * och strängarna passerar. */
.resa-kapitel{top:50%;left:max(24px,calc((100vw - 1180px) / 2));right:auto;width:min(540px,calc(100vw - 48px));translate:0 -50%}
.resa-kapitel::before{content:"";position:absolute;inset:-90px -150px -90px -100px;background:radial-gradient(closest-side,#030305dc,#03030596 55%,#03030500);z-index:-1;pointer-events:none}
.resa-kapitel h2{font-size:clamp(38px,3.7vw,56px);line-height:1.04;letter-spacing:-.045em}
.resa-kapitel .resa-text{max-width:420px}

/* Porten: mitt i bild, under ringen. */
.resa-porten{bottom:clamp(22px,4vh,60px);text-align:center;padding:0 22px}
.resa-porten::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,120vw);height:calc(100% + 150px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,#030305e0,#030305b0 45%,#03030500);z-index:-1;pointer-events:none}
.resa-porten h2{font-size:clamp(38px,4.2vw,62px);line-height:1.04;letter-spacing:-.045em;margin-bottom:14px}
.resa-porten .resa-text{max-width:520px;margin:0 auto!important;text-wrap:balance}
.resa-porten .resa-pris{margin:14px 0 18px!important}
.resa-porten .hero-actions{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
.resa-porten .hero-note{font-size:13px;color:#737184;margin:14px 0 0}

/* Namnet tänds bokstav för bokstav. */
[data-tand] span{display:inline-block;opacity:0;filter:blur(6px);text-shadow:0 0 14px #b28cff;animation:resa-tand .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1.1s + var(--i) * 55ms)}
@keyframes resa-tand{55%{opacity:1;filter:blur(0);color:#fff}100%{opacity:1;filter:blur(0);text-shadow:0 0 0 #b28cff00}}
.resa-igang .resa-hjalte .resa-upp{animation:resa-upp 1.2s cubic-bezier(.2,.7,.2,1) both}
.resa-igang .resa-hjalte .resa-upp:nth-child(2){animation-delay:1.55s}
.resa-igang .resa-hjalte .resa-upp:nth-child(3){animation-delay:1.75s}
.resa-igang .resa-hjalte .resa-upp:nth-child(4){animation-delay:1.95s}
.resa-igang .resa-hjalte .resa-upp:nth-child(5){animation-delay:2.1s}
@keyframes resa-upp{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* Skymningen: svart över allt när man dyker in i studion. */
#resa-skymning{position:fixed;inset:0;z-index:9;background:#030305;opacity:0;pointer-events:none}
.resa-dyker .resa-stopp,.resa-dyker .resa-ledtrad,.resa-dyker .header{transition:opacity .35s;opacity:0!important}
/* Innan världen har tänts: svart, och texten väntar. */
html:not(.resa-igang):not(.resa-stilla) .resa-hjalte{opacity:0}

/* Mobilen: texten nederst och kort, så att världen syns ovanför (resa.js
 * lyfter världen uppåt i bilden under resan). */
@media (max-width:760px){
  .resa-hjalte{padding:0 18px}
  .resa-hjalte h1{font-size:clamp(38px,11vw,50px);letter-spacing:-.045em}
  .resa-stopp p.resa-text{font-size:15px;line-height:1.55}
  .resa-hjalte .resa-text{font-size:16px!important;line-height:1.6!important}
  .resa-kapitel{top:auto;bottom:0;left:0;right:0;width:auto;translate:none;padding:64px 22px calc(26px + env(safe-area-inset-bottom));background:linear-gradient(#03030500,#030305b8 38%,#030305ec)}
  .resa-kapitel::before{display:none}
  .resa-kapitel .eyebrow{margin-bottom:10px}
  .resa-kapitel h2{font-size:clamp(30px,8.8vw,40px);margin-bottom:10px}
  .resa-kapitel .resa-text{max-width:30em}
  .resa-porten{bottom:0;padding:70px 18px calc(22px + env(safe-area-inset-bottom));background:linear-gradient(#03030500,#030305cc 36%,#030305)}
  .resa-porten::before{display:none}
  .resa-porten .eyebrow{margin-bottom:10px}
  .resa-porten h2{font-size:clamp(30px,8.8vw,40px);margin-bottom:10px}
  .resa-porten .resa-pris{margin:12px 0 14px!important}
  .resa-porten .hero-note{margin-top:8px}
  .resa-ledtrad{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .resa-ledpill{padding:9px 18px 9px 11px;gap:10px;font-size:11px;letter-spacing:.2em}
  .resa-ledikon{width:16px;height:26px}
}
/* Låga telefoner: hela hjälten ska fortfarande rymmas, knapparna först. */
@media (max-width:760px) and (max-height:700px){
  .resa-hjalte h1{font-size:clamp(32px,9.4vw,40px);margin-bottom:14px}
  .resa-hjalte .resa-text{font-size:15px!important;line-height:1.55!important;margin-bottom:18px!important}
  .resa-hjalte .eyebrow{margin-bottom:10px}
  .resa-hjalte .hero-note{margin-top:10px}
}

/* Stilla läge: reducerad rörelse eller ingen WebGL. Allt i vanligt flöde. */
.resa-stilla .resa-scen{position:relative;height:auto}
.resa-stilla #varld{display:none}
.resa-stilla #lp{position:relative;left:auto;display:block;margin:110px auto 0;width:min(86vw,520px);height:min(86vw,520px)}
.resa-stilla .resa-bana{height:auto;padding-bottom:60px}
.resa-stilla .resa-stopp{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;width:auto;translate:none;margin:48px auto;opacity:1!important;visibility:visible!important;transform:none!important;pointer-events:auto;background:none}
.resa-stilla .resa-kapitel{padding:0 22px;max-width:640px;text-align:center}
.resa-stilla .resa-kapitel::before{display:none}
.resa-stilla .resa-kapitel .resa-text{margin:0 auto}
.resa-stilla .resa-porten{padding:0 22px}
.resa-stilla .resa-porten::before{display:none}
.resa-stilla .resa-ledtrad{display:none}
.resa-stilla [data-tand] span{opacity:1;filter:none;animation:none;text-shadow:none}