/* fan/nolan.css: /worlds/christopher-nolan/ only.

   Steel and film grain rather than any one film's color, because the
   thirteen do not share one. Behind the page, two watch faces drawn as
   dashed rings and turning at different speeds: the tick that is under
   every one of these films, from Memento's Polaroids to Nolan's own pocket
   watch recorded for Dunkirk. The hero drawing is the top from Inception,
   still going. Both rings move on transform only, so the page stays cheap. */

body[data-fan="nolan"] { --a: #d0d8e0; }

/* ── the backdrop ── */
.nl-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, #121820 0%, #0b0f14 48%, #050608 100%);
}

.nl-sky > * { position: absolute; inset: 0; }

.nl-haze {
  background:
    radial-gradient(50% 30% at 50% 8%, rgba(208,216,224,.10), transparent 70%),
    radial-gradient(40% 24% at 18% 74%, rgba(224,112,58,.08), transparent 70%);
}

.nl-ring {
  inset: auto; left: 50%; top: 50%;
  width: 110vmax; height: 110vmax; margin: -55vmax 0 0 -55vmax;
  border-radius: 50%; border: 1px dashed rgba(208,216,224,.13);
  will-change: transform; animation: nl-turn 240s linear infinite;
}

.nl-ring--in {
  width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax;
  border-style: dotted; border-color: rgba(208,216,224,.10);
  animation-duration: 160s; animation-direction: reverse;
}

@keyframes nl-turn { to { transform: rotate(360deg); } }

.nl-horizon { top: auto; height: 34%; background: linear-gradient(180deg, transparent, rgba(5,6,8,.85)); }

@media (prefers-reduced-motion: reduce) {
  .nl-ring, .nla-top { animation: none; }
}

/* ── hero ── */
body[data-fan="nolan"] .fan-title {
  font-weight: 300; text-transform: uppercase; letter-spacing: 0.26em;
  font-size: clamp(1.5rem, 4.6vw, 3.4rem); text-indent: 0.26em;
  background: linear-gradient(180deg, #f4f7fa, #b8c4d0 58%, #7d8794);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── the top ── */
.nl-art { padding: 0 var(--gutter); max-width: var(--maxw); margin: 2.6rem 0 0; }

.nl-art svg { display: block; width: min(420px, 100%); margin-inline: auto; }

.nla-shadow { fill: rgba(0,0,0,.5); }

/* the whole top rocks on its point; the rock is the only motion, and it is a
   transform on one group */
.nla-top { transform-box: fill-box; transform-origin: 50% 100%; animation: nl-wobble 2.8s ease-in-out infinite alternate; }

@keyframes nl-wobble { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

.nla-body { fill: #c9d3dc; }

.nla-belt { fill: none; stroke: #7d8794; stroke-width: 3; }

.nla-stem { fill: #9aa4b0; }

.nla-point { fill: #e8eef4; }

.nl-art figcaption {
  margin-top: 0.9rem; text-align: center;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--mute);
}