/* ============================================================================
   FixLab Studios — Scenes
   The hero vibe carried through every page: per-page colour identities,
   giant background wordmarks on sections, pointer-lit cards, glossy gold CTA
   panels, category hero boards, and cross-page transitions.
   Depends on foundation.css (tokens) and hero.css (hero ground and panel).
   ============================================================================ */

/* ---------- Colour identities (hero ground + section glows) ---------- */
[data-scene="gold"], .fx-hero { --g1: #d4922e; --g2: #a86a1a; --g3: #4e330c; --g4: #1e1508; --gs: 255, 214, 128; --gs2: 236, 156, 48; --gm1: 255, 240, 200; --gm2: 255, 190, 90; --sc: 241, 187, 95; --sc-deep: 200, 138, 42; }
[data-scene="copper"] { --g1: #e0663a; --g2: #b04a26; --g3: #4a2112; --g4: #1e0f0a; --gs: 255, 190, 160; --gs2: 240, 122, 90; --gm1: 255, 228, 212; --gm2: 255, 160, 120; --sc: 240, 122, 90; --sc-deep: 200, 74, 42; }
[data-scene="teal"] { --g1: #22b39a; --g2: #158a78; --g3: #0c3d38; --g4: #081d1d; --gs: 170, 245, 225; --gs2: 47, 209, 176; --gm1: 224, 255, 246; --gm2: 120, 230, 200; --sc: 47, 209, 176; --sc-deep: 21, 138, 120; }
[data-scene="cream"] { --g1: #e9c98a; --g2: #c9a15a; --g3: #5a4320; --g4: #24190c; --gs: 255, 240, 210; --gs2: 240, 205, 140; --gm1: 255, 248, 232; --gm2: 245, 215, 150; --sc: 240, 205, 140; --sc-deep: 200, 160, 90; }
[data-scene="ember"] { --g1: #e8712a; --g2: #b84c1c; --g3: #4a1f0f; --g4: #1e0d08; --gs: 255, 200, 160; --gs2: 242, 136, 44; --gm1: 255, 232, 210; --gm2: 255, 160, 100; --sc: 242, 136, 44; --sc-deep: 200, 90, 30; }

/* ---------- Cross-page transitions (progressive) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-vt-out 220ms var(--ease-out) both; }
::view-transition-new(root) { animation: fx-vt-in 320ms var(--ease-out) both; }
@keyframes fx-vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes fx-vt-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Section wordmarks and glows ---------- */
[data-mark] { position: relative; isolation: isolate; }
[data-mark]::before {
  content: attr(data-mark);
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  padding-top: 0.05em; text-align: right;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 22vw, 22rem); line-height: 0.8; letter-spacing: -0.06em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(var(--gm1, 255, 240, 200), 0.09);
  transform: translateX(6%);
}
[data-mark="left"]::before, [data-mark][data-mark-side="left"]::before { text-align: left; transform: translateX(-6%); }
[data-scene][data-mark]::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 50% at 85% 20%, rgba(var(--sc, 241, 187, 95), 0.16), transparent 70%),
    radial-gradient(30% 40% at 10% 80%, rgba(var(--sc-deep, 200, 138, 42), 0.12), transparent 70%);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    [data-mark]::before { animation: fx-mark-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes fx-mark-drift { from { transform: translate(6%, 8%); } to { transform: translate(6%, -8%); } }
@media (max-width: 767px) { [data-mark]::before { font-size: 26vw; opacity: 0.7; } }

/* ---------- Pointer-lit cards (JS sets --mx / --my on hover-capable devices) ---------- */
.fx-lit { position: relative; overflow: hidden; }
.fx-lit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--sc, 241, 187, 95), 0.16), transparent 60%);
  opacity: 0; transition: opacity 320ms var(--ease-out);
}
.fx-lit > * { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .fx-lit:hover::after { opacity: 1; }
}

/* ---------- Glossy gold CTA panel ---------- */
.fx-gold {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-2xl); text-align: center;
  padding: clamp(3.5rem, 7vw, 6rem) var(--space-6);
  color: #1a1305;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(255, 245, 215, 0.7), transparent 65%),
    radial-gradient(22% 80% at 0% 50%, rgba(255, 232, 170, 0.95), transparent 70%),
    radial-gradient(22% 80% at 100% 50%, rgba(255, 232, 170, 0.95), transparent 70%),
    linear-gradient(180deg, #ffd98d 0%, #f1bb5f 45%, #c8862a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(120, 70, 10, 0.3), 0 60px 120px -50px rgba(236, 143, 47, 0.7);
}
.fx-gold::before {
  content: attr(data-word); position: absolute; left: 50%; top: -0.12em; transform: translateX(-50%); z-index: -1; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 24vw, 22rem); line-height: 0.85; letter-spacing: -0.06em; white-space: nowrap;
  color: rgba(255, 250, 235, 0.22); -webkit-text-stroke: 1px rgba(120, 70, 10, 0.12);
}
.fx-gold::after {
  content: ''; position: absolute; inset: -30% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(104deg, transparent 44%, rgba(255, 255, 245, 0.45) 50%, transparent 56%);
  transform: translateX(-40%);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (min-width: 900px) {
  .fx-gold::after { animation: fx-sheen 12s var(--ease-in-out) infinite alternate; }
}
.fx-gold .eyebrow { color: #7a4a0a; }
.fx-gold .eyebrow::before { background: #7a4a0a; box-shadow: none; }
.fx-gold h2, .fx-gold .section-title { color: #1a1305; max-width: 20ch; margin: var(--space-3) auto var(--space-4); font-size: var(--text-4xl); }
.fx-gold h2 em, .fx-gold .section-title em { color: #6b3f06; }
.fx-gold p { max-width: 36rem; margin: 0 auto; color: rgba(40, 24, 4, 0.8); font-size: var(--text-lg); }
.fx-gold-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-8); }
.btn-ink { color: var(--color-accent-bright); background: #15110e; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 40px -20px rgba(0,0,0,0.6); }
.btn-ink .btn-disc { background: rgba(255,255,255,0.08); }
.btn-outline-ink { color: #1a1305; border-color: rgba(26, 19, 5, 0.35); background: rgba(255,255,255,0.18); }
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { transform: translateY(-1px); background: #1f1915; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 24px 50px -20px rgba(0,0,0,0.7); }
  .btn-outline-ink:hover { transform: translateY(-1px); background: rgba(255,255,255,0.3); border-color: rgba(26, 19, 5, 0.55); }
}
@media (max-width: 640px) { .fx-gold-actions .btn { flex: 1 1 100%; } }

/* ---------- Category hero boards (three scene cards + floating cues) ---------- */
.fx-hero--scene .fx-hero-title .fx-line-2 { background: linear-gradient(180deg, #f2f1f7 0%, rgb(var(--gm2, 255, 190, 90)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-hero--scene .fx-stage { height: clamp(22rem, 36vw, 27rem); }
.fx-hero--scene .fx-hero-panel { border-color: rgba(var(--gm1, 255, 228, 175), 0.16); box-shadow: inset 0 1px 0 rgba(var(--gm1, 255, 238, 205), 0.14), 0 -30px 90px -30px rgba(var(--gs, 255, 205, 120), 0.4), 0 70px 140px -40px rgba(0, 0, 0, 0.85); }
.fx-hero--scene .fx-hero-panel::before { background: radial-gradient(45% 60% at 50% 0%, rgba(var(--sc), 0.14), transparent 70%); }
.fx-hero--scene .fx-hero-panel::after { background: radial-gradient(40% 60% at 8% 100%, rgba(var(--sc-deep), 0.3), transparent 70%), radial-gradient(40% 60% at 92% 100%, rgba(var(--sc), 0.22), transparent 70%); }
.fx-subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: var(--space-6); }
.fx-subnav a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: rgba(255,255,255,0.04); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.fx-subnav a:hover, .fx-subnav a[aria-current="page"] { color: var(--color-text-primary); border-color: rgba(var(--sc), 0.5); background: rgba(var(--sc), 0.12); }
.fx-disclaimer { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); max-width: 40rem; }

.sc-board {
  position: absolute; left: 50%; top: 0; width: min(1180px, 92%); transform: translateX(-50%) rotateX(3deg); transform-origin: 50% 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: start;
  padding: 1.35rem; border-radius: 1.9rem; border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.015);
}
.sc-board--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sc-card {
  padding: 1.25rem 1.3rem; border-radius: 1.25rem; font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.09); background: linear-gradient(180deg, #1c1714 0%, #15110e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 60px -30px rgba(0,0,0,0.8);
}
.sc-card--accent { border-color: rgba(var(--sc), 0.4); background: linear-gradient(180deg, rgba(var(--sc), 0.16) 0%, #15110e 60%); box-shadow: inset 0 1px 0 rgba(var(--gm1), 0.2), 0 30px 70px -30px rgba(var(--sc), 0.5); transform: translateY(-1rem); }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.sc-head h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.sc-kicker { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--sc)); }
.sc-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid rgba(var(--sc), 0.4); background: rgba(var(--sc), 0.14); font-size: 0.66rem; font-weight: 700; color: rgb(var(--gm1)); white-space: nowrap; }
.sc-pill i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--sc)); box-shadow: 0 0 8px rgb(var(--sc)); }
.sc-pill--ok { border-color: rgba(119,213,154,0.4); background: var(--color-success-soft); color: var(--color-success); }
.sc-pill--ok i { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.sc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid rgba(255,255,255,0.07); }
.sc-row:first-of-type { border-top: 0; }
.sc-row b { font-weight: 600; }
.sc-row small { display: block; font-size: 0.74rem; color: var(--color-text-muted); }
.sc-row div { flex: 1; min-width: 0; }
.sc-icon { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: 0.6rem; background: rgba(var(--sc), 0.14); color: rgb(var(--gm1)); }
.sc-icon svg { width: 1.05rem; height: 1.05rem; }
.sc-check { flex: none; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--color-success-soft); color: var(--color-success); }
.sc-check svg { width: 0.7rem; height: 0.7rem; }
.sc-check--now { background: rgba(var(--sc), 0.2); color: rgb(var(--gm1)); }
.sc-check--todo { background: rgba(255,255,255,0.06); color: var(--color-text-muted); }
.sc-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 0.75rem; }
.sc-bar i { display: block; height: 100%; width: var(--w, 60%); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--sc-deep)), rgb(var(--sc))); }
.sc-steps { display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); gap: 4px; margin-top: 0.9rem; list-style: none; }
.sc-steps li { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.sc-steps li.is-done { background: rgb(var(--sc)); }
.sc-steps li.is-now { background: rgb(var(--sc)); }
.sc-wave { display: flex; align-items: center; gap: 4px; height: 2.2rem; margin: 0.8rem 0 0.2rem; }
.sc-wave i { flex: 1; height: 30%; border-radius: 999px; background: rgb(var(--sc)); opacity: 0.8; transform-origin: 50% 50%; }
.sc-bubble { width: fit-content; max-width: 86%; margin-top: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 0.9rem 0.9rem 0.9rem 0.3rem; background: var(--color-surface-soft); border: 1px solid var(--color-border); font-size: 0.8rem; line-height: 1.4; }
.sc-bubble--me { margin-left: auto; border-radius: 0.9rem 0.9rem 0.3rem 0.9rem; background: rgba(var(--sc), 0.9); color: #0d0b09; border-color: transparent; }
.sc-composer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding: 0.6rem 0.6rem 0.6rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.25); color: var(--color-text-muted); font-size: 0.8rem; }
.sc-composer b { padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); background: var(--gradient-accent); color: var(--color-text-on-accent); font-size: 0.72rem; font-weight: 700; }
.sc-bubble small { display: block; margin-bottom: 0.15rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.sc-browser { border-radius: 0.8rem; border: 1px solid rgba(255,255,255,0.09); background: #120f0d; overflow: hidden; }
.sc-browser-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.sc-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.sc-browser-bar span { flex: 1; margin-left: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.05); font-size: 0.62rem; color: var(--color-text-muted); }
.sc-browser-body { padding: 0.8rem; }
.sc-line { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.7); margin-bottom: 6px; }
.sc-line--thin { height: 4px; background: rgba(255,255,255,0.22); }
.sc-line--gold { height: 10px; width: 34%; margin-top: 8px; background: linear-gradient(90deg, rgb(var(--sc)), rgb(var(--sc-deep))); }
.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 0.7rem; }
.sc-tiles i { height: 26px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); }
.sc-phone { position: relative; width: 8.5rem; margin: 0 auto; aspect-ratio: 9 / 16; padding: 1.2rem 0.5rem 0.6rem; border-radius: 1.4rem; background: linear-gradient(170deg, #211b17, #120f0d); border: 5px solid #2b241e; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); }
.sc-phone::before { content: ''; position: absolute; left: 50%; top: 0.45rem; transform: translateX(-50%); width: 36%; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.6); }
.sc-phone-card { padding: 0.45rem; margin-top: 0.4rem; border-radius: 0.5rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); }
.sc-phone-card b { display: block; height: 5px; width: 60%; border-radius: 999px; background: rgba(255,255,255,0.8); margin-bottom: 4px; }
.sc-phone-card i { display: block; height: 3px; width: 85%; border-radius: 999px; background: rgba(255,255,255,0.22); margin-top: 3px; }
.sc-phone-fab { position: absolute; right: 0.55rem; bottom: 0.6rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--sc)), rgb(var(--sc-deep))); box-shadow: 0 8px 18px rgba(var(--sc), 0.4); }
.sc-avatar { flex: none; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; font-size: 0.72rem; font-weight: 700; color: #0d0b09; background: linear-gradient(160deg, rgb(var(--gm1)), rgb(var(--sc))); }
.sc-cal { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 0.8rem; background: rgba(var(--sc), 0.12); border: 1px solid rgba(var(--sc), 0.3); }
.sc-cal-date { flex: none; width: 2.6rem; text-align: center; border-radius: 0.5rem; background: #0d0b09; padding: 0.3rem 0; }
.sc-cal-date b { display: block; font-size: 1rem; line-height: 1; }
.sc-cal > div { flex: 1; min-width: 0; }
.sc-cal > div b { display: block; font-weight: 600; }
.sc-cal > div small { display: block; font-size: 0.74rem; color: var(--color-text-muted); }
.sc-cal-date small { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }

/* Cursor and chip placement around the scene board */
.fx-hero--scene .fx-float--cur-1 { left: 5%; top: 84%; }
.fx-hero--scene .fx-float--cur-2 { left: auto; right: 6%; top: 6%; }
.fx-hero--scene .fx-float--chip-b { left: auto; right: 3%; top: 78%; }

/* Loops for the scene boards */
@media (hover: hover) and (min-width: 900px) {
  .fx-stage.is-in-view .sc-wave i { animation: sc-wave 1.1s var(--ease-in-out) infinite alternate; }
  .fx-stage.is-in-view .sc-wave i:nth-child(2n) { animation-delay: -0.3s; }
  .fx-stage.is-in-view .sc-wave i:nth-child(3n) { animation-delay: -0.6s; }
  .fx-stage.is-in-view .sc-wave i:nth-child(5n) { animation-delay: -0.9s; }
  .fx-stage.is-in-view .sc-steps li.is-now { animation: fx-now 1.8s var(--ease-in-out) infinite alternate; }
  .fx-stage.is-in-view .sc-card--accent { animation: sc-hover 7s var(--ease-in-out) infinite alternate; }
}
@keyframes sc-wave { from { transform: scaleY(0.4); } to { transform: scaleY(1.6); } }
@keyframes sc-hover { from { transform: translateY(-1rem); } to { transform: translateY(-1.6rem); } }
@keyframes fx-now { from { opacity: 0.45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-wave i, .sc-steps li.is-now, .sc-card--accent { animation: none !important; } }

@media (max-width: 1024px) {
  .sc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-board > :nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .fx-hero--scene .fx-stage { height: 24rem; }
  .sc-board { width: 100%; grid-template-columns: 1fr; padding: 0.9rem; transform: translateX(-50%); }
  .sc-board > :nth-child(2), .sc-board > :nth-child(3) { display: none; }
  .sc-card--accent { transform: none; }
}