/*
  scroll-fx.css — Scroll-driven motion graphics layer
  ====================================================
  Replaces the old drag-and-play toy layer. Everything here is driven by
  scroll position (see scroll-fx.js):
    1. Top scroll-progress bar
    2. Parallax depth (uses the independent `translate` / `scale` /
       `rotate` properties, so it never fights the existing reveal
       transforms on the same elements)
    3. Dual-row scroll-linked marquee band
    4. Scroll-scrub zoom on masked images
    5. Phone tilt in the scrollytelling walkthrough
  Fully disabled under prefers-reduced-motion.
*/

/* ---------- 1. Scroll progress bar ---------- */
.fx-progress{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  z-index:10001;
  pointer-events:none;
  background:transparent;
}
.fx-progress-bar{
  height:100%;
  width:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  background:linear-gradient(90deg, var(--orange, #FF6A3D), var(--record, #FF3B30));
  box-shadow:0 0 12px rgba(255,59,48,.45);
  will-change:transform;
}

/* ---------- 2. Parallax targets ---------- */
[data-fx-parallax]{ will-change:translate; }

/* ---------- 3. Marquee band ---------- */
.fx-marquee{
  position:relative;
  overflow:hidden;
  background:var(--ink, #1C1A16);
  color:var(--paper, #FFF7DC);
  padding:34px 0;
  border-top:1px solid var(--ink, #1C1A16);
  border-bottom:1px solid var(--ink, #1C1A16);
  margin:0;
  z-index:2;
}
.fx-marquee-row{
  display:flex;
  white-space:nowrap;
  will-change:transform;
  padding:6px 0;
}
.fx-marquee-item{
  display:inline-flex;
  align-items:center;
  gap:34px;
  padding-right:34px;
  font-family:var(--font-title, Georgia, serif);
  font-weight:600;
  font-size:clamp(34px, 6vw, 76px);
  line-height:1.1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.fx-marquee-row.is-outline .fx-marquee-item{
  color:transparent;
  -webkit-text-stroke:1.5px var(--paper, #FFF7DC);
}
.fx-marquee-dot{
  display:inline-block;
  width:.32em; height:.32em;
  border-radius:50%;
  background:var(--record, #FF3B30);
  flex:0 0 auto;
}
.fx-marquee-bars{
  display:inline-flex; align-items:center; gap:4px; height:.7em; flex:0 0 auto;
}
.fx-marquee-bars i{
  display:block; width:5px; border-radius:3px; background:var(--orange, #FF6A3D);
  animation:fxbar 1.1s ease-in-out infinite;
}
.fx-marquee-bars i:nth-child(1){ height:40%; animation-delay:-.9s; }
.fx-marquee-bars i:nth-child(2){ height:100%; animation-delay:-.6s; }
.fx-marquee-bars i:nth-child(3){ height:65%; animation-delay:-1s; }
.fx-marquee-bars i:nth-child(4){ height:90%; animation-delay:-.3s; }
@keyframes fxbar{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }

@media (max-width:860px){
  .fx-marquee{ padding:22px 0; }
}

@media (prefers-reduced-motion: reduce){
  .fx-progress{ display:none; }
  .fx-marquee{ transform:none; }
  .fx-marquee-row{ transform:none !important; }
  .fx-marquee-bars i{ animation:none; }
  [data-fx-parallax]{ translate:none !important; }
}