/* =============================================================================
   themes/worlds.css — moving image, worlds and interactive experiments
   -----------------------------------------------------------------------------
   Shared by nine pages where my practice started: films, realtime worlds and
   web experiments (several from RMIT). They share one structure — a media-led
   opening, a short brief, the process, and a gallery — and each gets its own
   atmosphere through a variant class on <article>:

     .world--ritual     The World of the Celestials  (halo ring, heavy haze)
     .world--deep       The Divine Deep               (descending ripples)
     .world--ascent     Divine Ascension              (a rising column of light)
     .world--overload   Eyes of the Beholder          (pressing vignette)
     .world--ballroom   The Dance with AI             (film gate & sprockets)
     .world--static     Trapped in the Screen         (CRT scanlines)
     .world--edit       Livin' La Lalaland            (edit timeline strip)
     .world--icons      Expression of the Otherworld  (icon grid)
     .world--blocks     Building Blocks of Life       (isometric grid)
   ============================================================================= */

.world-hero { position: relative; isolation: isolate; overflow: hidden; }
.world-hero__head { max-width: 980px; }
.world-hero .case-summary { max-width: 40ch; }
.world-hero__media { margin-top: clamp(36px, 5vw, 64px); }
.world-hero__media .frame { --frame-max-h: min(70vh, 660px); box-shadow: 0 40px 90px rgba(0, 0, 0, .65); }
.world-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.content-note { margin-top: 18px; }

/* --- Ritual: a halo ring behind the title ------------------------------------- */
.world--ritual .world-hero { background: radial-gradient(50vw 50vh at 70% 20%, rgba(58, 42, 140, .34), transparent 70%); }
.world--ritual .world-hero::before {
  right: -8vw; top: 6vh; width: min(560px, 60vw); aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 242, 214, .18);
  box-shadow: 0 0 60px rgba(255, 201, 112, .08), inset 0 0 60px rgba(255, 201, 112, .06);
}

/* --- Deep: ripples descending -------------------------------------------------- */
.world--deep .world-hero {
  background:
    repeating-radial-gradient(circle at 50% 120%, transparent 0 46px, rgba(243, 237, 226, .035) 46px 47px),
    linear-gradient(180deg, transparent, rgba(27, 22, 54, .7));
}

/* --- Ascent: a column of light rising ------------------------------------------ */
.world--ascent .world-hero::before {
  left: 50%; top: 0; bottom: 0; width: min(420px, 40vw);
  transform: translateX(-50%);
  background: linear-gradient(0deg, rgba(255, 242, 214, .02), rgba(255, 242, 214, .14) 70%, rgba(255, 242, 214, .02));
  filter: blur(30px);
}

/* --- Overload: the edges press in ---------------------------------------------- */
.world--overload .world-hero { background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .7) 100%); }

/* --- Ballroom: film gate with sprockets around the frame ----------------------- */
.world--ballroom .world-hero__media .frame {
  outline: 22px solid #050409;
  outline-offset: 0;
  box-shadow: 0 0 0 23px rgba(243, 237, 226, .12), 0 40px 90px rgba(0, 0, 0, .65);
}
.world--ballroom .world-hero__media .figure { padding-inline: 22px; }
.sprockets { display: flex; justify-content: space-between; max-width: 1060px; margin: 30px auto 0; }
.sprockets span { width: 14px; height: 9px; border-radius: 2px; background: rgba(243, 237, 226, .14); }

/* --- Static: CRT scanlines over the media -------------------------------------- */
.world--static .world-hero__media .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply;
}
.world--static .world-hero__media .frame { border-radius: 18px / 14px; overflow: hidden; }

/* --- Edit: a timeline strip under the opening ---------------------------------- */
.edit-strip { display: flex; gap: 3px; height: 26px; margin-top: 24px; max-width: 1100px; margin-inline: auto; }
.edit-strip span { flex: var(--f, 1); background: rgba(243, 237, 226, calc(.08 + var(--a, .1))); border-radius: 2px; }

/* --- Icons: a grid behind the opening ------------------------------------------ */
.world--icons .world-hero {
  background:
    linear-gradient(90deg, rgba(243, 237, 226, .04) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(180deg, rgba(243, 237, 226, .04) 1px, transparent 1px) 0 0 / 64px 64px;
}
.world--icons .world-hero__media .frame { background: #fff; }

/* --- Blocks: an isometric grid ------------------------------------------------- */
.world--blocks .world-hero {
  background:
    repeating-linear-gradient(30deg, rgba(243, 237, 226, .035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(-30deg, rgba(243, 237, 226, .035) 0 1px, transparent 1px 48px);
}

/* Process gallery captions numbered */
.gallery figcaption { font-size: .95rem; }