/* --------RESET ------------------------------------------- */

/* Remove default margins */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Improve text rendering */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Make images behave */
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/* Remove built-in form typography */
input, button, textarea, select {
    font: inherit;
}

/* Remove default link styles */
a {
    text-decoration: none;
    color: inherit;
}

/* Set a clean base line-height */
body {
    line-height: 1.5;
}

/* Allow smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Prevent text overflow issues */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* Create a root stacking context */
#root, body {
    isolation: isolate;
}

/* --------Imports ------------------------------------------*/



@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600&display=swap');



/* --------CSS ------------------------------------------*/




body {
    margin: 0;
    background: #1C1F3A; 
    overflow-x: hidden;
    font-family: sans-serif;
}

h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 800;
    color: #FF7A00; /* warm orange */
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
    text-shadow: 0 0 1px rgba(255,255,255,0.25);
	white-space: nowrap;
	}

h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 500;
    color: #FFC46B; /* soft amber */
    letter-spacing: 0.4px;
    margin: 0 0 16px 0;
}

h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 500;
    color: #F5E1C0; /* soft cream */
    letter-spacing: 0.3px;
    margin: 0 0 14px 0;
}

strong {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: #FFC46B;
    text-decoration: none;
}

a:hover {
    color: #F5E1C0;
    text-decoration: none;
}

ul {
    list-style-type: none;   
    padding-left: 0;         
    margin-left: 0; 
}

/* ------------------ BODY TEXT ------------------ */

.body-large {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 400;
    color: #F5E1C0; /* soft cream */
    line-height: 1.6;
    margin-bottom: 20px;
}

.body-small {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 300;
    color: #F5E1C0; /* soft cream */
    line-height: 1.6;
    margin-bottom: 16px;
 text-shadow: 0 0 1px rgba(255,255,255,0.25);
}


/* ------------------ QUOTES ------------------ */

.quote {
    font-family: 'Exo 2', sans-serif;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-style: italic;
    color: #F5E1C0; /* soft cream */
    line-height: 1.5;
    border-left: 3px solid #FFC46B; /* soft amber accent */
    padding-left: 20px;
    margin: 20px 0;
}


/* ------------------ NUMBERS ------------------ */

.numbers {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 600;
    color: #FFC46B; /* soft amber */
    letter-spacing: 2px;
}

/* Top Bar */

.topbar-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(120px, 18vw, 200px);
    z-index: 99999;
}

.topbar {
    width: 100%;
    height: clamp(120px, 18vw, 200px);
    background: #2B1E4A;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - clamp(40px, 8vw, 120px)),
        0 100%
    );
}

.topbar-wrap::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: clamp(120px, 18vw, 200px);
    background: rgba(0,0,0,0.6);
    mix-blend-mode: screen;

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - clamp(40px, 8vw, 120px)),
        0 100%
    );

    z-index: -1;
}

.topbar-logo {
    position: absolute;
    top: 20px;
    left: 40px;

    /* Responsive scaling */
    height: clamp(120px, 18vw, 250px);

    width: auto;
    pointer-events: none;
    z-index: 100000;
}


/* Top Bar Menu */

.menu {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.8em;
    letter-spacing: 0.5px;
    color: #FFC46B;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    padding-right: 50px;
}

.menu-sep {
    color: #FFC46B;
    opacity: 0.7;
}



/* --- BURGER MENU --- */

.burger {
    display: none;
    position: absolute;
    top: 26px;
    right: 26px;
    width: 32px;
    height: 24px;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 100001;
}

.burger span {
    display: block;
    height: 4px;
    background: #FFC46B; /* same amber as menu */
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger.active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.burger.active span:nth-child(2) {
    opacity: 0;
}

.burger.active span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* Mobile menu panel */

.mobile-menu {
    display: none;
    position: fixed;
    top: clamp(120px, 18vw, 200px);
    right: 0;
    width: 100%;
    background: rgba(28, 31, 58, 0.95);
    padding: 18px 24px;
    flex-direction: column;
    gap: 14px;
    z-index: 9999999;
}

.mobile-menu.active {
    display: flex;
}


.mobile-menu a {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 1.2em;
    color: #FFC46B;
}

/* Show burger / hide desktop menu on small screens */

@media (max-width: 1400px) {
    .menu {
        display: none;
    }

    .burger {
        display: flex;
    }
}



/* Page block */

.page-block {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
	margin: 0;
    padding: 0;
}


/* Wrap parallax + text side-by-side */
.content-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
    padding: 120px 40px;
}

/* Parallax shrinks to fit the layout */
.iso-block {
    width: 50%;
    height: auto;
    min-height: 400px;
}

/* Text block */
.content-section {
    position: absolute;
    top: 50%;
    right: 15vw;
    transform: translateY(-50%);
    width: 18%;
	max-width: 100%; 
	padding: 20px 20px 20px 20px;
    z-index: 9999;
	background-color: rgba(43, 30, 74, 0.6);
	pointer-events: auto !important;
}



.content-card {
	max-width: 100%;    
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Parallax container */
.parallax {
	display:block;
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* BG container */
.bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 0);
    z-index: 0;
    overflow: hidden;
}

.bg img {
     width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* Other layers */
.layer:not(.bg) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center on all screens */
}


.layer img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}







/* ------------------------------------------------- CYBER  ------------------------------------------------------------------------- */

.cyber-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 0);
    z-index: 0;
    overflow: hidden;
}

.cyber-bg img {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}


.cyber-lab img,
.cyber-octo img,
.cyber-nav img,
.cyber-holo img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Layer order (back → front) */
.cyber-lab { z-index: 200; }
.cyber-octo { z-index: 300; }
.cyber-nav { z-index: 400; }
.cyber-holo { z-index: 500; }

/* ===== Per-layer alignment knobs =====
   All four cyber layers inherit the same "dead-center" rule from
   .layer:not(.bg) { top:50%; left:50%; transform:translate(-50%,-50%) }.
   That only lines them up visually if every PNG's art sits in the exact
   same spot relative to its own canvas. If cyber_octo.png / cyber_holo.png
   were exported with a different canvas size or the art shifted inside
   the canvas, they'll drift even though the CSS treats all four identically.
   Nudge these two variables per layer (in the browser inspector, live)
   until things line up, instead of touching the shared .layer rule. */
.cyber-lab  { --cx: 50%; --cy: 50%; }
.cyber-octo { --cx: 50%; --cy: 50%; }
.cyber-nav  { --cx: 50%; --cy: 50%; }
.cyber-holo { --cx: 50%; --cy: 50%; }



/* Cyber text block */
#cyber-page .content-section {
    position: absolute;
    top: 40%;
    left: 23%;
    transform: translate(-50%, -50%);
    width: 15%;
    padding: 20px;
    background: rgba(20, 20, 40, 0.6);
    z-index: 600;
    pointer-events: none;
}


/* Octo = slow float */
.cyber-octo img {
    animation: 	cyberFloatSlow 6s ease-in-out infinite,
				cyberDistort 23s linear infinite, 
				cyberPixelBlurBurst 23s linear infinite,
				cyberZigZag 23s linear infinite;
}

.cyber-holo img {
    animation: 	cyberFloatFast 4s ease-in-out infinite,
				cyberDistort 19s linear infinite, 
				cyberPixelBlurBurst 19s linear infinite,
				cyberZigZag 19s linear infinite;
    filter: drop-shadow(0 0 12px #00eaff);
    mix-blend-mode: screen;
}

.cyber-nav img {
    animation: 	cyberDistort 37s linear infinite,
				cyberPixelBlurBurst 37s linear infinite,
				cyberZigZag 37s linear infinite;
}



/* ===== CYBER FLOAT ANIMATIONS ===== */

@keyframes cyberFloatSlow {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

@keyframes cyberFloatFast {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-18px); }
    100% { transform: translateY(0); }
}

/* ===== CYBERPUNK DISTORTION GLITCH ===== */

@keyframes cyberDistort {
    0%, 98%, 100% {
        opacity: 1;
        filter: none;
        clip-path: inset(0 0 0 0);
    }

    98.3% {
        filter: hue-rotate(90deg) saturate(2.4) brightness(1.3);
        clip-path: inset(0 0 8% 0);
    }

    98.6% {
        filter: hue-rotate(-60deg) saturate(3) brightness(1.6);
        clip-path: inset(12% 0 0 0);
    }

    99% {
        filter: hue-rotate(30deg) saturate(1.8);
        clip-path: inset(0 0 14% 0);
    }
}


	
/* ===== CYBER SHORT PIXEL BLUR ===== */

@keyframes cyberPixelBlurBurst {
    0%, 98%, 100% {
        filter: none;
        clip-path: inset(0 0 0 0);
    }

    98.4% {
        filter: blur(1.5px) contrast(1.4) saturate(1.3);
        clip-path: inset(0 0 7% 0);
    }

    98.8% {
        filter: blur(3px) contrast(2) saturate(1.8) hue-rotate(35deg);
        clip-path: inset(12% 0 0 0);
    }
}

@keyframes cyberZigZag {
    0%, 95%, 100% {
        clip-path: polygon(
            0% 0%, 100% 0%, 100% 100%, 0% 100%
        );
        filter: none;
    }

    /* jagged slice 1 */
    96% {
        clip-path: polygon(
            0% 0%, 100% 0%, 
            100% 60%, 80% 55%, 60% 65%, 40% 55%, 20% 65%, 
            0% 60%
        );
        filter: contrast(1.4) brightness(1.3);
    }

    /* jagged slice 2 */
    97% {
        clip-path: polygon(
            0% 10%, 100% 5%, 
            100% 70%, 85% 60%, 65% 75%, 45% 60%, 25% 75%, 
            0% 70%
        );
        filter: contrast(1.8) brightness(1.5) hue-rotate(20deg);
    }

    /* jagged slice 3 */
    98% {
        clip-path: polygon(
            0% 5%, 100% 0%, 
            100% 80%, 75% 70%, 55% 85%, 35% 70%, 15% 85%, 
            0% 80%
        );
        filter: contrast(2.2) brightness(1.7) hue-rotate(-30deg);
    }

    /* hard tear */
    99% {
        clip-path: polygon(
            0% 20%, 100% 10%, 
            100% 90%, 70% 75%, 50% 95%, 30% 75%, 10% 95%, 
            0% 90%
        );
        filter: contrast(2.6) brightness(2) hue-rotate(45deg);
    }
}







/* ===== SHOWREEL STRIP ===== */

/* OUTER WRAPPER — SLANTED */
.page-block#reel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #522C7A;
    z-index: 9999;

    transform: skewY(-2.6deg);
    transform-origin: top left;
}

/* INNER CONTENT — STRAIGHT AGAIN */
#reel .reel-strip {
    position: relative;
    width: 100%;
    padding: 160px 0;

    transform: skewY(2.6deg) translateY(-15%);
    transform-origin: top left;
}


/* BG VIDEO */
.reel-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    transform: translate(-50%, -50%);
    filter: blur(25px) brightness(0.6);
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* FOREGROUND CONTENT */
.reel-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* FOREGROUND VIDEO */
.reel-video {
    width: 720px;
    max-width: 90vw;
    display: block;
    margin: 0 auto;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.4);
}






/* ------------------------------------------------EDO--------------------------------------------------------------- */

/* Float */
@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* Glow */
@keyframes glowPulse {
    0%   { filter: drop-shadow(0 0 8px #FFD86B) brightness(100%); }
    50%  { filter: drop-shadow(0 0 22px #FFD86B) brightness(130%); }
    100% { filter: drop-shadow(0 0 8px #FFD86B) brightness(100%); }
}


/* Ninja Left Choreo */
@keyframes ninjaLeftChoreo {

    /* Attack 1 */
    0%   { opacity: 0; transform: translateX(-250px) translateY(250px); }
    2%   { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    3%   { transform: translateX(0) translateY(0); }               /* freeze */
    4%   { opacity: 0; transform: translateX(-150px) translateY(150px); } /* exit */

    /* Attack 2 */
    5%   { opacity: 0; transform: translateX(-250px) translateY(-250px); }
    7%   { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    8%   { transform: translateX(0) translateY(0); }               /* freeze */
    9%   { opacity: 0; transform: translateX(-150px) translateY(-150px); } /* exit */

    /* Attack 3 */
    10%  { opacity: 0; transform: translateX(-250px) translateY(100px); }
    12%  { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    13%  { transform: translateX(0) translateY(0); }               /* freeze */
    14%  { opacity: 0; transform: translateX(-150px) translateY(60px); } /* exit */

    /* Attack 4 (extra clash before final) */
    15%  { opacity: 0; transform: translateX(-250px) translateY(0); }
    17%  { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    18%  { transform: translateX(0) translateY(0); }               /* freeze */

    /* FINAL CLASH — 3 SECOND FREEZE */
    49.5% { opacity: 1; transform: translateX(0) translateY(0); }

    /* AFTER FREEZE — INSTANT SWOOSH OUT (NO FADE) */
    55%  { opacity: 1; transform: translateX(-250px) translateY(0); }

    /* Hide only AFTER they are off-screen */
    56%  { opacity: 0; transform: translateX(-250px) translateY(0); }

    /* Idle */
    100% { opacity: 0; }
}




/* Ninja Right Choreo */
@keyframes ninjaRightChoreo {

    /* Attack 1 */
    0%   { opacity: 0; transform: translateX(250px) translateY(-250px); }
    2%   { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    3%   { transform: translateX(0) translateY(0); }               /* freeze */
    4%   { opacity: 0; transform: translateX(150px) translateY(-150px); } /* exit */

    /* Attack 2 */
    5%   { opacity: 0; transform: translateX(250px) translateY(250px); }
    7%   { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    8%   { transform: translateX(0) translateY(0); }               /* freeze */
    9%   { opacity: 0; transform: translateX(150px) translateY(150px); } /* exit */

    /* Attack 3 */
    10%  { opacity: 0; transform: translateX(250px) translateY(-100px); }
    12%  { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    13%  { transform: translateX(0) translateY(0); }               /* freeze */
    14%  { opacity: 0; transform: translateX(150px) translateY(-60px); } /* exit */

    /* Attack 4 (extra clash before final) */
    15%  { opacity: 0; transform: translateX(250px) translateY(0); }
    17%  { opacity: 1; transform: translateX(0) translateY(0); }   /* CHING */
    18%  { transform: translateX(0) translateY(0); }               /* freeze */

    /* FINAL CLASH — 3 SECOND FREEZE */
    49.5% { opacity: 1; transform: translateX(0) translateY(0); }

    /* AFTER FREEZE — INSTANT SWOOSH OUT (NO FADE) */
    55%  { opacity: 1; transform: translateX(250px) translateY(0); }

    /* Hide only AFTER they are off-screen */
    56%  { opacity: 0; transform: translateX(250px) translateY(0); }

    /* Idle */
    100% { opacity: 0; }
}


/* clash */
@keyframes clashTiming {
    0%, 1%, 6%, 11%, 16%, 100% { opacity: 0; }

    /* Attack 1 */
    2%, 2.3% { opacity: 1; }
    2.31% { opacity: 0; }

    /* Attack 2 */
    7%, 7.3% { opacity: 1; }
    7.31% { opacity: 0; }

    /* Attack 3 */
    12%, 12.3% { opacity: 1; }
    12.31% { opacity: 0; }

    /* Attack 4 — NEW extra clash */
    17%, 17.3% { opacity: 1; }
    17.31% { opacity: 0; }

    /* Final long clash */
    17%, 20% { opacity: 1; }
    20.01% { opacity: 0; }
}

/* fog */
@keyframes fogMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-5%); }
}


.page-block#edo-page {
    margin-top: -10%;   /* adjust until it fits perfectly */
    position: relative;
    z-index: 1;           /* stays below the reel */
}



.moon img {
    animation: float 6s ease-in-out infinite;
}

.pagoda img {
    animation: float 8s ease-in-out infinite;
}


.glow img {
     animation: float 8s ease-in-out infinite,
                glowPulse 3s ease-in-out infinite;

    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px #FFD86B);
}

.ninja_left img,
.ninja_right img {
    opacity: 0;
}

.ninja_left img {
    animation: ninjaLeftChoreo 6s linear infinite;
}

.ninja_right img {
    animation: ninjaRightChoreo 6s linear infinite;
}


.clash img {
    animation: clashTiming 6s linear infinite; 
    mix-blend-mode: screen;
}


.fog_front {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
    z-index: 999;
    pointer-events: none;
}

.fog_front img {
  width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* ------------------------------------------------FANTASY--------------------------------------------------------------- */

/* Fantasy parallax uses same base .parallax rules */

/* Fantasy BG behaves like Edo BG */
.fan-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 0);
    z-index: 0;
    overflow: hidden;
}

/* FIXED BRIDGE SCALING */
.fan-bridge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    /* The correct way: height controls scale */
    height: 45vh;          /* adjust to taste */
    width: auto;           /* keep aspect ratio */

    z-index: 900;
    pointer-events: none;
}

.fan-bridge img {
    height: 100%;          /* match the wrapper height */
    width: auto;           /* keep proportions */
    object-fit: contain;
}



/* Petal layer */
.petal-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 980;
}

/* Sakura petal shape */
.petal {
    position: absolute;
    width: 22px;          /* thinner */
    height: 8px;          /* flatter */
    background: linear-gradient(
        to bottom,
        #fff8fc 0%,        /* almost white */
        #ffe3ef 40%,       /* soft pink tint */
        #ffd0e6 100%       /* subtle pink edge */
    );
    border-radius: 70% 70% 40% 40%; /* soft pointed end */
    opacity: 0.85;
    transform-origin: center;
    filter: blur(0.3px);
}

/* Gentle sideways drifting fall */
@keyframes petalFall {
    0% {
        transform: translate3d(0, -20vh, 0) rotate(-8deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    40% {
        transform: translate3d(20vw, 35vh, 0) rotate(10deg);
    }
    70% {
        transform: translate3d(35vw, 75vh, 0) rotate(-6deg);
    }
    100% {
        transform: translate3d(45vw, 115vh, 0) rotate(0deg);
        opacity: 0;
    }
}

/* FANTASY OVERRIDE — FINAL FIX */
#fantasy-page .content-section {
    position: absolute;
    top: 35%;                 /* sits inside the bridge zone */
    left: 50%;
    right: auto;              /* cancels Edo positioning */
    transform: translate(-50%, -50%);
    width: 40%;               /* fits between the bridge posts */
	padding: 20px 20px 20px 20px;
    text-align: left;
    z-index: 1200;
    pointer-events: none;
}


#fantasy-page .content-card {
	  max-width: 100%;
}


/*Responsive crap */

@media (max-width: 1920px) {
    .content-section {
        right: 10vw;
        width: 400px;
    }
}




@media (max-width: 1400px) {
    .content-wrap {
        flex-direction: column;
        padding: 60px 20px;
    }

    .iso-block,
    .content-section {
        width: 100%;
    }

    .content-card {
        max-width: 100%;
    }

  .content-section {
        position: absolute;
        bottom: 0;
        top: auto;
        right: 0 ;
        left: 0 ;
        transform: none ;
        padding: 20px;
        margin: 0 ;
    }
}



/* ===== Bubble layout fix v2 — pinned to the bridge itself =====
   .fan-bubbles now lives INSIDE .fan-bridge in the HTML, so it
   shares the bridge's exact box and inherits whatever transform
   parallax.js applies to the bridge (scroll offset, phone zoom)
   automatically — no separate math needed to keep it registered
   at different screen sizes.
   --bubble-x/--bubble-y are now a % of the BRIDGE IMAGE's own box,
   not the whole scene, so the old 70%/52% (tuned against the whole
   viewport) no longer applies as-is — these are a starting guess,
   re-pick them live in devtools against the bridge artwork same as
   before, just once, and it'll stay put at every size afterwards. */


.fan-bubbles {
  --bubble-x: 93%;
  --bubble-y: 8%;
}

.fan-bubbles,
.fan-bubble-wrap {
  display: block !important;
  position: absolute !important;
  top: var(--bubble-y) !important;
  left: var(--bubble-x) !important;
  translate: -50% -50%;
  width: auto !important;
  height: auto !important;
  min-width: 200px !important;    /* gives room for the bubble images */
  min-height: 80px !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 950 !important;
}

/* Make bubble images use their intrinsic size but scale responsively */
.fan-bubbles .bubble {
  position: absolute;

  /* Explicit anchor on all four sides — without this, each <img> falls back
     to its own "static position" guess, which is why same-size images were
     landing in different spots instead of stacking exactly on top of each other */
  top: 0;
  left: 50%;

  /* Center horizontally ONLY (vertical offset is added by the animation) */
  translate: -50% 0;

  /* Allow animation to use transform */
  transform: none;

  width: auto;
  height: auto;
  max-width: 40vw;
  max-height: 40vh;
  visibility: visible;
  pointer-events: none;
  z-index: 951;

  opacity: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}





/* Optional smaller caps for very small screens */
@media (max-width: 800px) {
  .fan-bubbles .bubble { max-width: 60vw !important; max-height: 40vh !important; }
  .fan-bubble-wrap { min-width: 140px !important; min-height: 60px !important; }
}


/* Bubble 1 — bottom — short */
.fan-bubbles .bubble.bottom {
  animation-name: bubble1;
  animation-duration: 6s;
}

@keyframes bubble1 {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
  10%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  30%  { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
  40%  { opacity: 0; transform: translate(-50%, -10px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
}

/* Bubble 2 — mid — medium */
.fan-bubbles .bubble.mid {
  animation-name: bubble2;
  animation-duration: 6s;
}

@keyframes bubble2 {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
  20%  { opacity: 0; }
  30%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  55%  { opacity: 1; transform: translate(-50%, -4px) scale(1.02); }
  65%  { opacity: 0; transform: translate(-50%, -10px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
}

/* Bubble 3 — top — long */
.fan-bubbles .bubble.top {
  animation-name: bubble3;
  animation-duration: 6s;
}

@keyframes bubble3 {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
  35%  { opacity: 0; }
  45%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -6px) scale(1.03); }
  90%  { opacity: 0; transform: translate(-50%, -12px) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, 20px) scale(0.95); }
}




/* ------------------------------------------------- AQUA  ------------------------------------------------------------------------- */

.aqua-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 0);
    z-index: 0;
    overflow: hidden;
}

.aqua-bg img {
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

/* Layer order (back → front) */
.aqua-head { z-index: 200; }

.aqua-reef { z-index: 300; }

.aqua-tail { z-index: 400; }
			 
.aqua-sub  { z-index: 500; }

.aqua-head img,
.aqua-reef img,
.aqua-tail img,
.aqua-sub img {
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
}

/* Aqua text block */
#aqua-page .content-section {
    position: absolute;
    top: 40%;
    left: 23%;
    transform: translate(-50%, -50%);
    width: 15%;
    padding: 20px;
    background: rgba(20, 40, 60, 0.6);
    z-index: 600;
    pointer-events: none;
}


/* Breathing goes on the wrapper */
.aqua-inner {
    animation: aquaBreath 6s ease-in-out infinite;
}

/* Rotation goes on the img */
.aqua-head img {
    animation: aquaRotateHead 2s ease-in-out infinite;
}

.aqua-tail img {
    animation: aquaRotateTail 4s ease-in-out infinite;
	transform-origin: 5% 90%; /* shift pivot right */
}

.aqua-sub img {
    animation:
        subMotion 16s ease-in-out infinite,
        subFadeCycle 16s linear infinite;
}


/* AQUA BUBBLES CONTAINER */
.aqua-bubbles {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 550;
}

/* Individual bubble */
.aqua-bubble {
    position: absolute;
    bottom: -80px; /* start below screen */
    width: 40px;   /* JS will override for random size */
    height: auto;
    opacity: 0;
    pointer-events: none;
}



#social li {
	display: inline-block;
	margin-left: 10px;
}

#social li a img {
	height: 50px;
	width: 50px;
}

/* ===== AQUA BREATH (SYNCED) ===== */
@keyframes aquaBreath {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* ===== AQUA ROTATION (HEAD + TAIL) ===== */

/* Head: subtle, centered */
@keyframes aquaRotateHead {
    0%   { transform: rotate(-0.5deg); }
    50%  { transform: rotate(0.5deg); }
    100% { transform: rotate(-0.5deg); }
}

/* Tail: rotate toward reef, reduced left movement */
@keyframes aquaRotateTail {
    0%   { transform: rotate(0.5deg); }
    50%  { transform: rotate(2deg); }
    100% { transform: rotate(0.5deg); }
}

/* ===== AQUA SUB MOTION ===== */


@keyframes subMotion {
    /* 0–5%: off-screen, tiny, invisible */
    0% {
        transform: scale(0.2) translateX(-80px) translateY(30px);
        opacity: 0;
    }
    5% {
        transform: scale(0.2) translateX(-80px) translateY(30px);
        opacity: 0;
    }

    /* 5–12%: smooth enter (small → big) */
    12% {
        transform: scale(1.05) translateX(0px) translateY(0px);
        opacity: 1;
    }

    /* 12–70%: bobbing while visible */
    25% {
        transform: scale(1.05) translateX(0px) translateY(-6px);
        opacity: 1;
    }
    40% {
        transform: scale(1.05) translateX(0px) translateY(0px);
        opacity: 1;
    }
    55% {
        transform: scale(1.05) translateX(0px) translateY(-8px);
        opacity: 1;
    }
    70% {
        transform: scale(1.05) translateX(0px) translateY(0px);
        opacity: 1;
    }

    /* 70–85%: smooth leave (big → small) */
    85% {
        transform: scale(0.6) translateX(30px) translateY(-15px);
        opacity: 0.4;
    }

    /* 85–100%: tiny, off-screen, invisible (pause) */
    100% {
        transform: scale(0.2) translateX(60px) translateY(-30px);
        opacity: 0;
    }
}



@keyframes subFadeCycle {
    0%   { opacity: 0; }
    3%   { opacity: 1; }
    70%  { opacity: 1; }
    85%  { opacity: 0; }
    100% { opacity: 0; }
}



/* ================================================================
   RESPONSIVE PASS — phones & narrow/portrait tablets (<=900px)
   Desktop / laptop / 4K are left exactly as they are (that layout
   is the one you want kept). Below this breakpoint every scene's
   text box drops to the bottom of its block, full width, and the
   parallax art gets a bit of extra zoom (via parallax.js) so the
   characters stay legible in a tall, narrow viewport instead of
   shrinking down to nothing in the middle of the screen.
   ================================================================ */

@media (max-width: 900px) {

    /* Higher specificity (body-prefixed) + !important: the desktop
       per-page rules (#cyber-page .content-section etc.) were
       apparently still winning here, so this removes any doubt
       about which rule applies. */
    body .content-section,
    body #cyber-page .content-section,
    body #fantasy-page .content-section,
    body #aqua-page .content-section {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        padding: 20px 20px 32px !important;
        text-align: left !important;
        z-index: 1300 !important;
    }

    .content-card,
    #fantasy-page .content-card {
        max-width: 100%;
    }

    /* The desktop h1 is nowrap by design (fits the wide sidebar
       boxes) — on a full-width mobile box that just clips titles. */
    h1 {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    body .content-section,
    body #cyber-page .content-section,
    body #fantasy-page .content-section,
    body #aqua-page .content-section {
        padding: 16px 16px 28px !important;
    }
}