:root {
    --bg: #fff8f5;
    --bg-soft: #fdeae3;
    --ink: #2b1e22;
    --ink-soft: #6b5560;
    --accent: #d4576a;
    --accent-soft: #f4b6c0;
    --rule: rgba(43, 30, 34, 0.12);
    --serif: "Cormorant Garamond", Georgia, serif;
    --script: "Dancing Script", "Brush Script MT", cursive;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse at top left, rgba(244, 182, 192, 0.35), transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(244, 182, 192, 0.25), transparent 55%);
    background-attachment: fixed;
}

/* ——— Floating hearts ——— */
.hearts {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.hearts span {
    position: absolute;
    bottom: -40px;
    color: var(--accent-soft);
    opacity: 0.55;
    animation: rise linear infinite;
    user-select: none;
}

@keyframes rise {
    from { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.6; }
    to   { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ——— Hero ——— */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    z-index: 1;
}

.eyebrow {
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--ink-soft);
    margin-bottom: 2rem;
}

.hero__title {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 0.9;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.hero__for {
    font-style: italic;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--ink-soft);
}

.hero__name {
    font-family: var(--script);
    font-weight: 700;
    font-size: clamp(5rem, 16vw, 11rem);
    color: var(--accent);
    line-height: 1;
    text-shadow: 0 2px 30px rgba(212, 87, 106, 0.18);
}

.hero__sub {
    margin-top: 1.5rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--ink-soft);
}

.hero__scroll {
    position: absolute;
    bottom: 2.5rem;
    width: 22px;
    height: 36px;
    border: 1.5px solid var(--ink-soft);
    border-radius: 12px;
    display: block;
}

.hero__scroll span {
    display: block;
    width: 2px;
    height: 6px;
    background: var(--ink-soft);
    margin: 6px auto 0;
    border-radius: 1px;
    animation: scroll 1.8s ease-in-out infinite;
}

@keyframes scroll {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(14px); opacity: 0; }
}

/* ——— Sections ——— */
.section {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 7rem 1.5rem 5rem;
    z-index: 1;
}

.section__title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 0.6rem;
    color: var(--ink);
}

.section__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: var(--accent);
    margin: 1rem auto 0;
}

.section__lede {
    text-align: center;
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--serif);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.section__lede code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--bg-soft);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.85em;
    font-style: normal;
}

/* ——— Letter ——— */
.letter__body {
    font-family: var(--serif);
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--ink);
    margin-top: 2.5rem;
}

.letter__body p {
    margin-bottom: 1.4rem;
}

.letter__body p:first-child {
    font-family: var(--script);
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1.8rem;
}

.letter__signoff {
    font-family: var(--script) !important;
    font-size: 1.8rem !important;
    color: var(--accent);
    text-align: right;
    margin-top: 2rem !important;
}

/* ——— Reasons ——— */
.reasons__list {
    list-style: none;
    margin-top: 2rem;
}

.reasons__list li {
    display: flex;
    gap: 1.5rem;
    align-items: baseline;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--rule);
}

.reasons__list li:last-child {
    border-bottom: none;
}

.reasons__list span {
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent);
    font-size: 1.4rem;
    min-width: 2.5rem;
}

.reasons__list p {
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1.5;
}

/* ——— Gallery ——— */
.gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.gallery__item {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-soft);
    transition: transform 0.4s ease;
}

.gallery__item:hover {
    transform: translateY(-4px);
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent-soft);
    font-size: 0.95rem;
    border: 1px dashed var(--accent-soft);
    border-radius: 4px;
}

/* ——— Timeline ——— */
.timeline__list {
    list-style: none;
    margin-top: 2rem;
    border-left: 1px solid var(--accent-soft);
    padding-left: 2rem;
}

.timeline__list li {
    position: relative;
    padding: 1.2rem 0 1.8rem;
}

.timeline__list li::before {
    content: "♥";
    position: absolute;
    left: -2.6rem;
    top: 1.2rem;
    color: var(--accent);
    background: var(--bg);
    width: 1.4rem;
    text-align: center;
    font-size: 0.9rem;
}

.timeline__date {
    display: block;
    font-family: var(--script);
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.timeline__list p {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink-soft);
    font-style: italic;
}

/* ——— Counter ——— */
.counter__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 2rem;
    text-align: center;
}

.counter__grid > div {
    padding: 1.5rem 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
}

.counter__grid strong {
    display: block;
    font-family: var(--serif);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--accent);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.counter__grid span {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ——— Footer ——— */
.footer {
    text-align: center;
    padding: 4rem 2rem 3rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-soft);
    position: relative;
    z-index: 1;
}

.footer__heart {
    color: var(--accent);
    display: inline-block;
    animation: beat 1.4s ease-in-out infinite;
}

@keyframes beat {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.25); }
}

/* ——— Reveal on scroll ——— */
.section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ——— Mobile ——— */
@media (max-width: 600px) {
    .counter__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .section {
        padding: 5rem 1.25rem 3rem;
    }
}

/* ════════════════════════════════════════════
   Lock page  —  sealed-letter login
   ════════════════════════════════════════════ */
.lock-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-image:
        radial-gradient(ellipse at top, rgba(244, 182, 192, 0.45), transparent 55%),
        radial-gradient(ellipse at bottom, rgba(255, 220, 180, 0.35), transparent 60%);
    background-attachment: fixed;
}

.lock-stage {
    position: relative;
    z-index: 2;
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.lock-stage__eyebrow {
    font-family: var(--sans);
    font-weight: 300;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

.lock-stage__title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 3.8vw, 1.8rem);
    color: var(--ink);
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.lock-stage__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    background: var(--accent);
    margin: 1rem auto 0;
    opacity: 0.6;
}

/* ——— Envelope ——— */
.envelope {
    width: clamp(260px, 70vw, 380px);
    margin: 0 auto;
    perspective: 1000px;
    transition: transform 0.4s ease;
}

.envelope__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.envelope__body,
.envelope__creases {
    filter: drop-shadow(0 8px 18px rgba(168, 70, 90, 0.18));
}

/* the glow that emerges from inside on unlock */
.envelope__glow {
    opacity: 0;
    transition: opacity 1s ease 0.55s;
}

/* the inner letter that rises into view on unlock */
.envelope__letter {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: translateY(28px) scale(0.92);
    opacity: 0;
    transition:
        transform 1s cubic-bezier(0.25, 1.4, 0.5, 1) 0.55s,
        opacity 0.6s ease 0.55s;
}

/* the flap pivots from its top edge */
.envelope__flap {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transition: transform 0.85s cubic-bezier(0.55, 0, 0.25, 1) 0.35s;
}

/* the wax seal — pulses, then fades */
.envelope__seal {
    transform-box: fill-box;
    transform-origin: center;
    transition:
        transform 0.4s ease,
        opacity 0.4s ease 0.2s;
}

.envelope--open .envelope__seal {
    transform: scale(1.25) rotate(-8deg);
    opacity: 0;
}

.envelope--open .envelope__flap {
    transform: rotateX(-175deg);
}

.envelope--open .envelope__glow {
    opacity: 1;
}

.envelope--open .envelope__letter {
    transform: translateY(-12px) scale(1);
    opacity: 1;
}

/* shake on wrong code */
.envelope--shake {
    animation: env-shake 0.5s;
}

@keyframes env-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    15%      { transform: translateX(-10px) rotate(-1deg); }
    35%      { transform: translateX(10px) rotate(1deg); }
    55%      { transform: translateX(-7px) rotate(-0.6deg); }
    75%      { transform: translateX(7px) rotate(0.6deg); }
}

/* ——— Form ——— */
.lock-stage__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.lock-stage__hint {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink-soft);
    margin-bottom: 0.2rem;
}

.lock-stage__input-wrap {
    position: relative;
    width: min(220px, 80%);
}

.lock-stage__input-wrap input {
    width: 100%;
    font-family: var(--serif);
    font-size: 1.8rem;
    text-align: center;
    padding: 0.5rem 0.5rem 0.6rem;
    background: transparent;
    color: var(--accent);
    border: none;
    border-bottom: 1px solid var(--accent-soft);
    outline: none;
    transition: border-color 0.25s;
    -moz-appearance: textfield;
    appearance: textfield;
}

.lock-stage__input-wrap input::-webkit-outer-spin-button,
.lock-stage__input-wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lock-stage__input-wrap input::placeholder {
    color: var(--accent-soft);
    opacity: 0.6;
}

.lock-stage__input-wrap input:focus {
    border-bottom-color: var(--accent);
}

.lock-stage__input-wrap::after {
    content: "♥";
    position: absolute;
    bottom: -1.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--accent);
    font-size: 0.6rem;
    opacity: 0.5;
}

.lock-stage__submit {
    margin-top: 0.6rem;
    font-family: var(--sans);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #e2738a, #a8334a);
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s;
    box-shadow: 0 6px 18px rgba(168, 51, 74, 0.28);
}

.lock-stage__submit:hover {
    filter: brightness(1.07);
    box-shadow: 0 8px 24px rgba(168, 51, 74, 0.36);
}

.lock-stage__submit:active {
    transform: translateY(1px) scale(0.99);
}

.lock-stage__submit:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

.lock-stage__error {
    margin-top: 1rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--accent);
    font-size: 1rem;
    min-height: 1.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.lock-stage__error.show {
    opacity: 1;
}

.lock-stage__success {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease 0.7s;
    z-index: 5;
}

.lock-stage__success.show {
    opacity: 1;
}

.lock-stage__success span {
    font-family: var(--script);
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--accent);
    text-shadow: 0 4px 30px rgba(255, 255, 255, 0.7);
}

/* ——— Fade-in on first load ——— */
.lock-stage__inner {
    animation: rise-in 1.1s cubic-bezier(0.25, 1, 0.4, 1) both;
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .lock-stage__title { font-size: 1.2rem; }
    .lock-stage__hint  { font-size: 0.95rem; }
}