* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #000; }
body { overflow: hidden; }
.site-intro { position:fixed; inset:0; z-index:100; background:#000; pointer-events:none; opacity:1; transition:opacity 2.5s ease-in-out; }
.site-intro[hidden] { display:none; }
.site-intro video { display:block; width:100%; height:100%; object-fit:cover; }
.site-intro.is-fading { opacity:0; }
.intro-replay {
  position:fixed;z-index:8;right:max(24px,calc(env(safe-area-inset-right) + 16px));bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));
  display:grid;grid-template-columns:auto auto 30px;align-items:center;gap:8px;min-height:44px;padding:7px 8px 7px 14px;
  border:1px solid rgb(191 233 250 / 58%);border-radius:2px;background:linear-gradient(115deg,rgb(6 17 27 / 72%),rgb(22 48 63 / 48%));
  color:#dff5ff;font-family:"Segoe UI",Arial,sans-serif;cursor:pointer;isolation:isolate;overflow:hidden;
  box-shadow:inset 0 0 10px rgb(211 244 255 / 7%),0 0 12px rgb(87 190 242 / 12%);backdrop-filter:blur(8px);
  transition:transform .3s cubic-bezier(.2,.75,.2,1),border-color .3s,box-shadow .3s,background .3s;
}
.intro-replay::before { content:"";position:absolute;inset:-100% -60%;z-index:-1;background:linear-gradient(110deg,transparent 40%,rgb(255 255 255 / 22%) 50%,transparent 60%);transform:translateX(-70%);transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.intro-replay span { font-size:8px;letter-spacing:.25em;color:#92afbd; }
.intro-replay strong { font:16px/1 "Bodoni MT",Didot,"Times New Roman",serif;letter-spacing:.18em;font-weight:400;text-shadow:0 0 10px rgb(126 214 255 / 60%); }
.intro-replay i { display:grid;place-items:center;width:30px;height:30px;border:1px solid rgb(187 231 249 / 42%);border-radius:50%;font:17px/1 Arial,sans-serif;font-style:normal;transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .3s; }
.intro-replay:is(:hover,:focus-visible) { transform:translateY(-3px);border-color:#e7f9ff;background:linear-gradient(115deg,rgb(12 30 43 / 88%),rgb(28 64 82 / 64%));box-shadow:inset 0 0 12px rgb(224 250 255 / 12%),0 0 5px rgb(255 255 255 / 55%),0 0 22px rgb(77 188 244 / 35%); }
.intro-replay:is(:hover,:focus-visible)::before { transform:translateX(70%); }
.intro-replay:is(:hover,:focus-visible) i { transform:rotate(-180deg);box-shadow:0 0 13px rgb(111 210 255 / 55%); }
.intro-replay:active { transform:translateY(0) scale(.98); }
body.menu-open .intro-replay { opacity:0;pointer-events:none; }
.hero {
  --wordmark-width: 70vw;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.hero > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.menu-mark {
  position: absolute;
  z-index: 7;
  top: max(24px, calc(env(safe-area-inset-top) + 16px));
  left: max(24px, calc(env(safe-area-inset-left) + 16px));
  --menu-ring-size: 39.6px;
  display: inline-flex;
  align-items: center;
  gap: 10.2px;
  height: var(--menu-ring-size);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  appearance: none;
  box-shadow: none;
  mix-blend-mode: screen;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 260ms cubic-bezier(.2,.75,.2,1), filter 260ms ease;
}
.menu-mark__svg {
  display: block;
  width: var(--menu-ring-size);
  height: var(--menu-ring-size);
  flex: 0 0 var(--menu-ring-size);
  overflow: visible;
  pointer-events: none;
}
.menu-mark__halo,
.menu-mark__ring,
.menu-mark__burst { fill: none; vector-effect: non-scaling-stroke; }
.menu-mark__halo {
  stroke: #74d2ff;
  stroke-width: 9;
  opacity: .58;
  filter: blur(4px) drop-shadow(0 0 8px rgb(53 170 255 / 95%));
  animation: menu-mark-pulse 3.8s ease-in-out infinite;
}
.menu-mark__ring {
  stroke: url(#menu-ring-pearl);
  stroke-width: 4.4;
  filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 5px rgb(99 204 255 / 90%));
}
.menu-mark__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 3mm;
  padding: 4.8px 7.8px 4.2px 9.6px;
  border: 1px solid rgb(211 244 255 / 82%);
  border-radius: 2px;
  background: rgb(111 202 255 / 3%);
  color: #edf9ff;
  font-family: "Bodoni MT", Didot, "Times New Roman", serif;
  font-size: 18.24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .24em;
  white-space: nowrap;
  text-shadow: 0 0 2px rgb(255 255 255 / 65%), 0 0 8px rgb(139 221 255 / 80%), 0 0 18px rgb(65 160 255 / 48%);
  box-shadow: inset 0 0 6px rgb(222 249 255 / 20%), 0 0 3px rgb(255 255 255 / 58%), 0 0 10px rgb(113 211 255 / 65%), 0 0 22px rgb(55 139 255 / 32%);
  transition: color 260ms ease, border-color 260ms ease, text-shadow 260ms ease, box-shadow 260ms ease;
}
.menu-mark__burst {
  stroke: #e9faff;
  stroke-width: 2;
  opacity: 0;
  transform-origin: 36px 36px;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px rgb(99 204 255 / 92%));
}
.menu-mark:is(:hover, :focus-visible) {
  transform: scale(1.05);
  filter: brightness(1.22);
}
.menu-mark:is(:hover, :focus-visible) .menu-mark__halo { opacity: .9; }
.menu-mark:is(:hover, :focus-visible) .menu-mark__ring { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px rgb(75 189 255 / 100%)); }
.menu-mark:is(:hover, :focus-visible) .menu-mark__label {
  color: #fff;
  border-color: rgb(239 252 255 / 100%);
  text-shadow: 0 0 3px #fff, 0 0 11px rgb(132 223 255 / 100%), 0 0 24px rgb(54 151 255 / 68%);
  box-shadow: inset 0 0 9px rgb(222 249 255 / 30%), 0 0 4px #fff, 0 0 14px rgb(103 210 255 / 86%), 0 0 28px rgb(46 130 255 / 44%);
}
.menu-mark:active { transform: scale(1.015); }
.menu-mark:focus-visible { outline: 1px solid rgb(205 242 255 / 90%); outline-offset: 6px; }
.menu-mark.is-burst .menu-mark__burst { animation: menu-mark-burst 620ms cubic-bezier(.16,.78,.25,1); }
@keyframes menu-mark-pulse {
  0%, 100% { opacity: .46; }
  50% { opacity: .72; }
}
@keyframes menu-mark-burst {
  0% { opacity: 0; transform: scale(.82); stroke-width: 3; }
  34% { opacity: 1; transform: scale(1.08); stroke-width: 2; }
  100% { opacity: 0; transform: scale(1.34); stroke-width: .5; }
}
.wordmark {
  position: absolute;
  z-index: 2;
  bottom: 24%;
  left: calc(50% + min(0.5cm, 2.5vw));
  width: var(--wordmark-width);
  aspect-ratio: 7;
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.wordmark__letters { display: block; width: 100%; height: 100%; }
.wordmark__letters { filter: drop-shadow(0 1px 2px rgb(5 10 18 / 42%)); }
.wordmark__reflection { position: absolute; top: calc(100% + 2px); left: 0; width: 100%; height: 78%; opacity: .54; mask-image: linear-gradient(#000, transparent 98%); -webkit-mask-image: linear-gradient(#000, transparent 98%); }
.wordmark__reflection img { display: block; width: 100%; height: auto; transform-origin: top; transform: translateY(78%) scaleY(-.78); }
.wordmark-light { position: absolute; z-index: 1; left: 0; width: 100%; pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.wordmark-surface { position: absolute; z-index: 3; left: 0; width: 100%; pointer-events: none; opacity: 0; }
.hero[data-renderer="webgl"] .wordmark-light { opacity: 1; }
.hero[data-surface="webgl"] .wordmark-surface { opacity: 1; }
.hero[data-surface="webgl"] .wordmark { opacity: var(--surface-fallback, 0); }
@media (max-width: 767px) { .hero { --wordmark-width: 90vw; } .wordmark__reflection { opacity: .38; } }
@media (max-width: 767px) {
  .intro-replay { right:max(18px,calc(env(safe-area-inset-right) + 12px));bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));grid-template-columns:auto 28px;padding-left:11px; }
  .intro-replay span { display:none; }
  .intro-replay strong { font-size:14px; }
  .menu-mark {
    top: max(18px, calc(env(safe-area-inset-top) + 12px));
    left: max(18px, calc(env(safe-area-inset-left) + 12px));
    --menu-ring-size: 32.4px;
    gap: 7.2px;
  }
  .menu-mark__label {
    padding: 4.2px 6px 3.6px 7.8px;
    font-size: 15.36px;
    letter-spacing: .2em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-replay,.intro-replay::before,.intro-replay i { transition:none; }
  .menu-mark { transition: none; }
  .menu-mark__halo,
  .menu-mark.is-burst .menu-mark__burst { animation: none; }
  .menu-mark__halo { opacity: .58; }
  .menu-mark__burst { display: none; }
}
