/* ===================================================== */
/* RESET                                                 */
/* ===================================================== */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ===================================================== */
/* PALETA                                                */
/* ===================================================== */

:root {
    --bg-dark: #050816;

    --star: #ffffff;

    --pink: #ffb7d5;
    --pink-soft: #ffd8ea;

    --gold: #ffe8a3;

    --text: #f4f6ff;
    --text-soft: rgba(255,255,255,.75);

    --glass:
        rgba(255,255,255,.08);

    --border:
        rgba(255,255,255,.12);

    --star-safe-top: 28px;
    --star-safe-right: 28px;
    --star-safe-bottom: 28px;
    --star-safe-left: 28px;
}

/* ===================================================== */
/* BODY                                                  */
/* ===================================================== */

body {
    font-family: 'Inter', sans-serif;

    background:
        radial-gradient(
            circle at top,
            #1b2444 0%,
            #0d1329 30%,
            #050816 100%
        );

    color: var(--text);

    position: relative;
}

/* ===================================================== */
/* CANVAS                                                */
/* ===================================================== */

#universe-canvas {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 1;
}

/* ===================================================== */
/* HERO                                                  */
/* ===================================================== */

#hero {
    position: relative;

    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 5;
}

#hero.universe-entered {

    pointer-events: none;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    max-width: 800px;

    padding: 30px;
}

/* ===================================================== */
/* CORAÇÃO CENTRAL                                       */
/* ===================================================== */

.heart-core {
    font-size: 4rem;

    color: var(--pink);

    margin-bottom: 20px;

    animation:
        heartbeat 3s ease-in-out infinite;

    filter:
        drop-shadow(0 0 15px rgba(255,183,213,.5));
}

@keyframes heartbeat {

    0% {
        transform: scale(1);
    }

    10% {
        transform: scale(1.15);
    }

    20% {
        transform: scale(1);
    }

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

/* ===================================================== */
/* TÍTULO                                                */
/* ===================================================== */

h1 {
    font-family: 'Cormorant Garamond', serif;

    font-size: clamp(3rem, 8vw, 6rem);

    font-weight: 600;

    margin-bottom: 15px;

    color: white;
}

.hero-subtitle {
    color: var(--text-soft);

    font-size: 1.15rem;

    line-height: 1.8;

    max-width: 600px;

    margin-bottom: 40px;
}

/* ===================================================== */
/* BOTÃO ENTRAR                                          */
/* ===================================================== */

#enter-universe-btn {

    border: none;

    cursor: pointer;

    padding:
        16px
        40px;

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--pink-soft)
        );

    color: #1f1f1f;

    font-size: 1rem;

    font-weight: 600;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

#enter-universe-btn:hover {

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 0 30px rgba(255,183,213,.35);
}

/* ===================================================== */
/* PLAYER                                                */
/* ===================================================== */

#music-player {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 20;

    width: 320px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 15px;

    backdrop-filter: blur(20px);

    background: var(--glass);

    border: 1px solid var(--border);

    border-radius: 20px;
}

.player-cover {

    position: relative;

    width: 60px;
    height: 60px;

    overflow: hidden;

    border-radius: 50%;
}

.player-cover img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}

.player-cover::after {

    content: "";

    position: absolute;

    top: -50%;
    left: -150%;

    width: 50%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    transform: rotate(25deg);

    pointer-events: none;
}

.player-cover.attention::after {

    animation: shine 4s linear infinite;
}

@keyframes shine {

    from {
        left: -150%;
    }

    to {
        left: 250%;
    }
}

.player-info {

    flex: 1;

    display: flex;
    flex-direction: column;
}

.track-title {

    font-size: .95rem;
    font-weight: 600;
}

.track-artist {

    font-size: .8rem;

    color: var(--text-soft);
}

#play-btn {

    border: none;

    cursor: pointer;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: white;

    color: black;

    font-weight: bold;
}

/* ===================================================== */
/* VOLUME                                                */
/* ===================================================== */

#volume-slider {

    margin-top: 8px;

    width: 100%;

    cursor: pointer;

    appearance: none;

    height: 4px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.15);
}

#volume-slider::-webkit-slider-thumb {

    appearance: none;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: white;

    cursor: pointer;
}

#volume-slider::-moz-range-thumb {

    width: 12px;
    height: 12px;

    border-radius: 50%;

    border: none;

    background: white;

    cursor: pointer;
}

/* ===================================================== */
/* PLAYER ATTENTION                                      */
/* ===================================================== */

@keyframes playerPulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

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

#music-player.attention {

    animation:
        playerPulse 3s ease-in-out infinite;
}

/* ===================================================== */
/* PLAYER SPEECH BUBBLE                                  */
/* ===================================================== */

#music-prompt {

    position: fixed;

    right: 40px;

    bottom: 185px;

    max-width: 300px;

    padding: 16px 20px;

    border-radius: 18px;

    backdrop-filter: blur(15px);

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.12);

    color: white;

    font-size: .95rem;

    line-height: 1.5;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity .5s ease,
        transform .5s ease;

    z-index: 60;

    pointer-events: none;
}

#music-prompt::after {

    content: "";

    position: absolute;

    right: 130px;

    top: 100%;

    width: 2px;

    height: 45px;

    background:
        rgba(255,255,255,.25);
}

#music-prompt::before {

    content: "✨";

    position: absolute;

    right: 120px;

    bottom: -62px;

    font-size: 1rem;

    opacity: .8;
}

#music-prompt.visible {

    opacity: 1;

    transform:
        translateY(0);
}

/* ===================================================== */
/* UNIVERSO                                              */
/* ===================================================== */

#universe-section {

    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 1.5s ease;
}

#universe-section.active {

    opacity: 1;

    pointer-events: all;
}

#universe-container {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.constellation-layer {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 10;

    pointer-events: none;

    overflow: visible;
}

.constellation-line {

    stroke:
        rgba(255,216,234,.66);

    stroke-width: 1.15;

    stroke-linecap: round;

    filter:
        drop-shadow(0 0 6px rgba(255,183,213,.48));

    stroke-dasharray:
        var(--line-length);

    stroke-dashoffset:
        var(--line-length);

    animation:
        constellationDraw 2.2s ease forwards,
        constellationBreathe 5s ease-in-out 2.2s infinite;
}

/* ===================================================== */
/* HERO TRANSITION                                       */
/* ===================================================== */

.hero-content {

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.hero-content.hide {

    pointer-events: none;

    user-select: none;

    opacity: 0;

    transform:
        translateY(-30px);
}

/* ===================================================== */
/* TRANSITION OVERLAY                                    */
/* ===================================================== */

#transition-overlay {

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle,
            rgba(5,8,22,0) 0%,
            rgba(5,8,22,0) 50%,
            rgba(5,8,22,0.55) 100%
        );

    opacity: 0;

    pointer-events: none;

    z-index: 15;

    transition:
        opacity 2s ease;
}

#transition-overlay.active {

    opacity: 1;
}

/* ===================================================== */
/* HEART AWAKEN                                          */
/* ===================================================== */

.heart-core.awaken {

    animation:
        universeAwaken 1.5s ease forwards;
}

@keyframes universeAwaken {

    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.8);
    }

    60% {
        transform: scale(0.9);
    }

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

/* ===================================================== */
/* FLASH LAYER                                           */
/* ===================================================== */

#flash-layer {

    position: fixed;

    inset: 0;

    opacity: 0;

    pointer-events: none;

    z-index: 30;

    background:
        radial-gradient(
            circle,
            rgba(255,240,245,.8),
            rgba(255,183,213,.4),
            transparent
        );
}

#flash-layer.active {

    animation:
        romanticFlash 1s ease;
}

@keyframes romanticFlash {

    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ===================================================== */
/* ESTRELAS CLICÁVEIS                                    */
/* ===================================================== */

.memory-star {

    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

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

    z-index: 20;

    outline: none;

    transition:
        opacity 2s ease,
        transform 2s cubic-bezier(.19,1,.22,1);
}

.memory-star.revealed {

    opacity: 1;

    pointer-events: auto;

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

.memory-star.drifting {

    animation:
        starDrift 7s ease-in-out infinite;

    animation-delay:
        var(--star-drift-delay, 0s);
}

.memory-star--favorite {

    width: 24px;
    height: 24px;
}

.memory-star--letter {

    width: 22px;
    height: 22px;
}

.memory-star--sub-memory {

    width: 13px;
    height: 13px;

    cursor: default;

    z-index: 21;
}

.memory-star.discovered:not(.memory-star--sub-memory) .star-core {

    filter:
        saturate(.82)
        brightness(.95);

    box-shadow:
        0 0 12px rgba(255,255,255,.78),
        0 0 30px rgba(255,216,234,.34),
        0 0 58px rgba(156,207,255,.16);
}

.memory-star.discovered:not(.memory-star--sub-memory)::after {

    content: "";

    position: absolute;

    right: -3px;
    bottom: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(255,232,163,.95);

    box-shadow:
        0 0 10px rgba(255,232,163,.8),
        0 0 20px rgba(255,183,213,.38);
}

.memory-star--sub-memory.is-orbiting {

    transform:
        translate(
            calc(-50% + var(--sub-orbit-x, 72px)),
            calc(-50% + var(--sub-orbit-y, 42px))
        )
        scale(0);
}

.memory-star--sub-memory.is-orbiting.revealed {

    transform:
        translate(
            calc(-50% + var(--sub-orbit-x, 72px)),
            calc(-50% + var(--sub-orbit-y, 42px))
        )
        scale(1);
}

.memory-star--sub-memory.is-orbiting.drifting {

    animation:
        subStarOrbit 9s ease-in-out infinite;

    animation-delay:
        var(--star-drift-delay, 0s);
}

.star-core {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            white 0%,
            white 28%,
            rgba(255,216,234,.9) 52%,
            rgba(255,183,213,.15) 100%
        );

    box-shadow:
        0 0 16px white,
        0 0 42px rgba(255,183,213,.62),
        0 0 86px rgba(255,183,213,.26);

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

    transition:
        filter .5s ease,
        transform .5s ease,
        box-shadow .5s ease;
}

.memory-star--sub-memory .star-core {

    background:
        radial-gradient(
            circle,
            white 0%,
            rgba(255,244,208,.95) 36%,
            rgba(156,207,255,.52) 72%,
            rgba(156,207,255,.12) 100%
        );

    box-shadow:
        0 0 10px rgba(255,255,255,.82),
        0 0 28px rgba(156,207,255,.48),
        0 0 46px rgba(255,232,163,.22);
}

.memory-star--letter .star-core {

    background:
        radial-gradient(
            circle,
            white 0%,
            rgba(255,232,163,.96) 38%,
            rgba(255,183,213,.55) 72%,
            rgba(255,183,213,.15) 100%
        );

    box-shadow:
        0 0 18px rgba(255,255,255,.9),
        0 0 48px rgba(255,232,163,.42),
        0 0 88px rgba(255,183,213,.28);
}

.memory-star--letter .star-aura {

    background:
        radial-gradient(
            circle,
            rgba(255,232,163,.13),
            rgba(255,183,213,.08),
            transparent
        );
}

.memory-star--sub-memory .star-aura {

    width: 58px;
    height: 58px;

    background:
        radial-gradient(
            circle,
            rgba(156,207,255,.13),
            transparent
        );
}

.memory-star.revealed:hover .star-core,
.memory-star.preview-visible .star-core,
.memory-star:focus-visible .star-core {

    filter:
        brightness(1.15);

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

    box-shadow:
        0 0 22px white,
        0 0 58px rgba(255,183,213,.8),
        0 0 110px rgba(255,183,213,.34);
}

.star-aura {

    opacity: 0;

    transition:
    opacity 3s ease,
    transform 3s cubic-bezier(.19,1,.22,1);

    position: absolute;

    left: 50%;
    top: 50%;

    width: 90px;
    height: 90px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(255,183,213,.15),
            transparent
        );

    animation: none;
}

.memory-star.aura-active .star-aura {

    opacity: 1;

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

.memory-star.aura-pulsing .star-aura {

    animation:
        auraPulse 4s ease-in-out infinite;
}

@keyframes auraPulse {

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

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

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

.star-label {

    user-select: none;
    pointer-events: none;

    position: absolute;

    top: 40px;

    left: 50%;

    transform:
        translateX(-50%)
        translateY(8px);

    white-space: nowrap;

    opacity: 0;

    color:
        rgba(255,255,255,.8);

    font-size: .9rem;

    transition:
        opacity 2s ease,
        transform 2s ease;
}

.star-label.visible {

    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}

/* ===================================================== */
/* ORBIT PARTICLES                                       */
/* ===================================================== */

.orbit {

    position: absolute;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.9);

    left: 50%;
    top: 50%;

    margin-left: -3px;
    margin-top: -3px;

    opacity: 0;
}

.memory-star.active-orbit .orbit {

    opacity: 1;
}

.memory-star.active-orbit .orbit-1 {

    animation:
        orbitOne 7s linear infinite;
}

.memory-star.active-orbit .orbit-2 {

    animation:
        orbitTwo 9s linear infinite;
}

.memory-star.active-orbit .orbit-3 {

    animation:
        orbitThree 12s linear infinite;
}

@keyframes orbitOne {

    from {
        transform:
            rotate(0deg)
            translateX(35px)
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg)
            translateX(35px)
            rotate(-360deg);
    }
}

@keyframes orbitTwo {

    from {
        transform:
            rotate(120deg)
            translateX(45px)
            rotate(-120deg);
    }

    to {
        transform:
            rotate(480deg)
            translateX(45px)
            rotate(-480deg);
    }
}

@keyframes orbitThree {

    from {
        transform:
            rotate(240deg)
            translateX(55px)
            rotate(-240deg);
    }

    to {
        transform:
            rotate(600deg)
            translateX(55px)
            rotate(-600deg);
    }
}

@keyframes favoriteStarPulse {

    0% {

        box-shadow:
            0 0 15px white,
            0 0 35px rgba(255,183,213,.4);

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

    50% {

        box-shadow:
            0 0 25px white,
            0 0 60px rgba(255,183,213,.8);

        transform:
            translate(-50%, -50%)
            scale(1.12);
    }

    100% {

        box-shadow:
            0 0 15px white,
            0 0 35px rgba(255,183,213,.4);

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

.memory-star.pulsing .star-core {

    animation:
        favoriteStarPulse 3s ease-in-out infinite;
}

.memory-star.fragment-gathering .star-core {

    animation:
        memoryFragmentGather 2.45s ease both;
}

.memory-star.fragment-gathering .star-aura {

    opacity: 1;

    animation:
        memoryAuraGather 2.45s ease both;
}

@keyframes memoryFragmentGather {

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

        box-shadow:
            0 0 16px white,
            0 0 42px rgba(255,183,213,.62),
            0 0 86px rgba(255,183,213,.26);
    }

    28% {
        transform:
            translate(-50%, -50%)
            scale(1.42);

        box-shadow:
            0 0 34px white,
            0 0 86px rgba(255,232,163,.76),
            0 0 150px rgba(255,183,213,.48);
    }

    58% {
        transform:
            translate(-50%, -50%)
            scale(1.16);

        box-shadow:
            0 0 24px white,
            0 0 66px rgba(255,232,163,.58),
            0 0 118px rgba(255,183,213,.36);
    }

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

        box-shadow:
            0 0 12px rgba(255,255,255,.78),
            0 0 30px rgba(255,216,234,.34),
            0 0 58px rgba(156,207,255,.16);
    }
}

@keyframes memoryAuraGather {

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

    48% {
        transform:
            translate(-50%, -50%)
            scale(1.38);
    }

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

.memory-star--letter.letter-unlocking .star-core {

    animation:
        letterUnlockCore 4.8s ease both;
}

.memory-star--letter.letter-unlocking .star-aura {

    opacity: 1;

    animation:
        letterUnlockAura 4.8s ease both;
}

.memory-star--letter.letter-unlocking .star-label {

    color:
        rgba(255,232,163,.95);

    text-shadow:
        0 0 18px rgba(255,232,163,.42);
}

@keyframes letterUnlockCore {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.45);

        filter:
            brightness(1.08);

        box-shadow:
            0 0 18px rgba(255,255,255,.92),
            0 0 48px rgba(255,232,163,.42),
            0 0 88px rgba(255,183,213,.28);
    }

    28% {
        transform:
            translate(-50%, -50%)
            scale(1.55);

        filter:
            brightness(1.24);

        box-shadow:
            0 0 36px white,
            0 0 92px rgba(255,232,163,.78),
            0 0 170px rgba(255,183,213,.48);
    }

    64% {
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

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

        filter:
            brightness(1);

        box-shadow:
            0 0 18px rgba(255,255,255,.9),
            0 0 48px rgba(255,232,163,.42),
            0 0 88px rgba(255,183,213,.28);
    }
}

@keyframes letterUnlockAura {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.45);
    }

    34% {
        transform:
            translate(-50%, -50%)
            scale(1.72);
    }

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

@keyframes starDrift {

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

    50% {
        transform:
            translate(-50%, -50%)
            translateY(var(--star-drift-distance, 6px))
            scale(1.02);
    }

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

@keyframes subStarOrbit {

    0% {
        transform:
            translate(
                calc(-50% + var(--sub-orbit-x, 72px)),
                calc(-50% + var(--sub-orbit-y, 42px))
            )
            rotate(0deg)
            translateX(0)
            scale(1);
    }

    50% {
        transform:
            translate(
                calc(-50% + var(--sub-orbit-x, 72px)),
                calc(-50% + var(--sub-orbit-y, 42px))
            )
            rotate(4deg)
            translateX(7px)
            scale(1.05);
    }

    100% {
        transform:
            translate(
                calc(-50% + var(--sub-orbit-x, 72px)),
                calc(-50% + var(--sub-orbit-y, 42px))
            )
            rotate(0deg)
            translateX(0)
            scale(1);
    }
}

@keyframes constellationDraw {

    from {
        stroke-dashoffset:
            var(--line-length);
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes constellationBreathe {

    0% {
        opacity: .68;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .68;
    }
}

.fragment-birth {

    position: fixed;

    left: 0;
    top: 0;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 118;

    transform:
        translate(-50%, -50%)
        scale(.32);

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.88) 0%,
            rgba(255,232,163,.32) 14%,
            rgba(255,183,213,.14) 38%,
            transparent 70%
        );

    border:
        1px solid rgba(255,232,163,.28);

    box-shadow:
        0 0 42px rgba(255,232,163,.28),
        0 0 90px rgba(255,183,213,.18);

    animation:
        fragmentBirth 1.05s ease forwards;
}

.fragment-birth::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        white;

    box-shadow:
        0 0 20px white,
        0 0 46px rgba(255,232,163,.76);

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

.fragment-birth--letter {

    width: 112px;
    height: 112px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.95) 0%,
            rgba(255,232,163,.44) 16%,
            rgba(255,183,213,.22) 42%,
            transparent 74%
        );

    border-color:
        rgba(255,232,163,.44);

    box-shadow:
        0 0 58px rgba(255,232,163,.42),
        0 0 120px rgba(255,183,213,.26);
}

@keyframes fragmentBirth {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.18);
    }

    34% {
        opacity: 1;
    }

    72% {
        opacity: 1;

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

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.18);
    }
}

.fragment-dust {

    position: fixed;

    left: 0;
    top: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 0 12px rgba(255,255,255,.88),
        0 0 24px rgba(255,232,163,.42);

    pointer-events: none;

    z-index: 119;

    transform:
        translate(-50%, -50%)
        scale(.5);

    animation:
        fragmentDust 1.2s ease forwards;
}

.fragment-dust--letter {

    background:
        rgba(255,232,163,.98);

    box-shadow:
        0 0 14px rgba(255,232,163,.9),
        0 0 28px rgba(255,183,213,.48);
}

@keyframes fragmentDust {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.2);
    }

    24% {
        opacity: .92;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                calc(-50% + var(--dust-x)),
                calc(-50% + var(--dust-y))
            )
            scale(.1);
    }
}

.fragment-spark {

    position: fixed;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            white 0%,
            rgba(255,232,163,.96) 42%,
            rgba(255,183,213,.28) 100%
        );

    box-shadow:
        0 0 22px white,
        0 0 48px rgba(255,232,163,.9),
        0 0 86px rgba(255,183,213,.52);

    pointer-events: none;

    z-index: 120;

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

    animation:
        fragmentTravel 1.75s cubic-bezier(.19,1,.22,1) forwards;
}

.fragment-spark::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    border:
        1px solid rgba(255,232,163,.28);

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

    opacity: .72;
}

.fragment-spark--letter {

    width: 22px;
    height: 22px;

    background:
        radial-gradient(
            circle,
            white 0%,
            rgba(255,232,163,.98) 38%,
            rgba(255,183,213,.42) 100%
        );

    box-shadow:
        0 0 28px white,
        0 0 64px rgba(255,232,163,.96),
        0 0 112px rgba(255,183,213,.64);
}

@keyframes fragmentTravel {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.35);
    }

    18% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.2);
    }

    68% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(
                calc(-50% + var(--fragment-x)),
                calc(-50% + var(--fragment-y))
            )
            scale(.28);
    }
}

.fragment-message {

    position: fixed;

    z-index: 125;

    pointer-events: none;

    padding:
        8px
        12px;

    border-radius: 999px;

    background:
        rgba(8,12,31,.68);

    border:
        1px solid rgba(255,255,255,.12);

    backdrop-filter:
        blur(14px);

    color:
        rgba(255,255,255,.82);

    font-size: .74rem;

    letter-spacing: .03em;

    text-transform: lowercase;

    white-space: nowrap;

    box-shadow:
        0 14px 42px rgba(0,0,0,.22),
        0 0 34px rgba(255,183,213,.1);

    transform:
        translate(-50%, 8px)
        scale(.96);

    animation:
        fragmentMessage 2.65s ease forwards;
}

.fragment-message--letter {

    color:
        rgba(255,232,163,.95);

    border-color:
        rgba(255,232,163,.22);

    box-shadow:
        0 14px 42px rgba(0,0,0,.24),
        0 0 42px rgba(255,232,163,.16);
}

@keyframes fragmentMessage {

    0% {
        opacity: 0;

        transform:
            translate(-50%, 12px)
            scale(.96);
    }

    18% {
        opacity: 1;

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

    74% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -10px)
            scale(.98);
    }
}

.star-preview {

    position: absolute;

    left: 42px;
    top: 50%;

    width: min(260px, 72vw);

    padding:
        14px
        16px;

    border-radius: 14px;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255,216,234,.24),
            transparent 46%
        ),
        rgba(8,12,31,.62);

    border:
        1px solid rgba(255,255,255,.14);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 18px 55px rgba(0,0,0,.24),
        0 0 44px rgba(255,183,213,.1);

    color: white;

    display: flex;
    flex-direction: column;

    gap: 5px;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        translateX(12px)
        scale(.96);

    transition:
        opacity .55s ease,
        transform .55s ease;

    user-select: none;
}

.star-preview::before {

    content: "";

    position: absolute;

    right: 100%;
    top: 50%;

    width: 28px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,216,234,.58)
        );
}

.memory-star.preview-left .star-preview {

    left: auto;
    right: 42px;

    transform:
        translateY(-50%)
        translateX(-12px)
        scale(.96);
}

.memory-star.preview-left .star-preview::before {

    left: 100%;
    right: auto;

    background:
        linear-gradient(
            90deg,
            rgba(255,216,234,.58),
            transparent
        );
}

.memory-star.preview-visible .star-preview,
.memory-star:focus-visible .star-preview {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}

.memory-star.preview-left.preview-visible .star-preview,
.memory-star.preview-left:focus-visible .star-preview {

    transform:
        translateY(-50%)
        translateX(0)
        scale(1);
}

.star-preview-eyebrow {

    color:
        rgba(255,232,163,.84);

    font-size: .68rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}

.star-preview-title {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 1.35rem;

    line-height: 1.05;
}

.star-preview-text {

    color:
        rgba(255,255,255,.72);

    font-size: .82rem;

    line-height: 1.55;
}

.memory-star--sub-memory .star-preview {

    width: min(230px, 70vw);

    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(156,207,255,.2),
            transparent 46%
        ),
        rgba(8,12,31,.66);

    box-shadow:
        0 18px 48px rgba(0,0,0,.22),
        0 0 36px rgba(156,207,255,.1);
}

.memory-star--sub-memory .star-preview-eyebrow {

    color:
        rgba(156,207,255,.88);
}

.memory-star--letter .star-preview {

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255,232,163,.22),
            transparent 46%
        ),
        rgba(8,12,31,.66);

    box-shadow:
        0 18px 52px rgba(0,0,0,.24),
        0 0 42px rgba(255,232,163,.11);
}

.memory-star--letter .star-preview-eyebrow {

    color:
        rgba(255,232,163,.92);
}

.star-preview strong,
#memory-title strong,
#memory-description strong,
#memory-scene-text strong {

    color: white;

    font-weight: 700;
}

/* ===================================================== */
/* MODAL                                                 */
/* ===================================================== */

#memory-modal {

    position: fixed;

    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    padding:
        clamp(18px, 4vw, 44px);

    background:
        radial-gradient(
            circle at 50% 24%,
            rgba(255,183,213,.14),
            transparent 34%
        ),
        rgba(2,3,10,.78);

    backdrop-filter:
        blur(12px);

    z-index: 100;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .26s ease;
}

#memory-modal.visible {

    opacity: 1;

    pointer-events: auto;
}

.hidden {
    display: none !important;
}

.modal-content {

    position: relative;

    width: min(1120px, 94vw);

    max-height: 86vh;

    overflow: hidden;

    padding:
        clamp(20px, 3.6vw, 38px);

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 22% 18%,
            rgba(255,216,234,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 78%,
            rgba(156,207,255,.11),
            transparent 34%
        ),
        rgba(10,15,34,.92);

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 36px 120px rgba(0,0,0,.46),
        0 0 80px rgba(255,183,213,.08);

    display: grid;
    grid-template-columns:
        minmax(300px, 1.08fr)
        minmax(260px, .92fr);

    gap:
        clamp(22px, 4vw, 46px);

    transform:
        translateY(18px)
        scale(.98);

    opacity: 0;

    transition:
        opacity .34s ease,
        transform .34s cubic-bezier(.19,1,.22,1);
}

#memory-modal.visible .modal-content {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

#memory-modal.letter-mode .modal-content {

    width:
        min(820px, 94vw);

    grid-template-columns: 1fr;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,232,163,.14),
            transparent 34%
        ),
        radial-gradient(
            circle at 18% 82%,
            rgba(255,183,213,.12),
            transparent 34%
        ),
        rgba(10,15,34,.94);
}

#memory-modal.letter-mode .memory-image-container {

    display: none;
}

#memory-modal.letter-mode .memory-text {

    min-height:
        min(70vh, 620px);

    max-height:
        min(70vh, 620px);

    align-items: center;
    justify-content: center;
    justify-content: safe center;

    padding:
        clamp(28px, 5vw, 54px);

    text-align: center;
}

#memory-modal.letter-mode #memory-date {

    color:
        rgba(255,232,163,.88);
}

#memory-modal.letter-mode #memory-title {

    max-width: 680px;

    color: white;
}

#memory-modal.letter-mode #memory-description {

    max-width: 660px;

    color:
        rgba(255,255,255,.82);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(1.25rem, 2.4vw, 1.62rem);

    line-height: 1.75;
}

#close-modal {

    position: absolute;

    top: 18px;
    right: 18px;

    cursor: pointer;

    border: none;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.08);

    color: white;

    font-size: 1.3rem;

    line-height: 1;

    z-index: 2;

    transition:
        background .25s ease,
        transform .25s ease;
}

#close-modal:hover,
#close-modal:focus-visible {

    background:
        rgba(255,255,255,.16);

    transform:
        scale(1.06);
}

.memory-image-container {

    position: relative;

    height:
        clamp(320px, 58vh, 620px);

    overflow: hidden;

    border-radius: 18px;

    align-self: stretch;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,216,234,.07),
            transparent 45%
        ),
        rgba(255,255,255,.04);
}

.memory-image-container img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: inherit;
}

.memory-scene {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,216,234,.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 28% 72%,
            rgba(156,207,255,.16),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(11,18,48,.96),
            rgba(5,8,22,.98)
        );

    border:
        1px solid rgba(255,255,255,.08);

    color:
        rgba(255,255,255,.78);

    text-align: center;

    padding: 30px;
}

.memory-scene::before,
.memory-scene::after {

    content: "";

    position: absolute;

    inset: 18%;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.08);

    transform:
        rotate(-12deg)
        scaleX(1.35);
}

.memory-scene::after {

    inset: 26%;

    border-color:
        rgba(255,183,213,.13);

    transform:
        rotate(18deg)
        scaleX(1.5);
}

.memory-scene-glow {

    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 24px white,
        0 0 78px rgba(255,183,213,.56);

    animation:
        memoryScenePulse 3.4s ease-in-out infinite;
}

#memory-scene-text {

    position: relative;

    max-width: 360px;

    margin-top: 92px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 1.45rem;

    line-height: 1.35;
}

@keyframes memoryScenePulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }

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

.memory-text {

    min-height:
        clamp(320px, 58vh, 620px);

    max-height:
        clamp(320px, 58vh, 620px);

    display: flex;
    flex-direction: column;

    justify-content: center;
    justify-content: safe center;

    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    padding:
        26px
        8px
        18px
        0;
}

.memory-text::-webkit-scrollbar {

    width: 6px;
}

.memory-text::-webkit-scrollbar-track {

    background:
        rgba(255,255,255,.04);

    border-radius: 999px;
}

.memory-text::-webkit-scrollbar-thumb {

    background:
        rgba(255,216,234,.28);

    border-radius: 999px;
}

.memory-text::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,216,234,.42);
}

#memory-date {

    color: var(--gold);

    font-size: .9rem;

    letter-spacing: .05em;

    text-transform: uppercase;
}

#memory-title {

    margin-top: 12px;
    margin-bottom: 18px;

    font-size:
        clamp(2.4rem, 5vw, 4.4rem);

    font-family:
        'Cormorant Garamond',
        serif;

    font-weight: 600;

    line-height: .98;
}

#memory-description {

    max-width: 560px;

    line-height: 1.95;

    color: var(--text-soft);

    font-size:
        clamp(1rem, 1.5vw, 1.12rem);

    white-space: pre-line;
}

/* ===================================================== */
/* CONTADORES                                            */
/* ===================================================== */

#universe-age {

    position: fixed;

    top: 25px;
    left: 25px;

    z-index: 20;

    display: flex;
    flex-direction: column;

    gap: 8px;

    max-width:
        min(520px, calc(100vw - 50px));

    pointer-events: none;
}

.age-label {

    color: var(--text-soft);

    font-size: .8rem;

    letter-spacing: .04em;
}

#relationship-counter {

    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    font-size: .78rem;

    font-weight: 600;
}

.time-part {

    min-width: 58px;

    display: inline-flex;
    align-items: baseline;
    justify-content: center;

    gap: 4px;

    padding:
        7px
        9px;

    border-radius: 999px;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255,216,234,.16),
            transparent 55%
        ),
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 0 22px rgba(255,183,213,.08);

    color:
        rgba(255,255,255,.72);

    backdrop-filter:
        blur(14px);
}

.time-part strong {

    color: white;

    font-size: 1.05rem;

    line-height: 1;
}

.time-part span {

    white-space: nowrap;
}

#fragment-progress {

    position: fixed;

    top: 25px;
    right: 25px;

    z-index: 20;

    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 5px;

    font-size: .9rem;
}

#fragment-counter {

    display: inline-block;

    color:
        var(--gold);

    font-weight: 700;

    text-shadow:
        0 0 16px rgba(255,232,163,.28);
}

#fragment-counter.fragment-counter-pulse {

    animation:
        fragmentCounterPulse .9s ease;
}

#fragment-counter.fragment-counter-pulse--letter {

    animation:
        fragmentCounterLetterPulse 1.25s ease;
}

@keyframes fragmentCounterPulse {

    0% {
        transform: scale(1);
    }

    38% {
        transform: scale(1.14);
        text-shadow:
            0 0 24px rgba(255,232,163,.72);
    }

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

@keyframes fragmentCounterLetterPulse {

    0% {
        transform: scale(1);

        color:
            var(--gold);
    }

    34% {
        transform:
            scale(1.24);

        color:
            white;

        text-shadow:
            0 0 20px white,
            0 0 38px rgba(255,232,163,.86),
            0 0 64px rgba(255,183,213,.4);
    }

    68% {
        transform:
            scale(1.08);
    }

    100% {
        transform: scale(1);

        color:
            var(--gold);
    }
}

/* ===================================================== */
/* RESPONSIVO                                            */
/* ===================================================== */

@media (max-width: 768px) {

    :root {

        --star-safe-top: 150px;
        --star-safe-right: 22px;
        --star-safe-bottom: 132px;
        --star-safe-left: 22px;
    }

    #music-player {

        width: calc(100vw - 30px);

        left: 15px;
        right: 15px;

        bottom: 15px;
    }

    #music-prompt {

        left: 50%;
        right: auto;

        bottom: 126px;

        width:
            min(250px, calc(100vw - 92px));

        max-width:
            min(250px, calc(100vw - 92px));

        padding:
            11px
            14px;

        border-radius: 14px;

        font-size:
            clamp(.72rem, 3.2vw, .84rem);

        line-height: 1.4;

        transform:
            translateX(-50%)
            translateY(12px);
    }

    #music-prompt.visible {

        transform:
            translateX(-50%)
            translateY(0);
    }

    #music-prompt::after {

        right: 50%;

        height: 34px;
    }

    #music-prompt::before {

        right:
            calc(50% - 8px);

        bottom: -49px;

        font-size: .86rem;
    }

    h1 {
        font-size: 3rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    #universe-age {

        top: 14px;
        left: 14px;

        max-width:
            calc(100vw - 28px);

        gap: 6px;
    }

    .age-label {

        font-size: .72rem;
    }

    #relationship-counter {

        gap: 4px;

        font-size: .7rem;
    }

    .time-part {

        min-width: auto;

        padding:
            6px
            7px;
    }

    .time-part strong {

        font-size: .92rem;
    }

    #fragment-progress {

        top: 112px;
        right: 14px;

        align-items: flex-end;

        font-size: .72rem;

        text-align: right;
    }

    .star-preview,
    .memory-star.preview-left .star-preview {

        left: 50%;
        right: auto;
        top: 38px;

        width: min(235px, calc(100vw - 34px));

        transform:
            translateX(-50%)
            translateY(12px)
            scale(.96);
    }

    .star-preview::before,
    .memory-star.preview-left .star-preview::before {

        left: 50%;
        right: auto;
        top: auto;
        bottom: 100%;

        width: 1px;
        height: 26px;

        background:
            linear-gradient(
                180deg,
                rgba(255,216,234,.58),
                transparent
            );
    }

    .memory-star.preview-visible .star-preview,
    .memory-star.preview-left.preview-visible .star-preview,
    .memory-star:focus-visible .star-preview,
    .memory-star.preview-left:focus-visible .star-preview {

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

    .memory-scene {

        min-height: 240px;
    }

    #memory-scene-text {

        font-size: 1.2rem;
    }

    #memory-modal {

        padding:
            14px;

        align-items: flex-start;

        overflow-y: auto;
    }

    .modal-content {

        width: 100%;

        max-height: none;

        overflow: visible;

        grid-template-columns: 1fr;

        gap: 20px;

        padding:
            22px;
    }

    #memory-modal.letter-mode .modal-content {

        width: 100%;
    }

    #memory-modal.letter-mode .memory-text {

        min-height: 62vh;

        max-height: none;

        overflow-y: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;

        padding:
            34px
            10px
            18px;
    }

    #memory-modal.letter-mode #memory-description {

        font-size: 1.18rem;

        line-height: 1.68;
    }

    .memory-image-container {

        height: auto;

        min-height: 300px;
    }

    .memory-image-container img {

        min-height: 300px;
    }

    .memory-text {

        min-height: auto;

        max-height: none;

        overflow-y: visible;
        overscroll-behavior: auto;
        scrollbar-gutter: auto;

        padding:
            0
            4px
            4px;
    }

    #memory-title {

        font-size: 2.45rem;
    }

    #memory-description {

        font-size: 1rem;

        line-height: 1.75;
    }
}