*{box-sizing:border-box}
:root{--yellow:#f5b900;--black:#000;--white:#fff}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000;font-family:Arial,Helvetica,sans-serif}
.intro{position:relative;width:100%;height:100%;min-height:520px;isolation:isolate;background:#000}
#lightning{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:
radial-gradient(circle at center,transparent 18%,rgba(0,0,0,.44) 66%,#000 112%),
repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px)}
.impact-flash{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;background:
radial-gradient(circle at 50% 47%,#fff 0 4%,#fff4a0 8%,rgba(245,185,0,.95) 18%,rgba(245,185,0,.18) 40%,transparent 68%);mix-blend-mode:screen}
.impact-flash.active{animation:impact .9s ease-out forwards}
@keyframes impact{0%{opacity:0;transform:scale(.65)}8%{opacity:1;transform:scale(1.05)}18%{opacity:.18}28%{opacity:.95}100%{opacity:0;transform:scale(1.5)}}
.brand{position:absolute;z-index:4;left:50%;top:50%;width:min(86vw,520px);text-align:center;opacity:0;transform:translate(-50%,-46%) scale(.62);filter:blur(18px);pointer-events:none}
.brand.visible{animation:reveal 1.15s cubic-bezier(.16,.9,.24,1.1) forwards;pointer-events:auto}
@keyframes reveal{0%{opacity:0;transform:translate(-50%,-46%) scale(.62);filter:blur(18px)}55%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}
.logo{display:block;width:min(68vw,390px);max-height:58vh;object-fit:contain;margin:0 auto 24px;filter:
drop-shadow(0 0 12px rgba(245,185,0,.72)) drop-shadow(0 0 52px rgba(245,185,0,.28));animation:logoPulse 3s ease-in-out infinite}
@keyframes logoPulse{0%,100%{filter:drop-shadow(0 0 10px rgba(245,185,0,.55)) drop-shadow(0 0 35px rgba(245,185,0,.18))}50%{filter:drop-shadow(0 0 20px rgba(245,185,0,.9)) drop-shadow(0 0 65px rgba(245,185,0,.34))}}
.enter-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:210px;padding:17px 30px;border:2px solid var(--yellow);border-radius:6px;color:#050505;background:linear-gradient(#ffd63a,#e9a900);text-decoration:none;font-size:1.05rem;font-weight:900;letter-spacing:5px;box-shadow:0 0 22px rgba(245,185,0,.42);transition:.2s;animation:buttonPulse 1.8s ease-in-out infinite}
.enter-button:hover,.enter-button:focus-visible{transform:translateY(-3px) scale(1.035);background:#ffe45b;box-shadow:0 0 34px rgba(245,185,0,.7);outline:none}
.arrow{font-size:1.45rem;transition:transform .2s}.enter-button:hover .arrow{transform:translateX(5px)}
@keyframes buttonPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,185,0,.32),0 0 22px rgba(245,185,0,.36)}50%{box-shadow:0 0 0 13px rgba(245,185,0,0),0 0 30px rgba(245,185,0,.5)}}
.skip-button{position:fixed;z-index:5;top:22px;right:22px;padding:10px 14px;border:1px solid rgba(255,255,255,.22);border-radius:4px;color:rgba(255,255,255,.65);background:rgba(0,0,0,.36);backdrop-filter:blur(8px);cursor:pointer}
.sound-note{position:fixed;z-index:5;left:50%;bottom:18px;margin:0;transform:translateX(-50%);color:rgba(255,255,255,.34);font-size:.7rem;letter-spacing:1px;white-space:nowrap;transition:opacity .35s}.sound-note.hidden{opacity:0}
@media(max-height:680px){.logo{width:min(45vh,310px);margin-bottom:14px}.enter-button{padding:13px 25px}}
@media(prefers-reduced-motion:reduce){.brand{opacity:1;transform:translate(-50%,-50%);filter:none;pointer-events:auto}.logo,.enter-button{animation:none}#lightning,.impact-flash,.skip-button,.sound-note{display:none}}