/* =========================================================================
   VERATUS GAMES — site stylesheet
   Shared across index / games / studio / contact.
   Holds: reset, page background, keyframes, hover states (flattened from the
   design-tool `style-hover` attribute), focus, reduced-motion, and the mobile
   breakpoints the inline layout can't express. Layout itself stays inline.
   ========================================================================= */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
img{max-width:100%;}

body{
  margin:0;
  color:#F6F8FF;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(58% 38% at 82% 4%, rgba(44,58,115,.50), transparent 70%),
    radial-gradient(52% 46% at 4% 60%, rgba(31,42,85,.42), transparent 70%),
    linear-gradient(180deg,#070A16 0%, #0A0E1F 55%, #0B1024 100%);
  background-color:#0A0E1F; /* fallback, declared after the shorthand so it sticks */
  background-attachment:fixed;
}

::selection{background:#F5C754;color:#1A1206;}
body::-webkit-scrollbar{width:11px;}
body::-webkit-scrollbar-track{background:#070A16;}
body::-webkit-scrollbar-thumb{background:#1b2440;}

/* --- Keyframes (hero starfield + float + reveal) ----------------------- */
@keyframes tw{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 0 0 rgba(94,227,255,.5)}50%{box-shadow:0 0 0 6px rgba(94,227,255,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* --- Hover states ------------------------------------------------------
   !important so they win over the element's inline base style. Transitions
   live on the elements inline, so these animate smoothly.                */
.hv-lift:hover{transform:translateY(-2px)!important;filter:brightness(1.05)!important;}
.hv-ghost:hover{border-color:#F6F8FF!important;background:rgba(255,255,255,.07)!important;}
.hv-nav:hover{color:#F6F8FF!important;background:rgba(255,255,255,.05)!important;}
.hv-gold:hover{color:#F5C754!important;}
.hv-white:hover{color:#F6F8FF!important;}
.hv-tile:hover{transform:translateY(-5px)!important;box-shadow:0 24px 50px -20px rgba(0,0,0,.78)!important;}
.hv-card:hover{border-color:rgba(245,199,84,.4)!important;transform:translateY(-2px)!important;}

/* --- Game-tile screenshot reel (ported from the Group olympus tiles) ----
   Hover/focus over a lineup tile cross-fades a reel of screenshots behind
   the tile text. Only tiles carrying a .hv-shots reel animate; tiles without
   one (e.g. Lost in the Woods) keep the plain lift above. The body gets a
   scrim on hover so the tag/name/CTA stay legible over a busy screenshot.  */
.hv-shots{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .4s ease;pointer-events:none;}
.hv-tile:hover .hv-shots,.hv-tile:focus-visible .hv-shots{opacity:1;}
.hv-shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;}
.hv-shots img:first-child{object-fit:contain;background:#05070F;} /* app icon shown whole, not cropped */
.hv-tile:hover .hv-shots img,.hv-tile:focus-visible .hv-shots img{animation:hvReel 12s infinite;}
.hv-shots img:nth-child(1){animation-delay:0s;}
.hv-shots img:nth-child(2){animation-delay:2.4s;}
.hv-shots img:nth-child(3){animation-delay:4.8s;}
.hv-shots img:nth-child(4){animation-delay:7.2s;}
.hv-shots img:nth-child(5){animation-delay:9.6s;}
@keyframes hvReel{0%{opacity:0;}2.5%{opacity:1;}17%{opacity:1;}20%{opacity:0;}100%{opacity:0;}}
.hv-tile:hover .hv-tile__body,.hv-tile:focus-visible .hv-tile__body{
  background:linear-gradient(180deg,rgba(5,7,15,.62) 0%,rgba(5,7,15,.12) 26%,rgba(5,7,15,.5) 60%,rgba(5,7,15,.92) 100%);}
/* Touch devices have no hover — reveal the reel and let it auto-cycle so the
   screenshots actually show on phones/tablets. Falls back to the static icon
   under reduced-motion (global rule below kills the animation). */
@media (hover:none){
  .hv-shots{opacity:1;}
  .hv-shots img{animation:hvReel 12s infinite;}
  .hv-shots img:first-child{opacity:1;}
  .hv-tile__body{background:linear-gradient(180deg,rgba(5,7,15,.62) 0%,rgba(5,7,15,.12) 26%,rgba(5,7,15,.5) 60%,rgba(5,7,15,.92) 100%);}
}
/* reduced-motion: the global rule below kills the cycle — show the icon statically */
@media (prefers-reduced-motion: reduce){
  .hv-tile:hover .hv-shots img:first-child,.hv-tile:focus-visible .hv-shots img:first-child{opacity:1;}
}

/* --- Focus (cyan halo, per design system) ------------------------------ */
:focus-visible{outline:3px solid rgba(94,227,255,.6);outline-offset:2px;border-radius:2px;}

/* --- Mobile -----------------------------------------------------------
   Inline grids (text|art, footer columns) don't stack on their own.     */
@media (max-width:760px){
  .stack-mobile{grid-template-columns:1fr!important;}
  .footer-grid{grid-template-columns:1fr!important;gap:32px!important;}
}
@media (max-width:720px){
  .nav-bar{height:auto!important;padding-top:14px!important;padding-bottom:14px!important;flex-wrap:wrap!important;}
  .nav-links{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:2px!important;}
  .nav-cta{margin-left:0!important;}
}

/* --- Respect reduced-motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;}
  html{scroll-behavior:auto;}
}