/* Tir Anferth - home page trailer intro (T7-7). Everything is scoped under #ti-intro / .ti-* so the site CSS is untouched. */
html.ti-on{background:#080e15}
html.ti-on body>*:not(#ti-intro){visibility:hidden}
html.ti-lock,html.ti-lock body{overflow:hidden}
#ti-intro{position:fixed;inset:0;z-index:100000;background:#080e15;color:#d5d9de;font-family:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;overflow:hidden}
#ti-intro *{box-sizing:border-box;margin:0;padding:0}
#ti-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ti-dim{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(8,14,21,.2),rgba(8,14,21,.92));opacity:0;pointer-events:none}
.ti-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(4,8,13,.7) 100%)}
.ti-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:ti-gr .9s steps(6) infinite}
@keyframes ti-gr{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.ti-bar{position:absolute;left:0;right:0;height:9vh;background:#03070b;z-index:5}
.ti-bar-t{top:0}.ti-bar-b{bottom:0}
.ti-skip{position:absolute;right:3vw;bottom:calc(4.5vh - 8px);z-index:6;background:none;border:0;font:inherit;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#bdb8ab;opacity:.25;cursor:pointer;padding:6px 8px;transition:opacity .3s}
.ti-skip:hover,.ti-skip:focus-visible{opacity:.9;color:#ffd08f;outline:none}
.ti-cards{position:absolute;inset:9vh 0;z-index:3}
.ti-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6vw;opacity:0;visibility:hidden;transition:opacity .5s linear,visibility 0s .5s}
.ti-card.on{opacity:1;visibility:visible;transition:opacity .35s linear}
.ti-big{font-family:"Young Serif",Georgia,"Times New Roman",serif;font-weight:400;color:#ece6d8;font-size:clamp(46px,9vw,150px);line-height:1;letter-spacing:.01em;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.ti-title .ti-big{font-size:clamp(64px,13vw,220px);letter-spacing:.06em;text-transform:uppercase}
.ti-sub{margin-top:28px;font-size:clamp(16px,1.7vw,24px);color:#d5d9de;letter-spacing:.04em;max-width:38em}
.ti-sub.n{max-width:30em;color:#bdb8ab}
.ti-final .ti-sub{font-family:"Young Serif",Georgia,serif;font-size:clamp(15px,2.6vw,38px);color:#ffd08f;letter-spacing:.01em;margin-top:22px;max-width:90vw}
.ti-line{font-family:"Young Serif",Georgia,serif;font-size:clamp(28px,4.6vw,76px);line-height:1.15;color:#ece6d8;max-width:20em;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.ti-credit{margin-top:22px;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#9fabb8}
.ti-chat{font-family:"Young Serif",Georgia,serif;font-size:clamp(17px,2.1vw,30px);line-height:1.5;max-width:30em;color:#ece6d8}
.ti-chat .who{color:#f2a65a;font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:.6em;letter-spacing:.16em;text-transform:uppercase;vertical-align:.2em}
.ti-w{display:inline-block;white-space:nowrap}
.ti-ch{display:inline-block;opacity:0;transform:translateY(.45em)}
.on .ti-ch{opacity:1;transform:none;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*var(--ts,44ms) + var(--d,0ms))}
.on .ti-big .ti-ch,.on .ti-kname .ti-ch{transition-delay:calc(var(--i)*var(--tb,110ms) + var(--d,0ms))}
.ti-stats .ti-cut{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(1.18);transition:opacity .15s linear,transform .8s cubic-bezier(.1,.9,.2,1)}
.ti-stats .ti-cut.on{opacity:1;transform:scale(1)}
.ti-stats b{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(110px,26vw,420px);line-height:1.12;padding-bottom:.04em;color:#ffd08f;text-shadow:0 0 80px rgba(242,166,90,.35)}
.ti-stats span{margin-top:clamp(22px,3.4vw,52px);font-size:clamp(14px,1.8vw,26px);letter-spacing:.34em;text-transform:uppercase;color:#ece6d8}
.ti-k{color:var(--k)}
.ti-k .ti-sigil{width:clamp(110px,16vw,240px);height:auto;stroke-dasharray:420;stroke-dashoffset:420;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--k) 55%,transparent))}
.ti-k.on .ti-sigil{stroke-dashoffset:0;transition:stroke-dashoffset 2s cubic-bezier(.4,.1,.2,1)}
.ti-kname{margin-top:26px;font-size:clamp(46px,9vw,140px);color:var(--k2);font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1;text-transform:uppercase;letter-spacing:.08em}
.ti-motto{margin-top:20px;font-family:"Young Serif",Georgia,serif;font-size:clamp(18px,2.6vw,38px);color:#ece6d8}
.ti-k::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--k) 22%,transparent),transparent 62%)}

/* T7-9: late beats keep light copy but sit on a dark local scrim with a tight dark edge, so they read over the dawn plateau */
.ti-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 70% 46% at 50% 50%,rgba(6,10,16,.62),rgba(6,10,16,.3) 55%,transparent 80%)}
.ti-dark .ti-big,.ti-dark .ti-line{color:#f6efdd;text-shadow:0 0 3px rgba(5,8,12,.85),0 2px 26px rgba(5,8,12,.9)}
.ti-dark .ti-sub,.ti-dark .ti-sub.n{color:#f1ead9;font-weight:500;text-shadow:0 0 3px rgba(5,8,12,.9),0 1px 18px rgba(5,8,12,.95)}
.ti-dark.ti-final .ti-sub{color:#ffd08f}
.ti-dark .ti-credit{color:#d9d2c2;text-shadow:0 0 3px rgba(5,8,12,.9),0 1px 14px rgba(5,8,12,.9)}
/* T7-10: late sub lines drop onto the embankment (island) instead of running across the town */
.ti-dark .ti-sub,.ti-dark .ti-sub.n{position:absolute;left:50%;top:67%;transform:translateX(-50%);width:min(34em,88vw);max-width:none;margin:0}
.ti-dark.ti-final .ti-sub{width:min(40em,92vw)}
.ti-dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 15% at 50% 73%,rgba(6,10,16,.6),rgba(6,10,16,.28) 60%,transparent 85%)}