/* ============================================================
 * VRD Hero Phoenix — Scroll-driven 4-phase hero (Tour 28)
 * Scoped under .vrd-hero-phoenix to avoid global leak.
 * ============================================================ */

.vrd-hero-phoenix { --hp-ink: #0A0A0A; --hp-red-400: #DC2626; --hp-red-700: #991B1B; --hp-muted: rgba(255,255,255,0.42); }

/* SR-ONLY semantic H1 — keyword-rich for SEO + screen reader + AI crawlers */
.vrd-hero-phoenix .vhp-sr-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Phase 0 inline CTA — CRO fix */
.vrd-hero-phoenix .vhp-inline-cta { margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vrd-hero-phoenix .vhp-inline-cta-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; padding: 12px 22px; background: var(--hp-red-400); color: #fff; border-radius: 100px; text-decoration: none; transition: background 0.2s, transform 0.15s; box-shadow: 0 6px 18px -6px rgba(220,38,38,0.45); }
.vrd-hero-phoenix .vhp-inline-cta-link:hover { background: var(--hp-red-700); transform: translateY(-1px); }
.vrd-hero-phoenix .vhp-inline-cta-hint { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; color: rgba(255,255,255,0.32); text-transform: uppercase; }

/* Mobile sticky CTA bar */
.vrd-hero-phoenix .vhp-mobile-sticky { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; }
.vrd-hero-phoenix .vhp-mobile-sticky-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700; padding: 15px 22px; background: var(--hp-red-400); color: #fff; border-radius: 100px; text-decoration: none; box-shadow: 0 10px 28px -6px rgba(220,38,38,0.55); }
@media (max-width: 768px) { .vrd-hero-phoenix .vhp-mobile-sticky.is-active { display: block; } }

/* SCROLL STAGE */
.vrd-hero-phoenix .scroll-stage { height: 500vh; position: relative; background: #0A0A0A; }
.vrd-hero-phoenix .hero-sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #0A0A0A; }

/* CANVAS */
.vrd-hero-phoenix #vhp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* PHOENIX SVG */
.vrd-hero-phoenix .phoenix-wrap { position: absolute; z-index: 2; width: 320px; height: 462px; top: 50%; left: 50%; transform: translate(-50%, -52%); transform-origin: center center; }
.vrd-hero-phoenix .phoenix-wrap svg { width: 100%; height: 100%; overflow: visible; }

/* EGG */
.vrd-hero-phoenix .egg-wrap { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vrd-hero-phoenix .egg { width: 90px; height: 118px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 35% 30%, #F5D87A, #C8902A 55%, #7A4510 100%); position: relative; box-shadow: 0 0 40px rgba(200,144,42,0.35), 0 0 80px rgba(200,100,20,0.15); animation: vhpEggPulse 2.4s ease-in-out infinite; }
@keyframes vhpEggPulse {
  0%,100% { box-shadow: 0 0 40px rgba(200,144,42,0.35), 0 0 80px rgba(200,100,20,0.15); transform: scale(1); }
  50% { box-shadow: 0 0 55px rgba(200,144,42,0.5), 0 0 110px rgba(200,100,20,0.25); transform: scale(1.025); }
}
.vrd-hero-phoenix .egg-crack { position: absolute; background: rgba(0,0,0,0.4); border-radius: 2px; opacity: 0; transition: opacity 0.4s; }
.vrd-hero-phoenix .egg-crack.c1 { width: 1px; height: 22px; top: 28px; left: 42px; transform: rotate(15deg); }
.vrd-hero-phoenix .egg-crack.c2 { width: 1px; height: 14px; top: 38px; left: 48px; transform: rotate(-20deg); }
.vrd-hero-phoenix .egg-crack.c3 { width: 1px; height: 18px; top: 30px; left: 36px; transform: rotate(-8deg); }

/* GLOW RING */
.vrd-hero-phoenix .glow-ring { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(153,27,27,0.18) 0%, transparent 70%); opacity: 0; pointer-events: none; transition: opacity 0.8s; }

/* MESSAGE BAR */
.vrd-hero-phoenix .message-bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; padding: 0 48px 80px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; pointer-events: none; }
.vrd-hero-phoenix .message-left { max-width: 480px; pointer-events: auto; }
.vrd-hero-phoenix .phase-tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--hp-red-400); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; opacity: 0; transition: opacity 0.5s; }
.vrd-hero-phoenix .phase-tag::before { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--hp-red-400); }
.vrd-hero-phoenix .message-title { font-family: 'Inter', sans-serif; font-size: clamp(32px, 4.5vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity 0.55s, transform 0.55s; margin: 0; text-wrap: balance; }
.vrd-hero-phoenix .message-title .accent { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--hp-red-400); }
.vrd-hero-phoenix .message-sub { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--hp-muted); margin-top: 14px; max-width: 420px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s 0.08s, transform 0.5s 0.08s; }

.vrd-hero-phoenix .message-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 24px; pointer-events: auto; }
.vrd-hero-phoenix .progress-phases { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vrd-hero-phoenix .phase-dot-row { display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.22); transition: color 0.4s; }
.vrd-hero-phoenix .phase-dot-row.active { color: rgba(255,255,255,0.75); }
.vrd-hero-phoenix .phase-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.15); transition: background 0.4s, transform 0.4s; }
.vrd-hero-phoenix .phase-dot-row.active .phase-dot { background: var(--hp-red-400); transform: scale(1.45); }

/* CTA on final phase */
.vrd-hero-phoenix .vhp-cta { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(8px); z-index: 11; display: flex; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 0.6s, transform 0.6s; }
.vrd-hero-phoenix .vhp-cta.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.vrd-hero-phoenix .vhp-cta-primary { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; padding: 14px 26px; background: #fff; color: var(--hp-ink); border: none; border-radius: 100px; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.vrd-hero-phoenix .vhp-cta-primary:hover { background: rgba(255,255,255,0.88); transform: translateY(-1px); }
.vrd-hero-phoenix .vhp-cta-ghost { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; padding: 14px 22px; background: transparent; color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.vrd-hero-phoenix .vhp-cta-ghost:hover { border-color: rgba(255,255,255,0.55); color: #fff; }

/* META STRIP */
.vrd-hero-phoenix .meta-strip { position: absolute; bottom: 80px; right: 48px; z-index: 10; display: none; }

/* SCROLL CUE */
.vrd-hero-phoenix .scroll-cue { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 1; transition: opacity 0.5s; pointer-events: none; }
.vrd-hero-phoenix .scroll-cue-line { width: 1px; height: 36px; background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent); animation: vhpScrollPulse 1.8s ease-in-out infinite; }
.vrd-hero-phoenix .scroll-cue-text { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: 0.2em; color: rgba(255,255,255,0.32); }
@keyframes vhpScrollPulse { 0%,100% { opacity: 0.4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } }

/* FIRE OVERLAY */
.vrd-hero-phoenix .fire-overlay { position: absolute; inset: -20px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.6s; background: radial-gradient(ellipse at 50% 60%, rgba(220,38,38,0.55) 0%, rgba(234,88,12,0.3) 40%, transparent 72%); filter: blur(8px); }

/* BURN SHAKE */
@keyframes vhpBurnShake {
  0%,100% { transform: translate(-50%,-52%) rotate(0deg); }
  20% { transform: translate(-48%,-53%) rotate(-2deg); }
  40% { transform: translate(-52%,-51%) rotate(2.5deg); }
  60% { transform: translate(-49%,-53%) rotate(-1.5deg); }
  80% { transform: translate(-51%,-52%) rotate(1deg); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .vrd-hero-phoenix .scroll-stage { height: 380vh; }
  .vrd-hero-phoenix .message-bar { padding: 0 22px 100px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .vrd-hero-phoenix .message-right { width: 100%; align-items: flex-start; }
  .vrd-hero-phoenix .progress-phases { flex-direction: row; flex-wrap: wrap; }
  .vrd-hero-phoenix .phoenix-wrap { width: 220px; height: 318px; transform: translate(-50%, -58%); }
  .vrd-hero-phoenix .egg { width: 70px; height: 92px; }
  .vrd-hero-phoenix .vhp-cta { bottom: 18px; flex-direction: column; gap: 8px; width: calc(100% - 44px); }
  .vrd-hero-phoenix .vhp-cta-primary, .vrd-hero-phoenix .vhp-cta-ghost { text-align: center; }
}

/* REDUCED MOTION FALLBACK */
@media (prefers-reduced-motion: reduce) {
  .vrd-hero-phoenix .scroll-stage { height: 100vh; }
  .vrd-hero-phoenix .egg { animation: none; }
  .vrd-hero-phoenix .scroll-cue-line { animation: none; }
  .vrd-hero-phoenix .phoenix-wrap { animation: none !important; }
  .vrd-hero-phoenix .phase-tag, .vrd-hero-phoenix .message-title, .vrd-hero-phoenix .message-sub { opacity: 1 !important; transform: none !important; transition: none !important; }
}