:root {

    /* =========================
       MAIN COLORS
    ========================= */

    --primary: #345c78;
    --primary-dark: #294f6b;
    --secondary: #456b82;

    --accent: #b38a46;
    --accent-light: #d9b568;

    --text-soft: #56778b;
    --text-muted: #6d8796;
    --text-light: #91a4af;


    /* =========================
       BACKGROUND COLORS
    ========================= */

    --bg-main: #dcecf4;

    --bg-blue: #cfe4ef;
    --bg-blue-light: #edf6fa;

    --bg-cream: #f8f3e8;
    --bg-white: #ffffff;


    /* =========================
       UI COLORS
    ========================= */

    --button-bg: #557f99;
    --button-text: #ffffff;

    --age-bg: #6f97ad;
    --age-number: #e0b65e;

    --card-bg: #fffdf8;
}

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

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

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

body {
    font-family: Arial, sans-serif;
    background: var(--bg-main);
    overflow-x: hidden;
}


/* =========================
   INVITATION
========================= */

.invitation {
    width: 100%;
    min-height: 100vh;
}


/* =========================
   SCENES
========================= */

.scene {
    position: relative;

    width: 100%;
    min-height: 100svh;

    display: none;

    overflow: hidden;
}

.scene.active {
    display: flex;
}


/* =========================
   SCENE 1
========================= */

.intro-scene {
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            var(--bg-blue-light) 45%,
            #cfe4ef 100%
        );
}


/* =========================
   INTRO CONTENT
========================= */

.intro-content {
    position: relative;
    z-index: 5;

    width: 100%;
    max-width: 420px;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* =========================
   SMALL INTRO TEXT
========================= */

.intro-small-text {
    margin-bottom: 20px;

    color: var(--primary);

    font-size: 1.1rem;
    line-height: 1.5;

    letter-spacing: 1px;
}


/* =========================
   BALLOON
========================= */

.balloon-wrapper {
    position: relative;

    width: min(68vw, 280px);

    margin-bottom: 15px;

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

.teddy-balloon {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

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

@keyframes balloonFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* =========================
   TITLE
========================= */

.birthday-title {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 15px;
}

.child-name {
    color: var(--primary-dark);

    font-size: clamp(3rem, 14vw, 4.5rem);
    line-height: 1;

    letter-spacing: 4px;
}

.birthday-age {
    margin-top: 10px;

    padding: 8px 30px;

    color: white;
    background: var(--age-bg);

    font-size: 1.4rem;

    border-radius: 8px;
}

.birthday-age strong {
    color: var(--age-number);

    font-size: 1.8rem;
}


/* =========================
   ADVENTURE TITLE
========================= */

.adventure-title {
    margin-bottom: 25px;

    color: var(--accent);

    font-size: 1.05rem;
    letter-spacing: 1px;
}


/* =========================
   BUTTON
========================= */

.start-btn {
    min-width: 180px;

    padding: 14px 30px;

    border: none;
    border-radius: 30px;

    background: var(--button-bg);
    color: var(--button-text);

    font-size: 1rem;
    letter-spacing: 2px;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(60, 91, 110, 0.25);
}

.start-btn span {
    display: inline-block;

    margin-left: 10px;

    font-size: 1.3rem;
}


/* =========================
   CLOUDS
========================= */

.cloud {
    position: absolute;

    width: 160px;
    height: 55px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: 50px;

    filter: blur(1px);
}

.cloud::before,
.cloud::after {
    content: "";

    position: absolute;

    background: inherit;

    border-radius: 50%;
}

.cloud::before {
    width: 75px;
    height: 75px;

    left: 25px;
    bottom: 10px;
}

.cloud::after {
    width: 90px;
    height: 90px;

    right: 15px;
    bottom: 5px;
}

.cloud-1 {
    top: 12%;
    left: -70px;

    animation: cloudMoveLeft 8s ease-in-out infinite alternate;

}

@keyframes cloudMoveLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(35px);
    }
}

.cloud-2 {
    bottom: 8%;
    right: -70px;

    animation: cloudMoveRight 10s ease-in-out infinite alternate;
}

@keyframes cloudMoveRight {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-40px);
    }
}



/* =========================
   STARS
========================= */

.stars {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.star {
    position: absolute;

    color: var(--accent-light);

    font-size: 1.2rem;
}

.star:nth-child(1) {
    top: 12%;
    right: 15%;
}

.star:nth-child(2) {
    top: 32%;
    left: 8%;

    font-size: 0.8rem;
}

.star:nth-child(3) {
    bottom: 18%;
    right: 10%;

    font-size: 1rem;
}

/* =========================
   SCENE 2 - FLIGHT
========================= */

.flight-scene {
    position: relative;

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

    padding: 30px 20px;

    background:
        linear-gradient(
            to bottom,
            #bcdce9 0%,
            #e4f1f6 55%,
            #f7f3e8 100%
        );
}


/* =========================
   FLYING BALLOON
========================= */

.flying-balloon {
    position: absolute;

    left: 50%;
    bottom: -250px;

    transform: translateX(-50%);

    width: min(65vw, 270px);

    z-index: 3;
}

.flying-balloon img {
    display: block;

    width: 100%;
    height: auto;
}

.flight-scene.active .flying-balloon {
    animation: balloonFly 5s ease-in-out forwards;
}

@keyframes balloonFly {

    0% {
        bottom: -250px;
    }

    65% {
        bottom: 43%;
    }

    85% {
        bottom: 36%;
    }

    100% {
        bottom: 39%;
    }
}


/* =========================
   FLIGHT MESSAGE
========================= */

.flight-message {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 20%;

    z-index: 5;

    text-align: center;

    opacity: 0;
}

.flight-message p {
    color: var(--secondary);

    font-size: 1.2rem;
    line-height: 1.6;

    letter-spacing: 1px;
}

.flight-message h2 {
    margin-top: 12px;

    color: var(--accent);

    font-size: clamp(1.8rem, 8vw, 2.6rem);

    letter-spacing: 2px;
}

.flight-scene.active .flight-message {
    animation: flightMessageReveal 1.5s ease forwards;
    animation-delay: 2.8s;
}

@keyframes flightMessageReveal {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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


/* =========================
   SCENE 2 CLOUDS
========================= */

.flight-clouds {
    position: absolute;

    inset: 0;

    pointer-events: none;
}

.cloud-3 {
    top: 20%;
    left: -80px;

    z-index: 4;

    animation: flightCloudLeft 7s linear infinite;
}

.cloud-4 {
    bottom: 18%;
    right: -80px;

    z-index: 2;

    animation: flightCloudRight 9s linear infinite;
}

@keyframes flightCloudLeft {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(140vw);
    }
}


@keyframes flightCloudRight {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-140vw);
    }
}

/* =========================
   SCENE 3 - PHOTO
========================= */

.photo-scene {
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        linear-gradient(
            to bottom,
            #eef7fa 0%,
            var(--bg-cream) 100%
        );
}


/* =========================
   PHOTO CONTENT
========================= */

.photo-content {
    width: 100%;
    max-width: 380px;

    text-align: center;
}


/* =========================
   PHOTO INTRO
========================= */

.photo-intro {
    margin-bottom: 25px;

    color: var(--secondary);

    font-size: 1.1rem;
    letter-spacing: 1px;

    opacity: 0;
}


/* =========================
   PHOTO CARD
========================= */

.photo-card {
    width: min(78vw, 300px);

    margin: 0 auto;

    padding:
        12px
        12px
        22px;

    background: var(--card-bg);

    border-radius: 6px;

    box-shadow:
        0 15px 35px rgba(70, 90, 100, 0.18);

    opacity: 0;

    transform:
        translateY(40px)
        rotate(-3deg);
}


/* =========================
   PHOTO FRAME
========================= */

.photo-frame {
    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #ddd;
}

.child-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================
   PHOTO CAPTION
========================= */

.photo-caption {
    padding-top: 15px;
}

.photo-caption h2 {
    color: var(--primary);

    font-size: 2rem;
    letter-spacing: 2px;
}

.photo-caption p {
    margin-top: 5px;

    color: var(--accent);

    font-size: 0.95rem;
    letter-spacing: 1px;
}

.photo-scene.active .photo-intro {
    animation: photoIntroReveal 1s ease forwards;
}

@keyframes photoIntroReveal {

    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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

.photo-scene.active .photo-card {
    animation: photoCardReveal 1.4s ease-out forwards;

    animation-delay: 0.6s;
}

@keyframes photoCardReveal {

    0% {
        opacity: 0;

        transform:
            translateY(80px)
            rotate(-8deg)
            scale(0.9);
    }

    70% {
        opacity: 1;

        transform:
            translateY(-8px)
            rotate(-2deg)
            scale(1.02);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0)
            rotate(-3deg)
            scale(1);
    }
}

/* =========================
   SCENE 4 - JOURNEY
========================= */

.journey-scene {
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            var(--bg-blue-light) 55%,
            #d3e7f0 100%
        );
}


/* =========================
   JOURNEY CONTENT
========================= */

.journey-content {
    width: 100%;
    max-width: 380px;

    text-align: center;
}


/* =========================
   SMALL TITLE
========================= */

.journey-small-title {
    margin-bottom: 20px;

    color: var(--text-soft);

    font-size: 1.1rem;
    letter-spacing: 1px;

    opacity: 0;
}


/* =========================
   365
========================= */

.journey-number {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 35px;
}

.big-number {
    color: var(--primary);

    font-size: clamp(5rem, 25vw, 8rem);
    font-weight: bold;

    line-height: 0.9;

    opacity: 0;
}

.number-text {
    margin-top: 15px;

    color: var(--accent);

    font-size: 1.1rem;
    letter-spacing: 3px;

    opacity: 0;
}


/* =========================
   STATS
========================= */

.journey-stats {
    display: flex;
    justify-content: center;

    gap: 25px;

    margin-bottom: 30px;
}

.stat {
    display: flex;
    flex-direction: column;

    min-width: 70px;

    opacity: 0;
}

.stat strong {
    color: var(--secondary);

    font-size: 1.8rem;
}

.stat span {
    margin-top: 4px;

    color: #7893a3;

    font-size: 0.85rem;
}


/* =========================
   MESSAGE
========================= */

.journey-message {
    color: var(--accent);

    font-size: 1.15rem;
    font-style: italic;

    opacity: 0;
}

.journey-scene.active .journey-small-title {
    animation: journeyReveal 0.8s ease forwards;
}

.journey-scene.active .big-number {
    animation: journeyReveal 0.8s ease forwards;
    animation-delay: 0.4s;
}

.journey-scene.active .number-text {
    animation: journeyReveal 0.8s ease forwards;
    animation-delay: 1.2s;
}

.journey-scene.active .stat:nth-child(1) {
    animation: journeyReveal 0.7s ease forwards;
    animation-delay: 1.7s;
}

.journey-scene.active .stat:nth-child(2) {
    animation: journeyReveal 0.7s ease forwards;
    animation-delay: 2s;
}

.journey-scene.active .stat:nth-child(3) {
    animation: journeyReveal 0.7s ease forwards;
    animation-delay: 2.3s;
}

.journey-scene.active .journey-message {
    animation: journeyReveal 0.8s ease forwards;
    animation-delay: 2.8s;
}

@keyframes journeyReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* =========================
   SCENE 5 - DESTINATION
========================= */

.destination-scene {
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        linear-gradient(
            to bottom,
            #d8ebf3 0%,
            #f4f6f1 55%,
            #f8f0df 100%
        );
}

.destination-content {
    width: 100%;
    max-width: 380px;

    text-align: center;
}


/* =========================
   TITLES
========================= */

.destination-small-text {
    margin-bottom: 8px;

    color: var(--text-muted);

    font-size: 1rem;
    letter-spacing: 1px;

    opacity: 0;
}

.destination-content h2 {
    color: var(--primary);

    font-size: clamp(1.7rem, 8vw, 2.3rem);
    letter-spacing: 2px;

    opacity: 0;
}


/* =========================
   TRAVEL MAP
========================= */

.travel-map {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 40px 0;

    color: var(--accent);
}

.map-start,
.map-destination {
    position: relative;

    z-index: 2;

    font-size: 2rem;

    opacity: 0;
}

.travel-path {
    width: 0;

    overflow: hidden;
    white-space: nowrap;

    margin: 0 8px;

    color: #789aad;

    font-size: 1.5rem;

    letter-spacing: 5px;
}


/* =========================
   EVENT DETAILS
========================= */

.event-details {
    display: flex;
    flex-direction: column;

    gap: 14px;
}

.detail {
    display: flex;
    align-items: center;

    gap: 15px;

    padding: 14px 18px;

    background: rgba(255, 255, 255, 0.65);

    border-radius: 14px;

    text-align: left;

    opacity: 0;

    transform: translateY(15px);
}

.detail-icon {
    font-size: 1.5rem;
}

.detail div {
    display: flex;
    flex-direction: column;
}

.detail-label {
    margin-bottom: 3px;

    color: var(--text-light);

    font-size: 0.7rem;
    letter-spacing: 2px;
}

.detail strong {
    color: var(--secondary);

    font-size: 1rem;
}

.destination-scene.active .destination-small-text {
    animation: destinationReveal 0.7s ease forwards;
}

.destination-scene.active h2 {
    animation: destinationReveal 0.8s ease forwards;
    animation-delay: 0.4s;
}

.destination-scene.active .map-start {
    animation: destinationReveal 0.6s ease forwards;
    animation-delay: 1s;
}

.destination-scene.active .travel-path {
    animation: drawPath 1.5s ease forwards;
    animation-delay: 1.4s;
}

.destination-scene.active .map-destination {
    animation: destinationReveal 0.6s ease forwards;
    animation-delay: 2.7s;
}

.destination-scene.active .detail:nth-child(1) {
    animation: detailReveal 0.6s ease forwards;
    animation-delay: 3.1s;
}

.destination-scene.active .detail:nth-child(2) {
    animation: detailReveal 0.6s ease forwards;
    animation-delay: 3.4s;
}

.destination-scene.active .detail:nth-child(3) {
    animation: detailReveal 0.6s ease forwards;
    animation-delay: 3.7s;
}


@keyframes destinationReveal {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


@keyframes drawPath {

    from {
        width: 0;
    }

    to {
        width: 150px;
    }
}


@keyframes detailReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* =========================
   SCENE 6 - FINAL
========================= */

.final-scene {
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            var(--bg-blue-light) 50%,
            #cfe4ef 100%
        );
}


/* =========================
   FINAL CONTENT
========================= */

.final-content {
    position: relative;

    z-index: 5;

    width: 100%;
    max-width: 380px;

    text-align: center;
}


/* =========================
   SMALL TEXT
========================= */

.final-small-text {
    margin-bottom: 20px;

    color: #6c8797;

    font-size: 1rem;
    line-height: 1.5;

    opacity: 0;
}


/* =========================
   BIG NUMBER
========================= */

.final-number {
    color: var(--primary);

    font-size: clamp(7rem, 35vw, 11rem);
    font-weight: bold;

    line-height: 0.8;

    opacity: 0;
}


/* =========================
   FINAL TITLE
========================= */

.final-content h2 {
    margin-top: 25px;

    color: var(--secondary);

    font-size: clamp(1.4rem, 7vw, 2rem);
    line-height: 1.3;

    letter-spacing: 2px;

    opacity: 0;
}

.final-message {
    margin-top: 10px;

    color: var(--accent);

    font-size: 1.15rem;
    font-style: italic;

    opacity: 0;
}


/* =========================
   TEDDY
========================= */

.final-teddy {
    margin-top: 20px;

    font-size: 3rem;

    opacity: 0;
}


/* =========================
   SIGNATURE
========================= */

.signature {
    margin-top: 12px;

    color: var(--text-soft);

    font-size: 1rem;

    opacity: 0;
}

.signature span {
    color: #c99b6b;
}

.final-scene.active .final-small-text {
    animation: finalReveal 0.8s ease forwards;
}

.final-scene.active .final-number {
    animation: finalNumberReveal 1.2s ease-out forwards;
    animation-delay: 0.5s;
}

.final-scene.active h2 {
    animation: finalReveal 0.8s ease forwards;
    animation-delay: 1.4s;
}

.final-scene.active .final-message {
    animation: finalReveal 0.8s ease forwards;
    animation-delay: 1.9s;
}

.final-scene.active .final-teddy {
    animation: finalReveal 0.8s ease forwards;
    animation-delay: 2.4s;
}

.final-scene.active .signature {
    animation: finalReveal 0.8s ease forwards;
    animation-delay: 2.8s;
}


@keyframes finalReveal {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

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


@keyframes finalNumberReveal {

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

    70% {
        opacity: 1;
        transform: scale(1.08);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* =========================
   FINAL BALLOONS
========================= */

.final-balloons {
    position: absolute;

    inset: 0;

    z-index: 4;

    overflow: hidden;

    pointer-events: none;
}

.final-balloons img {
    position: absolute;

    bottom: -160px;

    display: block;

    height: auto;

    opacity: 0;
}


/* KREM - LEVO */

.final-balloons img:nth-of-type(1) {
    left: 12%;

    width: 65px;

    animation: finalBalloonOne 6s ease-in forwards;
    animation-delay: 0.4s;
}


/* PLAVI - SREDINA */

.final-balloons img:nth-of-type(2) {
    left: calc(50% - 41px);

    width: 82px;

    animation: finalBalloonTwo 7s ease-in forwards;
    animation-delay: 0.9s;
    
}


/* ZLATNI - DESNO */

.final-balloons img:nth-of-type(3) {
    right: 12%;

    width: 65px;

    animation: finalBalloonThree 6.5s ease-in forwards;
    animation-delay: 0.2s;
}

@keyframes finalBalloonOne {

    0% {
        bottom: -80px;
        opacity: 0;
        transform: translateX(0) rotate(-5deg);
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateX(25px) rotate(4deg);
    }

    100% {
        bottom: 110%;
        opacity: 1;
        transform: translateX(-15px) rotate(-3deg);
    }
}


@keyframes finalBalloonTwo {

    0% {
        bottom: -100px;
        opacity: 0;
        transform: translateX(0) rotate(4deg);
    }

    15% {
        opacity: 1;
    }

    55% {
        transform: translateX(-30px) rotate(-5deg);
    }

    100% {
        bottom: 110%;
        opacity: 1;
        transform: translateX(20px) rotate(3deg);
    }
}


@keyframes finalBalloonThree {

    0% {
        bottom: -90px;
        opacity: 0;
        transform: translateX(0) rotate(3deg);
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateX(-20px) rotate(-4deg);
    }

    100% {
        bottom: 110%;
        opacity: 1;
        transform: translateX(15px) rotate(4deg);
    }
}