:root{
  --bg-dim: 0.60;
  --glass-blur: 22px;
  --glass-sat: 180%;
  --glass-alpha: 0.10;
  --glass-stroke: rgba(255,255,255,.22);
  --glass-stroke-strong: rgba(255,255,255,.35);
  --glass-shadow: 0 30px 90px rgba(0,0,0,.55);
  --glass-radius: 26px;
  --accent: rgba(0, 166, 255, .85);
  --accent2: rgba(255, 0, 153, .55);
  --ring: rgba(255,255,255,.28);
  --ring2: rgba(255,255,255,.10);
}

:root{--vh:100vh}
@supports (height: 100lvh){:root{--vh:100lvh}}

html,body{height:100%;margin:0;overflow:hidden}
body{
  margin:0;
  background:#000;
  overflow-x:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

#bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--vh);
  z-index:0;
  background:#000;
  pointer-events:none;
  overflow:hidden;
}

#bg-fallback{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--vh);
  background:#000 url("../img/fallback.jpg") center/cover no-repeat;
  filter:saturate(110%) contrast(105%);
  transform:scale(1.03) translateZ(0);
}

#bg-video{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--vh);
  min-width:100vw;
  min-height:var(--vh);
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition: opacity 600ms ease;
  transform: scale(1.02) translateZ(0);
}

#bg-video.is-ready{opacity:1}

#bg-dim{
  position:fixed;
  inset:0;
  width:100vw;
  height:var(--vh);
  background: rgba(0,0,0,var(--bg-dim));
}

#bg-grain{
  position:fixed;
  inset:-20%;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/></filter><rect width="240" height="240" filter="url(%23n)" opacity=".35"/></svg>');
  mix-blend-mode: overlay;
  opacity:.18;
  pointer-events:none;
  transform: rotate(8deg) translateZ(0);
}

.glass-card{
  position:relative;
  border-radius:var(--glass-radius);
  background: linear-gradient(180deg, rgba(255,255,255,var(--glass-alpha)) 0%, rgba(255,255,255, calc(var(--glass-alpha) * .7)) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--glass-stroke);
  overflow:hidden;
}

.glass-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 300px at 20% 0%, rgba(255,255,255,.30), transparent 55%),
    radial-gradient(700px 240px at 85% 10%, rgba(0,166,255,.18), transparent 55%),
    radial-gradient(900px 320px at 80% 120%, rgba(255,0,153,.14), transparent 60%);
  pointer-events:none;
  opacity:.9;
}

.glass-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--glass-radius);
  border: 1px solid rgba(255,255,255,.18);
  pointer-events:none;
  mask: linear-gradient(#000, transparent 85%);
  opacity:.9;
}

.glass-highlight{
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), transparent 45%);
  transform: rotate(-12deg);
  pointer-events:none;
  opacity:.55;
}

.name{
  letter-spacing:-0.02em;
  text-shadow: 0 8px 30px rgba(0,0,0,.45);
}

.punchline{
  color: rgba(255,255,255,.82);
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}

.glass-rule{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  opacity:.9;
}

.avatar-wrap{
  width: 112px;
  height: 112px;
  border-radius: 999px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12));
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.26);
  flex: 0 0 auto;
}

.avatar-img{
  width:100%;
  height:100%;
  border-radius:999px;
  object-fit:cover;
  display:block;
  background:#111;
}

.social-btn{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: rgba(255,255,255,.90);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 12px 35px rgba(0,0,0,.45);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.social-btn:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.30);
  color:#fff;
}

.social-btn:active{
  transform: translateY(0px) scale(.98);
}

.audio-toggle{
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(16px) saturate(190%);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  box-shadow: 0 16px 45px rgba(0,0,0,.55);
  cursor:pointer;
  z-index: 50;
}

.audio-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,166,255,.22), 0 16px 45px rgba(0,0,0,.55);
}

.audio-toggle i{ font-size: 1em; line-height: 1; }

.audio-toggle.attention{
  border-color: rgba(255,255,255,.34);
  box-shadow: 0 0 0 4px rgba(255,255,255,.10), 0 16px 45px rgba(0,0,0,.55);
}


.site-footer{
  position:fixed;
  left:0;
  right:0;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  text-align:center;
  font-size:12px;
  letter-spacing:.02em;
  color: rgba(255,255,255,.45);
  text-shadow: 0 10px 35px rgba(0,0,0,.65);
  z-index: 20;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  #bg-video{transition:none}
  .social-btn{transition:none}
}

main{position:relative;z-index:10}

.hero{height:100dvh;height:100vh;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 64px);}