/* HawaniMedia · motion-lag (2026-10-19) — se motion.js */

/* 1 · Klapper-intro */
.mx-slate{position:fixed;inset:0;z-index:200}
.mx-slate .h{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transform-origin:top}
.mx-slate .h.b{bottom:0;transform-origin:bottom}
.mx-slate .board{position:absolute;left:50%;top:50%;width:min(560px,86vw);transform:translate(-50%,-50%);color:var(--panel);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.mx-slate .arm,.mx-slate .base{height:34px;background:repeating-linear-gradient(-58deg,var(--panel) 0 26px,var(--ink) 26px 52px);border:2px solid var(--panel)}
.mx-slate .arm{transform-origin:2px 32px;transform:rotate(-22deg)}
.mx-slate .base{margin-top:4px}
.mx-slate .grid{border:2px solid var(--panel);border-top:0;display:grid;grid-template-columns:1fr 1fr 1fr}
.mx-slate .grid div{padding:10px 12px;border-right:2px solid var(--panel);border-top:2px solid var(--panel)}
.mx-slate .grid div:nth-child(3n){border-right:0}
.mx-slate .grid .w{grid-column:1/-1;font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;font-size:clamp(28px,6vw,46px);letter-spacing:-.01em;line-height:1}
.mx-slate .grid small{display:block;color:#8D9196;font-size:10px;margin-bottom:4px}
.mx-slate .tc{font-size:clamp(22px,4vw,30px);letter-spacing:.04em;color:var(--coral)}
.mx-slate{cursor:pointer}
.mx-slate .skip{all:unset;position:absolute;right:var(--gut);bottom:24px;color:#8D9196;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:8px}
.mx-slate .skip:focus-visible{outline:2px solid var(--panel)}
.mx-flash{position:fixed;inset:0;z-index:201;background:var(--white);opacity:0;pointer-events:none}

/* hero-linjer glider op bag en maske efter intro */
.mx-head .ln{overflow:hidden;padding-bottom:.04em}
.mx-head .ln.mx-inl{display:inline-block;vertical-align:top}
.mx-head .ln>.mx-ri{display:inline-block;transform:translateY(105%)}
.mx-head.go .ln>.mx-ri{transform:none;transition:transform .9s var(--ease)}
.mx-head.go .ln:nth-of-type(3)>.mx-ri{transition-delay:.09s}

/* 2 · Showreel gennem bogstaverne */
.mx-reel{position:relative;height:260vh;width:100vw;margin-left:calc(50% - 50vw);margin-top:clamp(40px,6vw,80px)}
.mx-reel .stk{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h) - var(--dock-h));overflow:hidden;background:var(--screen)}
.mx-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mx-reel svg.mask{position:absolute;inset:0;width:100%;height:100%}
.mx-reel .lb-t,.mx-reel .lb-b{position:absolute;left:0;right:0;height:12%;background:var(--ink);transform:scaleY(0)}
.mx-reel .lb-t{top:0;transform-origin:top}.mx-reel .lb-b{bottom:0;transform-origin:bottom}
.mx-reel .burn{opacity:0;transition:opacity .3s}
.mx-reel.full .burn{opacity:1}
.mx-reel .hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);display:flex;gap:10px;align-items:center}
.mx-reel .hint i{display:block;width:1px;height:22px;background:var(--graphite);transform-origin:top;animation:mxHint 1.6s var(--ease) infinite}
@keyframes mxHint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.mx-reel .cap{position:absolute;left:var(--gut);bottom:calc(12% + 18px);color:var(--panel);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s var(--ease)}
.mx-reel.full .cap{opacity:1;transform:none}
.mx-reel .cap .lab{color:#C9CBC6;margin:0 0 6px}
.mx-reel .cap .disp{font-size:clamp(34px,5vw,72px);color:var(--panel)}
.mx-reel.still .cap,.mx-reel.still .burn{opacity:1}
.mx-reel.still svg.mask,.mx-reel.still .hint{display:none}

/* 3 · Klip-wipe på overskrifter */
.mx-wipe{position:relative}
.mx-wipe>.mx-in{display:inline;opacity:0}
.mx-wipe>.mx-bar{position:absolute;inset:0;transform:scaleX(0);transform-origin:left;pointer-events:none}
.mx-wipe.on>.mx-bar{animation:mxBar .95s var(--snap) forwards}
.mx-wipe.on>.mx-in{animation:mxShow 0s .47s forwards}
@keyframes mxBar{0%{transform:scaleX(0);transform-origin:left}49%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes mxShow{to{opacity:1}}
.sec-h.mx-line{border-top-color:transparent;position:relative}
.sec-h.mx-line::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.sec-h.mx-line.on::before{transform:scaleX(1)}
.sec-h.mx-line .lab{opacity:0;transform:translateY(6px);transition:opacity .5s .3s,transform .5s .3s var(--ease)}
.sec-h.mx-line.on .lab{opacity:1;transform:none}

/* 4 · Skim med musen (som i Final Cut) */
.mx-skim .vw{cursor:none}
.mx-skim .vw .mx-fsc{cursor:pointer}
.mx-ph{position:absolute;top:0;bottom:0;width:2px;background:var(--coral);pointer-events:none;z-index:3;display:none}
.mx-ph b{position:absolute;top:8px;left:6px;background:var(--coral);color:#fff;font:600 10px/1 var(--mono);letter-spacing:.06em;padding:4px 5px;white-space:nowrap}
.mx-ph.l b{left:auto;right:6px}
.mx-skim .vw:hover .mx-ph{display:block}

/* 5 · Forløbet: afspilningshoved + grade før/efter */
.pipe-track .mx-head2{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:var(--coral);z-index:2;opacity:0}
.pipe-track .mx-head2::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top:8px solid var(--coral)}
.pipe.mx-run .mx-head2{opacity:1;animation:mxSweep 3.2s cubic-bezier(.45,0,.2,1) forwards}
@keyframes mxSweep{from{left:0}to{left:100%}}
.pipe-desc p{transition:color .25s}
.pipe-desc p.mx-hot{color:var(--ink)}
.pipe-desc p.mx-hot b{color:var(--coral)}
.mx-grade{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 30ch;gap:16px;align-items:end}
@media (max-width:860px){.mx-grade{grid-template-columns:minmax(0,1fr)}}
.mx-gv{position:relative;aspect-ratio:2.39/1;background:var(--screen);border:1px solid var(--ink);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mx-gv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.mx-gv .log{filter:saturate(.38) contrast(.66) brightness(1.16) sepia(.08);clip-path:inset(0 calc(100% - var(--x,100%)) 0 0)}
.mx-gv .cut{position:absolute;top:0;bottom:0;left:var(--x,100%);width:2px;margin-left:-1px;background:var(--panel)}
.mx-gv .cut::after{content:"";position:absolute;top:50%;left:-13px;width:26px;height:26px;margin-top:-13px;background:var(--panel);border:1px solid var(--ink)}
.mx-gv .burn.l1{left:10px;bottom:10px}.mx-gv .burn.l2{right:10px;bottom:10px}
.mx-grade .tx p{margin:6px 0 0;color:var(--graphite)}

/* 6 · Ydelser: lukker på foto, video på film */
.card .th{position:relative;overflow:hidden}
.card .th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.card.mx-play .th video{opacity:1}
.card .th .bl{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transform:scaleY(0);z-index:2}
.card .th .bl.t{top:0;transform-origin:top}.card .th .bl.b{bottom:0;transform-origin:bottom}
.card .th .shots{position:absolute;right:10px;top:10px;z-index:3;background:var(--ink);color:var(--panel);font:600 10px/1 var(--mono);letter-spacing:.06em;padding:4px 6px;opacity:0;transition:opacity .2s}
.card:hover .th .shots{opacity:1}

/* 7 · Overgang mellem sider */
.mx-cut{position:fixed;left:0;right:0;top:var(--nav-h);bottom:calc(var(--dock-h) + var(--safe-b));z-index:48;pointer-events:none;display:none;align-items:flex-end;padding:var(--gut)}
.mx-cut span{font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;text-transform:uppercase;font-size:clamp(56px,12vw,170px);line-height:.9;color:#fff}
.mx-cut small{display:block;font:500 12px/1 var(--mono);letter-spacing:.08em;margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
  .mx-slate,.mx-cut{display:none!important}
  .mx-head .ln>.mx-ri{transform:none}
  .mx-wipe>.mx-in{opacity:1}.mx-wipe>.mx-bar{display:none}
  .sec-h.mx-line{border-top-color:var(--hair)}.sec-h.mx-line::before{display:none}.sec-h.mx-line .lab{opacity:1;transform:none}
}

/* fuld skærm */
.mx-fsb{display:inline-flex;align-items:center;gap:8px}
.mx-fsb svg,.mx-fsc svg{width:12px;height:12px;fill:currentColor;flex:0 0 auto}
.mx-fsc{position:absolute;right:8px;bottom:8px;z-index:4;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid rgba(246,246,243,.5);background:rgba(16,17,18,.72);color:var(--panel);cursor:pointer;transition:background-color .2s,border-color .2s}
.mx-fsc:hover{background:var(--ink);border-color:var(--panel)}
.mx-fsc svg{width:14px;height:14px}
.mx-reel .mx-fsr{position:absolute;right:var(--gut);bottom:calc(6% - 18px);z-index:3;border:1px solid var(--panel);background:rgba(16,17,18,.72);color:var(--panel);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.mx-reel.full .mx-fsr{opacity:1;pointer-events:auto}
video:fullscreen{object-fit:contain;background:#000}
video:-webkit-full-screen{object-fit:contain;background:#000}
.mx-reel.still{height:auto}
.mx-reel.still .stk{position:relative;top:0;height:min(70vh,56vw)}
.mx-fsb{white-space:nowrap}
@media (max-width:480px){.mon-bar .mx-fsb span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mon-bar .mx-fsb{padding-inline:12px}.mon-bar .mx-fsb svg{width:14px;height:14px}}