/* ============================================================
   WASH — light→dark scroll transition, film grain, title reveal
   Shared across home, case studies, and about.
   Colors are driven by js/wash.js via CSS custom properties.
   ============================================================ */

body[data-wash-top] { background: var(--color-bg); }
body[data-wash-top] .nav.scrolled { background: var(--nav-wash, rgba(10, 10, 10, 0.72)); }

/* ---- Moving film grain ---- */
.film-grain {
  position: fixed;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.8' intercept='-0.9'/%3E%3CfeFuncG type='linear' slope='2.8' intercept='-0.9'/%3E%3CfeFuncB type='linear' slope='2.8' intercept='-0.9'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: 0;
  will-change: transform, opacity, filter;
  animation: film-move 0.6s steps(7) infinite, film-flicker 5s ease-in-out infinite;
}
@keyframes film-move {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-8%, -9%); }
  24%  { transform: translate(7%, -5%); }
  36%  { transform: translate(-5%, 10%); }
  48%  { transform: translate(11%, 6%); }
  60%  { transform: translate(-11%, -7%); }
  72%  { transform: translate(6%, -11%); }
  84%  { transform: translate(-9%, 9%); }
  100% { transform: translate(8%, 3%); }
}
@keyframes film-flicker {
  0%, 100% { filter: none; }
  45%      { filter: brightness(1.45) contrast(1.08); }
  70%      { filter: brightness(0.85); }
}

/* ---- Title "being written" reveal (left→right, never clips descenders) ---- */
@keyframes writeIn {
  from { clip-path: inset(-0.24em 100% -0.42em 0); }
  to   { clip-path: inset(-0.24em -0.08em -0.42em 0); }
}
/* ---- Stagger rise for supporting hero content ---- */
@keyframes washRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Case-study hero reveal */
body[data-wash-top] .cs-hero__back    { animation: washRise .7s cubic-bezier(.22,.9,.3,1) both; }
body[data-wash-top] .cs-hero__meta-item { animation: washRise .8s cubic-bezier(.22,.9,.3,1) both; }
body[data-wash-top] .cs-hero__meta-item:nth-child(1) { animation-delay: .08s; }
body[data-wash-top] .cs-hero__meta-item:nth-child(2) { animation-delay: .14s; }
body[data-wash-top] .cs-hero__meta-item:nth-child(3) { animation-delay: .20s; }
body[data-wash-top] .cs-hero__meta-item:nth-child(4) { animation-delay: .26s; }
body[data-wash-top] .cs-hero__title   { animation: writeIn 1s cubic-bezier(.4,0,.2,1) both; animation-delay: .32s; }
body[data-wash-top] .cs-hero__summary { animation: washRise .9s cubic-bezier(.22,.9,.3,1) both; animation-delay: .66s; }
body[data-wash-top] .cs-hero .device-showcase { animation: washRise 1s cubic-bezier(.22,.9,.3,1) both; animation-delay: .8s; }

/* About hero reveal */
body[data-wash-top] .about-hero__title { animation: writeIn 1.05s cubic-bezier(.4,0,.2,1) both; animation-delay: .2s; }
body[data-wash-top] .about-hero__grid  { animation: washRise 1s cubic-bezier(.22,.9,.3,1) both; animation-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
  body[data-wash-top] .cs-hero__back,
  body[data-wash-top] .cs-hero__meta-item,
  body[data-wash-top] .cs-hero__title,
  body[data-wash-top] .cs-hero__summary,
  body[data-wash-top] .cs-hero .device-showcase,
  body[data-wash-top] .about-hero__title,
  body[data-wash-top] .about-hero__grid { animation: none; clip-path: none; }
}