/* Home-only studio skin. Layout, content and interaction styles stay in style.css. */
body.pixelsound-home {
  --bg: #0b1114;
  --bg-soft: #102126;
  --surface: #10272bf2;
  --surface-soft: #0a1b20;
  --text: #e6eee9;
  --ink: #f2e6cf;
  --muted: #c1cfcb;
  --line: #526e6b77;
  --line-strong: #8d9b85;
  --accent: #c9a977;
  --accent-mid: #d9bb88;
  --accent-blue: #72e6df;
  --accent-cyan: #72e6df;
  --accent-light: #eaddc5;
  --sage: #8fc6bb;
  --studio-section-veil: #08161bc9;
  position: relative;
  isolation: isolate;
  background: #0b1114;
  color-scheme: dark;
}
.pixelsound-home .site-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* The very same local backdrop and lighting used by Feature Atlas. */
  background: linear-gradient(180deg, #07101308 15%, #07101318 65%, #071013c9), url('../assets/feature-atlas/studio-room.webp?v=d82664a897f9') center top / cover no-repeat;
}
.pixelsound-home .button {
  color: #1e211f;
  border-color: #e4c797;
  background: linear-gradient(#ecd2a2, #c6a06b);
  box-shadow: inset 0 1px #fff8, 0 2px 7px #0003;
}
.pixelsound-home .button:hover { background: #f2d9a9; }
.pixelsound-home .button-secondary { color: var(--ink); border-color: var(--line-strong); background: #10272bbf; }
.pixelsound-home .button-secondary:hover { background: #1d3a3c; }
/* One full-width veil: the original TEAM treatment, independent of content widths. */
.pixelsound-home :is(.workflow-ending, .site-footer) {
  position: relative;
  isolation: isolate;
  background: none;
}
.pixelsound-home :is(.hero, .intro-section, .workflow-ending, .site-footer)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: var(--studio-section-veil);
}
/* Replace the uniform TEAM veil inside the hero with a light 15% base.
   Keep its original density only behind the header and at the Manage join. */
.pixelsound-home .hero::before {
  top: -90px;
  background: linear-gradient(var(--studio-section-veil) 90px, #08161b26 190px);
}
.pixelsound-home .intro-section::before {
  background: linear-gradient(#08161b26 calc(100% - 56px), var(--studio-section-veil));
}
/* One strong central ellipse replaces the former extra black overlay.
   Its shared viewport coordinates keep the two pieces of the hero continuous. */
.pixelsound-home :is(.hero, .intro-section)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    ellipse 54vw clamp(360px, 46vh, 460px) at 50% clamp(270px, 34vh, 350px),
    #01080ceb 0%, #01080ce6 30%, #01080cb8 54%, #01080c47 76%, transparent 100%
  );
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
/* Fade only the outer bounds: no added shading behind the header or Manage. */
.pixelsound-home .hero::after { mask-image: linear-gradient(transparent, #000 48px); }
.pixelsound-home .intro-section::after { mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.pixelsound-home .hero .hero-title { color: #f4e4bf; text-shadow: 0 3px 18px #000b; }
.pixelsound-home .home-title-wave { color: #69ded8; opacity: .8; }
.pixelsound-home .hero-subtitle { color: #d3dcda; text-shadow: 0 2px 8px #000; }
.pixelsound-home .home-title-line::before {
  background: linear-gradient(90deg, transparent, #77aaa555 12%, transparent 28%, transparent 72%, #77aaa555 88%, transparent);
}
.pixelsound-home :is(.manage-section, .create-section)::before {
  background: linear-gradient(180deg, #08161bc9, #08161be8 18%, #08161be8 82%, #08161bc9);
}
.pixelsound-home .prepare-section { background: #08161bd9; }
.pixelsound-home .human-ai-section { background: linear-gradient(#08161bc9, #11272be8 18%, #11272be8 82%, #08161bc9); }
.pixelsound-home .deliver-section { background: none; }
.pixelsound-home .deliver-section::before { height: 100%; background: linear-gradient(180deg,#08161bc9,#08161be8 18%,#08161be8 82%,#08161bc9); }
.pixelsound-home :is(.section-heading, .human-ai-copy) { text-shadow: 0 2px 12px #0009; }
.pixelsound-home .ecosystem-card {
  border-color: #7baaa480;
  background: linear-gradient(135deg, #173638f5, #09191ff5);
  box-shadow: inset 0 1px #c7fff016, 0 10px 28px #0005;
}
.pixelsound-home .ecosystem-carousel[data-ready] .ecosystem-card {
  border-color: rgba(114, 230, 223, calc(.22 + .25 * var(--ecosystem-depth, 0)));
  box-shadow: inset 0 1px #c7fff016, 0 10px 28px #0005;
}
/* The existing logo clock controls this resting state; hover remains independent. */
.pixelsound-home .ecosystem-card {
  position: relative;
  isolation: isolate;
  transition: border-color .24s ease;
}
.pixelsound-home .ecosystem-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, #72e6df19, transparent 75%);
  box-shadow: 0 0 0 1px #9df7e66b, 0 0 22px #56cec233, inset 0 0 22px #72e6df12;
  opacity: 0;
  transition: opacity .24s ease;
}
.pixelsound-home .ecosystem-carousel[data-ready] .ecosystem-card:hover { border-color: #8bc8be; }
.pixelsound-home .ecosystem-card:hover::before { opacity: .3; }
.pixelsound-home .ecosystem-carousel[data-logo-landed] .ecosystem-card[aria-current="true"] { border-color: #8aeee0; }
.pixelsound-home .ecosystem-carousel[data-logo-landed] .ecosystem-card[aria-current="true"]::before { opacity: 1; }
.pixelsound-home .ecosystem-carousel[data-logo-landed] .ecosystem-card[aria-current="true"]:hover { border-color: #c2fff3; }
@media (prefers-reduced-motion: reduce) {
  .pixelsound-home .ecosystem-card,
  .pixelsound-home .ecosystem-card::before { transition: none; }
}
/* Smoked glass cards retain the source illustrations and their dimensions. */
.pixelsound-home .stage-card {
  --stage-border: #7baaa480;
  background: linear-gradient(135deg, #173638f5, #09191ff5);
  box-shadow: inset 0 1px #c7fff016, 0 5px 16px #0005;
}
.pixelsound-home .stage-card strong { color: #dbeae5; text-shadow: 0 2px 8px #000; }
.pixelsound-home .stage-card::before { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) saturate(.65); opacity: .75; }
.pixelsound-home .stage-card:hover { --stage-border: #8bd8cd; box-shadow: inset 0 1px #c7fff022, 0 8px 20px #0006; }
.pixelsound-home .workflow-stages .stage-card.active,
.pixelsound-home .workflow-stages .stage-card.active:hover {
  --stage-border: #70dcd1;
  box-shadow: 0 0 0 3px #72e6df33, 0 12px 28px #0006;
}
.pixelsound-home .workflow-stages .stage-card.active strong { color: #ecfff7; }
.pixelsound-home .workflow-stages .stage-card.completed,
.pixelsound-home .workflow-stages .stage-card.completed:hover {
  --stage-border: #84b7a8;
  box-shadow: 0 0 0 1px #84b7a844, 0 6px 16px #0004;
}
.pixelsound-home .workflow-stages .stage-card.completed strong { color: #9ac9bd; }
.pixelsound-home .workflow-wave { filter: drop-shadow(0 1px 2px #0009); }
.pixelsound-home .workflow-wave-line,
.pixelsound-home .workflow-wave-tip,
.pixelsound-home .workflow-team-note { stroke: #83d8c6; }
.pixelsound-home .premium-video-frame { border-color: #9c956e; background: linear-gradient(#253635, #101e22); box-shadow: inset 0 1px #e9d5b933, 0 14px 30px #0006; }
.pixelsound-home .premium-video-frame:hover { box-shadow: 0 18px 34px #0008; }
.pixelsound-home .delivery-sequence-nav button { color: #e6eee9; border-color: #7baaa480; }
.pixelsound-home .delivery-sequence-nav button[aria-current="true"] { color: #302b24; border-color: #c9a977; }

/* Reserve the actual source ratios before metadata arrives (1280x720 / 1280x400). */
.pixelsound-home :is(.manage-video-frame, .dubbing-preview) video { aspect-ratio: 16 / 9; }
.pixelsound-home .human-video video { aspect-ratio: 16 / 5; }
.pixelsound-home .workflow-stages .stage-card:focus-visible { outline-color: #8df7ee; }