*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#010201}
body{position:fixed;inset:0;min-height:100vh;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:Arial,sans-serif}

/*
  Stage always keeps the 9:16 artwork proportions and behaves like object-fit:cover.
  All overlay coordinates therefore stay locked to the artwork on every phone.
*/
.stage{
  position:fixed;
  z-index:1;
  left:50%;top:50%;
  width:56.25vh;height:100vh;
  transform:translate(-50%,-50%);
  overflow:hidden;
  background:#010201;
  isolation:isolate;
}
@media (min-aspect-ratio:9/16){
  .stage{width:100vw;height:177.7777778vw}
}
@supports(height:100dvh){
  .stage{width:56.25dvh;height:100dvh}
  @media (min-aspect-ratio:9/16){.stage{width:100vw;height:177.7777778vw}}
}

.fluid-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;background:#010201}
.light-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Small glints only: cheap compositor transforms, no filters/masks/WebGL. */
.plaque-sun,.name-sun,.button-sun{
  position:absolute;height:.30%;min-height:2px;border-radius:999px;
  background:linear-gradient(90deg,rgba(255,210,112,0),rgba(217,157,63,.45) 23%,#fff1b8 50%,rgba(223,166,75,.52) 77%,rgba(255,210,112,0));
  box-shadow:0 0 5px rgba(255,217,137,.72),0 0 13px rgba(224,162,62,.38);
  opacity:0;will-change:transform,opacity;
}
.plaque-sun{width:15%}
.plaque-sun-top{left:16%;top:29.25%;animation:plaqueTop 8.2s ease-in-out infinite}
.plaque-sun-bottom{right:16%;top:65.05%;animation:plaqueBottom 9.1s ease-in-out infinite}
.name-sun{left:19%;top:46.8%;width:11%;height:.24%;animation:nameSun 7.4s ease-in-out infinite}
.button-sun{left:23%;top:81.42%;width:12%;height:.26%;animation:buttonSun 6.9s ease-in-out infinite}

@keyframes plaqueTop{
  0%,14%,100%{transform:translate3d(0,0,0);opacity:0}
  27%{opacity:.88} 55%{transform:translate3d(350%,0,0);opacity:.82} 68%{opacity:0}
}
@keyframes plaqueBottom{
  0%,19%,100%{transform:translate3d(0,0,0);opacity:0}
  33%{opacity:.86} 60%{transform:translate3d(-350%,0,0);opacity:.82} 73%{opacity:0}
}
@keyframes nameSun{
  0%,23%,100%{transform:translate3d(0,0,0);opacity:0}
  34%{opacity:.62} 56%{transform:translate3d(470%,0,0);opacity:.54} 67%{opacity:0}
}
@keyframes buttonSun{
  0%,12%,100%{transform:translate3d(0,0,0);opacity:0}
  25%{opacity:.90} 57%{transform:translate3d(365%,0,0);opacity:.84} 70%{opacity:0}
}

/* Transparent hit area follows the original button in the video. */
.profile-button{
  position:absolute;left:19.4%;top:81.10%;width:61.2%;height:9.35%;
  border:0;padding:0;margin:0;background:transparent;border-radius:999px;
  outline:none;-webkit-tap-highlight-color:transparent;cursor:pointer;
}

/* On rest the original artwork remains completely untouched. */
.button-cavity{
  position:absolute;left:2.7%;right:2.7%;top:6%;bottom:6%;border-radius:999px;
  background:rgba(2,9,7,.90);
  box-shadow:inset 0 20px 28px rgba(0,0,0,.82),inset 0 0 0 1px rgba(30,66,51,.55);
  opacity:0;transition:opacity 65ms linear;
}
.press-core{
  position:absolute;left:3.6%;right:3.6%;top:8%;bottom:8%;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:4.4%;
  color:#e8c783;
  background:radial-gradient(85% 140% at 50% -25%,rgba(62,135,101,.16),transparent 42%),linear-gradient(180deg,#0b3b2e,#06261e 50%,#03110d);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.04),inset 0 -13px 19px rgba(0,0,0,.32),0 0 0 1px rgba(54,103,83,.34);
  transform-origin:50% 70%;transform:translate3d(0,0,0) scale(1);
  opacity:0;
  transition:transform 78ms cubic-bezier(.18,.88,.22,1),opacity 28ms linear,filter 78ms ease,box-shadow 78ms ease;
}
.press-core svg{width:7.0%;height:auto;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.press-core>span{font:600 clamp(13px,2.05vw,20px)/1 Arial,sans-serif;letter-spacing:.23em}

.profile-button:active .button-cavity,.profile-button.pressed .button-cavity{opacity:1}
.profile-button:active .press-core,.profile-button.pressed .press-core{
  opacity:1;
  transform:translate3d(0,12%,0) scaleX(.955) scaleY(.66);
  filter:brightness(.72) saturate(.82);
  box-shadow:inset 0 20px 28px rgba(0,0,0,.76),inset 0 0 0 1px rgba(20,48,37,.68),0 -1px 0 rgba(255,255,255,.015);
}

@media(prefers-reduced-motion:reduce){
  .plaque-sun,.plaque-sun-bottom,.name-sun,.button-sun{animation:none!important}
}