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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background: #fff9f3;

    color: #63343d;

    overflow-x: hidden;
}

button {
    font-family: inherit;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --cream: #fff9f3;
    --cream-dark: #f8e8df;

    --pink: #efaeb5;
    --pink-light: #f9dfe0;

    --rose: #c96f7a;

    --wine: #63343d;
    --wine-dark: #48252c;

    --green: #6f916d;
    --green-dark: #45664c;

    --blue: #58b8e8;
    --blue-dark: #277fae;
    --blue-light: #9be1fa;

    --purple: #7862a9;

    --gold: #c9a46c;
}


/* =========================================================
   GENERAL
========================================================= */

section {
    position: relative;
}

.section-label {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--rose);

    margin-bottom: 15px;
}

.section-label.light {
    color: #c9edff;
}


/* =========================================================
   FLOATING DECORATION
========================================================= */

#floatingDecor {
    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: 20;
}

.floating-item {
    position: absolute;

    pointer-events: none;

    animation:
        floatingUp
        linear
        forwards;

    opacity: 0;
}

@keyframes floatingUp {

    0% {
        transform:
            translateY(110vh)
            rotate(0deg)
            scale(.6);

        opacity: 0;
    }

    10% {
        opacity: .8;
    }

    50% {
        transform:
            translateY(50vh)
            rotate(180deg)
            scale(1);
    }

    90% {
        opacity: .5;
    }

    100% {
        transform:
            translateY(-20vh)
            rotate(360deg)
            scale(.7);

        opacity: 0;
    }
}


/* =========================================================
   BLUE CHARACTER
========================================================= */

.blue-character {
    position: fixed;

    right: -120px;

    bottom: 35px;

    width: 115px;

    height: 150px;

    z-index: 100;

    transform:
        translateX(0);

    transition:
        right 1s
        cubic-bezier(.2,.8,.2,1);

    pointer-events: none;
}

.blue-character.show {
    right: 20px;
}


/* HEAD */

.character-head {
    position: absolute;

    width: 90px;

    height: 85px;

    left: 13px;

    top: 22px;

    border-radius:
        48% 48% 45% 45%;

    background:
        linear-gradient(
            145deg,
            var(--blue-light),
            var(--blue)
        );

    border:
        2px solid
        rgba(39,127,174,.25);

    box-shadow:
        0 12px 30px
        rgba(39,127,174,.25);

    z-index: 5;
}


/* EARS */

.character-ear {
    position: absolute;

    width: 65px;

    height: 38px;

    background:
        linear-gradient(
            145deg,
            #72c9ed,
            #358fb9
        );

    z-index: 2;

    top: 30px;

    border-radius:
        100% 15% 80% 20%;
}

.ear-left {
    left: -10px;

    transform:
        rotate(35deg);
}

.ear-right {
    right: -10px;

    transform:
        scaleX(-1)
        rotate(35deg);
}

.blue-character.show
.ear-left {
    animation:
        earWiggleLeft
        2s
        ease-in-out
        infinite;
}

.blue-character.show
.ear-right {
    animation:
        earWiggleRight
        2s
        ease-in-out
        infinite;
}

@keyframes earWiggleLeft {

    0%,
    100% {
        transform:
            rotate(35deg);
    }

    50% {
        transform:
            rotate(20deg);
    }
}

@keyframes earWiggleRight {

    0%,
    100% {
        transform:
            scaleX(-1)
            rotate(35deg);
    }

    50% {
        transform:
            scaleX(-1)
            rotate(20deg);
    }
}


/* EYES */

.character-eye {
    position: absolute;

    width: 14px;

    height: 20px;

    background: #183a4b;

    border-radius: 50%;

    top: 27px;
}

.eye-left {
    left: 23px;
}

.eye-right {
    right: 23px;
}

.character-eye::after {
    content: "";

    position: absolute;

    width: 5px;

    height: 7px;

    background: white;

    border-radius: 50%;

    top: 3px;

    left: 3px;
}


/* NOSE */

.character-nose {
    position: absolute;

    width: 13px;

    height: 9px;

    background:
        #234b5c;

    border-radius:
        50% 50% 60% 60%;

    left: 39px;

    top: 49px;
}


/* MOUTH */

.character-mouth {
    position: absolute;

    left: 38px;

    top: 58px;

    font-size: 13px;

    color: #214858;
}


/* CHEEKS */

.character-cheek {
    position: absolute;

    width: 14px;

    height: 7px;

    border-radius: 50%;

    background:
        rgba(244,126,148,.45);

    top: 52px;
}

.cheek-left {
    left: 11px;
}

.cheek-right {
    right: 11px;
}


/* BODY */

.character-body {
    position: absolute;

    width: 70px;

    height: 75px;

    left: 22px;

    top: 80px;

    border-radius:
        40% 40% 35% 35%;

    background:
        linear-gradient(
            145deg,
            #62c0e8,
            #398daf
        );
}


/* BELLY */

.character-belly {
    position: absolute;

    width: 42px;

    height: 35px;

    left: 14px;

    top: 20px;

    border-radius: 50%;

    background:
        rgba(180,235,249,.45);
}


/* ARMS */

.character-arm {
    position: absolute;

    width: 40px;

    height: 18px;

    background:
        #4aa8d1;

    border-radius: 100%;

    top: 20px;
}

.arm-left {
    left: -28px;

    transform:
        rotate(30deg);
}

.arm-right {
    right: -28px;

    transform:
        rotate(-30deg);
}


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

.hero {
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 80px 20px;

    overflow: hidden;
}

.tropical-sun {
    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,218,172,.65),
            rgba(255,205,210,.25),
            transparent 70%
        );

    filter: blur(15px);

    animation:
        sunPulse
        5s
        ease-in-out
        infinite;
}

@keyframes sunPulse {

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

    50% {
        transform: scale(1.12);
    }
}

.eyebrow {
    font-family: Arial, sans-serif;

    font-size: 11px;

    letter-spacing: 4px;

    text-transform: uppercase;

    color: var(--rose);

    margin-bottom: 20px;

    z-index: 2;
}

.hero h1 {
    font-size:
        clamp(45px, 9vw, 90px);

    font-weight: normal;

    line-height: 1.02;

    margin-bottom: 25px;

    z-index: 2;
}

.hero p {
    max-width: 520px;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.8;

    color: #896b6e;

    z-index: 2;
}

.hero-decoration {
    margin-top: 25px;

    color: var(--blue-dark);

    letter-spacing: 12px;

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

@keyframes gentleFloat {

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

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

.scroll-hint {
    position: absolute;

    bottom: 35px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #a87c80;

    animation:
        floatHint
        2s
        infinite
        ease-in-out;
}

@keyframes floatHint {

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

    50% {
        transform: translateY(8px);
    }
}


/* =========================================================
   BLOOM
========================================================= */

.bloom-section {
    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 100px 20px;
}

.bloom-title {
    text-align: center;

    margin-bottom: 20px;

    transition: 1s ease;
}

.bloom-title.hide {
    opacity: 0;

    transform:
        translateY(-20px);
}

.bloom-title h2 {
    font-size:
        clamp(32px, 6vw, 55px);

    font-weight: normal;

    margin-bottom: 10px;
}

.bloom-title p {
    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #927276;
}


/* =========================================================
   FLOWER
========================================================= */

.flower-area {
    position: relative;

    width: 400px;

    height: 470px;

    max-width: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-end;
}

.ground-glow {
    position: absolute;

    bottom: 20px;

    width: 250px;

    height: 50px;

    border-radius: 50%;

    background:
        rgba(111,145,109,.18);

    filter: blur(20px);
}

.stem {
    position: absolute;

    bottom: 40px;

    width: 10px;

    height: 230px;

    background:
        linear-gradient(
            to right,
            #45664c,
            #87a985,
            #45664c
        );

    border-radius: 20px;

    transform-origin: bottom;

    transform:
        scaleY(0);

    transition:
        transform 2s
        cubic-bezier(.22,.8,.25,1);

    z-index: 2;
}

.leaf {
    position: absolute;

    width: 75px;

    height: 35px;

    background:
        linear-gradient(
            135deg,
            #87a985,
            #557d5a
        );

    border-radius:
        100% 0 100% 0;

    opacity: 0;

    transition: 1s ease;

    z-index: 1;
}

.leaf.left {
    bottom: 155px;

    left: 108px;

    transform:
        rotate(-28deg)
        scale(0);
}

.leaf.right {
    bottom: 200px;

    right: 100px;

    transform:
        rotate(205deg)
        scale(0);
}

.flower {
    position: absolute;

    bottom: 250px;

    width: 210px;

    height: 210px;

    transform:
        scale(.2);

    opacity: 0;

    transition:
        transform 2.5s
        cubic-bezier(.17,.84,.32,1.2),
        opacity 1s ease;

    z-index: 5;
}

.petal {
    position: absolute;

    width: 100px;

    height: 130px;

    left: 55px;

    top: 35px;

    background:
        radial-gradient(
            ellipse at 40% 30%,
            #fff1f2,
            #efaeb5 65%,
            #d9828d
        );

    border-radius:
        70% 70% 45% 45%;

    transform-origin:
        50% 95%;

    box-shadow:
        inset 0 4px 12px
        rgba(255,255,255,.6),

        0 8px 20px
        rgba(170,90,100,.12);
}

.petal:nth-child(1) {
    transform: rotate(0deg);
}

.petal:nth-child(2) {
    transform: rotate(45deg);
}

.petal:nth-child(3) {
    transform: rotate(90deg);
}

.petal:nth-child(4) {
    transform: rotate(135deg);
}

.petal:nth-child(5) {
    transform: rotate(180deg);
}

.petal:nth-child(6) {
    transform: rotate(225deg);
}

.petal:nth-child(7) {
    transform: rotate(270deg);
}

.petal:nth-child(8) {
    transform: rotate(315deg);
}

.flower-center {
    position: absolute;

    width: 55px;

    height: 55px;

    left: 77px;

    top: 78px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffe4a7,
            #e8ad57 55%,
            #b87837
        );

    z-index: 10;
}

body.bloomed .stem {
    transform:
        scaleY(1);
}

body.bloomed .flower {
    transform:
        scale(1);

    opacity: 1;
}

body.bloomed .leaf.left,
body.bloomed .leaf.right {
    opacity: 1;

    transform:
        rotate(-28deg)
        scale(1);
}

body.bloomed .leaf.right {
    transform:
        rotate(205deg)
        scale(1);
}


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

.bloom-action {
    margin-top: 10px;
}

.bloom-button {
    border:
        1px solid
        rgba(201,164,108,.55);

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

    backdrop-filter:
        blur(10px);

    color: var(--wine);

    padding:
        15px 30px;

    border-radius: 50px;

    font-family: Arial, sans-serif;

    font-size: 12px;

    letter-spacing: 2px;

    cursor: pointer;

    transition: .35s ease;
}

.bloom-button:hover {
    transform:
        translateY(-3px);

    background: white;

    box-shadow:
        0 12px 35px
        rgba(120,60,60,.15);
}


/* =========================================================
   MEMORIES
========================================================= */

.memories {
    min-height: 100vh;

    padding:
        120px 20px;

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            #fff9f3,
            #f9ebe5
        );
}

.memories h2 {
    font-size:
        clamp(38px,7vw,65px);

    font-weight: normal;

    margin-bottom: 20px;
}

.section-description {
    max-width: 500px;

    margin:
        0 auto 60px;

    font-family: Arial, sans-serif;

    font-size: 13px;

    line-height: 1.8;

    color: #8d7073;
}


/* =========================================================
   ALBUM
========================================================= */

.album-wrapper {
    width:
        min(430px,90vw);

    margin: auto;
}

.album-card {
    position: relative;

    padding: 12px;

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

    border:
        1px solid
        rgba(201,164,108,.35);

    box-shadow:
        0 25px 70px
        rgba(80,40,40,.14);

    transform:
        rotate(-2deg);

    transition: .5s ease;
}

.album-card:hover {
    transform:
        rotate(0deg)
        translateY(-5px);
}

.photo-frame {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eee;

    cursor: pointer;
}

.photo-frame img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

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

.photo-frame:hover img {
    transform:
        scale(1.04);
}

.photo-hint {
    position: absolute;

    left: 50%;

    bottom: 15px;

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

    padding:
        8px 14px;

    border-radius: 30px;

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

    backdrop-filter:
        blur(8px);

    color: var(--wine);

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 1px;

    opacity: 0;

    transition: .35s ease;
}

.photo-frame:hover .photo-hint {
    opacity: 1;

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

.photo-info {
    display: flex;

    gap: 15px;

    padding:
        18px 8px 8px;

    text-align: left;
}

.photo-number {
    font-family: Arial, sans-serif;

    font-size: 10px;

    color: var(--rose);

    letter-spacing: 2px;

    white-space: nowrap;
}

.photo-info h3 {
    font-size: 20px;

    font-weight: normal;

    margin-bottom: 5px;
}

.photo-info p {
    font-family: Arial, sans-serif;

    font-size: 11px;

    color: #917477;
}

.album-controls {
    display: flex;

    justify-content:
        space-between;

    position: absolute;

    left: 25px;

    right: 25px;

    top: 42%;

    z-index: 10;
}

.album-controls button {
    width: 42px;

    height: 42px;

    border-radius: 50%;

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

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

    color: var(--wine);

    box-shadow:
        0 5px 20px
        rgba(0,0,0,.12);

    cursor: pointer;

    transition: .3s ease;
}

.album-controls button:hover {
    transform: scale(1.1);
}


/* =========================================================
   NOVEMBER 2026 CALENDAR
========================================================= */
.calendar-section {
    min-height: 100vh;
    padding: 120px 20px;
    text-align: center;
    background: linear-gradient(180deg, #f9ebe5 0%, #eef7ff 100%);
}
.calendar-section h2 {
    font-size: clamp(38px, 7vw, 65px);
    font-weight: normal;
    margin-bottom: 20px;
}
.calendar-card {
    width: min(680px, 94vw);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(112, 159, 196, .22);
    border-radius: 30px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 25px 70px rgba(48, 77, 106, .12);
}
.calendar-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 22px;
    color: #5b7186;
    font-family: Arial, sans-serif;
}
.calendar-header span:first-child {
    font-size: 26px;
    letter-spacing: .4px;
}
.calendar-header span:last-child {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8aa0b1;
}
.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}
.calendar-weekdays {
    margin-bottom: 8px;
}
.calendar-weekdays span {
    padding: 8px 2px;
    color: #8b7c83;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.calendar-day {
    position: relative;
    min-height: 72px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
    border-radius: 16px;
    background: rgba(244, 248, 252, .82);
    color: #5d6874;
    font: 600 13px/1 Arial, sans-serif;
    transition: transform .2s ease, box-shadow .2s ease;
}
.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(67, 99, 124, .08);
}
.calendar-day.empty {
    background: transparent;
    box-shadow: none;
}
.calendar-day.special {
    align-items: flex-start;
    justify-content: space-between;
    padding: 9px;
    overflow: hidden;
    background: linear-gradient(145deg, #d9f1ff, #f8e8f4);
    border: 2px solid rgba(91, 164, 213, .42);
    box-shadow: 0 12px 28px rgba(72, 135, 177, .18);
    transform: translateY(-3px);
}
.calendar-day.special:hover {
    transform: translateY(-5px) scale(1.02);
}
.day-number {
    position: relative;
    z-index: 2;
    font-size: 15px;
    color: #365b75;
}
.calendar-stitch {
    position: absolute;
    width: 58px;
    height: 58px;
    object-fit: contain;
    right: 50%;
    bottom: 1px;
    transform: translateX(50%);
    filter: drop-shadow(0 6px 8px rgba(42, 75, 111, .15));
    animation: calendarStitchBounce 2.8s ease-in-out infinite;
}
@keyframes calendarStitchBounce {
    0%,100% { transform: translateX(50%) translateY(0) rotate(-2deg); }
    50% { transform: translateX(50%) translateY(-4px) rotate(2deg); }
}
.special-label {
    position: absolute;
    z-index: 2;
    left: 7px;
    bottom: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #6d7e8d;
    font: 700 7px/1 Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.calendar-note {
    margin: 22px 0 0;
    color: #718394;
    font: 12px/1.6 Arial, sans-serif;
}
@media (max-width: 600px) {
    .calendar-section { padding: 90px 12px; }
    .calendar-card { padding: 16px 10px; border-radius: 24px; }
    .calendar-weekdays, .calendar-grid { gap: 5px; }
    .calendar-day { min-height: 58px; padding: 7px; border-radius: 12px; font-size: 11px; }
    .calendar-day.special { padding: 6px; }
    .calendar-stitch { width: 46px; height: 46px; }
    .special-label { left: 4px; bottom: 4px; font-size: 6px; }
}

/* =========================================================
   LETTER
========================================================= */

.letter-section {
    min-height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

    padding:
        120px 20px;
}

.letter {
    width:
        min(650px,92vw);

    padding:
        60px 45px;

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

    border:
        1px solid
        rgba(201,164,108,.3);

    box-shadow:
        0 30px 80px
        rgba(90,50,50,.1);

    text-align: center;
}

.letter-small {
    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 4px;

    color: var(--rose);

    margin-bottom: 25px;
}

.letter h2 {
    font-size:
        clamp(38px,6vw,58px);

    font-weight: normal;

    margin-bottom: 30px;
}

.letter p {
    font-size: 17px;

    line-height: 2;

    color: #745b5e;
}

.signature {
    margin-top: 30px;

    font-size: 24px;

    font-style: italic;

    color: var(--rose);
}


/* =========================================================
   NIGHT SECTION
========================================================= */

.night-section {
    min-height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    background:
        linear-gradient(
            180deg,
            #27395e,
            #161c3a 65%,
            #0c1026
        );
}

.moon {
    position: absolute;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    top: 100px;

    right: 15%;

    background:
        #fff3cf;

    box-shadow:
        0 0 60px
        rgba(255,239,184,.5);
}

.stars span {
    position: absolute;

    color: white;

    font-size: 18px;

    animation:
        starTwinkle
        2s
        ease-in-out
        infinite;
}

.stars span:nth-child(1) {
    top: 15%;
    left: 15%;
}

.stars span:nth-child(2) {
    top: 25%;
    left: 30%;
}

.stars span:nth-child(3) {
    top: 35%;
    left: 75%;
}

.stars span:nth-child(4) {
    top: 15%;
    left: 65%;
}

.stars span:nth-child(5) {
    top: 50%;
    left: 12%;
}

.stars span:nth-child(6) {
    top: 60%;
    left: 85%;
}

.stars span:nth-child(7) {
    top: 70%;
    left: 25%;
}

.stars span:nth-child(8) {
    top: 75%;
    left: 60%;
}

.stars span:nth-child(9) {
    top: 45%;
    left: 48%;
}

@keyframes starTwinkle {

    0%,
    100% {
        opacity: .2;

        transform: scale(.7);
    }

    50% {
        opacity: 1;

        transform: scale(1.3);
    }
}


/* NIGHT CHARACTER */

.night-character {
    position: absolute;

    bottom: 40px;

    left: 12%;

    width: 150px;

    height: 160px;

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

@keyframes nightFloat {

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

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

.night-face {
    position: absolute;

    left: 30px;

    top: 30px;

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #75d0f1,
            #318bb3
        );

    z-index: 3;
}

.night-ear {
    position: absolute;

    top: 35px;

    width: 65px;

    height: 35px;

    background:
        #438eaf;

    border-radius:
        100% 20% 100% 20%;
}

.night-ear.left {
    left: 0;

    transform: rotate(35deg);
}

.night-ear.right {
    right: 0;

    transform:
        scaleX(-1)
        rotate(35deg);
}

.night-eye {
    position: absolute;

    top: 32px;

    width: 12px;

    height: 18px;

    border-radius: 50%;

    background: #142f3e;
}

.night-eye.left {
    left: 24px;
}

.night-eye.right {
    right: 24px;
}

.night-nose {
    position: absolute;

    left: 39px;

    top: 53px;

    width: 12px;

    height: 8px;

    border-radius: 50%;

    background: #193b4b;
}

.night-smile {
    position: absolute;

    left: 39px;

    top: 65px;

    color: #173746;
}

.night-content {
    position: relative;

    z-index: 5;

    padding: 20px;
}

.final-heart {
    font-size: 75px;

    color: #ffb9c8;

    animation:
        heartbeat
        2s
        infinite
        ease-in-out;
}

@keyframes heartbeat {

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

    50% {
        transform: scale(1.12);
    }
}

.night-content h2 {
    font-size:
        clamp(40px,7vw,70px);

    font-weight: normal;

    line-height: 1.05;

    margin: 20px 0;
}

.night-content p {
    font-family: Arial, sans-serif;

    font-size: 13px;

    color:
        rgba(255,255,255,.7);
}


/* =========================================================
   POPUP
========================================================= */

.photo-popup {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    opacity: 0;

    visibility: hidden;

    z-index: 9999;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

.photo-popup.active {
    opacity: 1;

    visibility: visible;
}

.popup-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(45,22,28,.78);

    backdrop-filter:
        blur(15px);
}

.popup-content {
    position: relative;

    width:
        min(850px,94vw);

    max-height: 92vh;

    padding: 14px;

    background:
        #fffaf6;

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.35);

    transform:
        translateY(30px)
        scale(.94);

    transition:
        transform .55s
        cubic-bezier(.22,.8,.25,1);

    z-index: 2;

    overflow: auto;
}

.photo-popup.active
.popup-content {
    transform:
        translateY(0)
        scale(1);
}

.popup-content > img {
    display: block;

    width: 100%;

    max-height: 65vh;

    object-fit: contain;

    background: #f2ebe6;
}

.popup-caption {
    padding:
        20px 12px 10px;

    text-align: center;
}

.popup-number {
    font-family: Arial, sans-serif;

    color: var(--rose);

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 8px;
}

.popup-caption h2 {
    font-size: 28px;

    font-weight: normal;

    color: var(--wine);

    margin-bottom: 8px;
}

.popup-caption p {
    font-family: Arial, sans-serif;

    font-size: 13px;

    color: #8d7073;

    line-height: 1.6;
}

.popup-close {
    position: absolute;

    top: -15px;

    right: -15px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: none;

    background:
        #fffaf6;

    color: var(--wine);

    font-size: 27px;

    cursor: pointer;

    z-index: 10;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.2);

    transition: .3s ease;
}

.popup-close:hover {
    transform:
        rotate(90deg);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 600px) {

    .hero {
        padding:
            60px 20px;
    }

    .flower-area {
        width: 300px;

        height: 390px;

        transform:
            scale(.8);
    }

    .flower {
        bottom: 205px;
    }

    .stem {
        bottom: 30px;

        height: 190px;
    }

    .leaf.left {
        left: 70px;

        bottom: 125px;
    }

    .leaf.right {
        right: 65px;

        bottom: 165px;
    }

    .letter {
        padding:
            45px 25px;
    }


    .night-character {
        left: -20px;

        transform:
            scale(.7);
    }

    .moon {
        right: 8%;

        width: 90px;

        height: 90px;
    }

    .blue-character {
        transform:
            scale(.75);

        transform-origin:
            bottom right;
    }

    .blue-character.show {
        right: 5px;
    }

    .popup-content {
        width: 94vw;

        padding: 8px;
    }

    .popup-content > img {
        max-height: 60vh;
    }

}


/* =========================================================
   STITCH-INSPIRED CHARACTER REDESIGN
   More recognizable blue alien styling: oversized floppy ears,
   broad rounded head, dark eye patches, expressive eyes and belly.
========================================================= */
.blue-character {
    width: 150px;
    height: 178px;
    bottom: 28px;
    filter: drop-shadow(0 8px 12px rgba(22, 82, 124, .16));
}
.blue-character.show { right: 18px; }
.character-head {
    width: 104px;
    height: 94px;
    left: 23px;
    top: 25px;
    border-radius: 48% 48% 44% 44%;
    background: radial-gradient(ellipse at 48% 28%, #a5e7ff 0%, #69c7f1 42%, #2585c0 100%);
    border: 2px solid rgba(25, 100, 151, .35);
    box-shadow: inset 0 -7px 0 rgba(23, 103, 158, .12), 0 8px 18px rgba(39,127,174,.18);
}
.character-ear {
    width: 77px;
    height: 48px;
    top: 23px;
    background: linear-gradient(145deg, #65c9f4, #267db8);
    border-radius: 90% 12% 85% 20%;
    box-shadow: inset 0 -7px 0 rgba(16, 74, 124, .13);
}
.ear-left { left: -20px; transform: rotate(24deg); }
.ear-right { right: -20px; transform: scaleX(-1) rotate(24deg); }
.character-ear::after {
    content: "";
    position: absolute;
    inset: 7px 8px 7px 10px;
    background: linear-gradient(135deg, #f2a5b7, #cf718f);
    border-radius: 90% 12% 85% 20%;
    opacity: .95;
}
.blue-character.show .ear-left { animation: earWiggleLeft 2.4s ease-in-out infinite; }
.blue-character.show .ear-right { animation: earWiggleRight 2.4s ease-in-out infinite; }
.character-eye-patch {
    position: absolute;
    z-index: 1;
    top: 27px;
    width: 34px;
    height: 36px;
    background: rgba(28, 94, 143, .52);
    border-radius: 48% 52% 55% 45%;
}
.patch-left { left: 12px; transform: rotate(-12deg); }
.patch-right { right: 12px; transform: rotate(12deg); }
.character-eye {
    z-index: 2;
    top: 32px;
    width: 13px;
    height: 22px;
    background: #102d43;
    border-radius: 50%;
}
.eye-left { left: 27px; }
.eye-right { right: 27px; }
.character-eye::after { width: 5px; height: 7px; top: 3px; left: 3px; }
.character-nose {
    z-index: 3;
    width: 16px;
    height: 11px;
    left: 44px;
    top: 54px;
    background: #123c55;
    border-radius: 45% 45% 60% 60%;
}
.character-mouth { z-index: 3; left: 43px; top: 64px; font-size: 12px; color: #163f57; }
.character-cheek { z-index: 2; width: 16px; height: 8px; top: 59px; background: rgba(255, 139, 169, .6); }
.character-cheek.cheek-left { left: 5px; }
.character-cheek.cheek-right { right: 5px; }
.character-body {
    width: 80px;
    height: 78px;
    left: 35px;
    top: 99px;
    border-radius: 42% 42% 35% 35%;
    background: linear-gradient(145deg, #70cef3, #2785b7 88%);
}
.character-belly {
    width: 48px;
    height: 40px;
    left: 16px;
    top: 22px;
    background: #b6e9f5;
    border-radius: 48% 48% 45% 45%;
    opacity: .9;
}
.character-arm { background: #3b9fd0; width: 39px; height: 19px; }
.arm-left { left: -25px; transform: rotate(34deg); }
.arm-right { right: -25px; transform: rotate(-34deg); }

/* Night-time Stitch gets the same face details and ear silhouette. */
.night-character { width: 175px; height: 175px; }
.night-face {
    left: 37px; top: 35px; width: 100px; height: 100px;
    border-radius: 48% 48% 45% 45%;
    background: radial-gradient(ellipse at 48% 28%, #a1e5ff, #5abbe9 50%, #277eaf 100%);
    box-shadow: inset 0 -7px 0 rgba(18, 77, 122, .14);
}
.night-ear {
    top: 34px; width: 77px; height: 42px;
    background: linear-gradient(145deg, #65c8f1, #287eaf);
    border-radius: 90% 12% 85% 20%;
}
.night-ear.left { left: 1px; transform: rotate(24deg); }
.night-ear.right { right: 1px; transform: scaleX(-1) rotate(24deg); }
.night-ear::after {
    content: ""; position: absolute; inset: 6px 8px;
    background: #dc8aa7; border-radius: 90% 12% 85% 20%;
}
.night-eye-patch {
    position: absolute; z-index: 1; top: 31px; width: 32px; height: 35px;
    background: rgba(20, 76, 119, .5); border-radius: 50%;
}
.night-eye-patch.left { left: 12px; transform: rotate(-10deg); }
.night-eye-patch.right { right: 12px; transform: rotate(10deg); }
.night-eye { z-index: 2; top: 36px; width: 13px; height: 21px; background: #102b40; }
.night-eye.left { left: 27px; }
.night-eye.right { right: 27px; }
.night-nose { z-index: 3; left: 43px; top: 58px; width: 15px; height: 10px; background: #143b53; }
.night-smile { z-index: 3; left: 43px; top: 69px; }

@media (max-width: 600px) {
    .blue-character { transform: scale(.72); transform-origin: bottom right; }
    .blue-character.show { right: 4px; }
    .night-character { transform: scale(.66); transform-origin: bottom left; }
}


/* =========================================================
   REAL STITCH IMAGE ANIMATION
   Uses the Stitch image supplied for this website.
========================================================= */
.blue-character {
    position: fixed;
    right: -210px;
    bottom: 28px;
    width: 175px;
    height: 215px;
    z-index: 100;
    pointer-events: none;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
    transition:
        right 1.05s cubic-bezier(.18,.82,.22,1),
        opacity .45s ease;
}

.blue-character.show {
    right: 22px;
    opacity: 1;
    animation: stitchEntrance 1.05s cubic-bezier(.18,.82,.22,1) both,
               stitchFloat 3.8s ease-in-out 1.05s infinite;
}

.stitch-character-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 13px 16px rgba(17, 42, 91, .24));
    transform-origin: 50% 90%;
}

@keyframes stitchEntrance {
    0% {
        opacity: 0;
        transform: translate(70px, 20px) scale(.78) rotate(8deg);
    }
    65% {
        opacity: 1;
        transform: translate(-8px, -5px) scale(1.04) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
}

@keyframes stitchFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(-1.2deg);
    }
    50% {
        transform: translateY(-11px) rotate(1.5deg);
    }
    75% {
        transform: translateY(-4px) rotate(-.8deg);
    }
}

/* Little reaction when the memory popup opens. */
.blue-character.react {
    animation: stitchReact .7s ease-in-out !important;
}

@keyframes stitchReact {
    0% { transform: scale(1) rotate(0); }
    30% { transform: scale(1.08) rotate(-5deg) translateY(-8px); }
    60% { transform: scale(.98) rotate(4deg) translateY(-2px); }
    100% { transform: scale(1) rotate(0) translateY(0); }
}

/* Night section: the same supplied Stitch image, smaller and dreamy. */
.night-character {
    width: 190px;
    height: 235px;
    bottom: 28px;
    left: 10%;
    z-index: 2;
    animation: nightStitchFloat 4.5s ease-in-out infinite;
}

.night-stitch-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .28));
}

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

@media (max-width: 600px) {
    .blue-character {
        width: 135px;
        height: 166px;
        bottom: 18px;
        right: -165px;
    }

    .blue-character.show {
        right: 6px;
    }

    .night-character {
        width: 130px;
        height: 160px;
        left: 5%;
        bottom: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blue-character.show,
    .night-character {
        animation: none;
    }
}


/* =========================================================
   EXTRA STITCH ANIMATION PACK
   Uses the supplied Stitch artwork and adds character-like
   movement without changing the artwork itself.
========================================================= */
.blue-character {
    width: 190px;
    height: 235px;
    right: -225px;
    bottom: 24px;
    pointer-events: auto;
    cursor: pointer;
    isolation: isolate;
}

.blue-character.show {
    right: 22px;
    opacity: 1;
    animation: stitchEntranceBig 1.15s cubic-bezier(.16,.9,.2,1) both;
}

.stitch-character-image {
    position: relative;
    z-index: 3;
    transition: filter .25s ease;
    will-change: transform;
    animation: stitchIdle 3.2s ease-in-out 1.15s infinite;
}

.blue-character:hover .stitch-character-image {
    filter: drop-shadow(0 16px 24px rgba(17,42,91,.30));
}

@keyframes stitchEntranceBig {
    0% {
        opacity: 0;
        transform: translate(120px, 60px) rotate(12deg) scale(.55);
    }
    45% {
        opacity: 1;
        transform: translate(-22px, -12px) rotate(-8deg) scale(1.08);
    }
    68% {
        transform: translate(9px, 3px) rotate(5deg) scale(.96);
    }
    84% {
        transform: translate(-4px, -5px) rotate(-2deg) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(0,0) rotate(0) scale(1);
    }
}

@keyframes stitchIdle {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    25% { transform: translateY(-6px) rotate(-1.2deg) scale(1.01); }
    50% { transform: translateY(-13px) rotate(1.5deg) scale(1.025); }
    75% { transform: translateY(-5px) rotate(-.8deg) scale(1.01); }
}

/* A playful hop triggered after the flower blooms / on interaction. */
.blue-character.hop .stitch-character-image {
    animation: stitchHop .85s cubic-bezier(.2,.9,.25,1) both !important;
}

@keyframes stitchHop {
    0% { transform: translateY(0) rotate(0) scale(1); }
    22% { transform: translateY(-32px) rotate(-8deg) scale(1.05); }
    45% { transform: translateY(-54px) rotate(7deg) scale(1.1); }
    66% { transform: translateY(-18px) rotate(-5deg) scale(1.02); }
    82% { transform: translateY(7px) rotate(3deg) scale(.98); }
    100% { transform: translateY(0) rotate(0) scale(1); }
}

/* A quick side-to-side wiggle for taps. */
.blue-character.wiggle .stitch-character-image {
    animation: stitchWiggle .65s ease-in-out both !important;
}

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

/* Little speech bubble that pops in briefly. */
.stitch-bubble {
    position: absolute;
    z-index: 8;
    top: -18px;
    left: -58px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #5b4a70;
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: .4px;
    box-shadow: 0 8px 22px rgba(58,50,85,.14);
    opacity: 0;
    transform: translateY(10px) scale(.7);
    transform-origin: 90% 100%;
    pointer-events: none;
}

.stitch-bubble::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
}

.blue-character.talk .stitch-bubble {
    animation: bubblePop 1.55s ease both;
}

@keyframes bubblePop {
    0% { opacity: 0; transform: translateY(10px) scale(.7); }
    15%, 75% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-5px) scale(.9); }
}

.stitch-sparkles {
    position: absolute;
    z-index: 7;
    top: 6px;
    right: -3px;
    color: #ffe7a8;
    font-size: 13px;
    letter-spacing: 8px;
    opacity: 0;
    pointer-events: none;
}

.blue-character.sparkle .stitch-sparkles {
    animation: sparklePop 1s ease both;
}

@keyframes sparklePop {
    0% { opacity: 0; transform: scale(.4) rotate(-20deg); }
    30% { opacity: 1; transform: scale(1.2) rotate(5deg); }
    100% { opacity: 0; transform: scale(.7) rotate(20deg) translateY(-14px); }
}

/* Hearts launched from Stitch during special moments. */
.stitch-heart {
    position: fixed;
    z-index: 101;
    pointer-events: none;
    font-size: 15px;
    color: #efaeb5;
    text-shadow: 0 3px 8px rgba(99,52,61,.16);
    animation: stitchHeartFly 1.4s cubic-bezier(.18,.8,.24,1) forwards;
}

@keyframes stitchHeartFly {
    0% { opacity: 0; transform: translate(0,0) scale(.4) rotate(0deg); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(var(--rot)); }
}

/* Make the night Stitch feel like a tiny guardian in the stars. */
.night-character {
    width: 205px;
    height: 250px;
    animation: nightStitchDream 4s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(143,202,255,.16));
}

.night-character.awake .night-stitch-image {
    animation: nightStitchWake .9s cubic-bezier(.2,.9,.25,1) both;
}

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

@keyframes nightStitchWake {
    0% { transform: scale(.94) translateY(12px); }
    55% { transform: scale(1.08) translateY(-8px); }
    100% { transform: scale(1) translateY(0); }
}

@media (max-width: 600px) {
    .blue-character {
        width: 145px;
        height: 180px;
        right: -175px;
        bottom: 12px;
    }
    .blue-character.show { right: 4px; }
    .stitch-bubble { left: -44px; top: -12px; }
    .night-character { width: 145px; height: 178px; }
}

@media (prefers-reduced-motion: reduce) {
    .blue-character.show,
    .stitch-character-image,
    .night-character,
    .stitch-heart,
    .blue-character.talk .stitch-bubble,
    .blue-character.sparkle .stitch-sparkles {
        animation: none !important;
    }
}

/* =========================================================
   BIRTHDAY PASSCODE LANDING
========================================================= */
body.passcode-locked { overflow: hidden; }
.passcode-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255,255,255,.35), transparent 30%),
        linear-gradient(160deg, #dfeeff 0%, #f8e7f2 48%, #fff9f3 100%);
    transition: opacity .8s ease, visibility .8s ease;
}
.passcode-screen.opened { opacity: 0; visibility: hidden; pointer-events: none; }
.passcode-card {
    position: relative;
    width: min(390px, 94vw);
    padding: 30px 24px 22px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 32px;
    background: rgba(255,255,255,.66);
    box-shadow: 0 30px 80px rgba(74,79,130,.18), inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(20px);
    animation: passcodeCardIn .9s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes passcodeCardIn { from { opacity:0; transform:translateY(35px) scale(.94); } to { opacity:1; transform:none; } }
.passcode-sticker { font-size: 46px; animation: giftBounce 2.4s ease-in-out infinite; }
@keyframes giftBounce { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-9px) rotate(3deg)} }
.passcode-label { margin-top: 10px; font: 10px/1.2 Arial,sans-serif; letter-spacing: 3px; text-transform: uppercase; color: #8b6f9d; }
.passcode-card h1 { margin: 10px 0 8px; font-size: clamp(30px,7vw,42px); font-weight: 400; color:#553a60; }
.passcode-card > p { font: 13px/1.6 Arial,sans-serif; color:#7f6e78; }
.passcode-dots { display:flex; justify-content:center; gap:10px; margin:18px 0 5px; }
.passcode-dots span { width:11px; height:11px; border-radius:50%; border:1px solid #bda9ca; background:#fff; transition:.2s ease; }
.passcode-dots span.filled { background:#6c9fca; transform:scale(1.12); box-shadow:0 0 0 4px rgba(108,159,202,.12); }
.passcode-display { height: 28px; font: 15px/28px Arial,sans-serif; letter-spacing: 7px; color:#5d5068; }
.keypad { width:min(285px,100%); margin:10px auto 4px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.keypad button { height:50px; border:1px solid rgba(112,99,133,.12); border-radius:16px; background:rgba(255,255,255,.78); color:#5d5068; font:600 16px Arial,sans-serif; cursor:pointer; box-shadow:0 7px 18px rgba(74,79,130,.08); transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.keypad button:hover { transform:translateY(-2px); background:#fff; box-shadow:0 10px 22px rgba(74,79,130,.12); }
.keypad button:active { transform:scale(.94); }
.keypad .key-special { color:#8b6f9d; }
.passcode-message { min-height: 18px; margin-top: 12px; font: 11px/1.5 Arial,sans-serif; color:#9b8797; }
.passcode-message.error { color:#b85f72; animation: shake .35s ease; }
@keyframes shake { 20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)} }
.skip-passcode { margin-top:10px; border:0; background:none; color:#9a8290; font:10px Arial,sans-serif; text-decoration:underline; cursor:pointer; }
.passcode-glow { position:absolute; border-radius:50%; filter:blur(8px); pointer-events:none; }
.glow-one { width:220px;height:220px;left:6%;top:10%;background:rgba(129,196,238,.25); animation:glowFloat 7s ease-in-out infinite; }
.glow-two { width:260px;height:260px;right:2%;bottom:3%;background:rgba(241,171,207,.25); animation:glowFloat 8s ease-in-out infinite reverse; }
@keyframes glowFloat { 50%{transform:translate(25px,-18px) scale(1.1)} }


@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* =========================================================
   NEW STITCH ARTWORK PLACEMENT
   All Stitch assets live in /stitch/
========================================================= */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-stitch-wrap {
    position: relative;
    z-index: 3;
    width: min(250px, 62vw);
    margin: 24px auto 8px;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(45, 78, 120, .18);
    transform: rotate(-1.5deg);
    animation: heroStitchFloat 4s ease-in-out infinite;
}

.hero-stitch-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

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

.calendar-stitch-wrap {
    width: min(230px, 62vw);
    margin: 0 auto 22px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(45, 78, 120, .16);
    transform: rotate(1deg);
    animation: calendarStitchFloat 4.5s ease-in-out infinite;
}

.calendar-stitch-hero {
    display: block;
    width: 100%;
    height: auto;
}

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

/* The special date is emphasized by the calendar itself; no Stitch sticker is
   placed inside the day cell because stitch_2 is displayed above the calendar. */
.calendar-day.special {
    position: relative;
}

.calendar-day.special::after {
    content: "02";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 800 26px/1 Arial, sans-serif;
    color: #355c78;
    opacity: .18;
    pointer-events: none;
}

.night-section .night-stitch-image {
    width: min(290px, 62vw);
    height: auto;
    object-fit: contain;
    border-radius: 28px;
    box-shadow: 0 20px 55px rgba(0,0,0,.22);
    animation: finalStitchFloat 4s ease-in-out infinite;
}

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

@media (max-width: 600px) {
    .hero-stitch-wrap { width: min(210px, 64vw); margin-top: 18px; }
    .calendar-stitch-wrap { width: min(200px, 68vw); }
    .night-section .night-stitch-image { width: min(240px, 68vw); }
}

/* =========================================================
   UPDATED CALENDAR + NOTE STITCH
========================================================= */
.calendar-layout {
    width: min(1000px, 94vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 46px;
    align-items: center;
}

.calendar-copy {
    min-width: 0;
    text-align: left;
}

.calendar-copy .section-label {
    margin-bottom: 15px;
}

.calendar-copy h2 {
    font-size: clamp(38px, 6vw, 62px);
    font-weight: normal;
    margin-bottom: 12px;
}

.calendar-copy .section-description {
    margin: 0 0 24px;
    max-width: 560px;
}

.calendar-layout .calendar-card {
    width: 100%;
}

.calendar-stitch-wrap {
    width: 190px;
    height: 235px;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(45, 78, 120, .16);
    transform: rotate(-2deg);
    animation: calendarStitchFloat 4.5s ease-in-out infinite;
}

.calendar-stitch-hero {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.letter {
    position: relative;
    min-height: 620px;
    padding: 60px 220px 120px;
    overflow: hidden;
}

.notes-stitch-wrap {
    position: absolute;
    left: 18px;
    bottom: 8px;
    width: 190px;
    height: 235px;
    pointer-events: none;
    z-index: 2;
    animation: notesStitchFloat 4.2s ease-in-out infinite;
}

.notes-stitch-image {
    display: block;
    width: 190px;
    height: 235px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 13px 16px rgba(17, 42, 91, .20));
}

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

@media (max-width: 760px) {
    .calendar-layout {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
    }

    .calendar-copy {
        text-align: center;
    }

    .calendar-stitch-wrap {
        width: 145px;
        height: 180px;
        margin: 0 auto;
    }

    .calendar-copy .section-description {
        margin-left: auto;
        margin-right: auto;
    }

    .letter {
        min-height: 650px;
        padding: 48px 24px 210px;
    }

    .notes-stitch-wrap,
    .notes-stitch-image {
        width: 145px;
        height: 180px;
    }

    .notes-stitch-wrap {
        left: 8px;
        bottom: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-stitch-wrap,
    .notes-stitch-wrap {
        animation: none;
    }
}


/* =========================================================
   FINAL STITCH TRANSPARENCY + CALENDAR PLACEMENT
========================================================= */
.hero-stitch-wrap,
.calendar-stitch-wrap {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.hero-stitch-image,
.calendar-stitch-hero,
.night-section .night-stitch-image,
.notes-stitch-image,
.stitch-character-image {
    background: transparent !important;
}

/* Stitch 2 now lives inside the calendar card, on the left side of its header. */
.calendar-layout {
    display: block;
    width: min(900px, 94vw);
}

.calendar-copy {
    width: 100%;
    text-align: center;
}

.calendar-copy .section-description {
    margin-left: auto;
    margin-right: auto;
}

.calendar-card {
    position: relative;
    overflow: visible;
}

.calendar-card-top {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.calendar-stitch-inside {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    flex-shrink: 0;
}

.calendar-stitch-hero {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 10px 14px rgba(42, 75, 111, .14));
    animation: calendarStitchFloatInside 4.5s ease-in-out infinite;
}

.calendar-card-top .calendar-header {
    margin: 0;
    min-width: 0;
}

.calendar-card-top .calendar-header span:first-child {
    font-size: clamp(22px, 4vw, 30px);
}

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

@media (max-width: 600px) {
    .calendar-card-top {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 10px;
    }

    .calendar-stitch-inside {
        width: 88px;
        height: 115px;
    }

    .calendar-card-top .calendar-header {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-stitch-hero {
        animation: none;
    }
}


/* =========================================================
   FINAL REQUEST: STITCH 5 + SPECIAL DATE ART + HERO SIZE
========================================================= */

/* Make Stitch 1 a little larger on the opening page. */
.hero-stitch-wrap {
    width: min(280px, 68vw);
}

.special-date-image {
    position: absolute;
    z-index: 1;
    width: 48px;
    height: 48px;
    right: 4px;
    bottom: 2px;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(42, 75, 111, .12));
}

.calendar-day.special .day-number,
.calendar-day.special .special-label {
    z-index: 3;
}

.calendar-day.special::after {
    content: none;
}

/* The final page now uses the uploaded animated Stitch 5 GIF. */
.night-section .night-stitch-image {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

@media (max-width: 600px) {
    .hero-stitch-wrap {
        width: min(230px, 72vw);
    }

    .special-date-image {
        width: 38px;
        height: 38px;
        right: 2px;
        bottom: 1px;
    }
}

/* FINAL POLISH: new Stitch 1, clearer 02 November artwork, smaller final GIF. */
.hero-stitch-wrap {
    width: min(300px, 72vw);
}

/* Keep the Scrum character clearly inside the 02 November cell. */
.calendar-day.special .special-date-image {
    width: 62px;
    height: 62px;
    right: 2px;
    bottom: 1px;
    object-fit: contain;
    object-position: center;
    z-index: 1;
}

/* Smaller animated Stitch on the final page. */
.night-character {
    width: 140px;
    height: 175px;
}

@media (max-width: 600px) {
    .hero-stitch-wrap {
        width: min(245px, 76vw);
    }

    .calendar-day.special .special-date-image {
        width: 50px;
        height: 50px;
        right: 1px;
        bottom: 1px;
    }

    .night-character {
        width: 105px;
        height: 132px;
    }
}


/* =========================================================
   V8: CLEAR SPECIAL-DATE ART + TINY FINAL STITCH
========================================================= */
/* Keep the 02 November artwork clearly visible without covering the date. */
.calendar-day.special {
    display: block;
    padding: 8px;
    overflow: hidden;
}

.calendar-day.special .day-number {
    position: absolute;
    top: 8px;
    left: 9px;
    z-index: 4;
    line-height: 1;
}

.calendar-day.special .special-date-image {
    position: absolute;
    z-index: 2;
    width: 46px;
    height: 46px;
    left: 50%;
    top: 20px;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(42, 75, 111, .12));
}

.calendar-day.special .special-label {
    left: 50%;
    right: auto;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 5;
    white-space: nowrap;
}

/* The final animated Stitch should be noticeably smaller than the main Stitch. */
.night-character {
    width: 92px !important;
    height: 118px !important;
    left: 8% !important;
    bottom: 30px !important;
    z-index: 4 !important;
}

.night-section .night-stitch-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

@media (max-width: 600px) {
    .calendar-day.special {
        padding: 6px;
    }

    .calendar-day.special .day-number {
        top: 6px;
        left: 7px;
        font-size: 13px;
    }

    .calendar-day.special .special-date-image {
        width: 38px;
        height: 38px;
        top: 17px;
    }

    .calendar-day.special .special-label {
        bottom: 3px;
        font-size: 5.5px;
        padding: 2px 4px;
    }

    .night-character {
        width: 68px !important;
        height: 88px !important;
        left: 6% !important;
        bottom: 22px !important;
    }
}

/* V9: place Scrum directly above the "special day" label. */
.calendar-day.special .special-date-image {
    width: 36px;
    height: 36px;
    left: 50%;
    top: auto;
    right: auto;
    bottom: 21px;
    transform: translateX(-50%);
    z-index: 3;
}

.calendar-day.special .special-label {
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 5;
}

/* V9: Stitch 5 is a compact 90px square on the final page. */
.night-character {
    width: 90px !important;
    height: 90px !important;
    left: 8% !important;
    bottom: 30px !important;
}

.night-section .night-stitch-image {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain !important;
}

@media (max-width: 600px) {
    .calendar-day.special .special-date-image {
        width: 32px;
        height: 32px;
        bottom: 19px;
    }

    .calendar-day.special .special-label {
        bottom: 3px;
    }

    .night-character {
        width: 90px !important;
        height: 90px !important;
        left: 6% !important;
        bottom: 22px !important;
    }

    .night-section .night-stitch-image {
        width: 90px !important;
        height: 90px !important;
    }
}

/* V10: Make the final Stitch 5 just a few pixels smaller than the main Stitch. */
.night-character {
    width: 195px !important;
    height: 240px !important;
}

.night-section .night-stitch-image {
    width: 195px !important;
    height: 240px !important;
    object-fit: contain !important;
}

@media (max-width: 600px) {
    .night-character {
        width: 155px !important;
        height: 192px !important;
    }

    .night-section .night-stitch-image {
        width: 155px !important;
        height: 192px !important;
        object-fit: contain !important;
    }
}

/* V12: keep the lock/passcode card truly centered on mobile screens. */
@media (max-width: 600px) {
    .passcode-screen {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        min-height: 100dvh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 14px;
        overflow: hidden;
    }

    .passcode-card {
        width: min(360px, calc(100vw - 28px));
        max-height: calc(100dvh - 28px);
        box-sizing: border-box;
        overflow-y: auto;
        padding: 22px 18px 16px;
        margin: 0 auto;
    }

    .passcode-sticker { font-size: 40px; }
    .passcode-card h1 { margin-top: 8px; margin-bottom: 6px; }
    .passcode-dots { margin-top: 14px; }
    .keypad { gap: 7px; margin-top: 8px; }
    .keypad button { height: 46px; border-radius: 14px; }
    .passcode-message { margin-top: 9px; }
    .skip-passcode { margin-top: 7px; }
}

/* =========================================================
   LITTLE NOTE FLIP BOOK
========================================================= */
.flipbook {
    position: relative;
    padding-bottom: 34px;
}

.flipbook-stage {
    position: relative;
    width: 100%;
    min-height: 410px;
    perspective: 1400px;
}

.note-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 44px 42px 52px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(249,244,239,.96));
    box-shadow: inset 0 0 0 1px rgba(201,164,108,.16), 0 16px 35px rgba(90,50,50,.08);
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-90deg) translateX(-8px);
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform .62s cubic-bezier(.2,.75,.2,1), opacity .35s ease, visibility .35s ease;
}

.note-page.active {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0) translateX(0);
    z-index: 2;
}

.note-page.leaving {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(90deg) translateX(8px);
    transform-origin: right center;
}

.note-page-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font: 700 9px/1 Arial, sans-serif;
    letter-spacing: 2px;
    color: #b38b8e;
}

.note-page h2 {
    margin: 0 0 24px;
    font-size: clamp(32px, 5vw, 48px);
    font-weight: normal;
    color: #76585d;
}

.note-page p {
    max-width: 480px;
    margin: 0;
    font-size: 17px;
    line-height: 2;
    color: #745b5e;
}

.note-page-stitch {
    position: absolute;
    left: 18px;
    bottom: 6px;
    width: 145px;
    height: 180px;
    pointer-events: none;
}

.note-page-stitch img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(17,42,91,.18));
}

.flipbook-controls {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}

.flipbook-arrow {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(168,124,128,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.86);
    color: #8f696e;
    cursor: pointer;
    font-size: 16px;
    transition: transform .2s ease, opacity .2s ease, background .2s ease;
}

.flipbook-arrow:hover:not(:disabled) {
    transform: translateY(-2px);
    background: #fff;
}

.flipbook-arrow:disabled {
    opacity: .35;
    cursor: default;
}

.flipbook-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 150px;
}

.flipbook-dots {
    display: flex;
    gap: 6px;
}

.flipbook-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d9c4c5;
    transition: transform .2s ease, background .2s ease;
}

.flipbook-dots span.active {
    background: #a87c80;
    transform: scale(1.35);
}

.next-page-indicator {
    border: 0;
    background: transparent;
    color: #a06f76;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    animation: nextPagePulse 1.8s ease-in-out infinite;
}

.next-page-indicator span {
    display: inline-block;
    margin-left: 5px;
}

.flipbook-page-count {
    font: 10px/1 Arial, sans-serif;
    color: #a58b8d;
}

@keyframes nextPagePulse {
    0%, 100% { transform: translateX(0); opacity: .7; }
    50% { transform: translateX(5px); opacity: 1; }
}

@media (max-width: 600px) {
    .flipbook {
        padding: 46px 20px 28px;
    }

    .flipbook-stage {
        min-height: 390px;
    }

    .note-page {
        padding: 40px 24px 48px;
    }

    .note-page h2 {
        margin-bottom: 18px;
        font-size: 32px;
    }

    .note-page p {
        font-size: 15px;
        line-height: 1.85;
    }

    .note-page-stitch {
        width: 105px;
        height: 130px;
        left: 4px;
        bottom: 0;
    }

    .flipbook-controls {
        gap: 9px;
    }

    .flipbook-progress {
        min-width: 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .note-page,
    .flipbook-arrow,
    .flipbook-dots span,
    .next-page-indicator {
        transition: none;
        animation: none;
    }
}