@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500&display=swap');

/* =========================================================
   4SOMEONE — DATE
   CLEAN VERSION
   ========================================================= */

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

html {
    width: 100%;
    min-height: 100%;
    background: #08090d;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 20%, rgba(92,82,150,.12), transparent 38%),
        radial-gradient(circle at 10% 70%, rgba(91,116,180,.07), transparent 35%),
        radial-gradient(circle at 90% 60%, rgba(190,100,150,.055), transparent 32%),
        #08090d;
    color: #f1f0f4;
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.gift-open {
    overflow: hidden;
}

button,
a {
    font: inherit;
}

/* =========================================================
   PAGE
   ========================================================= */

.date-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 24px clamp(18px, 5vw, 80px) 100px;
    overflow: hidden;
}

.date-page::before {
    content: "";
    position: fixed;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(109,91,170,.08), transparent 68%);
    filter: blur(35px);
    pointer-events: none;
}

/* =========================================================
   BACK
   ========================================================= */

.back {
    position: relative;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    letter-spacing: .08em;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 100px;
    transition: .3s ease;
}

.back:hover {
    color: #fff;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.1);
    transform: translateY(-2px);
}

/* =========================================================
   HEADER
   ========================================================= */

.date-header {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1000px;
    margin: clamp(65px, 10vh, 105px) auto 0;
    text-align: center;
}

.date-title-wrap {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
}

.date-title-wrap h1 {
    margin: 0;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(72px, 17vw, 150px);
    font-weight: 300;
    line-height: .75;
    letter-spacing: -.045em;
    color: #f2f1f5;
    text-shadow: 0 0 35px rgba(190,185,220,.07);
}

.date-index {
    margin-top: 5px;
    font-size: 9px;
    letter-spacing: .28em;
    color: rgba(205,201,220,.4);
}

.subtitle {
    margin-top: 24px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(20px, 4.5vw, 27px);
    font-style: italic;
    color: rgba(220,217,228,.76);
}

/* =========================================================
   DATE CARDS
   ========================================================= */

.date-list {
    position: relative;
    z-index: 3;
    width: min(100%, 720px);
    margin: clamp(60px, 9vh, 95px) auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.date-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 15%, rgba(132,119,204,.14), transparent 35%),
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.025));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 20px 60px rgba(0,0,0,.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate3d(0,0,0);
    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .4s ease,
        background .4s ease;
}

.date-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -90px;
    right: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(133,119,202,.2), transparent 68%);
    filter: blur(8px);
    transition: transform .6s ease;
    pointer-events: none;
}

.date-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    left: -80px;
    bottom: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211,111,164,.1), transparent 70%);
    filter: blur(10px);
    opacity: .7;
    transition: transform .7s ease, opacity .7s ease;
}

.date-card:hover {
    transform: translateY(-9px) scale(1.015);
    border-color: rgba(190,183,235,.24);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 25px 70px rgba(0,0,0,.38),
        0 0 45px rgba(105,92,170,.09);
}

.date-card:hover::before {
    transform: scale(1.35);
}

.date-card:hover::after {
    transform: scale(1.5);
    opacity: 1;
}

.date-card:active {
    transform: scale(.965);
    transition: transform .12s ease;
}

.card-number {
    position: relative;
    z-index: 2;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(54px, 11vw, 78px);
    font-weight: 300;
    line-height: .8;
    color: rgba(245,243,248,.88);
    letter-spacing: -.05em;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.date-card:hover .card-number {
    transform: translateY(-3px);
}

.card-content {
    position: relative;
    z-index: 3;
    width: 100%;
    margin-top: auto;
    text-align: left;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.date-card:hover .card-content {
    transform: translateY(-3px);
}

.card-date {
    display: block;
    margin-bottom: 8px;
    font-size: 8px;
    letter-spacing: .2em;
    line-height: 1.5;
    color: rgba(205,201,216,.46);
}

.card-content h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(21px,5vw,30px);
    font-weight: 400;
    line-height: 1.05;
    color: #f0eef3;
    overflow-wrap: break-word;
}

.card-content p {
    margin-top: 7px;
    font-size: 9px;
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: .04em;
    color: rgba(205,201,214,.48);
}

.card-arrow {
    position: absolute;
    right: 18px;
    top: 18px;

    width: 26px;
    height: 26px;

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

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;

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

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

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1;

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        color .35s ease,
        background .35s ease,
        border-color .35s ease;
}

.date-card:hover .card-arrow {
    transform: translate(2px,-2px);
    color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.18);
}

.date-card:hover .card-arrow {
    transform: translate(2px,-2px);
    color: #fff;
    background: rgba(255,255,255,.09);
}

/* =========================================================
   GIFT SCENE
   ========================================================= */

.gift-scene {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    perspective: 1400px;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(103,91,158,.16), transparent 34%),
        radial-gradient(ellipse at 50% 70%, rgba(88,110,170,.07), transparent 45%),
        #050609;
    transition: opacity .6s ease, visibility .6s ease;
}

.gift-scene.active {
    visibility: visible;
    opacity: 1;
}

.gift-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.025), transparent 28%);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.gift-scene.active::before {
    opacity: 1;
}

.gift-scene::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 30px rgba(255,255,255,.8),
        0 0 100px rgba(145,130,220,.45),
        0 0 180px rgba(120,110,190,.22);
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    pointer-events: none;
}

.gift-scene.opened::after {
    animation: sceneLightBurst 1.1s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes sceneLightBurst {
    0% {
        transform: translate(-50%,-50%) scale(0);
        opacity: .9;
    }
    35% {
        opacity: .55;
    }
    100% {
        transform: translate(-50%,-50%) scale(25);
        opacity: 0;
    }
}

.gift-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(1.05);
    filter: blur(7px);
    transition:
        opacity .9s ease,
        transform 1s cubic-bezier(.16,1,.3,1),
        filter 1s ease;
}

.gift-scene.active .gift-content {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.gift-label {
    position: absolute;
    top: 10%;
    font-size: 8px;
    letter-spacing: .3em;
    color: rgba(255,255,255,.38);
    transition: opacity .35s ease, transform .45s ease;
}

.gift-scene.opened .gift-label {
    opacity: 0;
    transform: translateY(-8px);
}

.tap-text {
    position: absolute;
    bottom: 10%;
    font-size: 8px;
    font-weight: 300;
    letter-spacing: .32em;
    text-transform: lowercase;
    color: rgba(255,255,255,.42);
    animation: tapFloat 2.8s ease-in-out infinite;
    transition: opacity .25s ease, transform .4s ease;
}

@keyframes tapFloat {
    0%,100% { opacity: .3; transform: translateY(0); }
    50% { opacity: .75; transform: translateY(-4px); }
}

.gift-scene.opened .tap-text {
    opacity: 0;
    transform: translateY(10px);
}

.close-gift {
    position: absolute;
    z-index: 40;
    top: 25px;
    right: 25px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.65);
    font-size: 22px;
    font-weight: 300;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: .3s ease;
}

.close-gift:hover {
    transform: rotate(90deg);
    background: rgba(255,255,255,.1);
}

/* =========================================================
   GIANT CHROME BOW
   ========================================================= */

.giant-bow {
    position: relative;
    width: min(88vw,520px);
    height: min(62vh,520px);
    cursor: pointer;
    transform-style: preserve-3d;
    animation: bowBreathing 4s ease-in-out infinite;
    filter:
        drop-shadow(0 35px 45px rgba(0,0,0,.55))
        drop-shadow(0 0 35px rgba(116,103,180,.1));
    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .8s ease,
        opacity .9s ease;
}

@keyframes bowBreathing {
    0%,100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.012) translateY(-4px); }
}

.giant-bow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 42%;
    width: 46%;
    height: 46%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(196,188,255,.22),
            rgba(110,101,173,.09) 30%,
            transparent 70%);
    filter: blur(25px);
    opacity: .55;
    pointer-events: none;
    transition: transform 1s ease, opacity .8s ease;
}

.giant-bow:hover {
    transform: scale(1.035) translateY(-5px);
    filter:
        drop-shadow(0 40px 55px rgba(0,0,0,.58))
        drop-shadow(0 0 50px rgba(130,115,200,.17));
}

.giant-bow:hover::before {
    transform: translate(-50%,-50%) scale(1.25);
    opacity: .8;
}

.bow-loop {
    position: absolute;
    top: 18%;
    width: 43%;
    height: 43%;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 70% 42% 65% 45%;
    background:
        linear-gradient(120deg,
            #fafafa 0%,
            #bfc0c7 13%,
            #555761 28%,
            #191b22 43%,
            #dfe0e4 58%,
            #777982 73%,
            #eeeeef 88%,
            #74757d 100%);
    box-shadow:
        inset 15px 10px 25px rgba(255,255,255,.2),
        inset -20px -20px 35px rgba(0,0,0,.35),
        0 20px 45px rgba(0,0,0,.45);
    transform-style: preserve-3d;
    transition:
        transform 1.05s cubic-bezier(.16,1,.3,1),
        opacity .8s ease;
}

.bow-left {
    left: 4%;
    transform: rotate(-18deg) rotateY(12deg);
}

.bow-right {
    right: 4%;
    border-radius: 42% 70% 45% 65%;
    transform: rotate(18deg) rotateY(-12deg);
}

.ribbon-shine {
    position: absolute;
    inset: 7% 18% 20%;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.65) 42%, rgba(255,255,255,.08) 52%, transparent 70%);
    opacity: .65;
    filter: blur(1px);
    pointer-events: none;
}

.ribbon-fold {
    position: absolute;
    left: 16%;
    right: 16%;
    bottom: 12%;
    height: 28%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.28));
    filter: blur(3px);
    opacity: .55;
}

.bow-knot {
    position: absolute;
    z-index: 8;
    left: 50%;
    top: 31%;
    width: 18%;
    aspect-ratio: 1;
    transform: translateX(-50%) translateZ(35px);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 42%;
    background: radial-gradient(circle at 30% 25%, #fff 0%, #bfc0c7 18%, #555762 48%, #191a20 78%, #d5d5d9 100%);
    box-shadow:
        inset 5px 5px 12px rgba(255,255,255,.35),
        inset -7px -8px 15px rgba(0,0,0,.45),
        0 12px 25px rgba(0,0,0,.55);
    transition: transform .65s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}

.knot-shine {
    position: absolute;
    width: 35%;
    height: 25%;
    left: 20%;
    top: 15%;
    border-radius: 50%;
    background: rgba(255,255,255,.8);
    filter: blur(3px);
}

.bow-tail {
    position: absolute;
    z-index: 3;
    top: 51%;
    width: 23%;
    height: 42%;
    border: 1px solid rgba(255,255,255,.2);
    background:
        linear-gradient(120deg,
            #eeeeef,
            #92939b 20%,
            #353740 42%,
            #111219 52%,
            #d7d8dd 72%,
            #666770 100%);
    box-shadow:
        inset 8px 0 14px rgba(255,255,255,.18),
        inset -10px -15px 20px rgba(0,0,0,.35),
        0 20px 35px rgba(0,0,0,.35);
    clip-path: polygon(15% 0,90% 0,78% 72%,100% 100%,48% 84%,0 100%,20% 70%);
    transition: transform 1.1s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}

.tail-left {
    left: 28%;
    transform: rotate(7deg) translateZ(10px);
}

.tail-right {
    right: 28%;
    transform: rotate(-7deg) translateZ(10px);
}

/* BOW OPENING */

.giant-bow.opening {
    animation: none;
    transform: scale(.98);
}

.giant-bow.opening::before {
    animation: bowLightBurst 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes bowLightBurst {
    0% {
        opacity: 0;
        transform: translate(-50%,-50%) scale(.4);
    }
    35% {
        opacity: 1;
        transform: translate(-50%,-50%) scale(2.2);
    }
    100% {
        opacity: .15;
        transform: translate(-50%,-50%) scale(3.5);
    }
}

.giant-bow.opening .bow-left {
    transform: translateX(-48%) translateY(-8%) rotate(-38deg) rotateY(25deg);
    opacity: .82;
}

.giant-bow.opening .bow-right {
    transform: translateX(48%) translateY(-8%) rotate(38deg) rotateY(-25deg);
    opacity: .82;
}

.giant-bow.opening .bow-knot {
    transform: translateX(-50%) translateY(-38px) scale(.65) rotate(15deg);
    opacity: 0;
}

.giant-bow.opening .tail-left {
    transform: translateX(-35px) translateY(110px) rotate(22deg);
    opacity: .55;
}

.giant-bow.opening .tail-right {
    transform: translateX(35px) translateY(110px) rotate(-22deg);
    opacity: .55;
}

/* BOW STAYS BEHIND CARD */

.gift-scene.opened .giant-bow {
    opacity: .1;
    transform: translateY(-5px) scale(.78);
    filter:
        blur(1.5px)
        drop-shadow(0 0 35px rgba(120,110,190,.15));
    pointer-events: none;
    transition:
        opacity 1s ease .35s,
        transform 1s cubic-bezier(.16,1,.3,1) .35s,
        filter 1s ease .35s;
}

/* =========================================================
   INVITATION — SINGLE SOURCE OF TRUTH
   ========================================================= */

.invitation {
    position: absolute;
    z-index: 20;
    left: 50%;
    top: 50%;
    width: min(86vw,390px);
    max-height: 82vh;
    opacity: 0;
    pointer-events: none;

    transform:
        translate3d(-50%,-50%,0)
        scale(.88)
        rotateX(10deg);

    transform-origin: center center;

    filter:
        blur(5px)
        brightness(.82)
        drop-shadow(0 25px 60px rgba(0,0,0,.5));

    transition:
        opacity .6s ease,
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .9s ease;

    animation: none !important;
    will-change: transform, opacity, filter;
}

.gift-scene.opened .invitation {
    opacity: 1;
    pointer-events: auto;

    transform:
        translate3d(-50%,-50%,0)
        scale(1)
        rotateX(0deg);

    filter:
        blur(0)
        brightness(1)
        drop-shadow(0 30px 70px rgba(0,0,0,.5));

    animation: none !important;
}

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

.invitation-inner {
    position: relative;
    width: 100%;
    max-height: 82vh;
    overflow: hidden;
    padding: 34px 28px 25px;
    color: #17171b;

    background:
        linear-gradient(135deg, rgba(255,255,255,.99), rgba(241,239,234,.98));

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

    box-shadow:
        0 45px 100px rgba(0,0,0,.55),
        0 12px 35px rgba(0,0,0,.25),
        inset 0 0 0 1px rgba(255,255,255,.35);

    transform-style: preserve-3d;
}

.invitation-inner::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -40%;
    left: -75%;
    width: 45%;
    height: 180%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    opacity: 0;
    pointer-events: none;
}

.gift-scene.opened .invitation-inner::before {
    animation: cardShine 1.35s cubic-bezier(.2,.8,.2,1) .55s forwards;
}

@keyframes cardShine {
    0% { left: -75%; opacity: 0; }
    15% { opacity: .9; }
    100% { left: 140%; opacity: 0; }
}

.invitation-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: .11;
    background-image:
        radial-gradient(rgba(30,30,35,.22) .5px, transparent .5px);
    background-size: 5px 5px;
    mix-blend-mode: multiply;
}

/* CARD TOP */

.invitation-top {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(20,20,25,.12);
}

.invite-date {
    font-size: 8px;
    letter-spacing: .22em;
    color: rgba(20,20,25,.55);
}

.invite-mark {
    font-family: "Cormorant Garamond", serif;
    font-size: 20px;
    color: rgba(20,20,25,.55);
}

/* HEADING */

.invitation-heading {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 35px 0 30px;
}

.invite-kicker {
    margin-bottom: 10px;
    font-size: 7px;
    letter-spacing: .3em;
    color: rgba(20,20,25,.48);
}

.invitation-heading h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(40px,10vw,54px);
    font-weight: 400;
    line-height: .88;
    letter-spacing: -.025em;
    color: #17171b;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.heading-line {
    width: 35px;
    height: 1px;
    margin: 20px auto 0;
    background: rgba(20,20,25,.3);
}

/* SCHEDULE */

.schedule {
    position: relative;
    z-index: 5;
    border-top: 1px solid rgba(20,20,25,.1);
}

.schedule-item {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(20,20,25,.1);
    transition: padding-left .3s ease, background .3s ease;
}

.schedule-item:hover {
    padding-left: 5px;
}

.schedule-time {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: #24242a;
}

.schedule-info span {
    display: block;
    margin-bottom: 4px;
    font-size: 7px;
    letter-spacing: .22em;
    color: rgba(20,20,25,.45);
}

.schedule-info p {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px;
    line-height: 1.15;
    color: #222228;
}

/* CHARACTERS */

.characters {
    position: relative;
    z-index: 5;
    padding: 28px 0 25px;
    text-align: center;
}

.characters-label {
    display: block;
    margin-bottom: 6px;
    font-size: 7px;
    letter-spacing: .25em;
    color: rgba(20,20,25,.42);
}

.characters h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 25px;
    font-weight: 400;
    color: #202026;
}

/* BOTTOM */

.invitation-bottom {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid rgba(20,20,25,.1);
    font-size: 6px;
    letter-spacing: .22em;
    color: rgba(20,20,25,.42);
}

.bottom-heart {
    font-size: 15px;
    letter-spacing: 0;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .date-page {
        padding: 22px 18px 80px;
    }

    .date-header {
        margin-top: 72px;
    }

    .date-title-wrap {
        gap: 9px;
    }

    .date-title-wrap h1 {
        font-size: clamp(68px,23vw,105px);
    }

    .date-index {
        font-size: 8px;
        margin-top: 4px;
    }

    .subtitle {
        margin-top: 20px;
        font-size: 21px;
    }

    .date-list {
        margin-top: 65px;
        gap: 12px;
    }

    .date-card {
        padding: 17px;
        border-radius: 18px;
    }

    .card-number {
        font-size: 48px;
    }

    .card-date {
        font-size: 7px;
        letter-spacing: .14em;
    }

    .card-content h2 {
        font-size: 21px;
    }

    .card-content p {
        font-size: 8px;
    }

    .card-arrow {
        top: 14px;
        right: 14px;
        width: 25px;
        height: 25px;
        font-size: 10px;
    }

    .gift-label {
        top: 8%;
    }

    .tap-text {
        bottom: 8%;
    }

    .giant-bow {
        width: 92vw;
        height: 60vh;
    }

    /* MOBILE BOW OPEN */
    .giant-bow.opening .bow-left {
        transform: translateX(-42%) translateY(-7%) rotate(-35deg) rotateY(22deg);
    }

    .giant-bow.opening .bow-right {
        transform: translateX(42%) translateY(-7%) rotate(35deg) rotateY(-22deg);
    }

    .giant-bow.opening .tail-left {
        transform: translateX(-28px) translateY(90px) rotate(19deg);
    }

    .giant-bow.opening .tail-right {
        transform: translateX(28px) translateY(90px) rotate(-19deg);
    }

    .gift-scene.opened .giant-bow {
        transform: translateY(-4px) scale(.72);
    }

    /* THE CARD IS ALWAYS CENTERED */
    .invitation {
        left: 50%;
        top: 50%;
        width: calc(100vw - 32px);
        max-height: 82vh;

        transform:
            translate3d(-50%,-50%,0)
            scale(.9)
            rotateX(8deg);

        filter:
            blur(4px)
            brightness(.84)
            drop-shadow(0 20px 50px rgba(0,0,0,.5));

        transition:
            opacity .55s ease,
            transform .75s cubic-bezier(.16,1,.3,1),
            filter .75s ease;

        animation: none !important;
    }

    .gift-scene.opened .invitation {
        transform:
            translate3d(-50%,-50%,0)
            scale(1)
            rotateX(0deg);

        opacity: 1;
        filter:
            blur(0)
            brightness(1)
            drop-shadow(0 25px 55px rgba(0,0,0,.5));

        animation: none !important;
    }

    .invitation-inner {
        max-height: 82vh;
        padding: 27px 22px 22px;
    }

    .invitation-heading {
        padding: 28px 0 24px;
    }

    .schedule-item {
        grid-template-columns: 55px 1fr;
        gap: 10px;
    }

    .schedule-info p {
        font-size: 17px;
    }
}

@media (max-width: 360px) {

    .date-page {
        padding-left: 14px;
        padding-right: 14px;
    }

    .date-list {
        gap: 9px;
    }

    .date-card {
        padding: 14px;
    }

    .card-number {
        font-size: 43px;
    }

    .card-content h2 {
        font-size: 19px;
    }

    .card-content p {
        display: none;
    }

    .invitation {
        width: calc(100vw - 24px);
    }

    .invitation-inner {
        padding-left: 19px;
        padding-right: 19px;
    }

    .invitation-heading h2 {
        font-size: 38px;
    }

    .schedule-info p {
        font-size: 16px;
    }
}

/* =========================================================
   TOUCH / REDUCED MOTION
   ========================================================= */

@media (hover: none) and (pointer: coarse) {
    .date-card:hover {
        transform: none;
    }

    .date-card:active {
        transform: scale(.96);
        box-shadow:
            0 10px 35px rgba(0,0,0,.4),
            0 0 35px rgba(110,100,180,.12);
    }

    .giant-bow:active {
        transform: scale(.97);
    }
}

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