/* Phoenix home · motion layer.
   Purely additive: loaded after anime-home.css, no markup/i18n dependencies.
   JS (home-motion.js) only feeds CSS variables; everything degrades to the static look. */

:root {
  --ember-1: #ff9a62;
  --ember-2: #ff6f7d;
  --ember-3: #e7799f;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Ambient aurora behind the whole page ---------- */
.bg-glow { display: block; position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(110px); opacity: .55; will-change: transform; }
.bg-glow--a { width: 520px; height: 520px; top: -160px; right: -80px; background: #ef736570; animation: aurora-a 22s ease-in-out infinite alternate; }
.bg-glow--b { width: 600px; height: 600px; bottom: -240px; left: 12%; background: #8f78d855; animation: aurora-b 28s ease-in-out infinite alternate; }
html.theme-light .bg-glow { opacity: .5; }
html.theme-light .bg-glow--a { background: #ffb8a280; }
html.theme-light .bg-glow--b { background: #d5c2f270; }
@keyframes aurora-a { to { transform: translate(-140px, 120px) scale(1.2); } }
@keyframes aurora-b { to { transform: translate(160px, -90px) scale(1.15); } }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; z-index: 90; inset: 0 0 auto 0; height: 3px; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #ffb36b, #ef7365, #e3658e, #a98bf0); box-shadow: 0 0 12px #ef736580; pointer-events: none; }
.topbar { transition: box-shadow .3s, background .3s; }
.topbar.is-scrolled { box-shadow: 0 8px 28px #0c081626; }

/* ---------- Hero entrance (pure CSS, runs on load) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6) rotate(-12deg); } 70% { transform: scale(1.06) rotate(-2deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes enter-char { from { opacity: 0; transform: translateX(60px) scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.hero-stage { animation: rise .9s var(--ease-out) backwards; }
.hero-copy > * { animation: rise .9s var(--ease-out) backwards; }
.hero-copy > :nth-child(1) { animation-delay: .15s; }
.hero-copy > :nth-child(2) { animation-delay: .3s; }
.hero-copy > :nth-child(3) { animation-delay: .45s; }
.hero-copy > :nth-child(4) { animation-delay: .6s; }
.hero-copy > :nth-child(5) { animation-delay: .75s; }
.hero-character { animation: enter-char 1.2s var(--ease-out) .25s backwards; }
.mascot-bubble { animation: pop .7s var(--ease-out) 1.2s backwards; }
.workspace-heading { animation: rise .8s var(--ease-out) .9s backwards; }

/* ---------- Title shimmer ---------- */
.hero__title em {
  background: linear-gradient(100deg, var(--ink-accent) 0%, #ff9a62 28%, #e3658e 52%, #b48bf0 76%, var(--ink-accent) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* Eyebrow sparkle spins, eyebrow gets a soft pill glow */
.hero-eyebrow > span:first-child { display: inline-block; animation: spin-slow 9s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

/* ---------- Mouse-driven depth (vars set by JS, range -1..1) ---------- */
.hero-stage { --mx: 0; --my: 0; --sx: 70%; --sy: 40%; }
.hero-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(420px circle at var(--sx) var(--sy), #ff9a6240, #e3658e1c 40%, transparent 70%); }
.hero-stage.is-hot::before { opacity: 1; }
html.theme-light .hero-stage::before { background: radial-gradient(420px circle at var(--sx) var(--sy), #ffb59a66, #f0a2c244 40%, transparent 70%); }

.phoenix-mascot { translate: calc(var(--mx) * -14px) calc(var(--my) * -9px); animation: float 6.5s ease-in-out infinite; will-change: transform, translate; transform-origin: 50% 80%; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(.7deg); } }
.hero-character::before { content: ''; position: absolute; inset: 14% 4% 6%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, #ffb36b55, #ef736530 55%, transparent 75%); filter: blur(10px); animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
.character-word { translate: calc(var(--mx) * 18px) calc(var(--my) * 10px); animation: word-drift 9s ease-in-out infinite alternate; }
@keyframes word-drift { from { opacity: .55; letter-spacing: -4px; } to { opacity: 1; letter-spacing: -1px; } }

/* Orbit: rotating ring with a travelling comet + expanding pulse */
.hero-orbit { translate: calc(var(--mx) * -26px) calc(var(--my) * -18px); }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hero-orbit::before { inset: -1px; border: 1px dashed #e3658e66; animation: spin-slow 38s linear infinite reverse; }
.hero-orbit::after { inset: -1px; border: 1px solid #ff9a62; opacity: 0; animation: pulse-ring 4.2s ease-out infinite; }
@keyframes pulse-ring { 0% { transform: scale(.96); opacity: .5; } 100% { transform: scale(1.22); opacity: 0; } }
.hero-orbit i { position: absolute; inset: -1px; border-radius: 50%; animation: spin-slow 11s linear infinite; }
.hero-orbit i::after { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 3px #ffb36b, 0 0 26px 8px #ef7365aa; }

/* Stars twinkle at different depths */
.hero-star { animation: twinkle-star 3.2s ease-in-out infinite; text-shadow: 0 0 14px #ffb36b99; }
.hero-star--one { translate: calc(var(--mx) * -34px) calc(var(--my) * -22px); }
.hero-star--two { translate: calc(var(--mx) * 22px) calc(var(--my) * 16px); animation-delay: 1.3s; animation-duration: 4.1s; }
@keyframes twinkle-star { 0%, 100% { opacity: .35; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(35deg); } }

/* Hero loop video (transparent WebM, Chromium/Firefox only; the still stays as fallback).
   - NO filter on the video: a CSS filter makes alpha video stop painting after a theme switch.
   - Framing (v2): the clip is generated from the still padded to 3:4 with green side bars (scripts/gen-hero-video.py),
     so nothing is cropped and the figure has the same vertical scale/position as the still. The video therefore uses
     the still's box as is (height 116%, top 1%, contain, top-aligned); only its width differs (3:4 vs 2:3), and
     object-fit centres it. Measured: figure bbox matches the still within ~1% (hair sway).
     (v1 needed height 103.1% / top -0.8% to hide a cropped crown; that compensation is gone.) */
.phoenix-mascot--video { filter: none; animation: none; opacity: 0; transition: opacity .6s ease;
  object-position: 50% 0; pointer-events: none;
  /* vertical parallax is ±3px (the still uses ±9px): the crown is ~1% from the stage top, so a bigger downward move opens a gap */
  translate: calc(var(--mx) * -14px) calc(var(--my) * -3px); }
.phoenix-mascot--video.is-playing { opacity: 1; }
.hero-character.has-video img.phoenix-mascot:not(.phoenix-mascot--video) { opacity: 0; transition: opacity .6s ease; }

/* Ember canvas (created by JS) */
.hero-embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- CTA ---------- */
.hero-cta { position: relative; isolation: isolate; transition: transform .25s var(--ease-out), box-shadow .25s; }
.hero-cta::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #ffffff55 50%, transparent 65%) no-repeat; background-size: 220% 100%; background-position: 160% 0; animation: cta-sheen 3.8s ease-in-out 1.8s infinite; }
html.theme-light .hero-cta::before { background-image: linear-gradient(110deg, transparent 35%, #ffffff44 50%, transparent 65%); }
@keyframes cta-sheen { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes sheen { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #ef73654d; }
.hero-cta > span:last-child { display: inline-block; transition: transform .25s var(--ease-out); }
.hero-cta:hover > span:last-child { transform: translate(4px, -4px); }
.hero-cta::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -2; box-shadow: 0 0 0 0 #ef736588; animation: cta-ping 2.6s ease-out 2s infinite; }
@keyframes cta-ping { 0% { box-shadow: 0 0 0 0 #ef736570; } 70%, 100% { box-shadow: 0 0 0 14px #ef736500; } }

/* Mascot bubble bobs gently */
.mascot-bubble { animation-name: pop, bubble-bob; animation-duration: .7s, 4.8s; animation-delay: 1.2s, 2s; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease-out), ease-in-out; animation-fill-mode: backwards, none; }
@keyframes bubble-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.mascot-bubble::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: #5fd68a; box-shadow: 0 0 0 0 #5fd68a99; animation: online 2s ease-out infinite; vertical-align: middle; }
@keyframes online { 70%, 100% { box-shadow: 0 0 0 7px #5fd68a00; } }

/* ---------- Ribbon marquee ---------- */
.ribbon { position: relative; margin: 22px -38px 0; padding: 13px 0; overflow: hidden; border-block: 1px solid var(--border); background: linear-gradient(90deg, var(--bg), transparent 6%, transparent 94%, var(--bg)), var(--soft-accent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); animation: rise .8s var(--ease-out) 1s backwards; }
.ribbon__track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--ink-accent); white-space: nowrap; }
.ribbon__item b { font-weight: 700; color: var(--text-dim); opacity: .75; letter-spacing: 2px; }
.ribbon__item i { font-style: normal; color: var(--accent); animation: spin-slow 6s linear infinite; display: inline-block; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section reveal & feature cards ---------- */
.reveal { transition-duration: .8s; transition-timing-function: var(--ease-out); }
.section__icon svg { animation: spin-slow 12s linear infinite; }
.feature-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; perspective: 1100px; }
.feature-row.reveal { opacity: 1; transform: none; }
.feature-row.reveal:not(.in) .feature-card { opacity: 0; }
.feature-row.reveal.in .feature-card { animation: card-in .9s var(--ease-out) backwards; }
.feature-row.reveal.in .feature-card:nth-child(2) { animation-delay: .12s; }
.feature-row.reveal.in .feature-card:nth-child(3) { animation-delay: .24s; }
.feature-row.reveal.in .feature-card:nth-child(4) { animation-delay: .36s; }
@keyframes card-in { from { opacity: 0; transform: translateY(46px) rotateX(14deg) scale(.96); } to { opacity: 1; transform: none; } }

.feature-card { position: relative; overflow: hidden; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%; padding: 22px 22px 20px; gap: 11px;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .35s var(--ease-out), border-color .25s, box-shadow .3s; will-change: transform; }
.feature-card.is-tilting { transition: transform .08s linear, border-color .25s, box-shadow .3s; }
.feature-card:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); border-color: #ef736566; box-shadow: 0 22px 44px #8356642e, 0 0 0 1px #ef736522; }
.feature-card::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx) var(--gy), #ff9a6232, transparent 65%); }
.feature-card:hover::before { opacity: 1; }
.feature-card > * { position: relative; z-index: 1; }
.feature-card__icon { transition: transform .5s var(--ease-out), box-shadow .3s; box-shadow: 0 8px 18px #ef736538; transform: rotate(-5deg) translateZ(30px); }
.feature-card:hover .feature-card__icon { transform: rotate(8deg) scale(1.14) translateZ(40px); box-shadow: 0 14px 28px #ef736566; }
.feature-card__icon--image { background: linear-gradient(135deg, #ff7ac3, #ff9a62); }
.feature-card__icon--role { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.feature-card h3 { transform: translateZ(20px); }
.feature-card .badge { position: relative; overflow: hidden; }
.feature-card .badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff77 50%, transparent 65%); transform: translateX(-130%); animation: sheen 4.5s ease-in-out infinite; }
.feature-card__actions .btn-primary { transition: background .25s, color .25s, transform .25s var(--ease-out), box-shadow .25s; }
.feature-card:hover .feature-card__actions .btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 8px 18px #ef736544; transform: translateX(4px); }
.feature-card__actions .btn-primary::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform .25s var(--ease-out); }
.feature-card:hover .feature-card__actions .btn-primary::after { transform: translateX(4px); }

/* Card cover art: bleeds to the card edges, icon straddles its lower edge */
.feature-card__art { position: relative; margin: -22px -22px 0; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(135deg, var(--soft-accent), #b48bf022); border-bottom: 1px solid var(--border); }
.feature-card__art:empty, .feature-card__art:not(:has(img)) { aspect-ratio: auto; height: 22px; background: none; border: 0; }
.feature-card__art img, .feature-card__video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.feature-card:hover .feature-card__art img, .feature-card:hover .feature-card__video { transform: scale(1.07); }
/* Loop video sits on top of the still cover (the still is the poster, so nothing flashes) */
.feature-card__video { position: absolute; inset: 0; opacity: 0; transition: transform .8s var(--ease-out), opacity .7s ease; pointer-events: none; }
.feature-card__video.is-playing { opacity: 1; }
.feature-card__art::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, var(--card), transparent); pointer-events: none; }
.feature-card > .badge { position: absolute; top: 12px; right: 12px; z-index: 3; backdrop-filter: blur(8px); border: 1px solid #ffffff2e; box-shadow: 0 2px 10px #0000002e; }
/* Badges sit on arbitrary artwork: a dark glass base keeps them legible on bright covers */
.feature-card > .badge--feature { background: #2a1d10b8; color: #ffc65a; }
.feature-card > .badge--beta { background: #25183fb8; color: #d6c8ff; }
.feature-card > .badge--new { background: #0f2a1ab8; color: #6fe3a0; }
html.theme-light .feature-card > .badge--feature { background: #2a1d10b0; color: #ffc65a; }
html.theme-light .feature-card > .badge--beta { background: #25183fb0; color: #d6c8ff; }
html.theme-light .feature-card > .badge--new { background: #0f2a1ab0; color: #6fe3a0; }
.feature-card__art + .badge ~ .feature-card__icon, .feature-card__art ~ .feature-card__icon { margin-top: -38px; z-index: 2; }
.feature-card__icon--matting { background: linear-gradient(135deg, #5fcfb8, #5a9fe8); }

/* Sidebar mascot + nav micro-motion */
/* Anchored at the feet: it stands on the login panel, so it must never lift off (no translateY). */
.phx-auth-entry__mascot img { animation: stand-breathe 4.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes stand-breathe {
  0%, 100% { transform: scale(1) rotate(0); }
  50%      { transform: scale(1.025) rotate(-.8deg); }
}
.side-nav__item { transition: background .2s, color .2s, transform .25s var(--ease-out); }
.side-nav__item:hover { transform: translateX(4px); }
.side-nav__item.is-active::after { animation: twinkle-star 3s ease-in-out infinite; }
.brand__logo img { transition: transform .6s var(--ease-out); }
.brand:hover .brand__logo img { transform: rotate(-12deg) scale(1.12); }

/* Click sparkles (created by JS) */
.spark { position: fixed; z-index: 95; pointer-events: none; font-size: 14px; color: #ff9a62; text-shadow: 0 0 10px #ffb36b; animation: spark-out .9s var(--ease-out) forwards; }
@keyframes spark-out { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--rot)); } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) { .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ribbon { margin-inline: -24px; } }
@media (max-width: 900px) { .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ribbon { margin-inline: -22px; } }
@media (max-width: 640px) {
  .feature-row { grid-template-columns: 1fr; }
  .ribbon { margin-inline: -15px; padding: 10px 0; }
  .ribbon__item { font-size: 10px; gap: 14px; padding-right: 14px; }
  .hero-orbit i::after { width: 8px; height: 8px; top: -4px; margin-left: -4px; }
}

/* ---------- Respect reduced motion: show final state, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .scroll-progress { display: none; }
  .hero__title em { animation: none; }
  .feature-row.reveal:not(.in) .feature-card { opacity: 1; }
  .feature-card, .feature-card:hover { transform: none; }
  .hero-embers { display: none; }
}
@media (hover: none) { .feature-card:hover { transform: none; } }