/* ================= the landing page (intro.js) =================
   It lies over the start screen (above the two halves, under the menu and the sheet's frame) and scrolls on its own. Each scene is a
   tall section with a stage that stays pinned while the scene plays (position: sticky); intro.js moves what is on the stage. */
.intro{position:fixed;inset:0;z-index:6;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;color:#F2ECDF;outline:none;
  scrollbar-width:none}
.intro::-webkit-scrollbar{display:none}
html:not(.drawn) .intro,.inspect .intro,.og .intro{display:none}
.intro.done{visibility:hidden;pointer-events:none}
.i-bg{position:fixed;inset:0;background:var(--bg-e);pointer-events:none}
/* the logo, huge and faint, sliding behind everything as the page is scrolled */
.i-giant{position:fixed;left:6vw;top:54%;width:190vw;aspect-ratio:3289/516;pointer-events:none;will-change:transform;
  background:rgba(242,236,223,.035);-webkit-mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat;mask:url(/assets/midnatt-logga-vit.png) center/contain no-repeat}
.i-h span{display:inline-block;will-change:transform}
.intro section{position:relative}
.i-stage{position:sticky;top:0;height:var(--ih,100vh);overflow:hidden}
.i-hero{height:230vh}
.i-roof{height:250vh}
.i-choose{height:190vh}
/* how far down the whole page is: a thin line inside the right edge of the frame */
.i-rail{position:fixed;right:26px;top:24vh;height:52vh;width:1px;background:rgba(242,236,223,.14);z-index:2;pointer-events:none}
.i-rail i{display:block;width:1px;height:100%;background:#FCA311;transform-origin:50% 0;transform:scaleY(0)}

/* ---- 1. who we are, and the showreel */
.i-copy{position:absolute;left:4vw;top:50%;translate:0 -46%;width:44vw;max-width:760px;z-index:2;will-change:transform,opacity}
.i-kick{margin:0 0 3.2vh;font:500 12px/1 "League Spartan",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#FCA311}
.i-h{margin:0;font:900 clamp(44px,5.5vw,108px)/.9 "League Spartan",sans-serif;letter-spacing:-.012em;text-wrap:balance}
.i-lead{margin:3.4vh 0 4.2vh;max-width:34ch;font:600 clamp(18px,1.45vw,26px)/1.3 "Darker Grotesque",sans-serif;color:rgba(242,236,223,.86)}
.i-copy .row{gap:22px}
.i-slot{position:absolute;left:52vw;top:calc(50% - 43vw * 9 / 32);width:43vw;aspect-ratio:16/9;visibility:hidden}
.i-reel{position:absolute;left:0;top:0;overflow:hidden;transform-origin:0 0;will-change:transform;background:#05080f;z-index:1}
.i-vid{position:absolute;left:0;top:0;object-fit:cover;transform-origin:0 0;will-change:transform;display:block}
.i-shade{position:absolute;inset:0;background:var(--bg-e);opacity:0;pointer-events:none}
/* the drawing marks round the film: crop corners, its two dimensions, a figure caption */
.i-ann{position:absolute;inset:0;pointer-events:none;z-index:2;will-change:opacity}
.i-ann>*{position:absolute;left:0;top:0;will-change:transform}
.i-c{width:16px;height:16px;margin:-8px 0 0 -8px}
.i-c::before,.i-c::after{content:"";position:absolute;background:rgba(242,236,223,.8)}
.i-c::before{left:7.5px;top:-6px;width:1px;height:28px}.i-c::after{top:7.5px;left:-6px;height:1px;width:28px}
.i-dw,.i-dh{background:#8FA6D6;transform-origin:0 0}
.i-dw{width:1px;height:1px}.i-dh{width:1px;height:1px}
.i-lw,.i-lh{font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.08em;color:#8FA6D6;background:var(--bg-e);padding:3px 6px}
.i-lw{translate:-50% -50%}.i-lh{translate:-50% -50%;rotate:-90deg}
.i-cap{font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,236,223,.7)}
.i-full{position:absolute;left:50%;bottom:11vh;translate:-50% 0;z-index:3;opacity:0;pointer-events:none;
  background:rgba(5,8,15,.35)!important;backdrop-filter:blur(6px)}
.i-hint{position:absolute;left:50%;bottom:4.5vh;translate:-50% 0;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;
  font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:rgba(242,236,223,.7)}
.i-hint i{display:block;width:1px;height:46px;background:linear-gradient(#FCA311,#FCA311) 0 0/1px 40% no-repeat,rgba(242,236,223,.2);animation:i-drip 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes i-drip{0%{background-position:0 -20px}100%{background-position:0 56px}}
/* on load the words of the hero rise into place */
.i-copy>*{animation:i-rise 1s cubic-bezier(.2,.9,.25,1) both}
.i-copy>:nth-child(2){animation-delay:.08s}.i-copy>:nth-child(3){animation-delay:.18s}.i-copy>:nth-child(4){animation-delay:.28s}
@keyframes i-rise{from{opacity:0;transform:translateY(40px)}}

/* ---- 2. Byrå & produktion under samma tak, and the nine of us */
.i-roof .i-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.i-words{position:relative;padding-top:.92em;font:900 clamp(38px,9.2vw,190px)/.9 "League Spartan",sans-serif;white-space:nowrap;letter-spacing:-.015em;will-change:transform}
.i-w,.i-amp{display:inline-block;will-change:transform,opacity}
.i-amp{color:#FCA311;margin:0 .16em}
.i-roofline{position:absolute;left:-7%;width:114%;top:0;height:.84em;overflow:visible}
.i-roofline path{fill:none;stroke:#F2ECDF;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:miter}
.i-under{margin:.5em 0 0;font:900 clamp(20px,2.6vw,50px)/1 "League Spartan",sans-serif;color:rgba(242,236,223,.94);will-change:transform,opacity}
.i-team{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.5vw,26px);list-style:none;padding:0;margin:7vh 0 0;max-width:92vw}
.i-team li{width:clamp(56px,6.2vw,108px);will-change:transform,opacity}
.i-team img,.i-team .nf{display:block;width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover;padding:4px;border:1.5px solid rgba(242,236,223,.9);box-sizing:border-box}
.i-team .nf{display:grid;place-items:center;font:900 clamp(14px,1.4vw,24px)/1 "League Spartan",sans-serif;color:#FCA311}
.i-team b{display:block;margin-top:10px;font:500 11px/1 "League Spartan",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,236,223,.8)}
.i-tline{margin:4.4vh auto 0;max-width:44ch;font:600 clamp(17px,1.35vw,25px)/1.35 "Darker Grotesque",sans-serif;color:rgba(242,236,223,.82);will-change:transform,opacity}

/* ---- 3. the clients go by */
.i-clients{padding:22vh 0 18vh}
.i-clients h2{margin:0 0 9vh;text-align:center;font:500 12px/1 "League Spartan",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:#FCA311;will-change:transform,opacity}
.i-marq{overflow:hidden;padding:2.6vh 0}
.i-track{display:flex;align-items:center;gap:clamp(44px,6vw,120px);width:max-content;padding-right:clamp(44px,6vw,120px);will-change:transform}
.i-track img{height:clamp(22px,2.5vw,44px);width:auto;opacity:.6;transition:opacity .2s}
.i-track img:hover{opacity:1}
.i-awards{display:flex;justify-content:center;gap:clamp(24px,4vw,70px);list-style:none;padding:0;margin:10vh 0 0;will-change:transform,opacity}
.i-awards img{height:clamp(50px,5vw,84px);width:auto;opacity:.8}

/* ---- 4. Välj din väg, then the page clears onto the start screen */
.i-choose .i-stage{display:flex;align-items:center;justify-content:center}
.i-in{display:flex;flex-direction:column;align-items:center;text-align:center;will-change:transform,opacity}
.i-h2{margin:0;font:900 clamp(46px,8.4vw,170px)/.9 "League Spartan",sans-serif;letter-spacing:-.015em}
.i-h2 span{display:inline-block;will-change:transform,opacity}
.i-ways{display:flex;gap:9vw;margin-top:7vh;will-change:transform,opacity}
.i-ways a{max-width:24ch;color:inherit;text-decoration:none;font:600 clamp(17px,1.3vw,23px)/1.3 "Darker Grotesque",sans-serif;color:rgba(242,236,223,.85)}
.i-ways b{display:block;margin-bottom:12px;font:900 clamp(22px,2.1vw,38px)/1 "League Spartan",sans-serif;color:#F2ECDF}
.i-ways a:first-child{text-align:right}.i-ways a:last-child{text-align:left}
.i-ways a:hover b{color:#FCA311}
.i-diag{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.i-diag path{fill:none;stroke:rgba(242,236,223,.5);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1}

/* ---- phones */
.portrait .i-copy{left:6vw;top:15vh;translate:none;width:88vw}
.portrait .i-h{font-size:clamp(34px,10.4vw,60px)}
.portrait .i-lead{margin:2.4vh 0 2.8vh;font-size:17px}
.portrait .i-slot{left:6vw;top:auto;bottom:16vh;width:88vw}
.portrait .i-hint{bottom:3vh}
.portrait .i-rail{right:14px}
.portrait .i-words{font-size:9.6vw}
.portrait .i-team{max-width:88vw;row-gap:16px}
.portrait .i-team li{width:15vw}
.portrait .i-ways{flex-direction:column;gap:4vh}
.portrait .i-ways a,.portrait .i-ways a:first-child,.portrait .i-ways a:last-child{text-align:center}

/* people who asked for less motion: nothing moves on its own */
.calm .i-copy>*{animation:none}
.calm .i-hint i{animation:none}