/* ==========================================================================
   VoidFrontier — Public landing page (index.html)
   All classes are prefixed hp3- to avoid collisions with the game's
   main.css. Built on main.css's existing tokens (--accent, --gold,
   --purple, the .btn family) plus the game's own native HUD language —
   the notched panel + glowing left accent bar already used by .hero-name
   (dashboard.css) and .bt-overlay (battle.css) — so this reads as
   VoidFrontier's own UI, not a generic landing-page template.
   ========================================================================== */

body.pg-landing {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* Pairs with the contextmenu-blocking JS in landing.js: stops drag-out
 * (desktop) and the long-press save/share menu (mobile). */
body.pg-landing img {
  -webkit-user-drag: none; user-drag: none;
  -webkit-touch-callout: none;
}

/* Faint scanline texture over everything. */
body.pg-landing::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 300;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0,0,0,0.035) 3px, rgba(0,0,0,0.035) 4px);
}

.online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-ok); box-shadow: 0 0 6px var(--green-ok);
  animation: hp3-pulse-dot 1.6s ease-in-out infinite; vertical-align: middle;
}
@keyframes hp3-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ═══════════════════════════ NAV ═══════════════════════════
   The landing page uses the shared .page-nav / .nav-brand component from
   main.css verbatim — identical to /beta-signup and /login. No per-page
   overrides: the nav-brand is a plain inline wordmark on all three so the
   headers render the same height and letter-spacing. (The old inline-flex +
   gap rules here were for an in-nav emblem that has since been removed; the
   leftover flex gap was opening a space between VOID and FRONTIER.) */

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hp3-hero {
  /* viewport minus the now-relative .page-nav (~57px), so nav + hero ≈ one screen */
  position: relative; min-height: calc(100vh - 57px); min-height: calc(100dvh - 57px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hp3-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 22% 18%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 45% at 82% 30%, color-mix(in srgb, var(--purple, #AA44FF) 10%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 20%, color-mix(in srgb, var(--bg-card2) 45%, var(--bg)), var(--bg) 70%);
}

/* Animated perspective cyber-grid that slowly scrolls upward, masked to fade
   out at the edges so it reads as a floor of light, not a flat overlay. */
.hp3-hero-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.15;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--accent-hi) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent-hi) 60%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 28%, transparent 76%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 42%, #000 28%, transparent 76%);
  animation: hp3-grid-pan 7s linear infinite;
}
@keyframes hp3-grid-pan { to { background-position: 0 -46px; } }

/* A single horizontal "scanning" beam that sweeps the hero top→bottom. */
.hp3-hero-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
.hp3-hero-scan::before {
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 22%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-hi) 9%, transparent) 60%, transparent);
  animation: hp3-scan-sweep 6.5s linear infinite;
}
@keyframes hp3-scan-sweep { 0% { transform: translateY(-30%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(560%); opacity: 0; } }

/* RGB-band "breach" overlay — kept invisible until landing.js flips .is-breach
   on the hero, then flashed for the duration of a hack burst. */
.hp3-hero-glitch {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(255,46,99,0.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(26,212,212,0.04) 0 3px, transparent 3px 7px);
}
.hp3-hero.is-breach .hp3-hero-glitch { animation: hp3-glitch-bands 0.82s steps(2); }
@keyframes hp3-glitch-bands {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 0.5; transform: translateY(-3px); }
  40%  { opacity: 0.18; transform: translateY(2px); }
  60%  { opacity: 0.45; transform: translateY(-2px); }
  100% { opacity: 0; transform: translateY(0); }
}
/* The whole hero content judders during a breach (kept to the inner block so the
   full-viewport section never shifts and reveals an edge). */
.hp3-hero.is-breach .hp3-hero-inner { animation: hp3-hero-jitter 0.82s steps(2); }
@keyframes hp3-hero-jitter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  45% { transform: translate(3px, -1px); }
  70% { transform: translate(-1px, 2px); }
}
.hp3-hero-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,10,7,0.35) 0%, rgba(6,9,6,0.78) 70%, var(--bg) 100%),
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(10,16,26,0.25), transparent 70%);
}
.hp3-hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 180px 40px rgba(0,0,0,0.55);
}

.hp3-hero-inner {
  position: relative; z-index: 2; text-align: center;
  max-width: 760px; padding: 0 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
/* Sharp rectangular status chip — same family as the ADMIN/PREMIUM/BETA
   PARTICIPANT badges already used on the profile page, not a blurred pill. */
.hp3-badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-hi); padding: 0.32rem 0.7rem; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-hi) 55%, var(--border-hi));
}
.hp3-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent-hi); display: flex; align-items: center; gap: 0.4rem; justify-content: center;
}

/* Hero ID plate — the notched-panel + glowing left accent bar pattern used
   by .hero-name (dashboard) and .bt-overlay (battle HUD), so the logo sits
   on the photo the same way a callsign tag does, not as raw glowing text. */
.hp3-id-plate {
  --np-accent: var(--accent-hi);
  position: relative; display: inline-block; padding: 0.7rem 2.2rem 0.7rem 2.6rem;
  background: linear-gradient(180deg, rgba(14,18,9,0.92), rgba(8,11,6,0.94));
  border: 1px solid color-mix(in srgb, var(--np-accent) 50%, var(--border-hi));
  backdrop-filter: blur(5px);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: 0 6px 20px rgba(0,0,0,0.55);
}
.hp3-id-plate::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  background: var(--np-accent); box-shadow: 0 0 8px var(--np-accent);
}
/* Brand emblem — the radar/diamond mark shared with /beta-signup. The inner
   diamond + core slowly rotate for a scanning feel (disabled on reduced-motion). */
.hp3-hero-emblem { line-height: 0; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 50%, transparent)); }
.hp3-hero-emblem svg { display: block; }
.vf-emblem-spin { transform-box: fill-box; transform-origin: center; animation: hp3-emblem-spin 16s linear infinite; }
@keyframes hp3-emblem-spin { to { transform: rotate(360deg); } }

.hp3-hero-logo {
  position: relative;
  font-size: clamp(2rem, 5.4vw, 3.4rem); font-weight: 900; letter-spacing: 0.1em;
  color: var(--text-bright); line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: color 0.08s steps(2);
}
.hp3-hero-logo span { color: var(--accent-hi); }

/* RGB-split glitch layers — duplicates of the logo text (fed by data-text),
   normally invisible, sliced and channel-offset only while .is-glitching. */
.hp3-hero-logo::before, .hp3-hero-logo::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  letter-spacing: 0.1em; line-height: 1;
  opacity: 0; pointer-events: none; text-shadow: none;
}
.hp3-hero-logo.is-glitching::before {
  opacity: 0.8; color: #00ff7b; left: -2px;
  animation: hp3-glitch-1 0.55s steps(3) infinite;
}
.hp3-hero-logo.is-glitching::after {
  opacity: 0.7; color: #0aa86a; left: 2px;
  animation: hp3-glitch-2 0.55s steps(3) infinite;
}
@keyframes hp3-glitch-1 {
  0%   { clip-path: inset(18% 0 62% 0); transform: translateX(-2px); }
  25%  { clip-path: inset(72% 0 8% 0);  transform: translateX(2px); }
  50%  { clip-path: inset(40% 0 41% 0); transform: translateX(-1px); }
  75%  { clip-path: inset(8% 0 80% 0);  transform: translateX(2px); }
  100% { clip-path: inset(58% 0 28% 0); transform: translateX(-2px); }
}
@keyframes hp3-glitch-2 {
  0%   { clip-path: inset(70% 0 12% 0); transform: translateX(2px); }
  25%  { clip-path: inset(15% 0 65% 0); transform: translateX(-2px); }
  50%  { clip-path: inset(48% 0 33% 0); transform: translateX(1px); }
  75%  { clip-path: inset(80% 0 6% 0);  transform: translateX(-2px); }
  100% { clip-path: inset(22% 0 58% 0); transform: translateX(2px); }
}
/* When landing.js Matrix-decodes a hostile string in, the logo + tagline go
   terminal-green. The logo keeps its bold display face (just recoloured) so it
   stays heavy; the tagline drops to mono for the readable "decoded" look. */
.hp3-hero-logo.is-hacked, .hp3-hero-logo.is-hacked span {
  color: #34ff8f; text-shadow: 0 0 5px rgba(0,255,123,0.3);
}
.hp3-hero-tagline.is-hacked {
  color: #6dffb0; text-shadow: 0 0 4px rgba(0,255,123,0.22);
  font-family: 'Share Tech Mono', monospace;
}

/* Generic Matrix-decoded state applied by landing.js to down-page headings/CTA
   text while a rival-player taunt is flashed over them. Clean readable green
   mono (no judder/RGB-split — the decode scramble is the motion). Transient,
   so the !important overrides of the various title colors are safe. */
.hp3-hacking {
  color: #34ff8f !important;
  font-family: 'Share Tech Mono', monospace !important;
  text-shadow: 0 0 4px rgba(0,255,123,0.25);
  letter-spacing: 0.06em;
}

/* Spy "identity morph" tint — its icon glows Matrix-green while disguising. */
.hp3-class-mini-art i.hp3-spy-morph {
  color: #34ff8f !important;
  filter: drop-shadow(0 0 9px rgba(0,255,123,0.7)) !important;
}

/* ── Flicker — neon/hologram instability sprayed across the page by landing.js.
   Hard on/off blinks (near-instant because the on/off keyframes sit adjacent),
   so random bits of UI read as an unstable, half-hacked signal. ── */
@keyframes hp3-flick {
  0%, 17%, 19%, 38%, 40%, 61%, 63%, 100% { opacity: 1; }
  18% { opacity: 0.25; }
  39% { opacity: 0.15; }
  62% { opacity: 0.45; }
  82% { opacity: 0.7; }
}
.hp3-flick { animation: hp3-flick 0.6s linear 1; will-change: opacity; }

/* Whole-page CRT flutter — a faint global dip toggled on <body> now and then. */
@keyframes hp3-crt-flick {
  0%, 100% { opacity: 1; }
  24% { opacity: 0.93; } 30% { opacity: 1; }
  56% { opacity: 0.88; } 62% { opacity: 1; }
}
body.pg-landing.is-flicker .hp3-hero,
body.pg-landing.is-flicker .hp3-main { animation: hp3-crt-flick 0.42s linear 1; }
.hp3-hero-tagline {
  font-size: 1.05rem; color: var(--text); max-width: 540px; line-height: 1.55; font-weight: 500;
}
.hp3-hero-note {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; color: var(--gold-hi); font-weight: 600;
}
.hp3-hero-note i { font-size: 0.85em; }
.hp3-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.4rem; }
.btn-lg { padding: 0.9rem 1.9rem; font-size: 0.88rem; border-radius: 6px; }
.btn-primary.btn-lg { box-shadow: 0 10px 34px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-sm { padding: 0.42rem 1.05rem; font-size: 0.72rem; border-radius: 3px; }

.hp3-hero-stats { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.hp3-stat-chip {
  --sc-accent: var(--accent-hi);
  position: relative; display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 1rem 0.55rem 1.2rem; border-radius: 3px;
  background: rgba(8, 11, 7, 0.72); border: 1px solid var(--border-hi);
}
.hp3-stat-chip::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  background: var(--sc-accent); box-shadow: 0 0 6px var(--sc-accent);
}
.hp3-stat-chip-accent2 { --sc-accent: var(--gold-hi); }
.hp3-stat-chip i { color: var(--sc-accent); font-size: 0.95rem; }
.hp3-stat-label { font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-align: left; }
.hp3-stat-val { font-size: 0.88rem; font-weight: 700; color: var(--text-bright); font-family: 'Share Tech Mono', monospace; text-align: left; }
.hp3-status-ok { display: flex; align-items: center; gap: 0.4rem; color: var(--green-ok); }

.hp3-scroll-cue {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--text-muted); font-size: 1.1rem;
  animation: hp3-bob 2s ease-in-out infinite;
}
@keyframes hp3-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

@media (max-width: 600px) { .hp3-hero-stats { flex-direction: column; align-items: stretch; } }

/* ═══════════════════════════ SECTIONS (shared) ═══════════════════════════ */
.hp3-main { position: relative; background: var(--bg); }
.hp3-section { max-width: 1180px; margin: 0 auto; padding: 4rem 2.5rem; }
.hp3-section-tight { padding: 3.2rem 2.5rem; }
.hp3-section-tint {
  max-width: none; padding: 0;
  background: linear-gradient(180deg, transparent, var(--bg-sidebar) 12%, var(--bg-sidebar) 88%, transparent);
}
.hp3-section-tint > * { max-width: 1180px; margin: 0 auto; padding: 3.2rem 2.5rem; }

.hp3-section-head { margin-bottom: 1.8rem; text-align: center; }
.hp3-section-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; color: var(--text-bright);
  letter-spacing: 0.01em; margin-top: 0.35rem;
}

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.hp3-glass-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1.3rem 1.4rem;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.hp3-glass-card:hover { transform: translateY(-2px); border-color: var(--border-hi); }

/* ═══════════════════════════ ABOUT — "What is VoidFrontier?" (text-first) ═══════════════════════════ */
.hp3-about { max-width: 780px; margin: 0 auto; text-align: center; }
.hp3-about-lead { font-size: 1.06rem; color: var(--text); line-height: 1.7; margin-top: 1rem; font-weight: 500; }
.hp3-about-body { font-size: 0.92rem; color: var(--text-muted); line-height: 1.7; margin-top: 1rem; }

/* Frontier "dossier" facts — same notched left-accent chip family as the
   hero stat chips, so the at-a-glance facts read as part of the same HUD. */
.hp3-fact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 2.2rem; text-align: left; }
.hp3-fact {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.7rem 0.9rem; border-radius: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-left: 2px solid var(--accent-hi);
}
.hp3-fact i { color: var(--accent-hi); font-size: 1rem; flex-shrink: 0; }
.hp3-fact-k { font-size: 0.56rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.hp3-fact-v { font-size: 0.8rem; font-weight: 700; color: var(--text-bright); line-height: 1.25; }

@media (max-width: 760px) { .hp3-fact-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .hp3-fact-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════ HOW YOU PLAY (systems grid) ═══════════════════════════ */
.hp3-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.hp3-feature-card { text-align: center; position: relative; overflow: hidden; }
.hp3-feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-hi), transparent);
  opacity: 0; transition: opacity 0.18s ease;
}
.hp3-feature-card:hover::before { opacity: 1; }
.hp3-feature-ico { font-size: 1.4rem; color: var(--accent-hi); margin-bottom: 0.8rem; }
.hp3-feature-title { font-size: 0.94rem; font-weight: 700; color: var(--text-bright); margin-bottom: 0.5rem; letter-spacing: 0.01em; }
.hp3-feature-desc { font-size: 0.79rem; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 900px) { .hp3-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hp3-feature-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════ CLASSES TEASER (compact) ═══════════════════════════ */
.hp3-class-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.hp3-class-mini {
  text-align: center; padding: 1.1rem 0.8rem; border-radius: 4px;
  border: 1px solid var(--border); background: var(--bg-card);
  border-left: 2px solid var(--border); transition: transform 0.18s ease, border-color 0.18s ease;
}
.hp3-class-mini:hover { transform: translateY(-3px); border-color: var(--border-hi); border-left-color: var(--cc-color); }
.hp3-class-mini-art {
  width: 64px; height: 64px; margin: 0 auto 0.5rem; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--cc-color) 22%, transparent), #00000040 72%);
  border: 1px solid color-mix(in srgb, var(--cc-color) 40%, var(--border-hi));
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow 0.18s ease;
}
.hp3-class-mini:hover .hp3-class-mini-art { box-shadow: 0 0 16px -2px color-mix(in srgb, var(--cc-color) 60%, transparent); }
.hp3-class-mini-art i { font-size: 1.7rem; color: var(--cc-color); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cc-color) 55%, transparent)); }
.hp3-class-mini-name { font-size: 0.9rem; font-weight: 700; color: var(--text-bright); }
.hp3-class-mini-stat { font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cc-color); margin-top: 0.2rem; }

@media (max-width: 700px) { .hp3-class-mini-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════ JOIN THE FRONTIER (CTA) ═══════════════════════════ */
.hp3-cta {
  position: relative; overflow: hidden;
  padding: 5rem 2.5rem; text-align: center;
  background: linear-gradient(165deg, var(--bg-card2), var(--bg) 70%);
  border-top: 1px solid var(--border);
}
.hp3-cta-glow {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 600px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.hp3-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.hp3-cta-title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 900; color: var(--text-bright); margin: 0.4rem 0 0.7rem; }
.hp3-cta-sub { font-size: 0.94rem; color: var(--text-muted); margin-bottom: 1.6rem; line-height: 1.6; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.hp3-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: 1180px; margin: 0 auto; padding: 2rem 2.5rem;
  font-size: 0.76rem; color: var(--text-muted);
}
.hp3-footer-links { display: flex; gap: 1.4rem; }
.hp3-footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.15s ease; }
.hp3-footer-links a:hover { color: var(--accent-hi); }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width: 767px) {
  .hp3-section, .hp3-section-tight { padding: 2.6rem 1.25rem; }
  .hp3-section-tint > * { padding: 2.6rem 1.25rem; }
  .hp3-cta { padding: 3.4rem 1.25rem; }
  .hp3-footer { flex-direction: column; text-align: center; padding: 1.6rem 1.25rem; }
}

/* ═══════════════════════════ REDUCED MOTION ═══════════════════════════
   Kill the ambient cyber-grid, scan beam, and glitch animations for users
   who ask for it. landing.js also skips the text-hack scheduler entirely. */
@media (prefers-reduced-motion: reduce) {
  .hp3-hero-grid, .hp3-hero-scan { animation: none; }
  .hp3-hero-scan::before { display: none; }
  .hp3-hero-logo::before, .hp3-hero-logo::after { display: none; }
  .hp3-hero.is-breach .hp3-hero-inner,
  .hp3-hero.is-breach .hp3-hero-glitch { animation: none; }
  .hp3-flick,
  .vf-emblem-spin,
  body.pg-landing.is-flicker .hp3-hero,
  body.pg-landing.is-flicker .hp3-main { animation: none; }
}