/* fan/dreamworks.css: /worlds/dreamworks/ only.

   The ten seconds before the film. Night, two banks of cloud and a star
   field, because the studio's own opening is the only image the whole
   catalog shares. The clouds move on transform; nothing else does. */

body[data-fan="dreamworks"] { --a: #8fb8e0; }

/* ── the backdrop ── */
.dw-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(180deg, #0d1c34 0%, #0a1526 40%, #070e1a 70%, #04070d 100%);
}

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

.dw-glow { background: radial-gradient(40% 28% at 62% 12%, rgba(143,184,224,.18), transparent 72%); }

.dw-stars {
  background-size: 320px 320px;
  background-image:
    radial-gradient(1.4px 1.4px at 44px 46px, rgba(226,238,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 190px 96px, rgba(200,224,255,.4), transparent),
    radial-gradient(1.6px 1.6px at 268px 36px, rgba(240,248,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 98px 220px, rgba(210,230,255,.35), transparent);
  opacity: .6;
  mask-image: linear-gradient(#000 0 58%, transparent 84%);
  -webkit-mask-image: linear-gradient(#000 0 58%, transparent 84%);
}

.dw-cloud {
  inset: auto 0 auto 0; height: 34vmax; border-radius: 50%;
  filter: blur(40px); will-change: transform;
}

.dw-cloud--a {
  top: 26%; background: radial-gradient(60% 50% at 40% 50%, rgba(143,184,224,.16), transparent 70%);
  animation: dw-a 52s ease-in-out infinite alternate;
}

.dw-cloud--b {
  bottom: 6%; background: radial-gradient(60% 50% at 66% 50%, rgba(90,130,190,.14), transparent 70%);
  animation: dw-b 64s ease-in-out infinite alternate;
}

@keyframes dw-a { to { transform: translateX(7vmax); } }
@keyframes dw-b { to { transform: translateX(-8vmax); } }

@media (prefers-reduced-motion: reduce) { .dw-cloud { animation: none; } }

/* ── hero ── */
body[data-fan="dreamworks"] .fan-title {
  font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(143,184,224,.42);
}

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

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

.dwa-moon {
  fill: #e6eef8;
  filter: drop-shadow(0 0 22px rgba(200,224,255,.45));
}

.dwa-boy  { fill: #0f1c30; }

.dwa-rod  { fill: none; stroke: #0f1c30; stroke-width: 5; stroke-linecap: round; }

.dwa-line { fill: none; stroke: #9db4d0; stroke-width: 2; }

.dwa-hook { fill: #9db4d0; }

.dw-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);
}