/* ================= 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.
   The root is div.intro, never plain .intro: a case's first line is p.intro, and these rules pinned it over the case's films. */
div.intro{position:fixed;inset:0;z-index:6;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;color:#F2ECDF;outline:none;
  scrollbar-width:none}
div.intro::-webkit-scrollbar{display:none}
html:not(.drawn) div.intro,.inspect div.intro,.og div.intro{display:none}
div.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}
div.intro section{position:relative}
.i-stage{position:sticky;top:0;height:var(--ih,100vh);overflow:hidden}
/* how long each scene holds the screen. Melker, 2026-10-15: "you have to scroll a bit too long to reach the engine/lab ... so it
   doesnt feel like a chore": from 6.6 screens to about 3.8 (a phone from 5.2 to about 3.6) */
.i-hero{height:150vh}
.i-roof{height:150vh}
.i-choose{height:125vh}
/* 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}
/* the ambilight: light off the film's edges, falling with the square of the distance (worked out in intro.js); only a little blur here to blend the colours. Gone once the film fills the screen */
.i-amb{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform,opacity;opacity:0;pointer-events:none;z-index:0;filter:blur(24px) saturate(1.4)}
.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%}
/* the height reads 1, 0, 8, 0 down the line, upright (Melker, 2026-10-15). It was turned with rotate, which also turned where intro.js
   placed it, so it stood far off screen. */
.i-lh{translate:-50% -50%;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.12em;padding:7px 3px 6px}
.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;-webkit-backdrop-filter:blur(6px);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:1.86em;font:900 clamp(38px,9.2vw,190px)/.9 "League Spartan",sans-serif;white-space:nowrap;letter-spacing:-.015em;will-change:transform}
/* a word rises from behind its own baseline: the .i-m around it clips it (room above for the ring of å) */
.i-m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em .03em .06em;margin:-.16em -.03em -.06em}
.i-w,.i-amp,.i-m>span{display:inline-block;will-change:transform}
.i-amp{color:#FCA311;margin:0 .16em}
.i-roofline{position:absolute;left:-8%;width:116%;top:.06em;height:1.7em;overflow:visible}
.i-roofline path{fill:none;stroke-dasharray:1;stroke-dashoffset:1;stroke-linejoin:miter}
.i-roofline .r-out{stroke:#F2ECDF;stroke-width:1.6}
.i-roofline .r-in,.i-roofline .r-chord{stroke:rgba(242,236,223,.62);stroke-width:1}
.i-roofline .r-web{stroke:#8FA6D6;stroke-width:1}
.i-roofline .r-ann{opacity:0}.i-roofline .r-ann path{stroke:#8FA6D6;stroke-width:1;stroke-dasharray:none;stroke-dashoffset:0}
.i-roofline text{fill:#8FA6D6;font:500 12px "League Spartan",sans-serif;letter-spacing:.08em}
.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)}
/* Pointing at a portrait (a tap on a phone): it lifts, its ring turns orange, the role shows under the name, the others step back.
   The li itself is moved by intro.js as the scene plays, so the hover moves only what is inside it. */
.i-team li{position:relative;cursor:default}
.i-team img,.i-team .nf{transition:translate .35s cubic-bezier(.2,1.4,.4,1),border-color .25s,filter .3s,scale .35s cubic-bezier(.2,1.4,.4,1)}
.i-team b{transition:color .25s,translate .35s cubic-bezier(.2,1,.3,1)}
.i-team .role{position:absolute;left:50%;top:100%;width:max-content;max-width:150px;translate:-50% 0;margin-top:6px;font:600 13px/1.15 "Darker Grotesque",sans-serif;
  color:rgba(242,236,223,.72);opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .3s;pointer-events:none}
.i-team li:is(:hover,.on) img,.i-team li:is(:hover,.on) .nf{translate:0 -8px;scale:1.08;border-color:#FCA311}
.i-team li:is(:hover,.on) b{color:#FCA311;translate:0 -4px}
.i-team li:is(:hover,.on) .role{opacity:1;transform:none}
.i-team:has(li:is(:hover,.on)) li:not(:hover,.on) img{filter:grayscale(1) brightness(.55)}
.i-team:has(li:is(:hover,.on)) li:not(:hover,.on) b{color:rgba(242,236,223,.4)}

/* Film, not building (a friend's review, 2026-10-15: the roof read as a construction firm): a strip of film runs along the top and the
   bottom of the screen through the first two scenes, sprocket holes and an edge print, advancing as the page is scrolled (intro.js),
   gone as the clients come in. Its colour is the hero style's own while the hero shows (MOTORN's black on orange). */
.i-film{position:fixed;inset:0;z-index:3;pointer-events:none;--perf:rgba(242,236,223,.3);will-change:opacity}
html[data-hero-on] .i-film{--perf:color-mix(in srgb,var(--hero-fg,#F2ECDF) 32%,transparent)}
.i-film .f-row{position:absolute;left:-40px;right:-40px;height:13px;background:var(--perf);will-change:transform;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='13'%3E%3Crect x='7' y='0' width='12' height='13' rx='3'/%3E%3C/svg%3E") 0 0/26px 13px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='13'%3E%3Crect x='7' y='0' width='12' height='13' rx='3'/%3E%3C/svg%3E") 0 0/26px 13px repeat-x}
.i-film .f-top{top:9px}.i-film .f-bot{bottom:9px}
.i-film::before,.i-film::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--perf)}
.i-film::before{top:30px}.i-film::after{bottom:30px}
.i-film .f-code{position:absolute;left:max(20px,4vw);bottom:38px;font:600 10px/1 "League Spartan",sans-serif;letter-spacing:.24em;color:var(--perf)}
.i-film .f-code b{color:#FCA311;font-weight:600}
.portrait .i-film .f-top{top:calc(var(--bar,56px) + 8px)}.portrait .i-film::before{top:calc(var(--bar,56px) + 29px)}
.calm .i-film .f-row{transform:none!important}
.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:12vh 0 8vh}
.i-clients h2{margin:0 0 6vh;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:6vh 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 .i-m>span{will-change:transform}
.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 */
/* The hero on a phone is laid out in flow, top to bottom: the words, then the film's frame under them. They used to be placed
   separately (the words from the top, the film from the bottom), and on a phone with the browser's bars showing they overlapped.
   intro.js reads where the frame ended up, so the film starts exactly there. Sizes follow the screen's height as well as its width. */
.portrait .i-hero .i-stage{display:flex;flex-direction:column;justify-content:center;padding:92px 6vw max(64px,9svh)}
.portrait .i-copy{position:relative;left:auto;top:auto;translate:none;width:auto;max-width:none;order:1}
.portrait .i-kick{margin-bottom:min(16px,2svh)}
.portrait .i-h{font-size:clamp(30px,min(10.4vw,6svh),58px)}
.portrait .i-lead{margin:min(16px,2svh) 0 min(20px,2.6svh);font-size:clamp(16px,min(4.4vw,2.5svh),19px);line-height:1.25}
.portrait .i-copy .row{gap:12px 20px}
.portrait .i-slot{position:relative;left:auto;top:auto;bottom:auto;width:100%;margin-top:min(44px,5svh);order:2;flex:none}
.portrait .i-hint{bottom:max(14px,2.4svh)}
@media (max-height:740px){.portrait .i-hint{display:none}}
.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}
/* a phone shows less per screen, so the scenes are shorter: no long stretches of scrolling where nothing changes */
.portrait .i-hero{height:140vh}.portrait .i-roof{height:145vh}.portrait .i-choose{height:120vh}
/* the sound button sits right under the film's band (the band is the screen's width at 16:9, in the middle), so they leave together */
.portrait .i-full{top:calc(50% + 28.2vw + 18px);bottom:auto}
/* the clients: less air round them, and the awards wrap instead of running off both edges */
.portrait .i-clients{padding:8vh 0 6vh}.portrait .i-clients h2{margin-bottom:5vh}
.portrait .i-awards{flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:6vh;padding:0 8vw}.portrait .i-awards img{height:44px}

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