/* ═══ no-script fallback ═══════════════════════════════════════════════ Everything here waits for `html.no-js`, which a boot watchdog in the only sets if the module never checked in. That direction matters: the real design is the default, so a stale cache, a partial failure or a slow module can never silently swap the whole page for the fallback. The usual genuine cause is the page opened straight off disk, where `import` is CORS-blocked and no script executes at all. The film is absolutely-positioned layers stacked in one pinned viewport, and every entrance state starts hidden waiting for JavaScript to reveal it. With nothing driving them the page would be a blank pile. This unpins the stage, lets the layers flow, and turns every hidden state back on. Anything left at opacity 0 here is a bug wearing the costume of an accessibility feature. ══════════════════════════════════════════════════════════════════════ */ html.no-js .saga { height: auto; } html.no-js .saga__stage { position: relative; height: auto; min-height: 100vh; overflow: visible; } /* the hero layers keep the top viewport to themselves */ html.no-js .hero__reveal, html.no-js .saga__veil { inset: 0 0 auto 0; height: 100vh; } html.no-js .hero__reveal { clip-path: none; } html.no-js .hero__clouds { display: none; } html.no-js .saga__veil { opacity: 0.5; } html.no-js .hero__content { inset: 0 0 auto 0; height: 100vh; } /* every entrance state, switched back on */ html.no-js .hero__eyebrow, html.no-js .hero__sub, html.no-js .hero__actions, html.no-js .deck__head, html.no-js .card, html.no-js .world__intro, html.no-js .wcard, html.no-js [data-reveal-item] { opacity: 1; transform: none; } html.no-js .hero__title .line > span { transform: none; } /* the card run becomes an ordinary stack below the hero */ html.no-js .deck__head { position: static; width: auto; margin: 100vh auto 32px; padding: 96px var(--gutter) 0; } html.no-js .deck { position: static; display: grid; gap: 24px; perspective: none; padding: 0 var(--gutter) 96px; } html.no-js .card { position: static; width: min(100%, 34rem); margin-inline: auto; } html.no-js .card__face { min-height: 0; } html.no-js .card__body { transform: none; } /* Hasiru World loses the split and becomes three plain doors */ html.no-js .world__panel, html.no-js .world__pin { display: none; } html.no-js .world__intro { position: static; width: auto; margin: 0 auto 48px; padding-inline: var(--gutter); } html.no-js .world__cards { position: static; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); padding: 0 var(--gutter) 96px; } html.no-js .wcard { position: static; width: auto; } html.no-js .card__glass, html.no-js .wcard__glass { background: color-mix(in srgb, var(--forest) 94%, black); backdrop-filter: none; }