@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Marcellus&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
    --jni-rust: #b85f1b;
    --jni-warm-ivory: #f3dfbf;
}

/*
 * Just-N Illusion cinematic entrance
 */



html,
body {
    margin: 0;
    min-height: 100%;
    background: #000;
}

html {
    overflow-x: hidden;
}

body.jni-entrance-page {
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
}

.jni-entrance,
.jni-entrance * {
    box-sizing: border-box;
}

.jni-entrance {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: #000;
    color: #f3eadb;
    font-family: "Source Sans 3", Arial, sans-serif;
}

/* ---------------------------------------------------------
   INITIAL MOVEMENT
--------------------------------------------------------- */

/* ---------------------------------------------------------
   INITIAL MAGICAL SPARK
--------------------------------------------------------- */

.jni-intro-mark {
    position: absolute;
    z-index: 20;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    transform: translate(-50%, -50%);
    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}

/* Slowly rotating broken halo */
.jni-intro-mark::before {
    position: absolute;
    content: "";
    inset: 17px;
    border-radius: 50%;
    background:
        conic-gradient(
            from 20deg,
            transparent 0deg,
            rgba(255, 235, 190, 0.1) 35deg,
            rgba(255, 247, 225, 0.85) 58deg,
            transparent 86deg,
            transparent 190deg,
            rgba(255, 220, 155, 0.55) 230deg,
            transparent 265deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 58%,
            #000 61%,
            #000 68%,
            transparent 71%
        );

    mask:
        radial-gradient(
            circle,
            transparent 58%,
            #000 61%,
            #000 68%,
            transparent 71%
        );

    filter: blur(0.3px);
    animation: jni-magic-orbit 2.4s linear infinite;
}

/* Expanding luminous breath */
.jni-intro-mark::after {
    position: absolute;
    content: "";
    inset: 31px;
    border: 1px solid rgba(255, 238, 203, 0.7);
    border-radius: 50%;
    box-shadow:
        0 0 10px rgba(255, 236, 195, 0.35),
        inset 0 0 8px rgba(255, 248, 225, 0.25);
    animation: jni-magic-ring 1.8s ease-out infinite;
}

.jni-intro-mark__light {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 42% 38%,
            #fff 0%,
            #fff8df 17%,
            #f5c879 39%,
            rgba(211, 126, 43, 0.55) 62%,
            transparent 74%
        );
    box-shadow:
        0 0 8px rgba(255, 251, 232, 1),
        0 0 22px rgba(255, 224, 165, 0.85),
        0 0 48px rgba(223, 144, 62, 0.45);
    transform: translate(-50%, -50%);
    animation: jni-magic-core 1.6s ease-in-out infinite;
}

/* Tiny flare crossing through the center */
.jni-intro-mark__light::before,
.jni-intro-mark__light::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 250, 232, 0.95),
        transparent
    );
    transform: translate(-50%, -50%);
}

.jni-intro-mark__light::before {
    width: 72px;
    height: 1px;
}

.jni-intro-mark__light::after {
    width: 42px;
    height: 1px;
    transform:
        translate(-50%, -50%)
        rotate(90deg);
    opacity: 0.65;
}

/* Soft suggestion of light reflecting beneath it */
.jni-intro-mark__reflection {
    position: absolute;
    top: calc(50% + 28px);
    left: 50%;
    width: 105px;
    height: 8px;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 230, 178, 0.42) 0%,
            rgba(255, 224, 164, 0.12) 42%,
            transparent 72%
        );
    filter: blur(2px);
    transform: translateX(-50%);
    animation: jni-magic-reflection 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------
   VINTAGE PAPER ENVIRONMENT
--------------------------------------------------------- */

.jni-paper {
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.025);
    transition:
        opacity 1500ms ease,
        transform 2400ms ease;
}

.jni-paper::after {
    position: absolute;
    content: "";
    inset: 0;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 244, 216, 0.04) 0%,
            rgba(38, 24, 13, 0.2) 65%,
            rgba(0, 0, 0, 0.52) 100%
        );
}

/* ---------------------------------------------------------
   SHARED BOAT / MURAL FRAME
--------------------------------------------------------- */

.jni-visual-stage {
    
    position: absolute;
    z-index: 5;
    top: 46%;
    left: 50%;
    width: min(88vw, 1100px);
    aspect-ratio: 1000 / 558;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translate(-50%, -50%) scale(0.975);
    transition:
        opacity 1400ms ease,
        transform 1900ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* ---------------------------------------------------------
   RUM RUNNER — INVITATION LINE
--------------------------------------------------------- */

.jni-boat-invitation-line {
    position: absolute;
    z-index: 8;

    top: 6%;
    left: calc(6% - 20px);

    margin: 0;

    opacity: 0;
    transform: translateY(8px);

    color: #f3dfbf;

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 2.6vw, 2.7rem);
    font-weight: 600;
    line-height: 1.02;

    text-shadow:
        -1px -1px 0 rgba(55, 30, 15, 0.9),
         1px -1px 0 rgba(55, 30, 15, 0.9),
        -1px  1px 0 rgba(55, 30, 15, 0.9),
         1px  1px 0 rgba(55, 30, 15, 0.9),
         0 3px 5px rgba(0, 0, 0, 0.65);

    pointer-events: none;
}

.jni-boat-invitation-line span {
    display: block;
}

.jni-entrance.is-landing .jni-boat-invitation-line {
    animation:
        jni-boat-invitation-arrive
        1200ms
        ease
        2000ms
        forwards;
}

@keyframes jni-boat-invitation-arrive {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.jni-stage-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
    border: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.jni-stage-image--mural {

    z-index: 1;
    opacity: 0;

    /*
     * Begin tightly framed on the colorful mural
     * in the lower-right corner.
     */
    transform: scale(2.3);
    transform-origin: 65% 90%;

    filter:
        brightness(0.55)
        saturate(0.35)
        contrast(0.9);

    will-change: transform, opacity, filter;
}

.jni-stage-image--afterimage {
    z-index: 3;
    opacity: 0;
    mix-blend-mode: screen;
    filter:
        grayscale(1)
        invert(1)
        brightness(3.2)
        contrast(2.2);
}

.jni-boat-trigger {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    outline-offset: 8px;
    background: transparent;
    cursor: pointer;
    font: inherit;
}

.jni-stage-image--boat {
    transition:
        filter 350ms ease,
        transform 650ms ease;
}

.jni-stage-image--boat,
.jni-stage-image--afterimage {
    clip-path: inset(2.2% 1.8% 2.6% 1.8% round 2%);
    transform: scale(1.035);
}

.jni-boat-trigger:hover .jni-stage-image--boat,
.jni-boat-trigger:focus-visible .jni-stage-image--boat {
    filter:
        brightness(1.07)
        contrast(1.05);
    transform: scale(1.045);
}

/* ---------------------------------------------------------
   LANDING INVITATION
--------------------------------------------------------- */

.jni-invitation {
    position: absolute;
    z-index: 10;
    top: calc(46% + min(24.55vw, 307px) + 12px);
    right: 20px;
    bottom: auto;
    left: 20px;

    opacity: 0;
    text-align: center;
    pointer-events: none;
    transform: translateY(14px);
    transition:
        opacity 900ms ease,
        transform 900ms ease;
}

.jni-invitation__statement {
    font-family: "Cormorant Garamond", Georgia, serif;
    margin: 0 0 17px;
    color: #392719;
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 1px rgba(255, 244, 220, 0.45);
}

.jni-invitation__action {
    position: relative;

    padding: 15px 30px 13px;

    border: 1px solid rgba(57, 39, 25, 0.62);
    border-radius: 3px;

    background:
        linear-gradient(
            110deg,
            #392719 0%,
            #392719 38%,
            #b85f1b 44%,
            #ffe0a0 48%,
            #b85f1b 52%,
            #392719 58%,
            #392719 100%
        );

    background-size: 260% 100%;
    background-position: 100% center;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.18),
        inset 0 0 12px rgba(255, 235, 190, 0.08);

    cursor: pointer;

    font: inherit;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    animation:
        jni-step-aboard-shimmer
        3800ms
        ease-in-out
        infinite;

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        letter-spacing 300ms ease;
}

.jni-invitation__action:hover,
.jni-invitation__action:focus-visible {
    border-color: #000;
    color: #000;
    letter-spacing: 0.23em;
}
@keyframes jni-step-aboard-shimmer {

    0%,
    48% {
        background-position: 100% center;
    }

    68% {
        background-position: 0% center;
    }

    100% {
        background-position: 0% center;
    }
}
/* ---------------------------------------------------------
   MURAL REVEAL CONTENT
--------------------------------------------------------- */

.jni-realm-reveal {
    position: absolute;
    z-index: 12;
    inset: 0;

    opacity: 0;
    pointer-events: none;

    transition: opacity 1000ms ease;
}

/* Welcome to the Realm of — across the top */
.jni-realm-reveal__eyebrow {
    position: absolute;
    top: clamp(28px, 6vh, 70px);
    right: 20px;
    left: 20px;

    margin: 0;

    color: rgba(255, 255, 255, 0.96);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;

    text-align: center;
    text-transform: none;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(0, 0, 0, 0.7);
}

/* Center animated title */
.jni-realm-reveal__title {
    position: absolute;
    top: 34%;
    left: 50%;

    width: min(94vw, 1150px);
    margin: 0;

    transform: translate(-50%, -50%);

    color: #fff;

    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(4rem, 8vw, 7.5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: 0.005em;

    text-align: center;

    text-shadow:
        0 3px 7px rgba(0, 0, 0, 0.95),
        0 0 28px rgba(0, 0, 0, 0.7);
}

.jni-realm-reveal__title-line {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    white-space: nowrap;

    font-family: inherit;
    color: inherit;

    transition:
        color 700ms ease,
        letter-spacing 700ms ease,
        transform 700ms ease;
}

.jni-realm-reveal__title-stem,
.jni-realm-reveal__title-word {
    display: inline-block;

    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}

.jni-realm-reveal__title-word {
   text-align: center;

    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 260ms ease;
}

.jni-realm-reveal__title-word.is-switching {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(8px);
}

/* Final brand lock */
.jni-realm-reveal__title-line.is-final-brand,
.jni-realm-reveal__title-line.is-final-brand
.jni-realm-reveal__title-stem,
.jni-realm-reveal__title-line.is-final-brand
.jni-realm-reveal__title-word {
    color: var(--jni-rust) !important;
    font-family: "Marcellus", Georgia, serif !important;
    font-weight: 400;

    letter-spacing: 0.035em;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(184, 95, 27, 0.35);

    animation: jni-brand-lock 800ms ease forwards;
}

/* Final tagline */
.jni-realm-reveal__tagline {
     position: absolute;
    bottom: 110px;
    right: 20px;
    left: 20px;

    margin: 0;

    opacity: 0;
    transform: translateY(14px);

    color: var(--jni-warm-ivory);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.012em;

    text-align: center;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.95),
        0 0 16px rgba(0, 0, 0, 0.65);

    transition:
        opacity 900ms ease,
        transform 900ms ease;
}

/* Period at the end of Imagine Creating Magic. */
.jni-tagline-period {
    position: relative;
    display: inline-block;

    color: var(--jni-rust);
}

/* Continue */
.jni-realm-reveal__link {
    position: absolute;
    z-index: 30;

    top: calc(46% + min(24.55vw, 307px) + 2px);
    left: 50%;
    right: auto;
    bottom: auto;

    line-height: 1 !important;
display: flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 28px;
box-sizing: border-box;
white-space: nowrap;

    border: 1px solid rgba(255, 255, 255, 0.78);

    opacity: 0;
    pointer-events: none;

    background: rgba(0, 0, 0, 0.22);
    color: #fff;

    font-family: "Source Sans 3", Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;

    text-decoration: none;
    text-transform: uppercase;

    backdrop-filter: blur(3px);

    transform: translate(-50%, 12px);

    transition:
        opacity 800ms ease,
        transform 800ms ease,
        background-color 200ms ease,
        color 200ms ease;
}

/* CONTINUE — MATCH STEP ABOARD VISUAL STYLE */
.jni-realm-reveal__link {
    padding: 15px 30px 13px;

    border: 1px solid rgba(57, 39, 25, 0.62);
    border-radius: 3px;

    background:
        linear-gradient(
            110deg,
            #392719 0%,
            #392719 38%,
            #b85f1b 44%,
            #ffe0a0 48%,
            #b85f1b 52%,
            #392719 58%,
            #392719 100%
        );

    background-size: 260% 100%;
    background-position: 100% center;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    box-shadow:
        0 2px 5px rgba(57, 39, 25, 0.18),
        inset 0 0 12px rgba(255, 235, 190, 0.08);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.25rem, 1.8vw, 1.55rem);
    font-weight: 600;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    backdrop-filter: none;

    animation:
        jni-step-aboard-shimmer
        3800ms
        ease-in-out
        infinite;

    transition:
        opacity 800ms ease,
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease,
        letter-spacing 300ms ease;
}

.jni-realm-reveal__link:hover,
.jni-realm-reveal__link:focus-visible {
    border-color: rgba(57, 39, 25, 0.9);

    letter-spacing: 0.21em;

    transform:
        translate(-50%, -3px)
        scale(1.04);

    box-shadow:
        0 6px 12px rgba(57, 39, 25, 0.28),
        0 0 18px rgba(184, 95, 27, 0.18);

    text-decoration: none;
}

/* Final resolved state */
.jni-realm-reveal.is-resolved
.jni-realm-reveal__tagline {
    opacity: 1;
    transform: translateY(0);
}

.jni-realm-reveal.is-resolved
.jni-realm-reveal__link {
    opacity: 1;
    pointer-events: auto;

    transform: translate(-50%, 0);
}

/* Brand settles into place */
@keyframes jni-brand-lock {
    0% {
        opacity: 0.55;
        filter: blur(3px);
        transform: scale(0.985);
    }

    55% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.012);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* One final glint on the period */
@keyframes jni-final-sparkle {
    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(0.15)
            rotate(-25deg);
    }

    30% {
        opacity: 1;
        transform:
            translateX(-50%)
            scale(1.65)
            rotate(8deg);
    }

    58% {
        opacity: 0.9;
        transform:
            translateX(-50%)
            scale(0.85)
            rotate(0deg);
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(0.2)
            rotate(15deg);
    }
}
/* ---------------------------------------------------------
   SKIP CONTROL
--------------------------------------------------------- */

.jni-skip {
    position: absolute;
    z-index: 30;
    top: 18px;
    right: 20px;
    padding: 7px 2px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition:
        color 200ms ease,
        border-color 200ms ease;
}

.jni-skip:hover,
.jni-skip:focus-visible {
    border-color: rgba(255, 255, 255, 0.8);
    color: #fff;
}

/* ---------------------------------------------------------
   ACTIVE STATES
--------------------------------------------------------- */

.jni-entrance.is-landing .jni-intro-mark {
    opacity: 0;
    visibility: hidden;
}

.jni-entrance.is-landing .jni-paper {
    opacity: 1;
    transform: scale(1);
}

.jni-entrance.is-landing .jni-visual-stage {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.jni-entrance.is-landing .jni-invitation {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 500ms;
}

.jni-entrance.is-burning .jni-invitation {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition-delay: 0ms;
}

.jni-entrance.is-burning .jni-boat-invitation-line {
    animation:
        jni-boat-invitation-leave
        500ms
        ease
        forwards;
}

@keyframes jni-boat-invitation-leave {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.jni-entrance.is-leaving .jni-invitation {
    display: none !important;
}

.jni-entrance.is-burning .jni-paper {
    animation: jni-paper-burn 1.6s ease forwards;
}

.jni-entrance.is-burning .jni-visual-stage {
    pointer-events: auto;
}

.jni-entrance.is-burning .jni-boat-trigger {
    animation: jni-boat-burn 1.35s ease-out forwards;
    pointer-events: none;
}

.jni-entrance.is-burning .jni-stage-image--afterimage {
    opacity: 0 !important;
    animation: none !important;
}

.jni-entrance.is-burning .jni-stage-image--mural {
    animation:
        jni-mural-closeup-reveal 350ms ease-out 650ms forwards,
        jni-mural-zoom-out 4000ms cubic-bezier(0.22, 0.61, 0.36, 1) 1900ms forwards;
}

.jni-entrance.is-revealed .jni-realm-reveal {
    opacity: 1;
    pointer-events: none;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   ANIMATIONS
--------------------------------------------------------- */

@keyframes jni-magic-core {
    0%,
    100% {
        opacity: 0.58;
        transform:
            translate(-50%, -50%)
            scale(0.72);
        filter: brightness(0.8);
    }

    45% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
        filter: brightness(1.35);
    }

    65% {
        opacity: 0.86;
        transform:
            translate(-50%, -50%)
            scale(0.94);
        filter: brightness(1);
    }
}

@keyframes jni-magic-orbit {
    from {
        opacity: 0.35;
        transform: rotate(0deg);
    }

    50% {
        opacity: 0.95;
    }

    to {
        opacity: 0.35;
        transform: rotate(360deg);
    }
}

@keyframes jni-magic-ring {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }

    30% {
        opacity: 0.75;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes jni-magic-reflection {
    0%,
    100% {
        opacity: 0.2;
        transform:
            translateX(-50%)
            scaleX(0.55);
    }

    45% {
        opacity: 0.75;
        transform:
            translateX(-50%)
            scaleX(1);
    }
}

@keyframes jni-paper-burn {
    0% {
        opacity: 1;
        filter:
            brightness(1)
            saturate(1);
    }

    28% {
        opacity: 1;
        filter:
            brightness(1.35)
            saturate(0.9);
    }

    100% {
        opacity: 1;
        filter:
            brightness(0.92)
            saturate(0.95);
    }
}

@keyframes jni-stage-burn {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    36% {
        transform: translate(-50%, -50%) scale(1.025);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes jni-boat-burn {

    0% {
        opacity: 1;
        filter:
            brightness(1)
            contrast(1)
            saturate(1);
    }

    45% {
        opacity: 0.78;
        filter:
            brightness(0.98)
            contrast(1)
            saturate(0.95);
    }

    100% {
        opacity: 0;
        filter:
            brightness(0.94)
            contrast(1)
            saturate(0.9);
    }
}

@keyframes jni-retina-burn {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    20% {
        opacity: 0.92;
        transform: scale(1.008);
    }

    48% {
        opacity: 0.42;
        transform: scale(1.018);
    }

    100% {
        opacity: 0;
        transform: scale(1.035);
    }
}

@keyframes jni-mural-closeup-reveal {
    from {
        opacity: 0;
        filter:
            brightness(0.5)
            saturate(0.3)
            contrast(0.88);
    }

    to {
        opacity: 1;
        filter:
            brightness(1)
            saturate(1.08)
            contrast(1);
    }
}

@keyframes jni-mural-zoom-out {
    from {
        transform: scale(2.3);
        transform-origin: 65% 90%;
    }

    to {
        transform: scale(1);
        transform-origin: 65% 90%;
    }
}



/* ---------------------------------------------------------
   NOSCRIPT FALLBACK
--------------------------------------------------------- */

.jni-noscript {
    position: absolute;
    z-index: 50;
    inset: 0;
    display: grid;
    place-items: center;
    background: #000;
}

.jni-noscript a {
    color: #fff;
}

/* ---------------------------------------------------------
   SMALL SCREENS
--------------------------------------------------------- */

.jni-realm-reveal__title {
    font-size: clamp(2rem, 9vw, 3.2rem);
}

.jni-realm-reveal__title-prefix {
    font-size: clamp(0.95rem, 4vw, 1.2rem);
}

.jni-realm-reveal__title-word {
    min-width: 9.5ch;
}

.jni-realm-reveal__tagline {
    margin: 10px 0 26px;

    opacity: 0;
    transform: translateY(12px);

    color: var(--jni-warm-ivory);

    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.7rem, 3.1vw, 2.6rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.015em;

    text-shadow:
        0 2px 5px rgba(0, 0, 0, 0.9),
        0 0 14px rgba(0, 0, 0, 0.6);

    transition:
        opacity 850ms ease,
        transform 850ms ease;
}

/* ---------------------------------------------------------
   REDUCED MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .jni-intro-mark__light,
    .jni-intro-mark__reflection {
        animation: none;
    }

    .jni-paper,
    .jni-visual-stage,
    .jni-invitation,
    .jni-realm-reveal {
        transition-duration: 100ms;
    }

    .jni-entrance.is-burning .jni-paper,
    .jni-entrance.is-burning .jni-visual-stage,
    .jni-entrance.is-burning .jni-boat-trigger,
    .jni-entrance.is-burning .jni-stage-image--afterimage,
    .jni-entrance.is-burning .jni-stage-image--mural {
        animation-duration: 100ms;
    }
}

/* =========================================================
   JNI REALM REVEAL — FINAL POSITION OVERRIDES
   ========================================================= */

/* Move the entire animated Just-... sequence higher */
.jni-realm-reveal__title {
    top: 28% !important;

    font-size: clamp(4.5rem, 8.5vw, 8rem) !important;
    line-height: 0.92 !important;

    text-align: center !important;
}

/*
 * Do NOT use flex here.
 * Let the complete phrase center itself as one piece.
 */
.jni-realm-reveal__title-line {
    display: inline-block !important;
    width: auto !important;

    white-space: nowrap !important;
    text-align: center !important;
}

/* Remove the invisible reserved width that split Just-N Illusion */
.jni-realm-reveal__title-stem,
.jni-realm-reveal__title-word {
    display: inline !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: inherit !important;
}

/* Give the final brand lockup just a little extra authority */
.jni-realm-reveal__title-line.is-final-brand {
    font-size: 1.06em !important;
    letter-spacing: 0.025em !important;
}

/* Larger final statement below the photograph */
.jni-realm-reveal__tagline {
    bottom: 105px !important;
    top: auto !important;

    font-size: clamp(2.5rem, 4.4vw, 3.8rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;

    color: var(--jni-warm-ivory) !important;
}

/* =========================================================
   JNI REVEAL — WELCOME FLASH + LASER-BURN TAGLINE
   ========================================================= */

/*
 * Hide the center word animation until the Welcome flash
 * has completed.
 */
.jni-realm-reveal__title {
    opacity: 0 !important;

    transform:
        translate(-50%, -50%)
        scale(0.985) !important;

    transition:
        opacity 450ms ease,
        transform 450ms ease !important;
}

.jni-realm-reveal.is-title-active
.jni-realm-reveal__title {
    opacity: 1 !important;

    transform:
        translate(-50%, -50%)
        scale(1) !important;
}


/*
 * "Welcome to the Realm of"
 * Keep it white, but allow a warm flash to travel
 * across the actual letters.
 */
.jni-realm-reveal__eyebrow {
    background:
        linear-gradient(
           90deg,
        #8f4d24 0%,
        #8f4d24 44%,
        #c97832 47%,
        #f0c27a 50%,
        #c97832 53%,
        #8f4d24 56%,
        #8f4d24 100%
    );

    background-size: 260% 100%;
    background-position: 100% center;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    text-shadow: none !important;
}

.jni-realm-reveal.is-welcome-flashing
/* "Welcome to the Realm of" — bright sweep LEFT → RIGHT */
.jni-realm-reveal__eyebrow {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-size: clamp(2.2rem, 3.4vw, 3.4rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.025em !important;
    background:
        linear-gradient(
        90deg,
        #fff3dc 0%,
        #fff3dc 44%,
        #fffaf0 47%,
        #e7a454 50%,
        #fffaf0 53%,
        #fff3dc 56%,
        #fff3dc 100%
        );

    background-size: 300% 100%;
    background-position: 100% center;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: none !important;
}

.jni-realm-reveal.is-welcome-flashing
.jni-realm-reveal__eyebrow {
    animation:
        jni-welcome-letter-flash
        2800ms
        ease-in-out
        800ms
        forwards;
}

@keyframes jni-welcome-letter-flash {
    0% {
        background-position: 100% center;
    }

    100% {
        background-position: 0% center;
    }
}

/* ---------------------------------------------------------
   LASER-BURN "IMAGINE CREATING MAGIC."
--------------------------------------------------------- */

.jni-realm-reveal__tagline {
    opacity: 0 !important;

    /*
     * Start completely unrevealed from the right.
     * The animation exposes the letters left-to-right.
     */
    clip-path: inset(0 100% 0 0);

    color: #693817 !important;

    text-shadow:
        0 0 0 rgba(255, 170, 72, 0);

    transform: translateY(8px) !important;
}

.jni-realm-reveal.is-resolved
.jni-realm-reveal__tagline {
    opacity: 1 !important;

    animation:
        jni-laser-burn-write
        1900ms
        cubic-bezier(0.2, 0.7, 0.2, 1)
        250ms
        forwards;
}

@keyframes jni-laser-burn-write {
    0% {
        clip-path: inset(0 100% 0 0);

        color: #fff2c7;

        text-shadow:
            0 0 4px #fff7dc,
            0 0 12px rgba(255, 186, 84, 0.95),
            0 0 22px rgba(184, 95, 27, 0.75);

        filter: brightness(1.8);

        transform: translateY(8px);
    }

    55% {
        color: #d47a2b;

        text-shadow:
            0 0 3px #ffe4ae,
            0 0 9px rgba(255, 153, 52, 0.8);

        filter: brightness(1.35);
    }

    82% {
        clip-path: inset(0 0 0 0);

        color: #8b451d;

        text-shadow:
            0 0 3px rgba(184, 95, 27, 0.45);

        filter: brightness(1.08);
    }

    100% {
        clip-path: inset(0 0 0 0);

        color: #693817;

        text-shadow:
            0 1px 1px rgba(255, 230, 188, 0.25);

        filter: brightness(1);

        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
   THE PERIOD ITSELF IS THE FINAL SPARK
--------------------------------------------------------- */

.jni-tagline-period {
    display: inline-block;

    color: var(--jni-rust) !important;

    transform-origin: center;
}

/*
 * No separate star floating above it.
 * The actual "." ignites.
 */
.jni-realm-reveal.is-resolved
.jni-tagline-period {
    animation:
        jni-period-ignite
        900ms
        ease-out
        2050ms
        both;
}

@keyframes jni-period-ignite {
    0% {
        color: #fff5d3;
        opacity: 0.4;

        transform: scale(0.6);

        text-shadow:
            0 0 2px #fff,
            0 0 5px #ffd580;
    }

    28% {
        color: #fff;

        opacity: 1;

        transform: scale(2.4);

        text-shadow:
            0 0 4px #fff,
            0 0 10px #ffd27b,
            0 0 20px #ff9e42,
            0 0 32px rgba(184, 95, 27, 0.85);
    }

    55% {
        color: #e98a35;

        transform: scale(1.35);

        text-shadow:
            0 0 5px #ffb15d,
            0 0 12px rgba(184, 95, 27, 0.7);
    }

    100% {
        color: #693817;

        opacity: 1;

        transform: scale(1);

        text-shadow: none;
    }
}

/* JNI WELCOME TEXT — BRAND COLOR OVERRIDE */
.jni-realm-reveal__eyebrow {
    background-image:
        linear-gradient(
            90deg,
            #b85f1b 0%,
            #b85f1b 44%,
            #d98a3d 47%,
            #ffd58a 50%,
            #d98a3d 53%,
            #b85f1b 56%,
            #b85f1b 100%
        ) !important;
}

/* =========================================================
   JNI WORD ANIMATION — FIXED "JUST-" ANCHOR
   ========================================================= */

.jni-realm-reveal__title-line {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 1em !important;
    white-space: nowrap !important;
}

/* Just- stays locked in one position */
.jni-realm-reveal__title-stem {
    position: absolute !important;
    right: 55% !important;
    left: auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
    white-space: nowrap !important;
}

/* Only Imagine / Creating / Magic changes */
.jni-realm-reveal__title-word {
    position: absolute !important;
    left: 45% !important;
    right: auto !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
    white-space: nowrap !important;
}

/* =========================================================
   JNI FINAL BRAND — CENTER AS ONE COMPLETE NAME
   ========================================================= */

.jni-realm-reveal__title-line.is-final-brand {
    text-align: center !important;
}

/* Release both halves from the animation anchor */
.jni-realm-reveal__title-line.is-final-brand
.jni-realm-reveal__title-stem,
.jni-realm-reveal__title-line.is-final-brand
.jni-realm-reveal__title-word {
    position: static !important;

    right: auto !important;
    left: auto !important;

    display: inline !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   JNI TAGLINE — CLEAN FADE AFTER FINAL NAME
   ========================================================= */

.jni-realm-reveal__tagline {
    opacity: 0 !important;

    /* Remove the old laser clipping */
    clip-path: none !important;
    animation: none !important;

    /* Give the g descenders room */
    line-height: 1.15 !important;
    padding-bottom: 0.16em !important;

    transform: translateY(10px) !important;

    transition:
        opacity 700ms ease 250ms,
        transform 700ms ease 250ms !important;
}

.jni-realm-reveal.is-resolved
.jni-realm-reveal__tagline {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

/* =========================================================
   JNI TAGLINE — SYNCHRONIZED WORD-BY-WORD BURN
   ========================================================= */

/*
 * Keep the tagline container available during the upper
 * word animation. Each individual word controls its own
 * visibility.
 */
.jni-realm-reveal__tagline {
    opacity: 1 !important;
    clip-path: none !important;
    animation: none !important;

    line-height: 1.15 !important;
    padding-bottom: 0.16em !important;

    transform: translateY(0) !important;
    transition: none !important;
}

/* Every word begins invisible */
.jni-burn-word {
    position: relative;
    display: inline-block;

    color: #5f321d;

    overflow: visible;
}
.jni-burn-text {
    position: relative;
    z-index: 2;

    display: inline-block;

    opacity: 0;
    clip-path: inset(0 100% 0 0);

    filter: brightness(1);
    text-shadow: none;
}

/* JavaScript adds this at the matching upper word */
.jni-burn-word.is-burning .jni-burn-text {
    animation:
        jni-word-burn-in
        950ms
        cubic-bezier(0.2, 0.7, 0.2, 1)
        forwards;
}

@keyframes jni-word-burn-in {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);

        color: #fff3c7;
        filter: brightness(2);

        text-shadow:
            0 0 4px #fff6d9,
            0 0 10px rgba(255, 175, 75, 0.95),
            0 0 20px rgba(184, 95, 27, 0.8);
    }

    30% {
        opacity: 1;

        color: #e8983f;
        filter: brightness(1.55);

        text-shadow:
            0 0 3px #ffd79b,
            0 0 8px rgba(220, 113, 37, 0.8);
    }

    75% {
        opacity: 1;

        /* Laser is ~75% across, so text is only ~75% exposed */
        clip-path: inset(0 25% 0 0);

        color: #8a4826;
        filter: brightness(1.1);

        text-shadow:
            0 0 2px rgba(184, 95, 27, 0.35);
    }

    100% {
        opacity: 1;

        /* Last letters appear only when the laser reaches them */
        clip-path: inset(0 0 0 0);

        color: #5f321d;
        filter: brightness(1);

        text-shadow:
            0 1px 0 rgba(255, 230, 190, 0.18);
    }
}
/* JNI REALM WELCOME — GIVE GLOBAL TITLE BREATHING ROOM */
.jni-realm-reveal__eyebrow {
    transform: translateY(28px) !important;
}


/* =========================================================
   JNI TYPOGRAPHY MAP
   Brand/animated title: Marcellus
   Welcome/tagline: Cormorant Garamond
   Utility controls: Source Sans 3
   ========================================================= */

/* Welcome to the Realm of — ABOVE the mural */
.jni-realm-reveal__eyebrow {
    top: 94px !important;
    transform: none !important;
    font-size: clamp(1.45rem, 2.2vw, 2.2rem) !important;
    -webkit-text-stroke: 1px rgba(55, 27, 12, 0.25);

    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 5px rgba(0, 0, 0, 0.70))
        drop-shadow(0 0 10px rgba(0, 0, 0, 0.40)) !important;
}

/* Imagine Creating Magic. — BELOW the mural */
.jni-realm-reveal__tagline {
    top: auto !important;
    bottom: 28px !important;
}

/* =========================================================
   JNI BURN — ORGANIC CHAR + FAINT SMOKE
   ========================================================= */

/* Give the burning letters a hot, irregular edge */
.jni-burn-word.is-burning .jni-burn-text {
    text-shadow:
        0 0 1px rgba(255, 244, 210, 0.90),
        0 0 3px rgba(241, 153, 65, 0.70),
        0 0 7px rgba(151, 65, 24, 0.38);

    animation:
        jni-word-burn-in 800ms
        cubic-bezier(0.2, 0.7, 0.2, 1)
        forwards,
        jni-char-cool 1500ms ease-out
        forwards;
}


/* Smoke lives OUTSIDE the clipped letters -NOPE- */
/* Faint smoke rising ABOVE the burned letters -NOPE- */
/* Smoke rises above the letters without covering them -NOPE- */


/* Hot letters cool into the dark burned-paper color */
@keyframes jni-char-cool {
    0% {
        text-shadow:
            0 0 2px rgba(255, 246, 215, 1),
            0 0 5px rgba(248, 165, 70, 0.85),
            0 0 9px rgba(163, 69, 25, 0.50);
    }

    40% {
        text-shadow:
            0 0 1px rgba(239, 169, 91, 0.50),
            0 0 4px rgba(138, 66, 29, 0.35);
    }

    100% {
        text-shadow:
            0 1px 0 rgba(255, 230, 190, 0.18);
    }
}


/* Smoke rises, spreads, drifts slightly sideways, then disappears -NOPE- */

/* =========================================================
   JNI BURN — REAL SMOKE WISPS
   ========================================================= */

.jni-burn-word {
    position: relative;
    overflow: visible;
}

.jni-smoke {
    position: absolute;
    z-index: 5;

    left: -18%;
    bottom: 70%;

    width: 136%;
    height: 55px;

    overflow: visible;
    pointer-events: none;
}

.jni-smoke i {
    position: absolute;
    bottom: 0;

    width: 70px;
    height: 42px;

    border-radius: 50%;

    background:
    radial-gradient(
        ellipse at center,
        rgba(250, 247, 242, 0.95) 0%,
        rgba(230, 224, 216, 0.72) 30%,
        rgba(195, 185, 174, 0.40) 55%,
        transparent 82%
    );

filter: blur(6px);
    opacity: 0;

    pointer-events: none;
}
/* Three separate wisps */
.jni-smoke i:nth-child(1) {
    left: 8%;
    width: 72px;
    height: 44px;
}

.jni-smoke i:nth-child(2) {
    left: 35%;
    width: 86px;
    height: 50px;
}

.jni-smoke i:nth-child(3) {
    left: 65%;
    width: 68px;
    height: 40px;
}

/* Start smoke when the word starts burning */
.jni-burn-word.is-burning .jni-smoke i:nth-child(1) {
    animation: jni-smoke-wisp-1 1700ms ease-out forwards;
}

.jni-burn-word.is-burning .jni-smoke i:nth-child(2) {
    animation: jni-smoke-wisp-2 2100ms ease-out 100ms forwards;
}

.jni-burn-word.is-burning .jni-smoke i:nth-child(3) {
    animation: jni-smoke-wisp-3 3300ms ease-out 180ms forwards;
}


@keyframes jni-smoke-wisp-1 {
    0% {
        opacity: 0;
        transform: translate(0, 5px) scale(0.7);
    }

    15% {
        opacity: 0.78;
    }

    55% {
        opacity: 0.28;
        transform: translate(-7px, -20px) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(7px, -43px) scale(1.18);
    }
}


@keyframes jni-smoke-wisp-2 {
    0% {
        opacity: 0;
        transform: translate(0, 4px) scale(0.65);
    }

    17% {
        opacity: 0.78;
    }

    58% {
        opacity: 0.25;
        transform: translate(8px, -24px) scale(1.03);
    }

    100% {
        opacity: 0;
        transform: translate(-6px, -48px) scale(1.2);
    }
}


@keyframes jni-smoke-wisp-3 {
    0% {
        opacity: 0;
        transform: translate(0, 6px) scale(0.72);
    }

    14% {
        opacity: 0.78;
    }

    52% {
        opacity: 0.23;
        transform: translate(-5px, -18px) scale(0.98);
    }

    100% {
        opacity: 0;
        transform: translate(9px, -40px) scale(1.15);
    }
}

/* =========================================================
   JNI BURN — HOT WRITING POINT
   ========================================================= */

.jni-burn-word::before {
    content: "";

    position: absolute;
    z-index: 8;

    left: 0;
    top: 52%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fffdf0 0%,
            #ffe29a 22%,
            #ffad45 42%,
            #d76524 62%,
            transparent 76%
        );

    box-shadow:
        0 0 2px rgba(255, 255, 235, 1),
        0 0 5px rgba(255, 190, 90, 0.95),
        0 0 10px rgba(224, 103, 36, 0.72),
        0 0 16px rgba(150, 55, 18, 0.38);

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.55);

    pointer-events: none;
}

.jni-burn-word.is-burning::before {
    animation:
        jni-hot-writing-point 800ms linear forwards,
        jni-hot-writing-wobble 800ms ease-in-out forwards;
}

@keyframes jni-hot-writing-point {

0% {
        left: 0%;
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.45);
    }

    7% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    85% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    100% {
        left: 100%;
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0.35);
    }
}


@keyframes jni-hot-writing-wobble {

    0% {
        translate: 0 0;
    }

    12% {
        translate: 0 -8px;
    }

    25% {
        translate: 0 5px;
    }

    38% {
        translate: 0 -7px;
    }

    52% {
        translate: 0 6px;
    }

    66% {
        translate: 0 -5px;
    }

    79% {
        translate: 0 8px;
    }

    91% {
        translate: 0 -4px;
    }

    100% {
        translate: 0 0;
    }
}

/* =========================================================
   JNI MURAL — PAPER EATS THE EDGES   -NOPE-
   ========================================================= */

/* =========================================================
   JNI MURAL — HARD BURNT EDGE IN PAPER
   Paper cuts into the mural with a scorched rim  -NOPE-
   ========================================================= */

/* =========================================================
   JNI MURAL — HARD IRREGULAR BURNT EDGE
   ========================================================= */

.jni-visual-stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: -8%;
    pointer-events: none;

    background:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/ChatGPT-Image-Aug-8-2026-06_37_09-PM.png")
        center 45% / 110% 175%
        no-repeat;

    opacity: 0;
}

.jni-entrance.is-burning .jni-visual-stage::after {
    animation:
        jni-real-burn-edge
        3000ms
        linear
        3900ms
        forwards;
}

@keyframes jni-real-burn-edge {

    0% {
        opacity: 0;
        transform: scale(1.38);
    }

    18% {
        opacity: 0.18;
        transform: scale(1.33);
    }

    42% {
        opacity: 0.42;
        transform: scale(1.22);
    }

    70% {
        opacity: 0.72;
        transform: scale(1.11);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* JNI — FINAL JUST-N ILLUSION LOGO REVEAL */
.jni-realm-reveal__title {
    display: block !important;

width: min(84vw, 1120px) !important;
height: clamp(130px, 19vw, 255px) !important;

    background:
        url("https://www.justnillusionstudios.com/wp-content/uploads/2026/08/logo2.png")
        center / contain
        no-repeat !important;

    opacity: 0 !important;
    top: 40% !important;
    filter:
    drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 9px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 18px rgba(0, 0, 0, 0.45));
}

/* Keep the old word sequence running invisibly for timing */
.jni-realm-reveal__title-stem,
.jni-realm-reveal__title-word {
    visibility: hidden !important;
}

/* Reveal the PNG when the sequence reaches its final state */
.jni-realm-reveal.is-resolved .jni-realm-reveal__title {
    opacity: 1 !important;
    transition: opacity 900ms ease !important;

    animation:
        jni-logo-shimmer
        950ms
        ease-out
        0ms
        forwards;
}

@keyframes jni-logo-shimmer {

    0% {
        filter:
            brightness(0.9)
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 9px rgba(0, 0, 0, 0.75));
    }

    16% {
        filter:
            brightness(2.1)
            saturate(1.35)
            drop-shadow(0 0 4px rgba(255, 245, 215, 0.95))
            drop-shadow(0 0 12px rgba(255, 180, 80, 0.9))
            drop-shadow(0 0 24px rgba(184, 95, 27, 0.75));
    }

    34% {
        filter:
            brightness(1.4)
            saturate(1.15)
            drop-shadow(0 0 8px rgba(255, 185, 90, 0.55))
            drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
    }

    100% {
        filter:
            brightness(1)
            saturate(1)
            drop-shadow(0 2px 3px rgba(0, 0, 0, 0.95))
            drop-shadow(0 0 9px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 18px rgba(0, 0, 0, 0.45));
    }
}
}