/* ============================================================
   Cashmere — animated SVG "scenes" + hero graphics
   Brand language: topographic contours, copper/blue signals,
   woven data. Animations play when a scene scrolls into view
   (.go added by scenes.js) and degrade to the final state when
   motion is reduced/disabled.
   ============================================================ */

/* ---- scene shell ---- */
.scene { display: block; width: 100%; height: auto; overflow: visible; }
.scene * { transform-box: fill-box; }

/* ---- scene palette ---- */
.s-ink    { color: var(--cm-ink-primary); }
.s-copper { color: var(--cm-accent); }
.s-blue   { color: var(--cm-blue); }
.s-faint  { color: color-mix(in srgb, var(--cm-ink-primary) 16%, transparent); }
.s-label  { font-family: var(--cm-font-sans); font-weight: 400; fill: var(--cm-ink-secondary); }
.s-mono   { font-family: var(--cm-font-mono); fill: var(--cm-ink-tertiary); }
.s-fill-card { fill: var(--cm-bg-primary); stroke: var(--cm-border); }

/* SVG <text> defaults to black fill — give scene labels readable colors
   even when a color class (which only sets `color`) is applied to text. */
.scene text { fill: var(--cm-ink-secondary); font-family: var(--cm-font-sans); }
.scene text.s-copper { fill: var(--cm-accent); }
.scene text.s-blue   { fill: var(--cm-blue); }
.scene text.s-ink    { fill: var(--cm-ink-primary); }
.scene text.s-mono   { fill: var(--cm-ink-tertiary); font-family: var(--cm-font-mono); }

/* ============================================================
   ENTRANCE ANIMATIONS — base state is the START (hidden); the
   final keyframe is the visible state, so reduced-motion (which
   collapses duration to ~0 via the global rule) lands visible.
   ============================================================ */
.scene .draw {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--l, 240); stroke-dashoffset: var(--l, 240);
}
.scene.go .draw { animation: sDraw 1.2s cubic-bezier(.4,0,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sDraw { to { stroke-dashoffset: 0; } }

.scene .pop { opacity: 0; transform: scale(.55); transform-origin: center; }
.scene.go .pop { animation: sPop .55s cubic-bezier(.2,.85,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sPop { to { opacity: 1; transform: scale(1); } }

.scene .rise { opacity: 0; transform: translateY(12px); }
.scene.go .rise { animation: sRise .6s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sRise { to { opacity: 1; transform: none; } }

.scene .slidein { opacity: 0; transform: translateX(20px); }
.scene.go .slidein { animation: sSlide .6s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sSlide { to { opacity: 1; transform: none; } }

.scene .grow-x { transform: scaleX(0); transform-origin: left center; }
.scene.go .grow-x { animation: sGrow 1s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sGrow { to { transform: scaleX(1); } }

.scene .settle { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.scene.go .settle { animation: sSettle .9s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: var(--d, 0s); }
@keyframes sSettle { to { opacity: 1; transform: translate(0, 0); } }

/* ============================================================
   CONTINUOUS ANIMATIONS — decorative; start once in view.
   ============================================================ */
.scene .pulse-ring { opacity: 0; transform-origin: center; }
.scene.go .pulse-ring { animation: sPulse 2.6s ease-out infinite; animation-delay: var(--d, 0s); }
@keyframes sPulse { 0% { transform: scale(.5); opacity: .65; } 70% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }

.scene .scan { opacity: 0; }
.scene.go .scan { animation: sScan 4.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes sScan {
  0% { transform: translateX(0); opacity: 0; }
  8% { opacity: .9; } 92% { opacity: .9; }
  100% { transform: translateX(var(--scan, 300px)); opacity: 0; }
}

.scene .flow { opacity: 0; }
.scene.go .flow { animation: sFlow 2.8s linear infinite; animation-delay: var(--d, 0s); }
@keyframes sFlow {
  0% { transform: translate(0, 0); opacity: 0; }
  14% { opacity: 1; } 86% { opacity: 1; }
  100% { transform: translate(var(--fx, 0px), var(--fy, 0px)); opacity: 0; }
}

.scene.go .float { animation: sFloat 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes sFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.scene.go .breathe { animation: sBreathe 4s ease-in-out infinite; }
@keyframes sBreathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.scene.go .shimmer { animation: sShimmer 3.4s ease-in-out infinite; }
@keyframes sShimmer { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ============================================================
   HERO SPLIT LAYOUT (copy + art)
   ============================================================ */
.page-hero.split .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.hero-art {
  position: relative; border-radius: var(--cm-radius-lg);
  background: var(--cm-bg-secondary); border: 1px solid var(--cm-border);
  padding: clamp(18px, 2.6vw, 32px); overflow: hidden;
  box-shadow: var(--cm-shadow-soft);
}
.hero-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(78% 64% at 82% 4%, color-mix(in srgb, var(--cm-accent-pale) 34%, transparent), transparent 70%),
    radial-gradient(70% 60% at 8% 100%, color-mix(in srgb, var(--cm-blue-soft) 22%, transparent), transparent 72%);
}
.hero-art .scene { position: relative; z-index: 1; }

/* in-body scene showcase block */
.scene-band { position: relative; border-radius: var(--cm-radius-lg); background: var(--cm-bg-primary); border: 1px solid var(--cm-border); overflow: hidden; padding: clamp(24px, 4vw, 52px); }
.scene-band::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 80% at 90% 10%, color-mix(in srgb, var(--cm-accent-pale) 26%, transparent), transparent 70%); pointer-events: none; }
.scene-band .scene { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

@media (max-width: 940px) {
  .page-hero.split .wrap { grid-template-columns: 1fr; }
  .hero-art { order: 2; max-width: 540px; }
}