/* /// 01. TOKENS /// */

:root{
  --ink:#170052; --field:#ff3e41; --lav:#d890ff; --acid:#f0ff17;
  --sgx:"Special Gothic Expanded One",system-ui,sans-serif;
  --pad:clamp(20px,4.44vw,64px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;height:100%;overflow:hidden;color:#fff;font-family:var(--sgx);
  background:var(--field)}

/* /// 02. SCREEN /// */

.vy-screen{height:100dvh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:space-between;gap:clamp(16px,3vh,40px);
  padding:clamp(20px,4.5vh,56px) var(--pad);
  isolation:isolate;position:relative;
  background:linear-gradient(180deg,var(--field) 45%,var(--lav) 100%) var(--field);
  background-repeat:no-repeat}
.vy-screen::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("siteBG.jpg") center/cover no-repeat;
  mix-blend-mode:soft-light;opacity:var(--bg-strength,.3)}
.js .vy-screen::before{opacity:0;transition:opacity .5s ease}
.js.bg-ready .vy-screen::before{opacity:var(--bg-strength,.3)}
.vy-screen>*{position:relative;z-index:1}

/* /// 03. MARK /// */

.vy-logo{flex:0 0 auto;display:block;width:min(317px,52vw);height:auto;
  max-height:14vh;object-fit:contain;object-position:left center}

/* /// 04. SHOUT /// */

.vy-head{flex:0 1 auto;position:relative}
.vy-star{position:absolute;left:0;bottom:100%;margin-bottom:clamp(10px,1.4vh,20px);
  width:clamp(22px,2.4vw,34px);height:auto;fill:var(--acid)}
.vy-shout{margin:0;font-weight:400;line-height:.92;letter-spacing:-.01em;
  font-size:min(9.4vw,13.2vh);color:var(--ink)}
.js .vy-head{opacity:0;transition:opacity .5s ease}
.js.fonts-ready .vy-head{opacity:1}

/* /// 05. ICONS /// */

.vy-icons{flex:0 0 auto;align-self:flex-end;display:flex;align-items:center;gap:clamp(18px,2.6vw,32px)}
.vy-icon{display:grid;place-items:center;width:clamp(44px,5.4vh,62px);height:clamp(44px,5.4vh,62px);
  color:#fff;text-decoration:none;border-radius:50%;
  transition:color .25s ease,transform .25s ease}
.vy-icon svg{width:68%;height:68%;fill:currentColor;display:block}
.vy-icon:hover,.vy-icon:focus-visible{color:var(--acid);transform:translateY(-2px)}
.vy-icon:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* /// 06. NARROW /// */

@media (max-width:768px){
  .vy-logo{width:min(272px,72vw);max-height:12vh}
  .vy-shout{font-size:min(13.4vw,11vh)}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}