/* ---------- TV on the desk ---------- */
.tv-hit{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tv-hit:focus-visible{outline:none}
.tv-label{position:absolute;transform:translateX(-50%);padding:.42em 1.15em;background:rgba(206,206,203,.94);color:#3b3b3b;font:400 34px/1.2 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s ease}
.tv-hit:hover+.tv-label,.tv-hit:focus-visible+.tv-label{opacity:1}
.intro--entering .tv-hit{pointer-events:none}
.intro--entering .tv-label{opacity:0!important}
.intro.is-tv-moving{will-change:transform}
.intro.is-tv-zoom{pointer-events:none}
.intro.is-tv-zoom .tv-label{opacity:0!important}
.tv-screen{position:absolute;pointer-events:none;visibility:hidden}
.tv-glare{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;mix-blend-mode:screen;filter:blur(1.4px);opacity:.82;
  background:radial-gradient(ellipse 13% 9% at 30% 62%,rgba(255,238,200,.78),rgba(255,214,150,.3) 45%,transparent 74%),
    radial-gradient(ellipse 30% 22% at 31% 61%,rgba(255,200,125,.15),transparent 72%),
    radial-gradient(ellipse 44% 5% at 47% 15%,rgba(230,236,250,.11),transparent 72%)}
.tv-static{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;opacity:0;mix-blend-mode:screen;filter:blur(.6px) contrast(1.05)}
.tv-noise,.tv-suck,.tv-black{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:none;z-index:10040}
.tv-noise.on,.tv-suck.on,.tv-black.on{display:block}
.tv-noise{opacity:0;image-rendering:auto;filter:blur(.5px);z-index:10041}
.tv-black{opacity:0;z-index:10042;--hole:120%;background:radial-gradient(circle at 50% 50%,transparent calc(var(--hole) - 30%),rgba(0,0,0,.85) var(--hole),#000 calc(var(--hole) + 25%))}

/* ---------- Tofi intro (title screen -> titles -> menu) ---------- */
.tofi{position:fixed;inset:0;z-index:10050;background:#000;color:#eee;font-family:ui-monospace,"Courier New",monospace;opacity:0;transition:opacity .45s ease;-webkit-user-select:none;user-select:none;overflow:hidden}
.tofi[hidden]{display:none}
.tofi.is-open{opacity:1}
.tofi button{border:0;background:none;color:#dedede;font:400 clamp(12px,1.15vw,17px)/1.6 ui-monospace,"Courier New",monospace;letter-spacing:.22em;padding:24px 28px;cursor:pointer;transition:color .3s}
.tofi button:hover{color:#fff}
.tofi button:focus-visible{outline:1px solid #aaa;outline-offset:8px}

.tofi-veil{position:absolute;inset:0}
.tofi-veil[hidden]{display:none}
.tofi-enter{position:absolute;inset:0;width:100%;height:100%;padding:0!important;overflow:hidden;isolation:isolate}
.tofi-enter:focus-visible{outline:1px solid #555!important;outline-offset:-5px!important}
.tofi-enter:before{content:"";position:absolute;inset:25% 12%;z-index:-1;opacity:.35;background:radial-gradient(ellipse at 50% 50%,#9b9b9b26 0%,#7777770b 27%,transparent 66%);filter:blur(24px);animation:tofi-mist 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes tofi-mist{0%{transform:translate(-5%) scale(1)}to{transform:translate(5%) scale(1.12)}}
.tofi-logo,.tofi-frag{position:absolute;left:50%;top:50%;width:min(140vw,950px);max-width:none;height:auto;aspect-ratio:16/9;translate:-50% -50%;mix-blend-mode:screen;pointer-events:none}
.tofi-logo{opacity:1;filter:contrast(1.18) brightness(1.08)}
.tofi-frag{display:none;opacity:0;transform:none;transition:transform 3.8s cubic-bezier(.16,.8,.24,1),opacity 1.1s ease,filter 3.8s ease}
/* one shard per letter of TOFI */
.tofi-frag--1{clip-path:inset(0 62.45% 0 0)}
.tofi-frag--2{clip-path:inset(0 45.15% 0 37.55%)}
.tofi-frag--3{clip-path:inset(0 28.75% 0 54.85%)}
.tofi-frag--4{clip-path:inset(0 0 0 71.25%)}
@media (hover:hover) and (pointer:fine){
  .tofi-frag{display:block}
  .tofi-enter.is-hovered .tofi-logo{opacity:0!important}
  .tofi-enter.is-hovered .tofi-frag{opacity:.94;filter:blur(.7px)}
  .tofi-enter.is-hovered .tofi-frag--1{transform:translate(-12px,-5px) rotate(-1.3deg)}
  .tofi-enter.is-hovered .tofi-frag--2{transform:translate(-4px,8px) rotate(.9deg)}
  .tofi-enter.is-hovered .tofi-frag--3{transform:translate(8px,-6px) rotate(-.8deg)}
  .tofi-enter.is-hovered .tofi-frag--4{transform:translate(16px,6px) rotate(1.2deg)}
}
.tofi-enter.is-starting .tofi-logo{opacity:var(--title-core,1);filter:contrast(1.18) brightness(var(--title-light,1.08))}
.tofi-enter.is-starting .tofi-frag{display:block;transition:none;opacity:var(--title-shards,0);filter:contrast(1.18) brightness(var(--title-light,1.08))}
.tofi-enter.is-starting .tofi-frag--1{transform:translate(calc(var(--title-break,0px)*-1),calc(var(--title-break,0px)*-.3))}
.tofi-enter.is-starting .tofi-frag--2{transform:translate(calc(var(--title-break,0px)*-.25),calc(var(--title-break,0px)*.6))}
.tofi-enter.is-starting .tofi-frag--3{transform:translate(calc(var(--title-break,0px)*.4),calc(var(--title-break,0px)*-.5))}
.tofi-enter.is-starting .tofi-frag--4{transform:translate(var(--title-break,0px),calc(var(--title-break,0px)*.35))}

.tofi-world{position:absolute;inset:0;width:100%;height:100%;display:block;visibility:hidden}
.tofi.is-titles .tofi-world{visibility:visible}
.tofi-fade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transition:opacity .9s ease}
.tofi.is-dark .tofi-fade{opacity:1}

.tofi-pause{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#000;opacity:0;transition:opacity .7s ease}
.tofi-pause[hidden]{display:none}
.tofi-pause.is-shown{opacity:1}
.tofi .tofi-again{color:#999;font-size:clamp(12px,1.15vw,17px);padding-top:12px}
.tofi .tofi-again:hover,.tofi .tofi-again:focus-visible{color:#eee}
.tofi-signal{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.tofi-signal[hidden]{display:none}

@media (prefers-reduced-motion:reduce){.tofi-enter:before{animation:none}.tofi-frag{display:none!important}}
@media (max-width:640px){.tofi button{font-size:clamp(10px,2.6vmin,12px);letter-spacing:.08em}}
.tofi-skip{position:absolute;top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));z-index:5;display:flex;align-items:center;gap:10px;padding:9px 14px 9px 15px;border:1px solid rgba(232,226,212,.42);background:rgba(8,8,8,.55);color:#e8e2d4;font:500 12px/1 ui-monospace,"Courier New",monospace;letter-spacing:.24em;cursor:pointer;opacity:0;transition:opacity .45s ease,background .2s ease,border-color .2s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.tofi-skip[hidden]{display:none}
.tofi-skip.is-shown{opacity:1}
.tofi-skip:hover,.tofi-skip:focus-visible{background:#e8e2d4;color:#0a0a0a;border-color:#e8e2d4;outline:none}
.tofi-skip i{font-style:normal;letter-spacing:0;transition:transform .2s ease}
.tofi-skip:hover i{transform:translateX(3px)}
/* under TOFI: what to do (fades in after the title settles, breathes, goes the moment it is pressed) */
.tofi-hint{position:absolute;left:50%;top:calc(50% + min(140vw,950px)*.152 + 22px);translate:-50% 0;display:flex;align-items:center;gap:14px;pointer-events:none;
  font:400 13px/1 ui-monospace,"Courier New",monospace;letter-spacing:.34em;text-indent:.34em;color:#c4c4c4;white-space:nowrap;
  opacity:0;animation:tofi-hint-in 1s ease 1.4s forwards,tofi-hint-breathe 2.6s ease-in-out 2.4s infinite}
.tofi-hint b{font-weight:400}
.tofi-hint i{display:block;width:34px;height:1px;background:currentColor;opacity:.6}
.tofi-hint-tap{display:none}
@media (hover:none),(pointer:coarse){.tofi-hint-click{display:none}.tofi-hint-tap{display:inline}}
.tofi-enter.is-hovered .tofi-hint{color:#fff}
.tofi-enter.is-starting .tofi-hint{animation:none;opacity:0;transition:opacity .2s ease}
@keyframes tofi-hint-in{to{opacity:1}}
@keyframes tofi-hint-breathe{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.tofi-hint{animation:tofi-hint-in .01s linear forwards}}