/* 14 Red Sands: a 1950s serial on the red planet. Each section is a chapter card;
   the gallery is one story, in order, with its chapter titles. */
[data-world="red-sands"] {
  --grain: 0.08;
  --enter: chapter-in 450ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes chapter-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes sand-drift { from { background-position: 0 0; } to { background-position: 240px 0; } }
@keyframes haze { from { transform: scaleY(1); } to { transform: scaleY(1.6); } }
@keyframes dust { 0% { opacity: 0.55; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.6); } }

[data-world="red-sands"] .hero-title { line-height: 1.05; text-shadow: 3px 3px 0 color-mix(in srgb, var(--fill) 55%, transparent); }
/* fine sand blowing sideways across the hero */
[data-world="red-sands"] .hero-fx::before {
  content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .25' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: sand-drift 9s linear infinite;
}
/* heat haze at the horizon */
[data-world="red-sands"] .hero-fx::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 10%; transform-origin: bottom;
  background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  animation: haze 3.5s ease-in-out infinite alternate;
}
/* twin suns: two soft discs behind the hero title */
[data-world="red-sands"] .hero-copy {
  background:
    radial-gradient(circle 70px at calc(100% - 210px) 70px, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%),
    radial-gradient(circle 46px at calc(100% - 110px) 120px, color-mix(in srgb, var(--spice) 30%, transparent), transparent 70%);
}
/* chrome highlights on buttons (kept above the label) */
[data-world="red-sands"] .btn { background-image: linear-gradient(180deg, color-mix(in srgb, white 30%, transparent), transparent 28%); }
/* sections enter like a chapter card */
[data-world="red-sands"] .block { position: relative; }
[data-world="red-sands"] .block-num {
  display: block; width: 100%; font-family: var(--font-label); color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8125rem;
}
[data-world="red-sands"] .block-num::before { content: "Chapter " attr(data-num); }
[data-world="red-sands"] .block.in::after {
  content: ""; position: absolute; left: -2%; top: var(--space-4); width: 180px; height: 90px; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--muted) 45%, transparent), transparent);
  animation: dust 700ms ease-out forwards;
}
/* the serial reads left to right; its chapter titles sit under each still */
[data-world="red-sands"] .shot .chapter { font-family: var(--font-label); color: var(--accent); }
[data-world="red-sands"] .shot:hover .chapter, [data-world="red-sands"] .shot:focus-within .chapter { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }