/* PsyQo V5 — real-time spinning red P logo hero + red palette.
 * Layers on top of psyqo-v4.css; only overrides what V5 changes. */

:root {
  /* Aligned to the reference red palette (white + red). */
  --v5-red: #c81016;
  --v5-red-bright: #e8353b;
  --v5-red-deep: #7f0000;
}

/* ============================ HERO (b38 light theme) ================= */
/* Palette resolved from the live b38 deploy: paper #f7f7f2, ink #111216,
   red #c81016. TEAM in ink, PSYQO in red, huge Inter 800; glossy red 3D
   logo (WebGL) on the right; red primary + light quiet buttons; centered
   mission strip with a red top border. */
:root {
  --apparel-paper: #f7f7f2;
  --apparel-ink: #111216;
  --apparel-red: #c81016;
  /* The old wordmark/controller morph vars are unused here; pin to 0 so the
     .psyqo-hero-actions opacity/blur calc()s resolve to full-visible. */
  --psyqo-brand-exit: 0;
  --psyqo-controller-progress: 0;
  --psyqo-wordmark-progress: 0;
}

body.v5-hero .v5-hero {
  position: relative;
  min-height: 100vh;
}

body.v5-hero .v5-hero-sticky {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 820px;
  overflow: hidden;
  display: block;
  /* Dark void with a red bloom behind the mark (right) + soft top vignette. */
  background:
    radial-gradient(at 70% 48%, rgba(200, 16, 22, 0.30), rgba(0, 0, 0, 0) 42%),
    radial-gradient(at 72% 46%, rgba(255, 60, 60, 0.10), rgba(0, 0, 0, 0) 26%),
    radial-gradient(120% 120% at 50% 0%, rgba(24, 8, 12, 0.55), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #08070c 0%, #0a0910 52%, #060509 100%),
    #07060b;
}

body.v5-hero .v5-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
body.v5-hero .v5-hero-canvas.is-disabled { display: none; }

body.v5-hero .psyqo-hero-container {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 96px);
  pointer-events: none;
}

body.v5-hero .psyqo-hero-copy {
  position: relative;
  transition: opacity 0.3s ease;
}

body.v5-hero .hero-team-title {
  margin: 0 0 30px;
  padding: 0;
  font-family: "Vipnagorgialla", "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(92px, 11.2vw, 188px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
body.v5-hero .psyqo-hero-copy h1.hero-team-title {
  width: auto !important;
  height: auto !important;
  font-family: "Vipnagorgialla", "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 0.9 !important;
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
}
body.v5-hero .hero-team-stack {
  position: static !important;
  display: block !important;
  background: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
body.v5-hero .hero-team-stack span {
  display: block !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy h1.hero-team-title .hero-team-stack span:first-child,
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy h1.hero-team-title .hero-team-stack span {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
  text-shadow: none !important;
}
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy h1.hero-team-title .hero-team-stack span + span,
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy h1.hero-team-title .hero-team-stack span:last-child {
  color: #c81016 !important;
  -webkit-text-fill-color: #c81016 !important;
  text-shadow: none !important;
}

body.v5-hero .psyqo-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  pointer-events: auto;
}

/* b38 hero buttons: red primary (with play), light quiet (with arrow). */
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy .psyqo-hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid #c81016 !important;
  border-radius: 0;
  background: #c81016 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px rgba(200, 16, 22, 0.22) !important;
}
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy .psyqo-hero-actions .btn-primary:hover {
  background: #e01218 !important;
}
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy .psyqo-hero-actions .btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border: 1px solid rgba(245, 247, 255, 0.28) !important;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: none !important;
}
body.psyqo-v5.psyqo-v4.v5-hero .psyqo-hero-copy .psyqo-hero-actions .btn-quiet:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(245, 247, 255, 0.5) !important;
}
body.v5-hero .psyqo-hero-actions .btn i,
body.v5-hero .psyqo-hero-actions .btn svg {
  width: 16px;
  height: 16px;
}

/* Centered mission strip pinned to the bottom, red top border. */
body.v5-hero .hero-mission-strip {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 2;
  width: min(1248px, calc(100% - 96px));
  margin: 0;
  padding: 16px 28px 0;
  border-top: 1px solid rgba(200, 16, 22, 0.55) !important;
  color: rgba(245, 247, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(245, 247, 255, 0.82) !important;
  font-family: "Inter", "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(12px, 1.1vw, 15.5px);
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
}

body.v5-hero .v5-hero-hint {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
body.v5-hero .v5-hero-hint span {
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, rgba(200, 16, 22, 0.7));
  animation: v5HintPulse 2.4s ease-in-out infinite;
}
body.v5-hero .v5-hero-hint p {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245, 247, 255, 0.5) !important;
  -webkit-text-fill-color: rgba(245, 247, 255, 0.5) !important;
}
@keyframes v5HintPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 760px) {
  body.v5-hero .psyqo-hero-container { align-items: flex-start; padding-top: 96px; }
  body.v5-hero .hero-mission-strip { bottom: 40px; }
}

/* WebGL-unavailable fallback keeps the dark field. */
html.v5-hero-unavailable body.v5-hero .v5-hero-sticky { background: #07060b; }

/* ============================ ABOUT SECTION (dark) ================== */
/* Dark to match the hero + the rest of the site. The stat-graph
   constellation (dark card) stays; copy flips to light on dark. */
body.psyqo-v5.psyqo-v4.v5-hero main > section#about.v5-about-section {
  position: relative;
  padding: 92px 0;
  border-top: 1px solid rgba(200, 16, 22, 0.16) !important;
  color: #f5f7ff !important;
  background:
    radial-gradient(at 78% 20%, rgba(200, 16, 22, 0.12), rgba(0, 0, 0, 0) 520px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(180deg, #08070c, #0a0910) !important;
  background-size: auto, 92px 92px, 92px 92px, auto !important;
}
body.psyqo-v5.psyqo-v4.v5-hero #about .about-copy .eyebrow {
  color: #e8353b !important;
  -webkit-text-fill-color: #e8353b !important;
}
body.psyqo-v5.psyqo-v4.v5-hero #about .about-copy h2 {
  color: #f5f7ff !important;
  -webkit-text-fill-color: #f5f7ff !important;
}
body.psyqo-v5.psyqo-v4.v5-hero #about .about-copy p {
  color: rgba(226, 229, 238, 0.72) !important;
  -webkit-text-fill-color: rgba(226, 229, 238, 0.72) !important;
}
body.psyqo-v5.psyqo-v4.v5-hero #about .about-visual .stat-node strong,
body.psyqo-v5.psyqo-v4.v5-hero #about .about-visual .stat-node .typing-line {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
/* Per direction: the circle behind the logo is solid red, the P mark is black. */
body.psyqo-v5.psyqo-v4.v5-hero #about .about-visual .stat-ring {
  background: radial-gradient(circle at 50% 40%, #e8353b, #c81016 52%, #7f0000) !important;
  border-color: rgba(200, 16, 22, 0.65) !important;
  box-shadow: 0 0 66px rgba(200, 16, 22, 0.42), inset 0 0 46px rgba(0, 0, 0, 0.4) !important;
}
body.psyqo-v5.psyqo-v4.v5-hero #about .about-visual .about-static-logo {
  background: #0a0b12 !important;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.55)) !important;
  opacity: 1 !important;
}

/* ======================== COMMENT ARCHIVE ============================ */
body.v5-hero .v5-archive { position: relative; }
body.v5-hero .v5-archive-head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
body.v5-hero .v5-archive-eyebrow {
  margin: 0 0 12px; font-size: 12px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--v5-red);
}
body.v5-hero .v5-archive-title {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.06; color: #f4eff0;
}
body.v5-hero .v5-archive-grid {
  column-count: 3; column-gap: 18px; max-width: 1100px; margin: 0 auto;
}
body.v5-hero .v5-receipt {
  break-inside: avoid; margin: 0 0 18px;
  padding: 15px 16px 13px;
  border: 1px solid rgba(200, 16, 22, 0.32);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(28, 12, 10, 0.92), rgba(12, 7, 8, 0.9));
  box-shadow: 0 0 0 1px rgba(200, 16, 22, 0.1) inset, 0 12px 34px rgba(0, 0, 0, 0.55);
}
body.v5-hero .v5-r-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
body.v5-hero .v5-r-avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 5px;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #f4eff0; background: var(--tile, #4a1512);
  border: 1px solid rgba(200, 16, 22, 0.28);
}
body.v5-hero .v5-r-meta { display: flex; flex-direction: column; min-width: 0; }
body.v5-hero .v5-r-user { font-size: 12.5px; font-weight: 700; color: #e8353b; line-height: 1.2; }
body.v5-hero .v5-r-age { font-size: 10.5px; color: rgba(220, 170, 158, 0.7); line-height: 1.3; }
body.v5-hero .v5-r-body { margin: 0 0 9px; font-size: 13px; line-height: 1.5; color: #e8e2e2; }
body.v5-hero .v5-r-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(220, 150, 130, 0.6); padding-top: 9px;
  border-top: 1px solid rgba(200, 16, 22, 0.14);
}
body.v5-hero .v5-archive-note {
  margin: clamp(24px, 3vw, 40px) 0 0; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.08em; color: rgba(220, 150, 130, 0.6);
}
@media (max-width: 1024px) { body.v5-hero .v5-archive-grid { column-count: 2; } }
@media (max-width: 640px)  { body.v5-hero .v5-archive-grid { column-count: 1; } }

/* ============================ RED PALETTE ============================= */
/* Primary + CTA + header buttons: solid red, no gradient.
   Selectors mirror the V4 depth (body.psyqo-v4 .site-nav .header-actions .btn)
   so they win the !important battle for the nav Join button. */
body.psyqo-v5 .btn-primary,
body.psyqo-v5 .site-nav .header-actions .btn,
body.psyqo-v5.home-page .site-nav .header-actions .btn,
body.psyqo-v5 .v5-hero-cta .btn-primary,
body.psyqo-v5 .psyqo-shop3d .btn-primary {
  background: var(--v5-red) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 26px rgba(60, 12, 8, 0.5) !important;
}
body.psyqo-v5 .btn-primary:hover,
body.psyqo-v5 .site-nav .header-actions .btn:hover,
body.psyqo-v5.home-page .site-nav .header-actions .btn:hover,
body.psyqo-v5 .v5-hero-cta .btn-primary:hover,
body.psyqo-v5 .psyqo-shop3d .btn-primary:hover {
  background: var(--v5-red-bright) !important;
}

/* Quiet/secondary buttons: red outline. */
body.psyqo-v5 .btn-quiet {
  border-color: rgba(200, 16, 22, 0.5) !important;
  color: #f0eaea !important;
}
body.psyqo-v5 .btn-quiet:hover {
  border-color: var(--v5-red) !important;
  background: rgba(200, 16, 22, 0.12) !important;
}

/* Section kickers + accent chrome → red. */
body.psyqo-v5 .section-kicker { color: var(--v5-red) !important; }
body.psyqo-v5 .section-kicker i,
body.psyqo-v5 .section-kicker svg { color: var(--v5-red) !important; }
body.psyqo-v5 .nav-links a.is-active::after,
body.psyqo-v5 .nav-links a:hover::after { background: var(--v5-red) !important; }

/* Nav brand P glyph → red gradient (V4 paints it periwinkle via .brand-logo). */
body.psyqo-v5 .brand-logo,
body.psyqo-v5.home-page .brand-logo {
  background: linear-gradient(135deg, #e8353b, var(--v5-red) 46%, var(--v5-red-deep)) !important;
  filter: drop-shadow(0 0 12px rgba(200, 16, 22, 0.5)) !important;
}
/* Nav hover/active wash + FAB accent → red. */
body.psyqo-v5 .nav-links a:hover,
body.psyqo-v5 .nav-links a.active { background: rgba(200, 16, 22, 0.14) !important; }

/* Theater channel-tile avatars: V4 painted these indigo (#2a2c6a → #1a1c4e);
   retint to the red system so no periwinkle survives on the page. */
body.psyqo-v5 .v4-channel-tile-avatar {
  background: linear-gradient(135deg, var(--v5-red), var(--v5-red-deep)) !important;
  border-color: rgba(200, 16, 22, 0.32) !important;
  box-shadow: 0 0 20px rgba(200, 16, 22, 0.28) !important;
}

/* ===================== THEATER DROPDOWN (ported from V4) =============== */
/* V4 scoped the collapse/expand system to body.v4-film (which V5 lacks).
   Re-scope to body.psyqo-v5 and retint to the red system so the Theater
   opens from a closed marquee → full cinema rig, like V4. */
body.psyqo-v5 .v4-theater-marquee {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(220px, 30vw, 340px);
  margin-top: clamp(22px, 3vw, 38px);
  padding: 0;
  border: 1px solid rgba(200, 16, 22, 0.42);
  border-radius: 18px;
  overflow: hidden;
  background: #06060c;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
body.psyqo-v5 .v4-theater-marquee:hover {
  border-color: rgba(200, 16, 22, 0.8);
  box-shadow: 0 26px 80px rgba(3, 4, 14, 0.8), 0 0 46px rgba(200, 16, 22, 0.28);
  transform: translateY(-3px);
}
body.psyqo-v5 .v4-theater-marquee-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.5) brightness(0.44) contrast(1.08);
  transform: scale(1.04);
  transition: transform 0.6s ease, filter 0.6s ease;
}
body.psyqo-v5 .v4-theater-marquee:hover .v4-theater-marquee-still {
  transform: scale(1.08);
  filter: saturate(0.7) brightness(0.55) contrast(1.08);
}
body.psyqo-v5 .v4-theater-marquee-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(200, 16, 22, 0.34) 0%, transparent 62%),
    linear-gradient(180deg, rgba(3, 4, 14, 0.72) 0%, rgba(3, 4, 14, 0.35) 45%, rgba(3, 4, 14, 0.88) 100%);
}
body.psyqo-v5 .v4-theater-marquee-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: clamp(38px, 6vw, 72px) 24px;
}
body.psyqo-v5 .v4-theater-marquee-play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e8353b, #c81016);
  color: #fff;
  box-shadow: 0 0 40px rgba(200, 16, 22, 0.55);
  transition: transform 0.35s ease;
}
body.psyqo-v5 .v4-theater-marquee:hover .v4-theater-marquee-play { transform: scale(1.08); }
body.psyqo-v5 .v4-theater-marquee-play svg { width: 26px; height: 26px; }
body.psyqo-v5 .v4-theater-marquee-label {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4eff0;
  text-shadow: 0 0 24px rgba(200, 16, 22, 0.5);
}
body.psyqo-v5 .v4-theater-marquee em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 53, 59, 0.9);
}
/* Collapsed by default; expands when the section gets .is-theater-open. */
body.psyqo-v5 .v4-theater-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(18px);
  transition: max-height 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.5s ease 0.08s, transform 0.6s ease;
}
body.psyqo-v5 .v4-theater-section.is-theater-open .v4-theater-body {
  max-height: 5200px;
  opacity: 1;
  transform: translateY(0);
  overflow: visible;
}
body.psyqo-v5 .v4-theater-section.is-theater-open .v4-theater-body .home-cinema {
  margin-top: clamp(22px, 3vw, 36px);
}