html { scroll-behavior: smooth; }
body { background: var(--bg-app); }
#platform, #memory, #pipeline, #vertical, #cta {
  scroll-margin-top: calc(60px + 16px);
}
.fr-ico svg { width: 100%; height: 100%; stroke-width: 1.75; }
a { transition: color var(--dur-fast) var(--ease-settle); }
#root button { white-space: nowrap; }
.fr-nav a:hover { color: var(--text-display) !important; }
footer a:hover { color: var(--clay-1) !important; }
.fr-video-toggle:hover { background: rgba(44,43,38,0.72); }
.fr-video-toggle:focus-visible { outline: 2px solid var(--terra-3); outline-offset: 2px; }

/* hero stage motion */
@keyframes fr-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fr-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.fr-chip { animation: fr-rise 0.6s var(--ease-clay) backwards; }
.fr-riv { animation: fr-rise 0.75s var(--ease-clay) 0.1s backwards; }
@media (prefers-reduced-motion: no-preference) {
  .fr-floaty { animation: fr-floaty var(--d, 6s) ease-in-out infinite; }
}

/* river hero */
@keyframes riv-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes riv-flow-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes riv-shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.riv-track { width: max-content; }
.riv-track.a { animation: riv-flow 82s linear infinite; }
.riv-track.b { animation: riv-flow-rev 96s linear infinite; }
.riv-shimmer::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,253,248,0.4) 50%, transparent 62%);
  transform: translateX(-120%); animation: riv-shimmer 3.4s var(--ease-settle) infinite; }
@media (prefers-reduced-motion: reduce) {
  .riv-track.a, .riv-track.b { animation: none; }
  .riv-shimmer::after { animation: none; opacity: 0; }
}
@media (max-width: 760px) {
  .riv-track.b { display: none !important; }
  .riv-legend { display: none; }
  .riv-source { opacity: 0.9; }
  .riv-source img { height: clamp(120px, 18vh, 170px) !important; }
  .riv-band { top: 38% !important; }
}

@media (max-width: 980px) {
  .fr-hero-grid { grid-template-columns: 1fr !important; }
  .fr-stage { height: 480px; margin-top: 8px; }
}
@media (max-width: 560px) {
  .fr-stage .fr-chip { display: none !important; }
  .fr-stage { height: 420px; }
  .fr-riv { height: 340px !important; }
  .riv-band { top: 34% !important; }
}

@media (max-width: 860px) {
  .fr-2col, .fr-vert { grid-template-columns: 1fr !important; }
  .fr-theme { grid-template-columns: 1fr !important; }
  .fr-theme > div:first-child { position: static !important; }
  .fr-nav, .fr-beta-pill { display: none !important; }
}

/* scroll reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(26px);
    transition: opacity 0.6s var(--ease-settle), transform 0.72s var(--ease-clay);
    transition-delay: calc(var(--i, 0) * 70ms); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* clay hover-lift */
.fr-lift { transition: transform 0.28s var(--ease-clay), box-shadow 0.28s var(--ease-settle); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .fr-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md), var(--shadow-clay-inset) !important; }
  .fr-lift:active { transform: translateY(-1px) scale(0.992); }
}

/* dot-grid texture */
.fr-dots { position: relative; }
.fr-dots > .fr-dots-bg { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--dot, var(--clay-3)) 1px, transparent 1.4px); background-size: 26px 26px; opacity: 0.3; }

/* light sweep */
.fr-sweep { position: relative; overflow: hidden; }
.fr-sweep::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,253,248,0.30) 50%, transparent 58%);
  transform: translateX(-130%); }
@media (prefers-reduced-motion: no-preference) {
  .fr-sweep.is-in::after { animation: riv-shimmer 1.5s var(--ease-settle) 0.35s 1; }
}

/* flowing connector */
@keyframes fr-stream { to { background-position: 0 -22px; } }
.fr-stream { background-image: repeating-linear-gradient(180deg, var(--terra-3) 0 7px, transparent 7px 18px);
  background-size: 2px 22px; background-repeat: repeat-y; background-position: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .fr-stream { animation: fr-stream 0.9s linear infinite; }
}

@media (prefers-reduced-motion: no-preference) {
  .fr-bob { animation: fr-floaty var(--d, 7s) ease-in-out infinite; }
}

@keyframes fr-chev { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .fr-chev { animation: fr-chev 2.4s var(--ease-settle) infinite; animation-delay: calc(var(--i, 0) * 120ms); }
}

/* Content Memory field */
.mem-scene { position: relative; width: 440px; height: 432px; }
@keyframes mem-pulse { 0% { transform: translate(-50%,-50%) scale(0.45); opacity: 0.5; } 100% { transform: translate(-50%,-50%) scale(2); opacity: 0; } }
@keyframes mem-flow { to { stroke-dashoffset: -22; } }
@keyframes mem-glow { 0%, 100% { box-shadow: var(--glow-sign), 0 14px 40px -14px rgba(224,174,148,0.45); } 50% { box-shadow: var(--glow-sign), 0 16px 52px -10px rgba(224,174,148,0.7); } }
@media (prefers-reduced-motion: no-preference) {
  .mem-ring { animation: mem-pulse 4.4s var(--ease-settle) infinite; }
  .mem-beam { animation: mem-flow 1.2s linear infinite; }
  .mem-core { animation: mem-glow 4.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .mem-ring { display: none; } }
@media (max-width: 1040px) { .mem-scene { transform: scale(0.92); } }
@media (max-width: 480px) { .mem-scene { transform: scale(0.72); transform-origin: top center; } }