/* ==========================================================================
   Zyntel — Imagery & motion
   Colour: the SPECTRUM (cyan · violet · magenta · pink) lives only inside the
   commerce imagery. UI chrome, type and controls stay ink + Zyntel blue.
   Motion: each movement carries a piece of the product story (see app.js).
   Reduced motion: base.css zeroes durations; final states are always defined.
   ========================================================================== */

/* ----------------------------------------------------- Imagery primitives */
.gfx .iv-bg { fill: var(--zy-color-neutral-50); }
.gfx .iv-paper { fill: var(--zy-color-surface-page); stroke: var(--zy-color-border-default); stroke-width: 1; }
.gfx .iv-shadow { fill: var(--zy-color-spectrum-ink); opacity: 0.07; }
.gfx .iv-bar { fill: var(--zy-color-neutral-200); }
.gfx .iv-bar--strong { fill: var(--zy-color-neutral-300); }
.gfx .iv-bar--ink { fill: var(--zy-color-text-primary); }
.gfx .iv-bar--signal-soft { fill: var(--zy-color-brand-200); }
.gfx .iv-strike { opacity: 0.8; }
.gfx .iv-line { stroke: var(--zy-color-border-default); stroke-width: 1; fill: none; }
.gfx .iv-glass { fill: #fff; opacity: 0.32; }
.gfx .iv-cap-dark { fill: var(--zy-color-spectrum-ink); opacity: 0.86; }
.gfx .iv-label-band { fill: #fff; opacity: 0.92; }
.gfx .iv-floor { fill: var(--zy-color-neutral-50); }
.gfx .iv-plinth { fill: var(--zy-color-surface-page); stroke: var(--zy-color-border-default); stroke-width: 1; }
.gfx .iv-plinth-top { fill: var(--zy-color-neutral-50); stroke: var(--zy-color-border-default); stroke-width: 1; }
.gfx .iv-plinth-side { fill: var(--zy-color-neutral-100); stroke: var(--zy-color-border-default); stroke-width: 1; }
.gfx .iv-tag--active { stroke: var(--zy-color-signal-node); stroke-width: 1.5; }
.gfx .iv-check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gfx .iv-cap { stroke: var(--zy-color-signal-node); stroke-width: 1.5; stroke-dasharray: 3 3; }
.gfx .iv-diamond { fill: none; stroke: var(--zy-color-signal-node); stroke-width: 1.5; }
.gfx .iv-ring { fill: none; stroke: var(--zy-color-neutral-200); stroke-width: 4; }
.gfx .iv-arc { fill: none; stroke-width: 4; stroke-linecap: round; }
.gfx .iv-button { fill: var(--zy-color-text-primary); }
.gfx .iv-screen { fill: var(--zy-color-brand-50); stroke: var(--zy-color-border-subtle); }
.gfx .iv-key { fill: var(--zy-color-neutral-100); }
.gfx .iv-bubble { fill: var(--zy-color-neutral-100); }
.gfx .iv-bubble--signal { fill: var(--zy-color-brand-50); }
.gfx .iv-hub { fill: var(--zy-color-surface-page); stroke: var(--zy-color-signal-node); stroke-width: 1.5; }
.gfx .iv-hole { fill: var(--zy-color-surface-subtle); }
.gfx .iv-perf { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 4; opacity: 0.8; }
.gfx .iv-blocked { fill: var(--zy-color-neutral-200); opacity: 0.8; }
/* ledger on the dark proof band */
.gfx .iv-ledger-axis { stroke: rgba(255, 255, 255, 0.16); }
.gfx .iv-ledger-label { fill: rgba(255, 255, 255, 0.18); }
.gfx .iv-ledger-track { fill: rgba(255, 255, 255, 0.06); }
.gfx .iv-ledger-node { fill: #fff; }
.gfx .iv-ledger-stop { fill: #fff; }
.gfx .iv-ledger-cap { stroke: var(--zy-color-brand-300); stroke-width: 1.5; stroke-dasharray: 4 4; }
.gfx .iv-ledger-caplabel { fill: var(--zy-color-brand-300); font: 600 11px/1 var(--zy-font-sans); letter-spacing: 0.12em; }

/* hero stage cards */
.hero-card__label { fill: var(--zy-color-text-secondary); font: 500 11px/1 var(--zy-font-sans); letter-spacing: 0.12em; text-transform: uppercase; }

/* ----------------------------------------------------------- Scene motion */
/* Hidden starting states apply only when motion is allowed and JS is on. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-scene] .iv-rise { opacity: 0; transform: translateY(18px); transform-box: fill-box; }
  .js [data-scene] .iv-grow { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
  .js [data-scene] .iv-draw { stroke-dasharray: 900; stroke-dashoffset: 900; }
  .js [data-scene] .iv-pop { opacity: 0; transform: translateY(8px) scale(0.98); transform-box: fill-box; transform-origin: center; }

  [data-scene].is-in .iv-rise { opacity: 1; transform: none; transition: opacity 600ms var(--zy-motion-easing-enter), transform 700ms var(--zy-motion-easing-enter); transition-delay: calc(var(--d, 0) * 110ms); }
  [data-scene].is-in .iv-grow { transform: none; transition: transform 700ms var(--zy-motion-easing-standard) 700ms; }
  [data-scene].is-in .iv-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1100ms var(--zy-motion-easing-standard) 350ms; }
  [data-scene].is-in .iv-pop { opacity: 1; transform: none; transition: opacity 420ms var(--zy-motion-easing-enter) 1150ms, transform 520ms var(--zy-motion-easing-enter) 1150ms; }
  /* ledger rows fill one after another, then stop at the cap */
  [data-scene].is-in .iv-grow-row .iv-grow { transition-delay: calc(500ms + var(--d, 0) * 90ms); }
}

/* ================================================================ 02 HERO */
.hero__visual-meta { display: flex; align-items: center; justify-content: flex-end; gap: var(--zy-space-4); margin-top: var(--zy-space-2); }
.hero__visual-meta .hero__visual-label { margin-top: 0; }
.motion-toggle {
  display: inline-flex; align-items: center; gap: var(--zy-space-2); min-height: 2.75rem; padding-inline: var(--zy-space-2);
  color: var(--zy-color-text-secondary); border-radius: var(--zy-radius-sm);
}
.motion-toggle:hover { color: var(--zy-color-text-signal); }
.motion-toggle__icon { position: relative; width: 10px; height: 10px; }
.motion-toggle__icon::before, .motion-toggle__icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.motion-toggle__icon::before { left: 1px; } .motion-toggle__icon::after { right: 1px; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon::before { left: 1px; width: 0; height: 0; top: 0; background: none; border-left: 9px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.motion-toggle[aria-pressed="true"] .motion-toggle__icon::after { display: none; }
@media (max-width: 47.99em) { .hero__visual-meta { justify-content: space-between; } }

.hero-card, .hero-card__leader { opacity: 0; transition: opacity 500ms var(--zy-motion-easing-enter), transform 600ms var(--zy-motion-easing-enter); }
.hero-card { transform: translateY(8px); transform-box: fill-box; }
.hero__visual.is-drawn .hero-card, .hero__visual.is-drawn .hero-card__leader { opacity: 1; transform: none; }
.hero__visual.is-drawn [data-step="1"] { transition-delay: 900ms; }
.hero__visual.is-drawn [data-step="2"] { transition-delay: 1150ms; }
.hero__visual.is-drawn [data-step="3"] { transition-delay: 1400ms; }
/* as the signal passes each stage, that card "receives" it */
.hero-card__frame { transition: stroke 300ms var(--zy-motion-easing-standard); }
.hero__visual.is-signal [data-step] .hero-card__frame { animation: zy-card-receive 1100ms var(--zy-motion-easing-standard) both; }
.hero__visual.is-signal [data-step="1"] .hero-card__frame { animation-delay: 150ms; }
.hero__visual.is-signal [data-step="2"] .hero-card__frame { animation-delay: 900ms; }
.hero__visual.is-signal [data-step="3"] .hero-card__frame { animation-delay: 1700ms; }
@keyframes zy-card-receive { 0% { stroke: var(--zy-color-border-default); stroke-width: 1; } 25% { stroke: var(--zy-color-signal-node); stroke-width: 1.5; } 100% { stroke: var(--zy-color-border-default); stroke-width: 1; } }
.hero__visual.is-signal [data-step="3"] .iv-grow { animation: zy-value-set 900ms var(--zy-motion-easing-standard) 1700ms both; transform-box: fill-box; transform-origin: left center; }
@keyframes zy-value-set { 0% { transform: scaleX(0.2); } 100% { transform: scaleX(1); } }
.hero__visual.is-paused .g-signal { animation: none; opacity: 0; }
.hero__visual.is-paused [data-step] .hero-card__frame, .hero__visual.is-paused [data-step] .iv-grow { animation: none; }
.hero__visual.is-still .hero-card, .hero__visual.is-still .hero-card__leader { opacity: 1; transform: none; }

/* ============================================================ 03 CONTEXT */
/* the flow line draws across the three steps as the problem unfolds */
@media (prefers-reduced-motion: no-preference) {
  .js .flow .flow-step::before { transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--zy-motion-easing-standard); transition-delay: calc(var(--i, 0) * 250ms + 200ms); }
  .js .flow.is-flowing .flow-step::before { transform: none; }
  @media (max-width: 63.99em) {
    .js .flow .flow-step::before { transform: scaleY(0); transform-origin: top; }
    .js .flow.is-flowing .flow-step::before { transform: none; }
  }
}

/* ============================================================ 04 VALUE */
.value__media { background: var(--zy-color-surface-page); margin: 0; }
.value__media-label {
  border: 0; background: rgba(255, 255, 255, 0.88); color: var(--zy-color-text-secondary);
  border: var(--zy-border-hairline) solid var(--zy-color-border-subtle);
}

/* ============================================================ 05 ENGINE */
.engine__rail { display: none; }
@media (min-width: 64em) {
  .engine__track::before { opacity: 0.5; }
  .engine__rail { display: block; position: absolute; left: 10%; right: 10%; top: calc(var(--zy-space-4) + 7px); height: 2px; margin-top: -0.5px; pointer-events: none; }
  .engine__rail-fill { display: block; height: 100%; background: var(--zy-color-signal-node); transform: scaleX(var(--engine-progress, 0)); transform-origin: left; transition: transform var(--zy-motion-duration-story) var(--zy-motion-easing-standard); }
}
.engine__panel.is-swapping .engine__copy > *, .engine__panel.is-swapping .engine__field dd { animation: zy-swap 420ms var(--zy-motion-easing-enter) both; }
.engine__panel.is-swapping .engine__field:nth-child(2) dd { animation-delay: 40ms; }
.engine__panel.is-swapping .engine__field:nth-child(3) dd { animation-delay: 80ms; }
.engine__panel.is-swapping .engine__field:nth-child(4) dd { animation-delay: 120ms; }
@keyframes zy-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ======================================================= 06 CAPABILITIES */
.cap__panel { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows var(--zy-motion-duration-section) var(--zy-motion-easing-standard); }
.cap__panel[data-open="true"] { grid-template-rows: 1fr; }
.cap__panel-inner { overflow: hidden; min-height: 0; padding-left: var(--cap-indent); }
.cap__panel-inner > .cap__detail { padding-bottom: var(--zy-space-8); opacity: 0; transform: translateY(-4px); transition: opacity var(--zy-motion-duration-component) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-section) var(--zy-motion-easing-standard); }
.cap__panel[data-open="true"] .cap__detail { opacity: 1; transform: none; transition-delay: 80ms; }
.cap__visual { display: none; }
@media (min-width: 64em) {
  .cap__visual { display: grid; margin-top: var(--zy-space-10); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-lg); background: var(--zy-color-surface-page); aspect-ratio: 360 / 220; overflow: hidden; }
  .cap__glyph { grid-area: 1 / 1; opacity: 0; transform: translateY(6px); transition: opacity var(--zy-motion-duration-section) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-section) var(--zy-motion-easing-standard); }
  .cap__glyph[data-active="true"] { opacity: 1; transform: none; }
  .cap__glyph .gfx { width: 100%; height: 100%; }
}

/* ========================================================== 07 SOLUTIONS */
.tile { transition: border-color var(--zy-motion-duration-component) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard), box-shadow var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--zy-elevation-2); }
.tile__art { background: var(--zy-color-surface-page); }

/* ====================================================== 08 APPLICATIONS */
.channel-stage { position: relative; display: grid; aspect-ratio: 4 / 5; border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-lg); overflow: hidden; background: var(--zy-color-neutral-50); }
.channel-scene { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(1.02); transition: opacity 450ms var(--zy-motion-easing-standard), transform 600ms var(--zy-motion-easing-enter), visibility 0s linear 450ms; }
.channel-scene[data-active="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.channel-scene .gfx { width: 100%; height: 100%; }
@media (max-width: 63.99em) { .channel-stage { aspect-ratio: 4 / 3; } }
.selector__tab { transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }

/* ====================================================== 09 INTEGRATIONS */
@media (prefers-reduced-motion: no-preference) {
  .js [data-eco] .eco-node .g-line-conceptual { stroke-dasharray: 4 4; stroke-dashoffset: 0; }
  .js [data-eco] .eco-node .g-node-ring, .js [data-eco] .eco-node .g-node { transform-box: fill-box; transform-origin: center; }
  [data-eco].is-live .eco-node .g-line-conceptual { animation: zy-eco-flow 1200ms linear both; }
  [data-eco].is-live .eco-node .g-node-ring { animation: zy-eco-ping 900ms var(--zy-motion-easing-standard) both; }
  [data-eco].is-live .eco-node:nth-child(4) * { animation-delay: 0ms; }
  [data-eco].is-live .eco-node[data-eco="1"] * { animation-delay: 150ms; }
  [data-eco].is-live .eco-node[data-eco="2"] * { animation-delay: 300ms; }
  [data-eco].is-live .eco-node[data-eco="3"] * { animation-delay: 450ms; }
  [data-eco].is-live .eco-node[data-eco="4"] * { animation-delay: 600ms; }
  [data-eco].is-live .eco-node[data-eco="5"] * { animation-delay: 750ms; }
  .eco-node:hover .g-line-conceptual { animation: zy-eco-flow 900ms linear infinite; }
}
@keyframes zy-eco-flow { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes zy-eco-ping { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* ======================================================= 10 PROPERTIES */
.metric.metric--scale .metric__value, .metric.metric--scale[data-status] .metric__value { color: var(--zy-color-text-primary); font-weight: var(--zy-font-weight-medium); }
.metric--scale .metric__label { color: var(--zy-color-text-primary); }
@media (min-width: 48em) and (max-width: 79.99em) { .metric--scale .metric__value { font-size: var(--zy-type-display-3-size); } }
@media (min-width: 64em) and (max-width: 79.99em) { .metric--scale .metric__value { font-size: var(--zy-type-heading-1-size); line-height: var(--zy-type-heading-1-lh); } }

/* ============================================================ 11 PROOF */
.proof-panel__media { display: grid; place-items: center; padding: var(--zy-space-8); background: var(--zy-color-surface-inverse); border-right: 1px solid rgba(255, 255, 255, 0.08); }
.proof-panel__media .gfx { width: 100%; max-width: 36rem; height: auto; }
.cover-grid { list-style: none; }
.cover-tile { display: flex; align-items: center; gap: var(--zy-space-3); min-height: 4rem; padding: var(--zy-space-3); border-radius: var(--zy-radius-sm); background: var(--zy-color-surface-subtle); border: var(--zy-border-hairline) solid var(--zy-color-border-subtle); color: var(--zy-color-text-primary); }
.cover-tile__num { color: var(--zy-color-text-signal); }
@media (max-width: 47.99em) { .cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quote__by { display: flex; align-items: center; gap: var(--zy-space-3); color: var(--zy-color-text-secondary); }
.quote__mark { width: var(--zy-space-8); height: 2px; background: var(--zy-color-signal-node); }

/* ============================================================ 12 TRUST */
@media (prefers-reduced-motion: no-preference) {
  .js [data-layers] .layer { transition: transform 900ms var(--zy-motion-easing-standard), opacity 600ms var(--zy-motion-easing-standard); transform-box: view-box; }
  .js [data-layers]:not(.is-open) .layer[data-layer="0"] { transform: translateY(160px); opacity: 0.5; }
  .js [data-layers]:not(.is-open) .layer[data-layer="1"] { transform: translateY(55px); opacity: 0.6; }
  .js [data-layers]:not(.is-open) .layer[data-layer="2"] { transform: translateY(-50px); opacity: 0.7; }
  .js [data-layers]:not(.is-open) .layer[data-layer="3"] { transform: translateY(-155px); }
  [data-layers].is-open .layer[data-layer="1"] { transition-delay: 80ms; }
  [data-layers].is-open .layer[data-layer="2"] { transition-delay: 160ms; }
  [data-layers].is-open .layer[data-layer="3"] { transition-delay: 240ms; }
}

/* ========================================================== 13 EXPLORE */
.res__media { aspect-ratio: 3 / 2; border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-md); overflow: hidden; background: var(--zy-color-neutral-50); }
.res__media--wide { aspect-ratio: 16 / 9; }
.res__media .gfx { width: 100%; height: 100%; transition: transform var(--zy-motion-duration-story) var(--zy-motion-easing-standard); }
.res:hover .res__media .gfx { transform: scale(1.03); }
.res:hover .res__media { border-color: var(--zy-color-border-signal); }

/* ====================================================== SECTION TRANSITIONS */
/* section markers draw their rule as the section arrives; reveals stagger */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal] .section-marker__rule { transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--zy-motion-easing-standard) 200ms; }
  .js [data-reveal].is-visible .section-marker__rule { transform: none; }
}