/* 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}