/* ============================================================================
   HUD Backdrop — floating 2.5D recreations of the in-game Arian HUD used as
   the site background (ported 1:1 from the loader's HudBackdrop.jsx).
   Real client fonts are embedded so glyphs/typography match the game.

   Position, depth-zoom, parallax magnitude, rotation and opacity all live in
   CSS custom properties per card class, so the media queries below can retune
   sizing + placement independently for desktop / tablet / phone.
   ============================================================================ */

@font-face { font-family: 'SFSemibold'; src: url('/assets/hud-fonts/sf_semibold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'SFMedium';   src: url('/assets/hud-fonts/sf_medium.ttf')   format('truetype'); font-display: swap; }
@font-face { font-family: 'SFBold';     src: url('/assets/hud-fonts/sf_bold.ttf')     format('truetype'); font-display: swap; }
@font-face { font-family: 'SFRegular';  src: url('/assets/hud-fonts/sf_regular.ttf')  format('truetype'); font-display: swap; }
@font-face { font-family: 'HudKeyIcon'; src: url('/assets/hud-fonts/fontello_7c4cc6fc.ttf') format('truetype'); font-display: block; }

/* Decorative layer anchored to the FIRST screen only (absolute, not fixed):
   it scrolls away with the hero and never rides over pricing/purchase
   sections further down the page. */
.hud-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;
  min-height: 560px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Keep all real page content above the backdrop. NOTE: .nav is deliberately
   excluded — layout.css already gives it position:sticky + z-index:60 (well
   above this z-index:1), and overriding it here (as an earlier version of
   this file did) dropped the nav below its own language dropdown menu, which
   made the dropdown unclickable (the .hero below it stole the pointer events). */
.hero, .section, .footer { position: relative; z-index: 1; }

/* ambient brand glows */
.hudb-glow { position: absolute; border-radius: 50%; }
.hudb-glow.g1 { left: -15%; top: -15%; width: 55%; height: 55%; background: rgba(139,92,246,0.10); filter: blur(130px); }
.hudb-glow.g2 { right: -15%; bottom: -15%; width: 60%; height: 60%; background: rgba(139,92,246,0.06); filter: blur(160px); }
.hudb-glow.g3 { left: 35%; top: 45%; width: 35%; height: 35%; background: rgba(139,92,246,0.05); filter: blur(150px); }

/* Card base — anchored in place. No mouse parallax, no scroll-follow. Motion
   is a slow organic drift (`translate` + micro-sway on `rotate`) plus a soft
   entrance (`transform`, separate property so the two never fight). Depth
   scale via `zoom` on the inner wrapper (crisp re-layout, not raster scale). */
.hud-card {
  position: absolute;
  pointer-events: none;
  opacity: var(--op, 0.95);
  animation:
    hudIn 0.9s var(--ease-soft, cubic-bezier(0.16, 1, 0.3, 1)) var(--in, 0s) both,
    hudDrift var(--dd, 17s) ease-in-out var(--dp, 0s) infinite;
}
/* Inner wrapper: crisp depth scale (zoom) + the "gaze" — the card leans
   toward the cursor. Done with `translate` (rounded to whole px → text stays
   perfectly sharp) plus a tiny 2D rotation; NO 3D rotateX/Y, which foreshortens
   and blurs the raster at DPR=1. Values set as --gx/--gy/--gr by the JS. Lives
   on the inner element so it never fights the outer entrance/drift animations. */
.hud-zoom {
  zoom: var(--z, 1);
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0) rotate(var(--gr, 0deg));
}

@keyframes hudIn {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: var(--op, 0.95); transform: none; }
}
/* Lissajous-style drift: never leaves its spot, never repeats visibly. */
@keyframes hudDrift {
  0%, 100% { translate: 0 0;        rotate: calc(var(--rot, 0deg) - 0.5deg); }
  25%      { translate: 7px -9px;   rotate: var(--rot, 0deg); }
  50%      { translate: -5px -15px; rotate: calc(var(--rot, 0deg) + 0.7deg); }
  75%      { translate: -9px -5px;  rotate: var(--rot, 0deg); }
}

/* ---- desktop placement + size ------------------------------------------- */
/* Bottom cards sit ABOVE the module ticker line (~80% of the first screen)
   so nothing ever rides over it. */
.hud-al { --z: 1.5; --rot: -1deg;   --op: .95; top: 9%;     right: 4%; --dd: 18s; --dp: -2s;  --in: .05s; }
.hud-fx { --z: 1.4; --rot: 1deg;    --op: .92; top: 26%;    left: 4%;  --dd: 21s; --dp: -8s;  --in: .15s; }
.hud-kb { --z: 1.4; --rot: -1.5deg; --op: .90; bottom: 27%; left: 6%;  --dd: 19s; --dp: -13s; --in: .25s; }
.hud-th { --z: 1.5; --rot: 1.5deg;  --op: .95; bottom: 31%; right: 7%; --dd: 16s; --dp: -5s;  --in: .35s; }

/* ---- tablet / small laptop: pull toward edges, ease the size ------------- */
@media (max-width: 1100px) {
  .hud-al { --z: 1.28; top: 8%;  right: 2%; }
  .hud-fx { --z: 1.18; top: 24%; left: 2%; }
  .hud-kb { --z: 1.18; bottom: 26%; left: 2.5%; }
  .hud-th { --z: 1.28; bottom: 30%; right: 3%; }
}

/* ---- phone: only the two top cards, tucked into the corners below the nav.
   The bottom cards are hidden — on a phone the hero copy, CTA buttons and the
   module ticker fill the first screen, so there is no clean space for them. */
@media (max-width: 640px) {
  .hud-al { --z: .68; --op: .4;  top: 8.5%; right: 4.5%; }
  .hud-fx { --z: .68; --op: .38; top: 8.5%; left: 4.5%; }
  .hud-kb, .hud-th { display: none; }
}

/* Array List — flowing primary→secondary gradient across the text. */
@keyframes hudAlFlow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.hud-al-text {
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hudAlFlow 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hud-card { animation: none !important; }
}