/* ============================================================
   YennayApps landing — Option 1 "Night World Journey".
   One continuous lantern-lit nightscape; the viewport is a
   camera that travels the ember path between four worlds.

   Modes:
   - default (no JS, or reduced motion, or narrow screens):
     readable vertical page; the panorama is a hero image and
     each world shows a cropped view of the same artwork.
   - .wj-live (added by JS on wide screens when motion is OK):
     the stage pins full-screen and sections become overlays
     that appear at their camera stop.

   Palette: night pine #081411/#0C1E18, ink blue #0B1B2B,
   ember #FFB454/#E8853D as the only light, clay #C4502E,
   ivory #F2EAD8 for text. Nothing else.
   ============================================================ */

.wj-body {
    --wj-night: #081411;
    --wj-pine: #0C1E18;
    --wj-ink: #0B1B2B;
    --wj-ember: #FFB454;
    --wj-ember-deep: #E8853D;
    --wj-clay: #C4502E;
    --wj-ivory: #F2EAD8;
    --wj-ivory-dim: #AFA48D;
    --wj-fidel-font: Ebrima, Nyala, "Noto Sans Ethiopic", sans-serif;
    --wj-display-font: "Segoe UI Variable Display", "Segoe UI", "Trebuchet MS", Arial, sans-serif;
    --wj-body-font: "Segoe UI Variable Text", "Segoe UI", "Trebuchet MS", Arial, sans-serif;

    margin: 0;
    background: var(--wj-night);
    color: var(--wj-ivory);
    font-family: var(--wj-body-font);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.wj-body *,
.wj-body *::before,
.wj-body *::after {
    box-sizing: border-box;
}

.wj-body :focus-visible {
    outline: 2px solid var(--wj-ivory);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---------- buttons & links: cut-corner ember plates, no pills ---------- */

.wj-btn {
    display: inline-block;
    padding: 15px 32px;
    background: #FFAD4D;
    color: #221206;
    font-family: var(--wj-display-font);
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    transition: background .18s ease, transform .18s ease;
}

.wj-btn:hover {
    background: #FFC275;
    transform: translateY(-1px);
}

.wj-btn-small {
    padding: 9px 16px;
    font-size: 12px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.wj-signin {
    color: var(--wj-ivory);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgba(242, 234, 216, .45);
}

.wj-signin:hover {
    text-decoration-color: var(--wj-ember);
    color: #fff;
}

.wj-link-quiet {
    color: var(--wj-ivory);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    padding: 8px 10px;
}

.wj-link-quiet:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- skip link ---------- */

.wj-skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 80;
    padding: 10px 16px;
    background: var(--wj-ivory);
    color: var(--wj-night);
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}

.wj-skip-link:focus-visible {
    top: 12px;
}

/* ---------- header ---------- */

.wj-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px clamp(16px, 4vw, 48px);
    transition: background .3s ease, box-shadow .3s ease;
}

.wj-header.is-scrolled {
    background: rgba(6, 14, 11, .92);
    box-shadow: 0 1px 0 rgba(255, 180, 84, .16);
}

.wj-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    text-decoration: none;
}

.wj-brand-mark {
    font-family: var(--wj-fidel-font);
    font-size: 23px;
    color: var(--wj-ember);
}

.wj-brand-name {
    color: var(--wj-ivory);
    font-family: var(--wj-display-font);
    font-size: 19px;
    font-weight: 400;
}

.wj-brand-name strong {
    font-weight: 700;
}

.wj-header-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ---------- language dropdown (shared _LanguageDropdown partial),
   dressed in this page's night idiom: selected flag + name triggers a
   small ember-lit list. details/summary, no JS required. ---------- */

.langdd {
    position: relative;
    margin-right: 6px;
    font-family: var(--wj-body-font);
}

.langdd summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 5px 11px;
    border: 1px solid rgba(242, 234, 216, .28);
    border-radius: 10px;
    background: rgba(5, 13, 10, .5);
    color: var(--wj-ivory);
    font-size: 13.5px;
    font-weight: 700;
    user-select: none;
    transition: border-color .18s ease;
}

.langdd summary::-webkit-details-marker { display: none; }
.langdd summary::after { content: "\25BE"; font-size: .8em; color: var(--wj-ember); }
.langdd[open] summary::after { content: "\25B4"; }
.langdd summary:hover { border-color: rgba(242, 234, 216, .55); }

.langdd-flag { display: inline-block; line-height: 0; }
.langdd-flag svg { width: 21px; height: 14px; display: block; border-radius: 2px; }

.langdd-list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 80;
    margin: 0;
    padding: 6px;
    list-style: none;
    min-width: 172px;
    background: var(--wj-pine);
    border: 1px solid rgba(255, 180, 84, .4);
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
}

.langdd-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--wj-ivory);
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
}

.langdd-item:hover { background: rgba(255, 180, 84, .14); text-decoration: none; }
.langdd-item[aria-current="true"] { background: rgba(255, 180, 84, .1); }
.langdd-item[aria-current="true"]::after { content: "\2713"; margin-left: auto; color: var(--wj-ember); }

.wj-lang-note {
    margin: 10px 0 0;
    max-width: 52ch;
    font-size: 12.5px;
    font-style: italic;
    color: var(--wj-ivory-dim);
}

/* ---------- the stage & the world ---------- */

.wj-stage {
    position: relative;
    isolation: isolate;
}

.wj-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(1100px 500px at 16% 0%, rgba(15, 40, 62, .55), transparent 70%),
        linear-gradient(180deg, #071220 0%, var(--wj-ink) 36%, #0F2820 76%, var(--wj-night) 100%);
}

/* a quiet starfield across the whole viewport, so the sky above the
   panorama is alive even when the camera is zoomed all the way out */
.wj-sky::before {
    content: "";
    position: absolute;
    inset: 0 0 30%;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(242, 234, 216, .7), transparent 60%),
        radial-gradient(1.2px 1.2px at 31% 9%, rgba(242, 234, 216, .5), transparent 60%),
        radial-gradient(1.9px 1.9px at 47% 31%, rgba(242, 234, 216, .6), transparent 60%),
        radial-gradient(1.1px 1.1px at 58% 12%, rgba(242, 234, 216, .45), transparent 60%),
        radial-gradient(1.5px 1.5px at 71% 26%, rgba(242, 234, 216, .55), transparent 60%),
        radial-gradient(1.2px 1.2px at 83% 8%, rgba(242, 234, 216, .5), transparent 60%),
        radial-gradient(1.7px 1.7px at 92% 34%, rgba(242, 234, 216, .6), transparent 60%),
        radial-gradient(1px 1px at 22% 44%, rgba(242, 234, 216, .35), transparent 60%),
        radial-gradient(1.3px 1.3px at 66% 47%, rgba(242, 234, 216, .4), transparent 60%);
    background-size: 1100px 760px;
    background-repeat: repeat;
}

.wj-camera {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.wj-world {
    display: block;
    width: 100%;
    height: auto;
    /* the artwork carries bleed terrain beyond the viewBox on both sides,
       so the camera never reveals a hard world edge */
    overflow: visible;
}

/* ---------- journey nav (progress indicator + keyboard travel) ---------- */

.wj-nav {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 20px;
    padding: 14px clamp(16px, 4vw, 40px);
    border-top: 1px solid rgba(242, 234, 216, .12);
    border-bottom: 1px solid rgba(242, 234, 216, .12);
}

.wj-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wj-ivory-dim);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 4px 2px;
    transition: color .2s ease;
}

.wj-nav a:hover {
    color: var(--wj-ivory);
}

.wj-nav-dot {
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--wj-ember);
    transform: rotate(45deg);
    transition: background .2s ease, box-shadow .2s ease;
}

.wj-nav a.is-here {
    color: var(--wj-ember);
}

.wj-nav a.is-here .wj-nav-dot {
    background: var(--wj-ember);
    box-shadow: 0 0 12px rgba(255, 180, 84, .8);
}

/* ---------- journey stops: shared type ---------- */

.wj-stops {
    position: relative;
    z-index: 2;
}

.wj-eyebrow {
    margin: 0 0 14px;
    color: var(--wj-ember);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.wj-hero-title {
    margin: 0 0 20px;
    font-family: var(--wj-display-font);
    font-size: clamp(44px, 7vw, 100px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.028em;
    color: var(--wj-ivory);
}

.wj-hero-title em {
    font-style: normal;
    color: var(--wj-ember);
    text-shadow: 0 0 34px rgba(255, 180, 84, .4);
}

.wj-hero-sub {
    margin: 0 0 30px;
    max-width: 48ch;
    font-size: clamp(16px, 1.8vw, 19px);
    color: #D4CBB6;
}

.wj-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
}

.wj-beta-note {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wj-ivory-dim);
}

.wj-cue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 34px 0 0;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--wj-ivory-dim);
}

.wj-cue-dot {
    width: 7px;
    height: 7px;
    background: var(--wj-ember);
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(255, 180, 84, .8);
}

.wj-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 10px;
    font-family: var(--wj-fidel-font);
    font-size: 15px;
    color: var(--wj-ivory-dim);
}

.wj-kicker-glyph {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--wj-ember);
    color: var(--wj-ember);
    font-size: 18px;
    background: rgba(255, 180, 84, .07);
}

.wj-world-name {
    margin: 0 0 10px;
    font-family: var(--wj-display-font);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.04;
    color: var(--wj-ivory);
}

.wj-world-tagline {
    margin: 0 0 24px;
    max-width: 44ch;
    font-size: clamp(15.5px, 1.5vw, 17.5px);
    color: #C9BFA9;
}

.wj-trail-notes {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wj-trail-notes li {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.wj-note-mark {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--wj-ember);
    transform: rotate(45deg) translateY(-1px);
    box-shadow: 0 0 8px rgba(255, 180, 84, .55);
}

.wj-note-en {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--wj-ivory);
}

.wj-note-am {
    font-family: var(--wj-fidel-font);
    font-size: 13.5px;
    color: #D9A05F;
}

.wj-parent-line {
    margin: 26px 0 0;
    max-width: 60ch;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--wj-ivory-dim);
}

.wj-parent-line span {
    color: var(--wj-ember);
    font-size: 9px;
    vertical-align: 2px;
    margin: 0 6px;
}

/* ---------- vertical mode layout (default: no JS / reduced motion / narrow) ----------
   The horizontal ember path turns vertical: one glowing line runs down the
   page and every journey stop sits on it as a lit waypoint. */

.wj-stops {
    display: grid;
    gap: clamp(52px, 9vh, 104px);
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(48px, 8vh, 96px) clamp(20px, 6vw, 64px) clamp(70px, 10vh, 120px);
    padding-left: clamp(52px, 10vw, 96px);
}

.wj-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(22px, 5vw, 48px);
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, var(--wj-ember) 5%, var(--wj-ember-deep) 92%, transparent 100%);
    box-shadow: 0 0 14px rgba(255, 180, 84, .4);
    opacity: .85;
    pointer-events: none;
}

.wj-body:not(.wj-live) .wj-sec {
    position: relative;
}

/* every stop is a waypoint on the vertical path */
.wj-body:not(.wj-live) .wj-sec::before {
    content: "";
    position: absolute;
    top: 10px;
    left: calc(-1 * (clamp(52px, 10vw, 96px) - clamp(22px, 5vw, 48px)) - 5px);
    width: 12px;
    height: 12px;
    background: var(--wj-ember);
    transform: rotate(45deg);
    box-shadow: 0 0 16px rgba(255, 180, 84, .9);
}

/* the journey ends where the path does */
.wj-body:not(.wj-live) .wj-sec-begin::after {
    content: "";
    position: absolute;
    top: 44px;
    left: calc(-1 * (clamp(52px, 10vw, 96px) - clamp(22px, 5vw, 48px)) - 11px);
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--wj-ember);
    transform: rotate(45deg);
    opacity: .6;
}

.wj-sec-hero {
    padding-top: clamp(8px, 3vh, 40px);
}

.wj-vign {
    display: block;
    width: 100%;
    height: clamp(240px, 38vh, 420px);
    margin-bottom: 26px;
    background: var(--wj-ink);
}

.wj-sec-begin {
    border-top: 1px solid rgba(255, 180, 84, .22);
    padding-top: clamp(40px, 7vh, 70px);
}

.wj-live .wj-vline {
    display: none;
}

/* ---------- immersive mode (.wj-live, added by JS on wide screens) ---------- */

.wj-live .wj-stage {
    height: 100svh;
    overflow: hidden;
}

.wj-live .wj-camera {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.wj-live .wj-zoom {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.wj-live .wj-world {
    width: auto;
    height: auto;
}

.wj-live .wj-stops {
    /* static so the absolute sections size against the pinned stage itself */
    position: static;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
}

.wj-live .wj-sec {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: clamp(70px, 10vh, 120px) clamp(24px, 7vw, 120px) clamp(90px, 13vh, 150px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.wj-live .wj-sec > * {
    pointer-events: auto;
}

.wj-live .wj-vign {
    display: none;
}

.wj-live .wj-sec-copy {
    position: relative;
    max-width: 460px;
}

/* a pool of darkness behind the words — light control, not a card */
.wj-live .wj-sec-copy::before,
.wj-live .wj-sec-hero::after {
    content: "";
    position: absolute;
    inset: -56px -84px;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(3, 9, 7, .8), rgba(3, 9, 7, .38) 58%, transparent);
}

.wj-live .wj-sec-hero {
    flex-direction: column;
    align-items: center;
    /* the words live in the starry sky; the world glows along the horizon below */
    justify-content: flex-start;
    padding-top: clamp(90px, 14vh, 150px);
    text-align: center;
    position: absolute;
}

.wj-live .wj-sec-hero::after {
    inset: 4% 20% 34%;
    border-radius: 50%;
}

.wj-live .wj-sec-hero .wj-hero-sub {
    margin-inline: auto;
}

.wj-live .wj-hero-actions {
    justify-content: center;
}

/* the gate glows on the right; the invitation sits in the dark to its left */
.wj-live .wj-sec-begin {
    justify-content: flex-start;
    border-top: none;
    padding-top: 0;
}

.wj-live .wj-sec-begin .wj-sec-copy {
    max-width: 540px;
}

/* where each world's words sit relative to its scenery */
.wj-live .wj-sec-forest { justify-content: flex-end; }
.wj-live .wj-sec-village { justify-content: flex-start; }
.wj-live .wj-sec-path { justify-content: flex-start; align-items: flex-end; }
.wj-live .wj-sec-corner { justify-content: flex-end; }

/* journey nav becomes the fixed compass bar */
.wj-live .wj-nav {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 50;
    flex-wrap: nowrap;
    gap: 20px;
    padding: 11px 22px 13px;
    background: rgba(5, 13, 10, .78);
    border: 1px solid rgba(255, 180, 84, .28);
    border-radius: 3px;
    max-width: calc(100vw - 32px);
}

.wj-live .wj-nav::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 5px;
    height: 2px;
    background: linear-gradient(to right, var(--wj-ember) var(--wj-progress, 0%), rgba(242, 234, 216, .16) var(--wj-progress, 0%));
}

/* ---------- footer ---------- */

.wj-footer {
    position: relative;
    z-index: 2;
    background: #050D0A;
    color: #C9BFA9;
    padding: 34px clamp(20px, 6vw, 88px) 42px;
    border-top: 1px solid rgba(255, 180, 84, .14);
}

.wj-footer-inner {
    display: grid;
    gap: 14px;
    max-width: 1080px;
    margin: 0 auto;
}

.wj-footer-brand {
    margin: 0;
    font-family: var(--wj-display-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--wj-ivory);
}

.wj-footer-brand span {
    font-family: var(--wj-fidel-font);
    color: var(--wj-ember);
    margin-right: 6px;
    font-weight: 400;
}

.wj-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.wj-footer-nav a {
    color: #C9BFA9;
    font-weight: 600;
    text-decoration: none;
}

.wj-footer-nav a:hover {
    color: var(--wj-ember);
    text-decoration: underline;
}

.wj-footer-note {
    margin: 0;
    font-size: 13px;
    color: var(--wj-ivory-dim);
}

.wj-noscript-note {
    margin: 0;
    padding: 10px 16px;
    background: var(--wj-ink);
    color: var(--wj-ivory);
    font-size: 14px;
    text-align: center;
}

/* ---------- ambient life in the world (only when motion is welcome) ---------- */

@media (prefers-reduced-motion: no-preference) {
    .wj-fly {
        animation: wjFly 3.6s ease-in-out infinite;
    }

    .wj-fly:nth-of-type(2n) { animation-delay: .9s; animation-duration: 4.4s; }
    .wj-fly:nth-of-type(3n) { animation-delay: 1.7s; animation-duration: 5.1s; }
    .wj-fly:nth-of-type(5n) { animation-delay: 2.4s; }

    @keyframes wjFly {
        0%, 100% { opacity: .25; transform: translate(0, 0); }
        50% { opacity: 1; transform: translate(4px, -7px); }
    }

    .wj-star {
        animation: wjTwinkle 4.5s ease-in-out infinite;
    }

    .wj-star:nth-of-type(2n) { animation-delay: 1.6s; }
    .wj-star:nth-of-type(3n) { animation-delay: 2.8s; }

    @keyframes wjTwinkle {
        0%, 100% { opacity: .25; }
        50% { opacity: .85; }
    }

    .wj-spark { animation: wjSpark 2.6s ease-out infinite; }
    .wj-spark-2 { animation-delay: .8s; }
    .wj-spark-3 { animation-delay: 1.6s; }

    @keyframes wjSpark {
        0% { opacity: .9; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-16px); }
    }

    .wj-smoke {
        animation: wjSmoke 6s ease-in-out infinite;
    }

    @keyframes wjSmoke {
        0%, 100% { opacity: .06; transform: translateX(0); }
        50% { opacity: .14; transform: translateX(5px); }
    }

    .wj-sign-glow, .wj-lamp-glow, .wj-gate-glow {
        animation: wjBreathe 5.5s ease-in-out infinite;
    }

    @keyframes wjBreathe {
        0%, 100% { opacity: .32; }
        50% { opacity: .52; }
    }

    .wj-note {
        animation: wjNote 4.6s ease-in-out infinite;
    }

    .wj-note-2 { animation-delay: 1.4s; }

    @keyframes wjNote {
        0%, 100% { opacity: .4; transform: translateY(0); }
        50% { opacity: .9; transform: translateY(-9px); }
    }

    /* the leaping fish bobs gently; the position transform lives on the
       parent group so this animation never fights it */
    .wj-fish {
        animation: wjFishLeap 4.2s ease-in-out infinite;
    }

    @keyframes wjFishLeap {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        50% { transform: translate(2px, -9px) rotate(-7deg); }
    }

    .wj-splash path {
        animation: wjSplashFade 4.2s ease-in-out infinite;
    }

    @keyframes wjSplashFade {
        0%, 100% { opacity: .18; }
        55% { opacity: .38; }
    }

    .wj-wave {
        transform-origin: 3480px 764px;
        animation: wjWave 5.4s ease-in-out infinite;
    }

    .wj-wave-2 { animation-delay: 1.2s; }
    .wj-wave-3 { animation-delay: 2.4s; }

    @keyframes wjWave {
        0%, 100% { opacity: .06; transform: scale(.96); }
        50% { opacity: .22; transform: scale(1.05); }
    }

    .wj-cue-dot {
        animation: wjCue 1.9s ease-in-out infinite;
    }

    @keyframes wjCue {
        0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 1; }
        50% { transform: rotate(45deg) translate(5px, 5px); opacity: .5; }
    }

    /* landmarks answer the pointer */
    .wj-sign-glow, .wj-lamp-glow, .wj-glow-door, .wj-window, .wj-book, .wj-wave, .wj-torches {
        transition: opacity .35s ease;
    }

    .wj-zone-forest:hover .wj-sign-glow { opacity: .85; }
    .wj-zone-forest:hover .wj-fly { animation-duration: 1.8s; }
    .wj-zone-village:hover .wj-glow-door { opacity: .85; }
    .wj-zone-village:hover .wj-window { opacity: 1; }
    .wj-zone-village:hover .wj-sign-glow { opacity: .85; }
    .wj-zone-path:hover .wj-lamp-glow { opacity: .8; }
    .wj-zone-path:hover .wj-book { opacity: 1; }
    .wj-zone-path:hover .wj-sign-glow { opacity: .85; }
    .wj-zone-corner:hover .wj-wave { opacity: .3; }
    .wj-zone-corner:hover .wj-sign-glow { opacity: .85; }
    .wj-zone-gate:hover .wj-gate-glow { opacity: 1; }

    /* mobile hero: the world drifts slowly past, like a living postcard */
    @media (max-width: 900px) {
        .wj-body:not(.wj-live) .wj-zoom {
            animation: wjPan 75s linear infinite alternate;
        }

        @keyframes wjPan {
            from { transform: translateX(0); }
            to { transform: translateX(calc(-100% + 100vw)); }
        }
    }
}

/* ---------- mobile: crop the panorama instead of shrinking it ---------- */

@media (max-width: 900px) {
    .wj-body:not(.wj-live) .wj-camera {
        height: 56svh;
    }

    .wj-body:not(.wj-live) .wj-zoom {
        height: 100%;
        width: max-content;
    }

    .wj-body:not(.wj-live) .wj-world {
        height: 100%;
        width: auto;
        aspect-ratio: 4200 / 900;
    }

    .wj-vign {
        height: clamp(200px, 30vh, 300px);
    }
}

@media (max-width: 560px) {
    .wj-brand-name {
        display: none;
    }

    .wj-hero-actions .wj-btn {
        width: 100%;
        text-align: center;
    }

    /* keep the header on one calm line: hero and footer still carry sign-in */
    .wj-header .wj-link-quiet {
        display: none;
    }

    .langdd-name {
        display: none; /* flag-only trigger on small screens */
    }
}

/* ---------- reduced motion: still, calm, fully readable ---------- */

@media (prefers-reduced-motion: reduce) {
    .wj-body * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}