*{box-sizing:border-box}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif}
html,body{margin:0;min-height:100%;background:#080b11}
body{color:#fff}
.hero{min-height:100svh;position:relative;isolation:isolate;display:grid;place-items:center;padding:30px 18px;overflow:hidden}
.stadium,.shade{position:absolute;inset:0;pointer-events:none}
.stadium{z-index:-2;background:url("assets/stadium.png") center/cover no-repeat}
.shade{z-index:-1;background:linear-gradient(110deg,rgba(48,5,6,.10),rgba(3,9,17,.12)),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.20))}
.content{width:min(100%,760px);text-align:center;padding:clamp(39px,6vw,65px) clamp(21px,5vw,55px) clamp(38px,5vw,53px);border-radius:32px;position:relative;isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(255,211,57,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 6px 32px rgba(0,0,0,.06),0 0 30px rgba(255,209,0,.10);animation:rise .7s ease both}
.content:before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,221,91,.16);border-radius:25px;pointer-events:none}
.content:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:transparent;z-index:-1}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:13px;direction:ltr;color:#fff4c8;font:700 clamp(9px,1.4vw,12px)/1.5 Georgia,serif;letter-spacing:3.1px;text-shadow:0 0 11px rgba(255,211,0,.65)}
.dot{width:5px;height:5px;flex:none;border-radius:50%;background:#ffd400;box-shadow:0 0 12px #ffdc00}
/* Bright white-and-yellow premium title: crisp luminous center with golden accents. */
h1{
  font:bold clamp(50px,10.2vw,110px)/1.15 Arial,Helvetica,sans-serif;
  letter-spacing:1px;margin:24px 0 35px;white-space:nowrap;
  position:relative;isolation:isolate;
  color:#fff;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 38%,#fffde3 61%,#ffe837 100%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.98))
         drop-shadow(0 0 11px rgba(255,255,218,.87))
         drop-shadow(0 0 23px rgba(255,230,40,.75));
  animation:title-entrance 1.15s cubic-bezier(.18,.73,.2,1) both;
}
h1::after{
  content:attr(data-title);position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 27%,rgba(255,255,255,0) 39%,#fff89a 46%,#fff 50%,#fffbd2 54%,transparent 65%);
  background-size:250% 100%;background-position:110% 50%;
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 7px rgba(255,245,125,.95));
  animation:yellow-pass 3.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes title-entrance{0%{opacity:0;filter:blur(11px);transform:translateY(25px) scale(.92)}65%{opacity:1;filter:blur(0);transform:translateY(-3px) scale(1.02)}100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}
@keyframes yellow-pass{0%{background-position:110% 50%}100%{background-position:-120% 50%}}
@keyframes glow-breathe{0%,100%{opacity:.9;filter:drop-shadow(0 0 5px rgba(255,235,80,.75))}50%{opacity:1;filter:drop-shadow(0 0 15px rgba(255,206,0,.95))}}
.links{display:flex;direction:ltr;justify-content:center;align-items:center;gap:clamp(16px,3.5vw,27px)}
.social{position:relative;display:block;width:82px;height:82px;flex:none;overflow:hidden;border-radius:50%;background:#15171b;border:2px solid rgba(255,255,255,.64);box-shadow:0 9px 25px #0009,0 0 16px #ffd40055,inset 0 0 0 2px #ffffff13;transition:transform .25s,border-color .25s,box-shadow .25s}
.social-photo,.social-overlay{position:absolute;inset:0;border-radius:inherit}
.social-photo{background:url("assets/car-button.png") center/cover no-repeat;filter:contrast(1.12) saturate(.95);transition:transform .3s}
.social-overlay{background:linear-gradient(150deg,#ffffff17,#00000055)}
.social:hover,.social:focus-visible{transform:translateY(-5px) scale(1.08);border-color:#ffe05b;box-shadow:0 15px 30px #000c,0 0 22px #ffdd0088;outline:none}
.social:focus-visible{outline:2px solid #fff;outline-offset:5px}
.social:hover .social-photo{transform:scale(1.12)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:550px){.content{border-radius:25px;padding:42px 15px 43px;border-width:1px}.content:before{border-radius:19px}.eyebrow{letter-spacing:1.6px;gap:9px}h1{font-size:clamp(42px,12vw,69px);letter-spacing:0;margin:22px 0 32px}.social{width:67px;height:67px}.links{gap:18px}}
@media(max-width:360px){.social{width:60px;height:60px}.links{gap:13px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

@media(prefers-reduced-motion:reduce){h1{opacity:1;filter:none;transform:none}h1::after{animation:none;background:none}}

/* Minimal floating audio controls */
.music-player{margin:29px auto 0;display:flex;align-items:center;justify-content:center;gap:12px;direction:ltr;width:max-content;max-width:100%;padding:10px 13px;border-radius:100px;background:rgba(16,18,20,.21);border:1px solid rgba(255,246,162,.46);box-shadow:0 0 20px rgba(255,215,38,.16),inset 0 1px 0 rgba(255,255,255,.12)}
.music-player button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,240,135,.38);background:rgba(18,19,21,.55);color:#fffceb;font-size:23px;font-weight:700;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 12px rgba(255,227,73,.16);transition:background .2s,box-shadow .2s,transform .2s}
.music-player button:hover,.music-player button:focus-visible{background:rgba(235,189,24,.42);box-shadow:0 0 18px rgba(255,220,30,.48);transform:scale(1.07);outline:none}
.music-player #playPause{background:rgba(255,229,54,.87);color:#101010;border-color:#fff3a3}
.volume-meter{width:52px;height:4px;background:rgba(255,255,255,.25);border-radius:10px;overflow:hidden}
.volume-meter #level{width:50%;height:100%;background:linear-gradient(90deg,#fff,#ffe537);border-radius:inherit;transition:width .15s}
@media(max-width:550px){.music-player{gap:9px;padding:8px 10px;margin-top:26px}.music-player button{width:36px;height:36px;font-size:21px}.volume-meter{width:35px}}

/* Fixed centered music controls above the main glass block */
.music-player{position:absolute;top:clamp(14px,3vh,27px);left:50%;transform:translateX(-50%);z-index:5;margin:0;background:rgba(8,12,19,.34);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-color:rgba(255,234,116,.67);box-shadow:0 6px 28px rgba(0,0,0,.25),0 0 17px rgba(255,223,77,.19)}
.music-player button:hover,.music-player button:focus-visible{transform:scale(1.08)}
@media(max-height:650px){.hero{padding-top:95px;padding-bottom:20px}}
@media(max-width:550px){.music-player{top:13px;margin-top:0}.hero{padding-top:93px;padding-bottom:24px}}

/* Sound mute button icon */
#mute .volume-icon { display:block; margin:auto; }
#mute .sound-cross { display:none; }
#mute.is-muted .sound-cross { display:inline; }
#mute.is-muted .sound-waves { display:none; }

/* Final cinematic treatment: preserves all existing layout and interactions. */
.shade{
  background:
    linear-gradient(180deg,rgba(1,3,10,.32) 0%,rgba(2,4,11,.37) 47%,rgba(1,4,9,.43) 100%),
    radial-gradient(ellipse at 50% 48%,rgba(2,5,12,.05) 10%,rgba(0,0,0,.23) 100%);
}
.content{
  background:rgba(2,5,12,.065);
  border-color:rgba(255,229,103,.52);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 28px rgba(255,207,32,.035),
    0 15px 60px rgba(0,0,0,.23),
    0 0 25px rgba(255,217,51,.22),
    0 0 65px rgba(255,214,55,.09);
}
.content:before{border-color:rgba(255,238,152,.22)}
.music-player{
  background:rgba(6,9,16,.65);
  border-color:rgba(255,236,126,.8);
  box-shadow:0 8px 34px rgba(0,0,0,.48),0 0 13px rgba(255,229,90,.36),0 0 34px rgba(255,210,20,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
h1{
  filter:drop-shadow(0 0 4px rgba(255,255,255,.94))
         drop-shadow(0 0 13px rgba(255,255,218,.88))
         drop-shadow(0 0 27px rgba(255,227,33,.70));
}
.social{
  box-shadow:0 10px 28px rgba(0,0,0,.66),0 0 17px rgba(255,228,69,.37),inset 0 0 0 2px rgba(255,255,255,.08);
}