/* =========================================================
   Happy Birthday, Shaheed Sir
   A premium digital birthday card
   ---------------------------------------------------------
   1.  Variables
   2.  Reset
   3.  Base styles
   4.  Typography
   5.  Landing page
   6.  Decorative elements
   7.  Hero animations
   8.  Buttons / CTA
   9.  Party popper
   10. Page transition
   11. Wishes page
   12. Video container
   13. Closing / footer
   14. Responsive styles
   15. Reduced motion
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */
:root {
    /* Palette */
    --cream:        #FCF1D0;
    --royal-navy:   #22396F;
    --deep-navy:    #0D1C42;
    --dark-navy:    #010736;

    /* Derived tints (kept strictly within the palette) */
    --cream-soft:   rgba(252, 241, 208, 0.78);
    --cream-muted:  rgba(252, 241, 208, 0.62);
    --cream-faint:  rgba(252, 241, 208, 0.14);
    --navy-soft:    rgba(34, 57, 111, 0.72);
    --navy-muted:   rgba(34, 57, 111, 0.52);
    --navy-faint:   rgba(34, 57, 111, 0.14);

    /* Fonts */
    --font-sans:    "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-script:  "Great Vibes", "Snell Roundhand", "Apple Chancery", cursive;

    /* Type scale */
    --fs-eyebrow:   clamp(0.68rem, 1.6vw, 0.82rem);
    --fs-title:     clamp(2.45rem, 8.4vw, 6rem);
    --fs-title-sm:  clamp(1.85rem, 5.6vw, 3.6rem);
    --fs-body:      clamp(0.98rem, 2.1vw, 1.22rem);
    --fs-small:     clamp(0.84rem, 1.7vw, 0.98rem);

    /* Video — native pixel size of the film, drives the card's shape */
    --video-w:      478;
    --video-h:      850;

    /* Rhythm */
    --gutter:       clamp(1.25rem, 5vw, 4rem);
    --radius:       18px;
    --radius-pill:  999px;

    /* Motion */
    --ease-out:     cubic-bezier(0.22, 0.72, 0.28, 1);
    --ease-curtain: cubic-bezier(0.76, 0, 0.24, 1);
    --curtain-dur:  640ms;
}


/* =========================================================
   2. RESET
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--royal-navy);
    color: var(--cream);
}


/* =========================================================
   3. BASE STYLES
   ========================================================= */
body {
    min-height: 100svh;
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.page--landing {
    background-color: var(--cream);
    color: var(--deep-navy);
}

.page--wishes {
    background-color: var(--dark-navy);
    color: var(--cream);
}

/* Keyboard focus — always visible, never on mouse click */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.page--landing :focus-visible { outline-color: var(--royal-navy); }
.page--wishes  :focus-visible { outline-color: var(--cream); }


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */
h1 {
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 2vw, 1rem);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--navy-muted);
}

.page--wishes .hero__eyebrow {
    color: var(--cream-muted);
}

.hero__eyebrow-rule {
    display: block;
    width: clamp(28px, 7vw, 58px);
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}


/* =========================================================
   5. LANDING PAGE
   ========================================================= */
.hero {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100svh;
    padding: clamp(3.5rem, 10vh, 6rem) var(--gutter);
}

.hero__inner {
    width: 100%;
    max-width: 820px;
    text-align: center;
}

.hero__title {
    margin-top: clamp(1.1rem, 3vh, 1.9rem);
    font-size: var(--fs-title);
    color: var(--deep-navy);
}

.hero__title-line {
    display: block;
}

/* "Happy Birthday," — flowing script.
   Script faces read optically smaller than a geometric sans at the same
   size, so it is scaled up; the tight tracking inherited from h1 is reset
   because negative tracking collides the joined letterforms. */
.hero__title-line--script {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: 1.34em;
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--deep-navy);
    padding-bottom: 0.06em;   /* breathing room for the descenders */
}

/* "Shaheed Sir!" — the anchor, in Poppins */
.hero__title-line--name {
    margin-top: 0.06em;
    color: var(--royal-navy);
}

.hero__message {
    max-width: 34ch;
    margin: clamp(1.3rem, 4vh, 2.1rem) auto 0;
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: 1.72;
    color: var(--navy-soft);
    text-wrap: pretty;
}

.hero__signature {
    margin-top: clamp(0.9rem, 2.4vh, 1.3rem);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--navy-muted);
}

.hero .btn {
    margin-top: clamp(2rem, 5.5vh, 3.1rem);
}


/* =========================================================
   6. DECORATIVE ELEMENTS
   ========================================================= */
.decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    contain: layout paint style;
}

/* --- Thin geometric rings --- */
.decor__ring {
    position: absolute;
    border: 1px solid var(--navy-faint);
    border-radius: 50%;
    opacity: 0;
    animation: decor-in 1100ms var(--ease-out) 120ms forwards;
}

.decor--dark .decor__ring {
    border-color: var(--cream-faint);
}

.decor__ring--one {
    width: min(56vw, 620px);
    aspect-ratio: 1;
    top: -18vh;
    right: -14vw;
}

.decor__ring--two {
    width: min(44vw, 480px);
    aspect-ratio: 1;
    bottom: -16vh;
    left: -12vw;
}

/* --- Hairline verticals --- */
.decor__line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    opacity: 0;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--navy-faint) 28%,
        var(--navy-faint) 72%,
        transparent
    );
    animation: decor-in 1200ms var(--ease-out) 220ms forwards;
}

.decor--dark .decor__line {
    background: linear-gradient(
        to bottom,
        transparent,
        var(--cream-faint) 28%,
        var(--cream-faint) 72%,
        transparent
    );
}

.decor__line--left  { left: clamp(1.5rem, 8vw, 8rem); }
.decor__line--right { right: clamp(1.5rem, 8vw, 8rem); }

/* --- Four point sparkles --- */
.spark {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--royal-navy);
    opacity: 0;
    clip-path: polygon(
        50% 0%, 61% 39%, 100% 50%, 61% 61%,
        50% 100%, 39% 61%, 0% 50%, 39% 39%
    );
    animation:
        decor-in 900ms var(--ease-out) forwards,
        twinkle 5.5s var(--ease-out) infinite;
}

.decor--dark .spark {
    background: var(--cream);
}

.spark--a { top: 16%;  left: 13%;  width: 16px; height: 16px; animation-delay: 320ms, 900ms;  }
.spark--b { top: 26%;  right: 17%; width: 11px; height: 11px; animation-delay: 420ms, 1700ms; }
.spark--c { bottom: 22%; left: 20%; width: 12px; height: 12px; animation-delay: 520ms, 2500ms; }
.spark--d { bottom: 17%; right: 14%; width: 17px; height: 17px; animation-delay: 620ms, 1300ms; }
.spark--e { top: 46%;  left: 6%;   width: 9px;  height: 9px;  animation-delay: 720ms, 3100ms; }
.spark--f { top: 58%;  right: 7%;  width: 10px; height: 10px; animation-delay: 820ms, 2100ms; }

/* --- Soft glowing dots --- */
.dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--royal-navy);
    opacity: 0;
    box-shadow: 0 0 0 6px var(--navy-faint);
    animation:
        decor-in 900ms var(--ease-out) forwards,
        drift 9s ease-in-out infinite;
}

.decor--dark .dot {
    background: var(--cream);
    box-shadow: 0 0 0 6px var(--cream-faint);
}

.dot--a { top: 34%; left: 26%; animation-delay: 560ms, 1000ms; }
.dot--b { top: 70%; right: 24%; animation-delay: 660ms, 2400ms; }
.dot--c { top: 12%; left: 52%; animation-delay: 760ms, 3600ms; }

@keyframes decor-in {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes twinkle {
    0%, 100%  { opacity: 0.95; transform: scale(1) rotate(0deg); }
    50%       { opacity: 0.35; transform: scale(0.72) rotate(35deg); }
}

@keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.85; }
    50%      { transform: translate3d(0, -14px, 0); opacity: 0.4; }
}


/* =========================================================
   7. HERO ANIMATIONS (staged reveal)
   ========================================================= */
/* `backwards` fill holds the hidden state during the delay, then releases the
   element back to its natural style — so hover transforms are never locked
   behind a finished animation and no layer stays promoted. */
.reveal {
    animation: reveal-up 850ms var(--ease-out) backwards;
}

.reveal[data-reveal="1"] { animation-delay: 380ms; }
.reveal[data-reveal="2"] { animation-delay: 500ms; }
.reveal[data-reveal="3"] { animation-delay: 660ms; }
.reveal[data-reveal="4"] { animation-delay: 790ms; }
.reveal[data-reveal="5"] { animation-delay: 920ms; }
.reveal[data-reveal="6"] { animation-delay: 1050ms; }

@keyframes reveal-up {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
}


/* =========================================================
   8. BUTTONS / CTA
   ========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    min-height: 56px;
    padding: 1rem 2.1rem;
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: clamp(0.95rem, 1.9vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.015em;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 320ms var(--ease-out),
        box-shadow 320ms var(--ease-out),
        background-color 320ms var(--ease-out),
        border-color 320ms var(--ease-out),
        color 320ms var(--ease-out);
}

/* --- Primary (cream page) --- */
.btn--primary {
    background-color: var(--royal-navy);
    color: var(--cream);
    border: 1px solid var(--royal-navy);
    box-shadow: 0 10px 26px -12px rgba(1, 7, 54, 0.55);
}

.btn--primary:hover {
    background-color: var(--deep-navy);
    border-color: var(--deep-navy);
    box-shadow: 0 18px 38px -14px rgba(1, 7, 54, 0.62);
    transform: translate3d(0, -3px, 0) scale(1.025);
}

.btn--primary:active {
    transform: translate3d(0, -1px, 0) scale(0.99);
}

/* --- Ghost (dark page, back link) --- */
.btn--ghost {
    min-height: 46px;
    padding: 0.6rem 1.35rem;
    background-color: transparent;
    color: var(--cream-soft);
    border: 1px solid var(--cream-faint);
    font-size: var(--fs-small);
    font-weight: 500;
}

.btn--ghost:hover {
    color: var(--cream);
    background-color: var(--deep-navy);
    border-color: var(--royal-navy);
    transform: translate3d(0, -2px, 0);
}

.btn__label {
    white-space: nowrap;
}

/* --- Icon only: a round tap target with no label --- */
.btn--icon {
    width: 46px;
    min-width: 46px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
}

/* --- Animated arrow: one glyph slides out, a ghost follows in --- */
.btn__arrow {
    position: relative;
    display: inline-block;
    width: 1.35em;
    height: 1em;
    overflow: hidden;
    line-height: 1;
}

.btn__arrow-glyph {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    transition: transform 340ms var(--ease-out);
}

.btn__arrow-glyph--ghost {
    transform: translate3d(-120%, 0, 0);
}

.btn:hover .btn__arrow-glyph        { transform: translate3d(120%, 0, 0); }
.btn:hover .btn__arrow-glyph--ghost { transform: translate3d(0, 0, 0); }

/* Back arrow points the other way */
.btn__arrow--back .btn__arrow-glyph--ghost { transform: translate3d(120%, 0, 0); }
.btn:hover .btn__arrow--back .btn__arrow-glyph        { transform: translate3d(-120%, 0, 0); }
.btn:hover .btn__arrow--back .btn__arrow-glyph--ghost { transform: translate3d(0, 0, 0); }


/* =========================================================
   9. PARTY POPPER (Lottie one-shot)
   ========================================================= */
.popper {
    position: fixed;
    inset: 0;
    z-index: 80;              /* above the hero, below the curtain */
    pointer-events: none;     /* must never intercept the CTA */
    opacity: 1;
    contain: layout paint style;
    transition: opacity 700ms var(--ease-out);
}

/* Faded out once the burst has played, then removed from the DOM. */
.popper.is-spent {
    opacity: 0;
}

.popper svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* =========================================================
   10. PAGE TRANSITION (cinematic curtain)
   ========================================================= */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
}

.curtain__panel {
    position: absolute;
    inset: 0;
    background-color: var(--dark-navy);
    transform: translate3d(0, -100%, 0);
    will-change: transform;
}

/* A small cream diamond that breathes at the centre of the sweep */
.curtain__seal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1px solid var(--cream);
    opacity: 0;
    transform: rotate(45deg) scale(0.4);
}

/* Entering: the curtain lifts away, revealing the page */
.page:not(.is-leaving) .curtain__panel {
    animation: curtain-lift var(--curtain-dur) var(--ease-curtain) both;
}

.page:not(.is-leaving) .curtain__seal {
    animation: seal-out 420ms var(--ease-out) both;
}

/* Leaving: the curtain sweeps in and covers the page */
.page.is-leaving .curtain__panel {
    animation: curtain-drop var(--curtain-dur) var(--ease-curtain) both;
}

.page.is-leaving .curtain__seal {
    animation: seal-in 520ms var(--ease-out) 140ms both;
}

/* The page itself softly recedes underneath the curtain */
.page.is-leaving .hero,
.page.is-leaving .wishes,
.page.is-leaving .topbar {
    transition: opacity 400ms var(--ease-out), transform 520ms var(--ease-out);
    opacity: 0;
    transform: translate3d(0, -14px, 0);
}

.page.is-leaving .decor {
    transition: opacity 360ms var(--ease-out);
    opacity: 0;
}

@keyframes curtain-lift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -100%, 0); }
}

@keyframes curtain-drop {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes seal-in {
    0%   { opacity: 0; transform: rotate(0deg) scale(0.35); }
    60%  { opacity: 1; transform: rotate(45deg) scale(1); }
    100% { opacity: 0.85; transform: rotate(45deg) scale(1.15); }
}

@keyframes seal-out {
    0%   { opacity: 0.85; transform: rotate(45deg) scale(1.1); }
    100% { opacity: 0; transform: rotate(90deg) scale(0.4); }
}


/* =========================================================
   11. WISHES PAGE
   ========================================================= */
.topbar {
    position: relative;
    z-index: 3;
    padding: clamp(1.25rem, 3.5vw, 2.25rem) var(--gutter) 0;
}

.wishes {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(1rem, 3vh, 1.75rem) var(--gutter) clamp(3rem, 8vh, 5rem);
}

.wishes__head {
    width: 100%;
    max-width: 780px;
    text-align: center;
}

.wishes__title {
    margin-top: clamp(1rem, 2.6vh, 1.6rem);
    font-size: var(--fs-title-sm);
    font-weight: 600;
    color: var(--cream);
}

.wishes__subtitle {
    max-width: 44ch;
    margin: clamp(0.9rem, 2.4vh, 1.4rem) auto 0;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--cream-soft);
    text-wrap: balance;
}

.br-lg { display: none; }


/* =========================================================
   12. VIDEO CONTAINER
   ========================================================= */
.video {
    width: 100%;
    margin-top: clamp(2.25rem, 6vh, 3.75rem);
}

/* The film is portrait, so the card is bounded by viewport HEIGHT on
   desktop and by width on phones. Capped at the video's native width so
   it is never upscaled into softness. */
.video__frame {
    position: relative;
    width: min(92vw, 478px, calc(72vh * var(--video-w) / var(--video-h)));
    width: min(92vw, 478px, calc(72svh * var(--video-w) / var(--video-h)));
    margin-inline: auto;
    padding: clamp(6px, 1.1vw, 12px);
    background-color: var(--deep-navy);
    border: 1px solid var(--royal-navy);
    border-radius: calc(var(--radius) + 8px);
    box-shadow:
        0 30px 70px -32px rgba(1, 7, 54, 0.95),
        0 0 0 1px rgba(252, 241, 208, 0.04);
}

.video__ratio {
    position: relative;
    aspect-ratio: var(--video-w) / var(--video-h);
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--dark-navy);
}

.video__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background-color: var(--dark-navy);
}

/* Shown only when the browser refused sound and the film started muted.
   Sits at the top so it never covers the native controls. */
.video__sound {
    position: absolute;
    top: clamp(0.6rem, 2.5vw, 1rem);
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--royal-navy);
    border-radius: var(--radius-pill);
    background-color: var(--cream);
    color: var(--dark-navy);
    font-family: inherit;
    font-size: clamp(0.8rem, 2.6vw, 0.9rem);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(1, 7, 54, 0.85);
    transform: translate3d(-50%, 0, 0);
    transition: transform 280ms var(--ease-out), background-color 280ms var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}

.video__sound:hover {
    border-color: var(--deep-navy);
    transform: translate3d(-50%, -2px, 0);
}

.video__sound svg {
    flex: none;
}

/* Fallback shown when no video ID has been set yet */
.video__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    color: var(--cream-muted);
    font-size: var(--fs-small);
}

.video__placeholder code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    color: var(--cream);
    background-color: var(--royal-navy);
    padding: 0.15em 0.5em;
    border-radius: 6px;
}


/* =========================================================
   13. CLOSING / FOOTER
   ========================================================= */
.closing {
    margin-top: clamp(2.5rem, 7vh, 4rem);
    text-align: center;
}

.closing__rule {
    display: block;
    width: 52px;
    height: 1px;
    margin: 0 auto clamp(1.25rem, 3vh, 1.85rem);
    background-color: var(--royal-navy);
}

.closing__line {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--cream);
}

.closing__heart {
    color: var(--cream);
    opacity: 0.9;
}

.closing__sub {
    margin-top: 0.55rem;
    font-size: var(--fs-small);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cream-muted);
}


/* =========================================================
   14. RESPONSIVE STYLES
   ========================================================= */

/* --- Large screens: let the headline breathe --- */
@media (min-width: 1024px) {
    .br-lg { display: block; }

    .hero__inner { max-width: 900px; }
}

/* --- Tablet --- */
@media (max-width: 768px) {
    .decor__line--left  { left: 1.1rem; }
    .decor__line--right { right: 1.1rem; }

}

/* --- Mobile: fewer, smaller decorations --- */
@media (max-width: 600px) {
    :root { --radius: 14px; }

    .decor__line,
    .spark--e,
    .spark--f,
    .dot--c {
        display: none;
    }

    .spark { width: 11px; height: 11px; }
    .spark--a { width: 13px; height: 13px; }
    .spark--d { width: 13px; height: 13px; }

    .decor__ring--one { width: 78vw; top: -12vh; right: -26vw; }
    .decor__ring--two { width: 66vw; bottom: -10vh; left: -24vw; }

    .hero__eyebrow { letter-spacing: 0.26em; }

    .hero__title-line--script { font-size: 1.24em; }

    .hero__message { max-width: 30ch; }

    .btn--primary {
        width: 100%;
        max-width: 340px;
        padding: 1rem 1.5rem;
    }

    .video__frame {
        width: min(94vw, calc(66svh * var(--video-w) / var(--video-h)));
        padding: 5px;
    }
}

/* --- Very small phones (320px) --- */
@media (max-width: 360px) {
    .dot--b { display: none; }

    .hero__eyebrow { letter-spacing: 0.2em; }

    .btn--ghost { padding: 0.55rem 1rem; }
}

/* --- Short landscape screens --- */
@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: auto; padding-block: 3rem; }

    .hero .btn { margin-top: 1.5rem; }

    .decor__ring { display: none; }
}

/* --- Devices without hover (no arrow animation on tap) --- */
@media (hover: none) {
    .btn:hover {
        transform: none;
    }

    .btn:hover .btn__arrow-glyph        { transform: translate3d(0, 0, 0); }
    .btn:hover .btn__arrow-glyph--ghost { transform: translate3d(-120%, 0, 0); }
}


/* =========================================================
   15. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .decor__ring,
    .decor__line,
    .spark,
    .dot {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .curtain,
    .popper {
        display: none;
    }

    .btn:hover {
        transform: none;
    }
}