/* ============================================================
   Cashalot AI — site-visual.css
   Визуальный слой: оркестрованный page-load, scroll-reveal,
   hero-текстура, reading-progress, live-price поведение,
   Track Record-виджет, editorial-разделитель.
   Аддитивно и namespaced (.fx-* / .reveal* / .trackrec / .price-*).
   Подключать ПОСЛЕ site-enhancements.css:
     <link rel="stylesheet" href="site-visual.css">
   Опт-ин по классам — без классов ничего не меняется.
   ============================================================ */

/* зависит от токенов из site-enhancements.css (--gain/--loss/--fx-ease-out…) */
:root{ --fx-ease-out: cubic-bezier(.23,1,.32,1); }

/* ---------- (1) Оркестрованный page-load (каскад в hero) ---------- */
@keyframes fxRise { from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} }
.reveal-load{ opacity:0; animation:fxRise .7s var(--fx-ease-out) both; }
.reveal-load.d1{ animation-delay:.05s } .reveal-load.d2{ animation-delay:.16s }
.reveal-load.d3{ animation-delay:.28s } .reveal-load.d4{ animation-delay:.42s }
.reveal-load.d5{ animation-delay:.56s }

/* ---------- (2) Scroll-reveal секций ---------- */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--fx-ease-out), transform .7s var(--fx-ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.06s } .reveal.d2{ transition-delay:.14s } .reveal.d3{ transition-delay:.22s }

@media (prefers-reduced-motion: reduce){
  .reveal-load,.reveal{ animation:none!important; opacity:1!important; transform:none!important; transition:none!important; }
}

/* ---------- (3) Hero-текстура (волновой китовый мотив, ~4%) ---------- */
.fx-hero-texture{ position:relative; overflow:hidden; }
.fx-hero-texture::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.06; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='60' viewBox='0 0 180 60'%3E%3Cpath d='M0 40 Q45 10 90 40 T180 40' fill='none' stroke='%23FFFCF5' stroke-width='1.4'/%3E%3Cpath d='M0 52 Q45 22 90 52 T180 52' fill='none' stroke='%23FFFCF5' stroke-width='1'/%3E%3C/svg%3E");
  background-size:180px 60px;
}
.fx-hero-texture > *{ position:relative; z-index:1; }
/* мягкое свечение в углу — глубина без шума */
.fx-hero-glow::after{
  content:""; position:absolute; top:-30%; right:-10%; width:55%; height:120%;
  background:radial-gradient(closest-side, rgba(93,197,189,.22), transparent 70%);
  pointer-events:none; z-index:0;
}

/* ---------- (4) Reading-progress bar ---------- */
.fx-progress{ position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--teal-deep)); z-index:9999;
  transition:width .08s linear; }

/* ---------- (5) Live-price поведение ---------- */
.price-live{ display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums slashed-zero;
  border-radius:6px; padding:1px 6px; transition:background-color .15s, color .15s; }
.price-live .price-arrow{ font-size:.8em; line-height:1; }
.price-live.up{ color:var(--gain-strong) } .price-live.up .price-arrow::before{ content:"▲" }
.price-live.down{ color:var(--loss-strong) } .price-live.down .price-arrow::before{ content:"▼" }
.price-live.flat{ color:var(--ink-soft) } .price-live.flat .price-arrow::before{ content:"▪" }
@keyframes fxFlashUp{ 0%{ background:var(--gain-bg) } 100%{ background:transparent } }
@keyframes fxFlashDn{ 0%{ background:var(--loss-bg) } 100%{ background:transparent } }
.price-live.flash-up{ animation:fxFlashUp .9s ease-out }
.price-live.flash-down{ animation:fxFlashDn .9s ease-out }
@media (prefers-reduced-motion: reduce){ .price-live.flash-up,.price-live.flash-down{ animation:none } }
/* skeleton пока грузится цена */
.price-skeleton{ display:inline-block; width:96px; height:1.1em; border-radius:5px;
  background:linear-gradient(90deg,var(--paper-warm) 25%,var(--cream) 50%,var(--paper-warm) 75%);
  background-size:200% 100%; animation:fxShimmer 1.5s linear infinite; vertical-align:middle; }
@keyframes fxShimmer{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

/* ---------- (6) Track Record-виджет (Fair Value vs Price Now) ---------- */
.trackrec{ background:var(--cream); border:1px solid var(--rule); border-radius:12px;
  padding:20px 22px; font-family:'Inter',sans-serif; }
.trackrec__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.trackrec__label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-warm); }
.trackrec__delta{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:15px;
  padding:3px 10px; border-radius:999px; }
.trackrec__delta.up{ color:var(--gain-strong); background:var(--gain-bg) }
.trackrec__delta.down{ color:var(--loss-strong); background:var(--loss-bg) }
.trackrec__bar{ position:relative; height:10px; border-radius:999px; background:var(--paper-warm);
  margin:26px 0 30px; }
.trackrec__fill{ position:absolute; top:0; left:0; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--teal-light),var(--teal-deep)); }
.trackrec__mk{ position:absolute; top:50%; transform:translate(-50%,-50%); }
.trackrec__mk--price{ width:16px; height:16px; border-radius:50%; background:var(--cream);
  border:3px solid var(--teal-deep); box-shadow:var(--fx-shadow-md,0 2px 6px rgba(82,61,92,.18)); }
.trackrec__mk--fv{ width:2px; height:22px; background:var(--gold); }
.trackrec__cap{ position:absolute; top:18px; transform:translateX(-50%); white-space:nowrap;
  font-family:'JetBrains Mono',monospace; font-size:11px; }
.trackrec__cap b{ font-size:13px; color:var(--ink) }
.trackrec__cap--fv{ color:var(--gold-700,#8E6E2F) }
.trackrec__cap--price{ color:var(--teal-700,#2A6660) }
.trackrec__foot{ font-size:12px; color:var(--gray-warm); }

/* ---------- (7) Editorial-разделитель (китовый узел) ---------- */
.fx-divider{ display:flex; align-items:center; gap:16px; margin:40px 0; color:var(--rule); }
.fx-divider::before,.fx-divider::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--rule),transparent); }
.fx-divider__mark{ font-size:14px; color:var(--teal-deep); letter-spacing:.1em; }

/* лёгкий hover-lift для карточек (если site-enhancements.css не подключён) */
.fx-card-lift{ transition:transform .22s var(--fx-ease-out), box-shadow .22s var(--fx-ease-out); }
.fx-card-lift:hover{ transform:translateY(-3px); box-shadow:var(--fx-shadow-lg,0 12px 24px -6px rgba(82,61,92,.12)); }