/* Engine atmosphere layer — texture, hero life, scroll choreography.
   Load after base.css. Pairs with motion.js. All reduced-motion safe. */

/* ── ground texture: film grain so the page is never dead-flat ── */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

/* ── scroll choreography ── */
[data-io]{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.23,1,.32,1) var(--d,0ms)}
[data-io].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-io]{opacity:1;transform:none;transition:none}}

/* ── hero rotator: crossfade + slow zoom (Ken Burns) ── */
[data-rotate]{position:absolute;inset:0}
[data-rotate] img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s ease}
[data-rotate] img.on{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-rotate] img.on{animation:kenburns 8s ease-out forwards}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
}

/* ── marquee: slow horizontal drift, duplicated track ── */
.marquee{overflow:hidden;padding:var(--s3) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee .track{display:flex;gap:var(--s4);width:max-content}
.marquee span{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(18px,2.2vw,26px);color:var(--muted);white-space:nowrap}
.marquee em{font-style:normal;color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .marquee .track{animation:drift 36s linear infinite}
  @keyframes drift{to{transform:translateX(-50%)}}
}