@import url('https://fonts.googleapis.com/css2?family=Chewy&family=Pixelify+Sans:wght@500;700&display=swap');
@font-face {
    font-family: 'Undertale-Font';
    src: url('fonts/PixelOperator-Bold.ttf');
}
@font-face {
    font-family: 'VCR_OSD_MONO';
    src: url('fonts/VCR_OSD_MONO_1.001.ttf');
}
@font-face {
    font-family: 'Times-NewRoman';
    src: url('fonts/OPTITimes-Roman.otf');
}
@font-face{
    font-family: 'Comic-Sans';
    src: url('fonts/ComicSansMS3.ttf');
}

@font-face{
    font-family: 'Deltarune-Font';
    src: url('fonts/deltarune.ttf');
}
:root {
    --index-scale: 0.75;
    --card-bg: rgba(255, 199, 218, 0.58);
    --card-border: rgba(255, 255, 255, 0.34);
    --card-shadow: 0 24px 54px rgba(32, 16, 31, 0.38);
    --text-main: #24597f;
    --text-red: #b92d35;
    --button-bg: rgba(255, 255, 255, 0.28);
    --button-border: rgba(255, 255, 255, 0.42);
    --bg-x: 0px;
    --bg-y: 0px;
    --stars-far-x: 0px;
    --stars-far-y: 0px;
    --stars-near-x: 0px;
    --stars-near-y: 0px;
    --left-shift: -7vw;
    --right-shift: 7vw;
    --logo-intro-duration: 5.4s;
    --logo-intro-fade-duration: 900ms;
    --logo-letter-delay: 90ms;
    --logo-letter-duration: 380ms;
    --logo-video-start: 1.36s;
    --logo-animation-duration: 1.5s;
    --logo-glow: drop-shadow(0 0 18px rgba(255, 180, 236, 0.44)) drop-shadow(0 0 32px rgba(116, 202, 255, 0.28));
    --logo-scale: min(88vw, 1040px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100vh;
    font-family: 'VCR_OSD_MONO', system-ui, sans-serif;
    color: var(--text-main);
    overflow: hidden;
    background: #090916;
}

.start-screen {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: #000;
    cursor: pointer;
    transition: opacity 500ms ease, visibility 500ms ease;
}

.start-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.start-screen-text {
    font-family: 'Undertale-Font', 'Deltarune-Font', monospace;
    font-size: clamp(1.1rem, 2vw, 2.2rem);
    letter-spacing: 2px;
    color: #f8f8ff;
    text-transform: uppercase;
    text-align: center;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.72),
        0 0 24px rgba(158, 214, 255, 0.42);
    animation: startScreenBlink 0.95s steps(1, end) infinite;
}

.logo-intro {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
}

.logo-intro.is-visible {
    opacity: 1;
    visibility: visible;
    animation: logoIntroExit var(--logo-intro-fade-duration) ease both;
    animation-delay: calc(var(--logo-intro-duration) - var(--logo-intro-fade-duration));
}

.intro-flowers {
    position: absolute;
    bottom: 0;
    width: auto;
    height: min(96vh, 860px);
    opacity: 0.78;
    image-rendering: pixelated;
    filter: saturate(1.05) brightness(0.94);
}

.intro-flowers-left {
    left: 0;
    transform: translateX(-105%);
    animation: introFlowersLeftSlide calc(var(--logo-intro-duration) - var(--logo-intro-fade-duration)) ease-in-out both;
    animation-play-state: paused;
}

.intro-flowers-right {
    right: 0;
    transform: translateX(105%) scaleX(-1);
    animation: introFlowersRightSlide calc(var(--logo-intro-duration) - var(--logo-intro-fade-duration)) ease-in-out both;
    animation-play-state: paused;
}

.intro-logo-stage {
    position: relative;
    z-index: 1;
    width: var(--logo-scale);
    aspect-ratio: 5 / 1;
    display: grid;
    place-items: center;
}

.intro-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.intro-logo-video-frame {
    opacity: 0;
    filter: var(--logo-glow);
    animation:
        introVideoReveal 620ms ease var(--logo-video-start) both,
        introLogoGlow var(--logo-animation-duration) ease var(--logo-video-start) both;
    animation-play-state: paused;
}

.intro-logo-mask-text,
.intro-logo-letters {
    font-family: 'Deltarune-Font', 'Undertale-Font', system-ui, sans-serif;
    font-size: 166px;
    letter-spacing: 5px;
    dominant-baseline: middle;
    font-kerning: none;
    text-rendering: geometricPrecision;
}

.intro-logo-letters {
    fill: #f6ecff;
    filter:
        drop-shadow(0 2px 0 rgba(80, 28, 98, 0.78))
        drop-shadow(0 0 12px rgba(255, 200, 248, 0.34));
}

.intro-letter {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation-name: introLetterBuild, introLetterToVideo;
    animation-duration: var(--logo-letter-duration), 620ms;
    animation-timing-function: cubic-bezier(.22, .84, .3, 1), ease;
    animation-delay: calc(var(--i) * var(--logo-letter-delay)), var(--logo-video-start);
    animation-fill-mode: both, forwards;
    animation-play-state: paused;
}

.intro-logo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 76%;
    animation: introTempleRise 2.2s ease-out var(--logo-video-start) both;
    animation-play-state: paused;
}

.logo-intro.is-visible .intro-flowers-left,
.logo-intro.is-visible .intro-flowers-right,
.logo-intro.is-visible .intro-logo-video-frame,
.logo-intro.is-visible .intro-letter,
.logo-intro.is-visible .intro-logo-video {
    animation-play-state: running;
}

.nana-background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    opacity: 1;
    transition: opacity 900ms ease, filter 900ms ease;
    background:
        radial-gradient(circle at center, rgba(255, 207, 226, 0.12), transparent 45%),
        #0b0b18;
}

.nana-gif {
    position: absolute;
    inset: -2vh -4vw;
    width: 108vw;
    height: 104vh;
    object-fit: cover;
    pointer-events: none;
    filter: saturate(1.04) contrast(1.02) brightness(0.93);
    will-change: transform;
}

/* Fondo completo, sin degradado/mascara oscura hacia la derecha */
.nana-left {
    object-position: 38% center;
    transform: translate3d(calc(var(--bg-x) + var(--left-shift)), var(--bg-y), 0) scale(1.01);
    -webkit-mask-image: none;
    mask-image: none;
}

/* Derecha: más retirada hacia la derecha para dejar respirar ambas imágenes */
.nana-right {
    object-position: 62% center;
    transform: translate3d(calc(var(--bg-x) * -1 + var(--right-shift)), calc(var(--bg-y) * -1), 0) scale(1.01);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 39%,
        rgba(0, 0, 0, 0.14) 43%,
        rgba(0, 0, 0, 0.46) 47%,
        rgba(0, 0, 0, 0.9) 51%,
        #000 55%,
        #000 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 39%,
        rgba(0, 0, 0, 0.14) 43%,
        rgba(0, 0, 0, 0.46) 47%,
        rgba(0, 0, 0, 0.9) 51%,
        #000 55%,
        #000 100%
    );
}

.nana-center-blend {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 12vw;
    min-width: 150px;
    max-width: 210px;
    transform: translateX(-50%);
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background:
        linear-gradient(90deg,
            rgba(255, 182, 212, 0.02) 0%,
            rgba(255, 227, 239, 0.16) 22%,
            rgba(255, 255, 255, 0.26) 50%,
            rgba(214, 233, 255, 0.16) 78%,
            rgba(171, 217, 255, 0.02) 100%),
        radial-gradient(circle at center, rgba(255, 236, 244, 0.16), transparent 68%);
    mix-blend-mode: screen;
    opacity: 0.92;
}

.nana-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 203, 222, 0.08)),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 58%),
        radial-gradient(circle at 50% 50%, transparent 48%, rgba(0, 0, 0, 0.22) 100%);
}


/* =========================================================
    CIELO NOCTURNO / se activa a las 6:30 PM ;>
   ========================================================= */ 

.night-eli{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    display: none;
}

.night-eli img {
    display: block;
    width: auto;
    height: auto;
    max-width: 20vw;
    max-height: 40vh;
    object-fit: contain;
}

body.night-mode .night-eli {
    display: block;
}

.night-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 900ms ease;
}

.stars-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: repeat;
    background-position: 0 0;
    background-origin: padding-box;
    background-attachment: scroll;
    will-change: background-position;
    image-rendering: pixelated;
    opacity: 0;
    animation-play-state: paused;
}

/* Capa lejana: más lenta */
.stars-layer-1 {
    background-image: url('Eff_gifs&pngs/stars1.gif');
    background-size: 304px 234px;
    animation: starsFallFar 56s steps(234, end) infinite;
    opacity: 0.82;
    transform: translate3d(var(--stars-far-x), var(--stars-far-y), 0);
}

/* Capa cercana: ligeramente más rápida */
.stars-layer-2 {
    background-image: url('Eff_gifs&pngs/stars2.gif');
    background-size: 600px 400px;
    animation: starsFallNear 42s steps(400, end) infinite;
    opacity: 0.90;
    transform: translate3d(var(--stars-near-x), var(--stars-near-y), 0);
}

.night-stars-active .night-stars {
    opacity: 1;
}

.night-stars-active .stars-layer {
    animation-play-state: running;
}

.music-toast {
    position: fixed;
    top: 36px;
    right: 36px;
    z-index: 4;
    width: min(420px, calc(100vw - 34px));
    padding: 24px 24px 22px;
    border: 1px solid rgba(171, 73, 255, 0.62);
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(47, 15, 84, 0.95), rgba(15, 7, 31, 0.97));
    box-shadow:
        0 0 0 1px rgba(255, 79, 224, 0.12),
        0 14px 34px rgba(7, 3, 19, 0.52),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
    color: #7ff4ff;
    transform: translateX(135%);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.music-toast::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 28% 22%, rgba(165, 81, 255, 0.22), transparent 36%),
        radial-gradient(circle at 82% 72%, rgba(255, 64, 196, 0.20), transparent 34%);
    z-index: -1;
}

.music-toast.is-visible {
    animation: toastDayIn 620ms cubic-bezier(.2, .82, .24, 1) both;
}

.music-toast.is-leaving {
    animation: toastDayOut 560ms ease both;
}

body.night-mode .music-toast {
    top: auto;
    right: auto;
    bottom: 36px;
    left: 36px;
    transform: translateX(-135%);
}

body.night-mode .music-toast.is-visible {
    animation-name: toastNightIn;
}

body.night-mode .music-toast.is-leaving {
    animation-name: toastNightOut;
}

.music-toast-header {
    display: flex;
    align-items: center;
    gap: 13px;
    font-family: 'Pixelify Sans', 'VCR_OSD_MONO', system-ui, sans-serif;
    font-size: clamp(1.45rem, 4vw, 1.85rem);
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 0 8px rgba(127, 244, 255, 0.72),
        2px 2px 0 rgba(26, 31, 92, 0.78);
}

.music-toast-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    fill: none;
    stroke: #f4eeff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

.music-toast-line {
    height: 6px;
    margin: 12px 0 13px;
    border-radius: 999px;
    background: linear-gradient(90deg, #62d8ff, #8e7dff 46%, #ff58cf);
    box-shadow:
        0 0 10px rgba(127, 244, 255, 0.55),
        0 0 13px rgba(255, 88, 207, 0.52);
}

.music-toast-song {
    color: #b9fbff;
    font-family: 'VCR_OSD_MONO', 'Pixelify Sans', monospace;
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    line-height: 1.18;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(127, 244, 255, 0.54);
}

@keyframes startScreenBlink {
    0%, 45% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0.28;
    }
}

@keyframes logoIntroExit {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes introLetterBuild {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.85);
        filter: blur(4px) brightness(1.45);
    }
    68% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
        filter: blur(0) brightness(1.22);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) brightness(1);
    }
}

@keyframes introVideoReveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes introLetterToVideo {
    from {
        opacity: 1;
        fill-opacity: 1;
    }
    to {
        opacity: 0;
        fill-opacity: 0;
    }
}

@keyframes introFlowersLeftSlide {
    0% {
        transform: translateX(-105%);
    }
    18%, 76% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-105%);
    }
}

@keyframes introFlowersRightSlide {
    0% {
        transform: translateX(105%) scaleX(-1);
    }
    18%, 76% {
        transform: translateX(0) scaleX(-1);
    }
    100% {
        transform: translateX(105%) scaleX(-1);
    }
}

@keyframes introLogoGlow {
    0% {
        filter: brightness(1) var(--logo-glow);
    }
    34% {
        filter: brightness(1.34) var(--logo-glow);
    }
    100% {
        filter: brightness(1.05) var(--logo-glow);
    }
}

@keyframes introTempleRise {
    from {
        object-position: center 76%;
    }
    to {
        object-position: center 22%;
    }
}

@keyframes starsFallFar {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 234px;
    }
}

@keyframes starsFallNear {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 400px;
    }
}

.page-shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
}

.options-card {
    position: relative;
    width: 790px;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 42px;
    padding: 64px 56px;
    border-radius: 18px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    scale: var(--index-scale);
    animation: cardEntrance 850ms ease both;
}

.locker-button {
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 4;
    width: 94px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateX(0);
    transition: transform 260ms ease, filter 260ms ease;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.locker-button img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.locker-button:hover,
.locker-button:focus-visible {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
    outline: none;
}

.locker-button.is-shaking {
    animation: lockShake 420ms ease-in-out 2;
}

.locker-button.is-unlocking {
    animation: lockUnlock 680ms cubic-bezier(.2, .85, .24, 1) both;
}

body.lock-focus-active::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: radial-gradient(circle at center, rgba(255, 245, 250, 0.10), rgba(3, 3, 12, 0.58));
}

.lock-focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 6;
    background: transparent;
}

.lock-focus-clone {
    position: fixed;
    z-index: 7;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.4));
}

.lock-focus-clone img {
    display: block;
    width: 100%;
    height: auto;
}

.floating-key-cursor {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 8;
    width: 86px;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.84) rotate(-12deg);
    transition: opacity 220ms ease, transform 220ms ease;
}

.floating-key-cursor img {
    display: block;
    width: 100%;
    height: auto;
}

body.lock-armed .floating-key-cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.main-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    font-size: clamp(2.4rem, 5.52vw, 3.84rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(255, 255, 255, 0.22);
}

.main-title h1 {
    font-size: 1em;
}

.rainbow-wave {
    display: inline-flex;
    gap: 1px;
}

.rainbow-wave .letter {
    display: inline-block;
    color: hsl(calc(var(--i) * 47 + var(--hue)), 100%, 58%);
    animation: rainbowWave 1.45s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.075s);
}

.intro-text {
    max-width: 620px;
    color: var(--text-red);
    font-size: clamp(1rem, 1.75vw, 1.25rem);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.7px;
}

.button-column {
    width: min(430px, 100%);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.menu-button {
    position: relative;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--button-border);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.36), rgba(255,255,255,0.08)),
        var(--button-bg);
    box-shadow:
        0 14px 28px rgba(64, 36, 65, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    color: #f3e8ff;
    text-decoration: none;
    font-family: 'VCR_OSD_MONO', system-ui, sans-serif;
    font-size: clamp(4.2rem, 10vw, 4rem);
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.85),
        3px 3px 0 rgba(69, 50, 120, 0.34);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.menu-button::before {
    content: '';
    position: absolute;
    inset: -45%;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.48), transparent 65%);
    transform: translateX(-70%) rotate(12deg);
    transition: transform 650ms ease;
}

.menu-button::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.65;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 155, 220, 0.60), transparent 35%),
        radial-gradient(circle at 86% 74%, rgba(126, 223, 255, 0.55), transparent 42%),
        linear-gradient(135deg, rgba(255, 145, 187, 0.38), rgba(122, 111, 220, 0.36));
    z-index: -1;
}

.menu-button span {
    position: relative;
    z-index: 1;
}
span{
    font-family: 'Undertale-font', system-ui, sans-serif;
}

.fisher-button {
    background:
        linear-gradient(135deg, #4b4b52 0%, #242429 47%, #111116 100%);
    color: #ff2fd6;
    text-shadow:
        0 0 7px rgba(255, 47, 214, 0.95),
        0 0 16px rgba(255, 47, 214, 0.70),
        3px 3px 0 rgba(22, 22, 26, 0.62);
}

.fisher-button::after {
    opacity: 0.24;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%),
        radial-gradient(circle at 80% 18%, rgba(255, 47, 214, 0.28), transparent 34%);
}

.fisher-button span {
    font-family: 'Times-NewRoman', 'Times New Roman', serif;
}

.artola-button {
    background: #211c35;
}

.artola-button::after {
    opacity: 0;
}

.button-video-wall {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    opacity: 0.58;
    filter: saturate(1.15) contrast(1.08) brightness(0.82);
    pointer-events: none;
}

.button-video-wall video {
    width: 34%;
    height: 100%;
    flex: 1 1 0;
    object-fit: cover;
}

.button-video-wall video:nth-child(2) {
    transform: scaleX(-1);
}

.artola-button span {
    z-index: 2;
    font-family: 'Comic-Sans', 'Comic Sans MS', cursive;
}

.artola-button .wave-letter {
    display: inline-block;
    animation: artolaTextWave 1.25s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.08s);
}

.menu-button:hover,
.menu-button:focus-visible {
    transform: translateY(-5px) scale(1.025);
    filter: saturate(1.18) brightness(1.05);
    box-shadow:
        0 20px 34px rgba(64, 36, 65, 0.26),
        0 0 24px rgba(255, 215, 236, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
    outline: none;
}

.menu-button:hover::before,
.menu-button:focus-visible::before {
    transform: translateX(72%) rotate(12deg);
}

.menu-button.is-floating {
    animation: buttonFloat 2.8s ease-in-out infinite;
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes rainbowWave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: translateY(-7px) rotate(2deg);
        filter: hue-rotate(125deg);
    }
    45% {
        transform: translateY(-10px) rotate(-2deg);
        filter: hue-rotate(245deg);
    }
    70% {
        transform: translateY(4px) rotate(1deg);
        filter: hue-rotate(330deg);
    }
}

@keyframes artolaTextWave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-7px) rotate(-1deg);
    }
}

@keyframes buttonFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes lockShake {
    0%,
    100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-7px) rotate(-5deg);
    }
    40% {
        transform: translateX(7px) rotate(5deg);
    }
    60% {
        transform: translateX(-5px) rotate(-3deg);
    }
    80% {
        transform: translateX(5px) rotate(3deg);
    }
}

@keyframes lockUnlock {
    0% {
        transform: scale(1);
        filter: saturate(1) brightness(1);
    }
    48% {
        transform: scale(1.15) rotate(-9deg);
        filter: saturate(1.18) brightness(1.1);
    }
    100% {
        transform: scale(0.92) rotate(6deg);
        filter: saturate(1.35) brightness(1.22);
    }
}

body.night-mode .nana-background {
    opacity: 0;
    visibility: hidden;
}

@media (max-width: 700px) {
    .intro-logo-stage {
        width: 94vw;
    }

    .intro-flowers {
        height: min(82vh, 650px);
        opacity: 0.62;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-intro {
        display: none;
        animation: none;
    }
}

@keyframes toastDayIn {
    from {
        opacity: 0;
        transform: translateX(135%) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastDayOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(135%) scale(0.98);
    }
}

@keyframes toastNightIn {
    from {
        opacity: 0;
        transform: translateX(-135%) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastNightOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(-135%) scale(0.98);
    }
}