/* Alternate TGIF logo treatments, enabled with ?logo=1..4 (logos.js). Default page unchanged. */
.lg{position:absolute;inset:0;pointer-events:none;z-index:2;display:none}
body[data-logo] #wordmark{display:none}
body[data-logo="1"] .lg1,body[data-logo="2"] .lg2,body[data-logo="3"] .lg3,body[data-logo="4"] .lg4{display:block}
/* 1 chrome studio */
.lg1 .glow{position:absolute;left:50%;top:27%;width:150vw;height:40vh;transform:translate(-50%,-50%);
 background:radial-gradient(ellipse 45% 22% at 50% 50%,#fff8 0%,#ffd9a044 25%,#ff8a3a22 45%,transparent 70%);mix-blend-mode:screen;animation:pulse 6s ease-in-out infinite}
.lg1 .flare{position:absolute;left:50%;top:26.5%;width:70vw;height:3px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#8cc8ff,#fff,#8cc8ff,transparent);filter:blur(1px);box-shadow:0 0 24px #9cf;animation:pulse 6s ease-in-out infinite}
.lg1 .flare.b{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 30px 12px #fff,0 0 90px 40px #ffcf8a88,0 0 200px 80px #ff8a3a33}
.lg1 .orb{position:absolute;border-radius:50%;border:1px solid #9cf5;background:radial-gradient(#8cf2,transparent 70%)}
.lg1 .t{position:absolute;left:50%;top:13%;transform:translate(-50%,-50%) perspective(800px) rotateX(14deg);font:400 min(19vmin,170px)/1 Anton,Impact,sans-serif;letter-spacing:.08em;
 background:linear-gradient(180deg,#fdfeff 0%,#cfd8e6 30%,#6a7488 49%,#1e2330 51%,#8f9bb3 70%,#eef3fb 88%,#fff 100%);-webkit-background-clip:text;color:transparent;
 filter:drop-shadow(0 1px 0 #b8c1d2) drop-shadow(0 2px 0 #8790a3) drop-shadow(0 3px 0 #646c7e) drop-shadow(0 5px 0 #454b59) drop-shadow(0 8px 0 #2a2e38) drop-shadow(0 20px 22px #000) ;animation:in1 2.4s cubic-bezier(.2,.8,.2,1) both}
.lg1 .sub{position:absolute;left:50%;top:24%;transform:translateX(-50%);color:#cfe4ff;font:300 12px Inter;letter-spacing:1.2em;text-indent:1.2em;opacity:.8;animation:fade 3s 1.2s both}
@keyframes in1{from{opacity:0;transform:translate(-50%,-50%) perspective(800px) rotateX(14deg) scale(1.4);filter:blur(16px)}}
@keyframes pulse{50%{opacity:.75}}
/* 2 ring of light */
.lg2 svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.lg2 text{font:500 30px Orbitron,Inter,sans-serif;letter-spacing:22px;fill:#eaf6ff}
.lg2 .ring{fill:none;stroke:url(#rg);stroke-width:1.6}
/* 3 gold ident */
.lg3 .t{position:absolute;left:50%;top:14%;transform:translate(-50%,-50%);font:700 min(20vmin,180px)/1 Cinzel,Georgia,serif;letter-spacing:.06em;
 background:linear-gradient(180deg,#fff6d0 0%,#f4d27a 22%,#b9822b 48%,#6b4210 52%,#d9a64a 70%,#fff1b8 90%);-webkit-background-clip:text;color:transparent;
 filter:drop-shadow(0 1px 0 #f1c46a) drop-shadow(0 2px 0 #a8731f) drop-shadow(0 4px 0 #6f4612) drop-shadow(0 6px 0 #3e270a) drop-shadow(0 18px 24px #000) drop-shadow(0 0 40px #ffbf4a44);animation:in3 2.2s ease-out both}
.lg3 .shine{position:absolute;inset:0;-webkit-background-clip:text;background:linear-gradient(110deg,transparent 40%,#fffbe8 50%,transparent 60%) -150% 0/250% 100% no-repeat;color:transparent;filter:none;animation:sweep 4.5s 1.4s ease-in-out infinite}
.lg3 .rule{position:absolute;left:50%;top:25.5%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;color:#e8c77a;font:600 12px Cinzel,serif;letter-spacing:.7em;text-indent:.7em;animation:fade 3s 1s both}
.lg3 .rule:before,.lg3 .rule:after{content:"";width:120px;height:1px;background:linear-gradient(90deg,transparent,#e8c77a)}.lg3 .rule:after{transform:scaleX(-1)}
.lg3 .beams{position:absolute;left:50%;bottom:0;width:200vw;height:120vh;transform:translateX(-50%);background:repeating-conic-gradient(from 0deg at 50% 100%,#ffd48a10 0 2deg,transparent 2deg 9deg);mask:linear-gradient(transparent,#000 40%,transparent 75%);-webkit-mask:linear-gradient(transparent,#000 40%,transparent 75%);animation:fade 3s both}
@keyframes sweep{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
@keyframes in3{from{opacity:0;letter-spacing:.4em;filter:blur(10px)}}
/* 4 neon 90s */
.lg4 .wrap{position:absolute;left:50%;top:14%;transform:translate(-50%,-50%) rotate(-6deg);text-align:center}
.lg4 .t{font:400 min(18vmin,160px)/1 Bungee,Impact,sans-serif;font-style:italic;letter-spacing:.04em;
 background:linear-gradient(180deg,#fff 0%,#9ff 25%,#2a7bff 48%,#fff 50%,#ff3ec8 75%,#ffe36b 100%);-webkit-background-clip:text;color:transparent;
 filter:drop-shadow(3px 3px 0 #ff2bd6) drop-shadow(6px 6px 0 #6a1bff) drop-shadow(0 0 18px #ff3ec8aa) drop-shadow(0 0 40px #18e0ff77);animation:flick 4s steps(1) both}
.lg4 .script{display:block;margin:-.35em 0 0 38%;font:400 min(7vmin,60px)/1 Pacifico,cursive;color:#fff;transform:rotate(-4deg);
 text-shadow:0 0 6px #fff,0 0 14px #18e0ff,0 0 30px #18e0ff,0 0 60px #18e0ff;animation:buzz 3s infinite}
.lg4 .grid{position:absolute;left:0;right:0;bottom:0;height:34vh;background:linear-gradient(#ff3ec822 1px,transparent 1px) 0 0/100% 40px,linear-gradient(90deg,#18e0ff22 1px,transparent 1px) 0 0/60px 100%;transform:perspective(300px) rotateX(60deg);transform-origin:bottom;mask:linear-gradient(transparent,#000);-webkit-mask:linear-gradient(transparent,#000)}
.lg4 .sq{position:absolute;width:26px;height:26px;border:3px solid #ffe36b;transform:rotate(20deg);box-shadow:0 0 12px #ffe36b}
.lg4 .sq.z{border:none;width:44px;height:6px;background:#18e0ff;box-shadow:0 0 12px #18e0ff;transform:rotate(-30deg)}
@keyframes flick{0%{opacity:0}8%{opacity:1}10%{opacity:.2}12%,100%{opacity:1}}
@keyframes buzz{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:1}97%{opacity:.6}}

/* logo 5: 3D in WebGL; this CSS version only shows if WebGL fails */
body[data-logo="5"] #intro.nogl .lg5,body[data-logo="5"] #intro.no3dlogo .lg5{display:block}
.lg5{position:absolute;left:50%;top:14%;transform:translateX(-50%);pointer-events:none}
.lg5 .t{font:900 min(22vmin,190px)/1 'Arial Black',Impact,sans-serif;letter-spacing:-.02em;background:linear-gradient(100deg,#7a4dff,#2fd8c8 30%,#b8ff5a 45%,#ffcf3a 60%,#ff4fd8 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #3a2a6a) drop-shadow(0 0 24px rgba(180,120,255,.5))}

/* logo 6: poster-style hero */
body[data-logo="6"] #intro,body[data-logo="7"] #intro,body[data-logo="8"] #intro{background:radial-gradient(60% 45% at 22% 22%,rgba(170,60,140,.35),transparent 70%),radial-gradient(50% 40% at 30% 30%,rgba(40,120,220,.35),transparent 70%),radial-gradient(120% 90% at 50% 100%,#0d2a66 0%,#06102b 45%,#02040c 100%)}
body[data-logo="6"] #intro.nogl .lg5,body[data-logo="7"] #intro.nogl .lg5,body[data-logo="8"] #intro.nogl .lg5{display:block}
body[data-logo="6"] #enter,body[data-logo="7"] #enter,body[data-logo="8"] #enter{border:0;padding:10px 4px;font:300 12px Inter,sans-serif;letter-spacing:.7em;text-indent:.7em;color:#fff;text-shadow:0 0 18px rgba(0,0,0,.8);animation:fade 2s 2.4s both}
body[data-logo="6"] #enter::after,body[data-logo="7"] #enter::after,body[data-logo="8"] #enter::after{content:'';position:absolute;left:50%;bottom:0;height:1px;width:40%;background:#fff;transform:translateX(-50%);opacity:.6;transition:width .5s,opacity .5s}
body[data-logo="6"] #enter:hover,body[data-logo="7"] #enter:hover,body[data-logo="8"] #enter:hover{background:transparent;color:#fff;box-shadow:none;letter-spacing:.8em}
body[data-logo="6"] #enter:hover::after,body[data-logo="7"] #enter:hover::after,body[data-logo="8"] #enter:hover::after{width:100%;opacity:1}
body[data-logo="7"] #enter.subtle,body[data-logo="8"] #enter.subtle{font-size:10px;letter-spacing:.55em;opacity:.55;padding:6px 2px;margin-bottom:3.5vh}
body[data-logo="7"] #enter.subtle:hover,body[data-logo="8"] #enter.subtle:hover{opacity:1}
body[data-logo="8"] #intro{background:#000}
body[data-logo="9"] #intro{background:#000}
body[data-logo="9"] #intro.nogl .lg5{display:block}
/* logo 10: user composite + live 3D globe */
body[data-logo="10"] #intro{background:#000}
body[data-logo="10"] #intro .lg5,body[data-logo="10"] #wordmark,body[data-logo="10"] #globeFb{display:none!important}
body[data-logo="10"] #space{opacity:0;transition:opacity 1s ease}
body[data-logo="10"].h10go #space{opacity:1}
.h10{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;--mx:0;--my:0}
.h10 .art{position:relative;width:min(100vw,calc(100vh*1.339));aspect-ratio:2400/1792;container-type:inline-size;transition:transform 1.1s cubic-bezier(.6,0,.2,1),opacity 1s,filter 1s;transform-origin:49.9% 69.4%}
.h10 .breath{position:absolute;inset:0;animation:h10b 9s 3s ease-in-out infinite alternate;transform-origin:50% 60%}
.h10 .let{position:absolute;inset:0;opacity:0}
.h10 .breath{translate:calc(var(--mx)*-9px) calc(var(--my)*-6px)}
.h10 .earth{position:absolute;inset:0;opacity:0;transform-origin:49.92% 69.36%}
.h10 .earth img{position:absolute;inset:0;width:100%;height:100%;display:block;clip-path:ellipse(20.3% 27.2% at 49.92% 69.36%)}
.h10go .h10 .earth{animation:h10e 1.2s 1.05s cubic-bezier(.2,.8,.2,1) both}
.h10 .rim{position:absolute;left:30%;top:42.69%;width:39.83%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 3.5cqw .8cqw rgba(90,190,255,.35),inset 0 0 2.2cqw rgba(120,210,255,.28);animation:h10r 5s 2.3s ease-in-out infinite both}
@keyframes h10e{from{opacity:0;transform:translateY(6%) scale(.8)}to{opacity:1;transform:none}}
@keyframes h10r{0%,100%{opacity:.4}50%{opacity:1}}
.h10 .let img{position:absolute;inset:0;width:100%;height:100%;display:block}
.h10go .h10 .let{animation:h10let 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
.h10 .shine{position:absolute;inset:0;mix-blend-mode:screen;-webkit-mask:url(assets/hero10-mask.png?v=1) 0 0/100% 100% no-repeat;mask:url(assets/hero10-mask.png?v=1) 0 0/100% 100% no-repeat;
 background:linear-gradient(112deg,transparent 0 41%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.95) 49.5%,rgba(255,250,235,1) 50%,rgba(255,255,255,.95) 50.5%,rgba(255,255,255,.18) 55%,transparent 59% 100%) no-repeat;background-size:300% 100%;background-position:130% 0}
.h10go .h10 .shine{animation:h10s 13.5s 1s ease-in-out infinite}
.h10 .flash{position:absolute;inset:0;mix-blend-mode:screen;-webkit-mask:url(assets/hero10-mask.png?v=1) 0 0/100% 100% no-repeat;mask:url(assets/hero10-mask.png?v=1) 0 0/100% 100% no-repeat;background:#fff;opacity:0}
.h10go .h10 .flash{animation:h10f .9s .95s ease-out both}
.h10 .gl{position:absolute;width:5cqw;aspect-ratio:1;translate:-50% -50%;mix-blend-mode:screen;opacity:0;
 background:radial-gradient(circle,#fff 0 4%,rgba(255,255,255,.5) 9%,transparent 30%),linear-gradient(90deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%) center/100% 4% no-repeat,linear-gradient(0deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%) center/4% 100% no-repeat}
.h10go .h10 .gl{animation:h10g 4.8s var(--d) ease-in-out infinite}
.h10 .globe{position:absolute;left:24.92%;top:35.9%;width:50%;height:66.96%;translate:calc(var(--mx)*-13px) calc(var(--my)*-9px)}
.h10 .globe canvas{width:100%;height:100%;display:block}
body[data-logo="10"] #enter{position:absolute;left:50%;top:93.1%;transform:translate(-50%,-50%);margin:0;pointer-events:auto;white-space:nowrap;width:21cqw;height:3.6cqw;padding:0;font-size:max(7px,1.2cqw);letter-spacing:.55em;text-indent:.55em;background:rgba(0,0,0,.35);backdrop-filter:blur(3px);opacity:0;animation:none;transition:background .4s,color .4s,box-shadow .4s,letter-spacing .4s,opacity .8s}
.h10go #enter{opacity:1!important;transition-delay:0s,0s,0s,0s,2.3s!important}
body[data-logo="10"] #enter:hover{background:rgba(255,255,255,.92);color:#000;box-shadow:0 0 30px rgba(140,220,255,.6),0 0 80px rgba(160,120,255,.35);letter-spacing:.65em}
.h10.zoom .art{transform:scale(7);opacity:0;filter:blur(6px)}
@keyframes h10let{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@keyframes h10b{from{transform:scale(1)}to{transform:scale(1.02)}}
@keyframes h10s{0%{background-position:130% 0}15%,100%{background-position:-30% 0}}
@keyframes h10f{0%{opacity:0}25%{opacity:.55}100%{opacity:0}}
@keyframes h10g{0%,70%,100%{opacity:0;transform:scale(.3) rotate(0)}82%{opacity:1;transform:scale(1) rotate(45deg)}}
body.shot #intro *{animation-delay:-30s!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.h10 *{animation:none!important}.h10 .let,.h10 .earth{opacity:1}.h10 .breath{translate:none}.h10 .gl,.h10 .flash{display:none}}
/* logo 10 ?scroll=1 */
body.h10scroll #intro{display:block;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}
body.h10scroll #intro::-webkit-scrollbar{display:none}
body.h10scroll .stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
body.h10scroll .spacer{height:320vh}
.stage .gal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .h10 .art{transition:none}
.stage .orbs{position:absolute;inset:0;opacity:0;z-index:4}
.orb{position:absolute;transform:translate(-50%,-50%);background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;--c:#b86bff;animation:h10bob 5s var(--d) ease-in-out infinite}
.orb .ball{width:clamp(84px,10vw,150px);aspect-ratio:1;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 2px rgba(255,255,255,.4),0 0 30px var(--c),0 0 80px color-mix(in srgb,var(--c) 55%,transparent),inset 0 0 30px rgba(0,0,0,.6);transition:box-shadow .4s,transform .4s;animation:h10pulse 4s var(--d) ease-in-out infinite}
.orb .lbl{font:600 clamp(9px,.9vw,12px) Inter,sans-serif;letter-spacing:.35em;text-indent:.35em;text-shadow:0 0 12px var(--c),0 0 3px #000;white-space:nowrap}
.orb:hover .ball,.orb:focus-visible .ball{transform:scale(1.1);box-shadow:0 0 0 2px #fff,0 0 50px var(--c),0 0 140px var(--c)}
@keyframes h10bob{0%,100%{translate:0 -5px}50%{translate:0 5px}}
@keyframes h10pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
.stage .enter2{white-space:nowrap;position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);z-index:5;opacity:0;background:rgba(0,0,0,.35);color:#fff;border:1px solid #ffffff66;padding:14px 38px;font:300 13px Inter,sans-serif;letter-spacing:.6em;text-indent:.6em;cursor:pointer;transition:background .4s,color .4s,box-shadow .4s}
.stage .enter2:hover{background:#fff;color:#000;box-shadow:0 0 30px rgba(140,220,255,.6),0 0 80px rgba(160,120,255,.35)}
.stage .hint{position:absolute;right:3vw;bottom:3vh;z-index:5;font:300 10px Inter,sans-serif;letter-spacing:.5em;text-indent:.5em;color:#fff9;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.stage .hint i{width:1px;height:22px;background:linear-gradient(#fff,transparent);animation:h10h 1.8s ease-in-out infinite}
@keyframes h10h{0%{transform:translateY(-6px);opacity:0}50%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.stage.out .gal,.stage.out .orbs,.stage.out .enter2{transition:opacity .7s;opacity:0!important}
@media(max-width:700px){.stage .enter2{padding:11px 26px;font-size:11px}}
@media (prefers-reduced-motion:reduce){.orb,.orb .ball,.stage .hint i{animation:none}}
/* satellite */
.h10 .sat{position:absolute;width:5.5cqw;min-width:30px;opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(0 0 4px rgba(120,220,255,.6))}
.h10 .sat svg{display:block;overflow:visible}
.h10 .sat .led{animation:satled 1.4s steps(1) infinite}
@keyframes satled{0%{opacity:1}50%{opacity:.1}}
.h10 .sat .beam{position:absolute;left:50%;top:60%;height:2px;transform-origin:0 50%;opacity:0;background:linear-gradient(90deg,rgba(80,240,255,.9),rgba(255,80,200,.5),transparent);filter:blur(1px)}
.h10 .sat.tx .beam{animation:satbeam 2.2s ease-out}
@keyframes satbeam{0%{opacity:0}15%{opacity:.8}100%{opacity:0}}
.h10 .sat .ring{position:absolute;left:50%;top:60%;width:100%;aspect-ratio:1;margin:-50% 0 0 -50%;border-radius:50%;border:1.5px solid rgba(90,240,255,.85);box-shadow:0 0 8px rgba(255,90,210,.6);opacity:0;animation:satring 1.8s ease-out forwards}
@keyframes satring{0%{opacity:.9;scale:.2}100%{opacity:0;scale:2.4}}