/* ==========================================================================
   ცოტნე & ანკა / Tsotne & Anka, wedding invitation styles.
   Loaded by index.html; every class it uses lives here. Mobile-first, the
   phone is the only real target (769px+ hands over to .mobile-prompt).

   1. Tokens + fonts      6. Hero (paper, paint canvas, names)
   2. Base + scrollbar    7. Sheets, invitation line, countdown
   3. Scroll lock         8. Schedule, 8b. RSVP
   4. Loader              9. Footer + credit
   5. Envelope           10. Reveal, reduced motion, breakpoints
   ========================================================================== */

/* ==========================================================================
   1. TOKENS + FONTS
   Palette is lifted from the painting: its cotton paper, the groom's chokha
   green as ink, autumn rust as the single accent.
   ========================================================================== */
:root {
    --vh: 1vh;

    --paper: #f8ecdc;
    --paper-deep: #f9efe2;   /* multiplied over paper.jpg, lands one step deeper */
    --ink: #2f3b31;
    --ink-soft: #5e6a5d;
    --rust: #a3482b;
    --env: #3a483c;
    --env-ivory: #efe6d3;

    /* The rounded top lip that makes each section read as a sheet of paper
       laid over the one before it. Used as both radius and negative margin. */
    --lip: 30px;

    --ease-paper: cubic-bezier(0.65, 0, 0.25, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* font-display: block is safe only because the loader covers the block
   period, both faces are preloaded in <head>. */
@font-face {
    font-family: 'Vardi';
    src: url('fonts/vardi.woff2') format('woff2');
    font-weight: 400;
    font-display: block;
}

@font-face {
    font-family: 'Ucnobi';
    src: url('fonts/ucnobi.woff2') format('woff2');
    font-weight: 400;
    font-display: block;
}

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

html,
body {
    overscroll-behavior-y: none;
}

html {
    -webkit-text-size-adjust: 100%;
    background-color: var(--paper);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 1.2s ease;
}

html.is-open {
    scrollbar-color: rgba(94, 106, 93, 0.45) var(--paper);
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background-color: var(--paper);
}

::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
    transition: background-color 1.2s ease;
}

html.is-open ::-webkit-scrollbar-thumb {
    background-color: rgba(94, 106, 93, 0.45);
}

body {
    min-height: 100vh;
    font-family: 'Ucnobi', 'Noto Serif Georgian', Georgia, serif;
    color: var(--ink);
    background-color: var(--paper);
    background-image: url('paper.jpg');
    background-size: 256px 256px;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

img,
canvas {
    display: block;
}

/* ==========================================================================
   3. SCROLL LOCK
   Never position:fixed / overflow:hidden on the document: Chrome iOS opened
   from a chat app freezes its viewport short. script.js traps the gesture.
   ========================================================================== */
html.is-locked,
html.is-locked body {
    overscroll-behavior: none;
    touch-action: none;
}

/* ==========================================================================
   4. LOADER
   ========================================================================== */
.loader {
    position: fixed;
    inset: 0;
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--env);
    transition: opacity 0.7s ease;
}

.loader.is-done {
    opacity: 0;
    pointer-events: none;
}

.loader {
    flex-direction: column;
    gap: 14px;
}

.loader__track {
    width: 150px;
    height: 2px;
    overflow: hidden;
    border-radius: 1px;
    background-color: rgba(239, 230, 211, 0.16);
}

/* Filled by script.js via transform, never width, so it stays on the
   compositor while images decode. */
.loader__bar {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--env-ivory);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* System serif on purpose: the web fonts are still in their block period
   while this is on screen, and would render the figure invisible. */
.loader__pct {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: rgba(239, 230, 211, 0.6);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. ENVELOPE
   Full-bleed overlay, inset 0 reaches the real bottom on its own (do not
   force a height). The overlay itself never moves; only the flaps turn,
   each on its own outer edge, toward the guest. script.js drives them with
   the Web Animations API, so these are the resting (closed) states.
   ========================================================================== */
.envelope {
    position: fixed;
    inset: 0;
    z-index: 10000;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

.envelope.is-gone {
    display: none;
}

.envelope canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.env__flap {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Hinges: every flap folds out over the screen edge it is attached to. */
.env__flap--top    { transform-origin: 50% 0; }
.env__flap--bottom { transform-origin: 50% 100%; }
.env__flap--left   { transform-origin: 0 50%; }
.env__flap--right  { transform-origin: 100% 50%; }

.env__shade {
    opacity: 0;
}

.env__names {
    position: absolute;
    left: 0;
    right: 0;
    top: 67%;
    font-family: 'Vardi', serif;
    font-size: 40px;
    line-height: 1.2;
    text-align: center;
    color: var(--env-ivory);
    opacity: 0.88;
}

.env__names .amp {
    color: #d88a64;
}

.env__hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 80%;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-align: center;
    color: rgba(239, 230, 211, 0.6);
    pointer-events: none;
}

/* ==========================================================================
   6. HERO
   The paint canvas is sized by script.js to the hero box; --art-* is the
   painting's rectangle inside it (shared with the no-JS still).
   ========================================================================== */
.page {
    position: relative;
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    --art-x: 0px;
    --art-y: 18%;
    --art-w: 100%;
    --art-h: 82%;
}

.vh-lock .hero {
    min-height: calc(var(--vh) * 100);
}

.hero__paint {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero__art--still {
    display: none;
    position: absolute;
    left: var(--art-x);
    top: var(--art-y);
    width: var(--art-w);
    height: var(--art-h);
}

.hero__text {
    position: relative;
    z-index: 2;
    padding: calc(var(--vh) * 6.5) 16px 0;
    text-align: center;
}

/* Once the brush paints the names into the canvas, the DOM copy stays for
   screen readers only. */
.hero.has-canvas-text .hero__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hero__names {
    font-family: 'Vardi', 'Ucnobi', serif;
    font-weight: 400;
    font-size: 54px;
    line-height: 1.25;
    color: var(--ink);
    white-space: nowrap;
}

.hero__names .amp,
.foot__names .amp {
    color: var(--rust);
}

.hero__date {
    margin-top: 6px;
    font-size: 15px;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}
/* ==========================================================================
   7. SHEETS
   Every section below the hero is a sheet of paper laid over the one before
   it, the ucha-megi build: a rounded top lip, an upward shadow and a negative
   margin so it rides over its neighbour. Painting order is DOM order, later
   on top, which is exactly what the overlap needs. Sheets are opaque, so the
   separation is carried by the fold, the shadow and the step in paper tone.
   ========================================================================== */
.sheet {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--lip) * -1);
    padding: 58px 24px 64px;
    border-top-left-radius: var(--lip);
    border-top-right-radius: var(--lip);
    background-color: var(--paper);
    background-image: url('paper.jpg');
    background-size: 256px 256px;
    box-shadow: 0 -14px 32px rgba(92, 74, 48, 0.13);
}

/* Catches the light along the lip, so the fold still reads where the sheet
   underneath is nearly the same tone. */
.sheet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 11%;
    right: 11%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.75);
}

.sheet--deep {
    background-color: var(--paper-deep);
    background-blend-mode: multiply;
}

.sheet__inner {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
}

.sheet__title {
    font-family: 'Vardi', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.25;
    color: var(--ink);
}

/* Grows out of the centre once the heading lands, which ties the rule to
   the title instead of reading as a divider that was already there. */
.sheet__rule {
    display: block;
    width: 56px;
    height: 1px;
    margin: 14px auto 0;
    background-color: var(--rust);
    opacity: 0.7;
}

.sheet__rule.reveal {
    transform: scaleX(0);
    transition: opacity 1s ease 0.3s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.sheet__rule.reveal.is-in {
    transform: scaleX(1);
}

/* ---- invitation line ---- */
.note {
    padding-top: 74px;
    padding-bottom: 72px;
}

.note__text {
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink);
}

.note__sign {
    margin-top: 22px;
    font-family: 'Vardi', serif;
    font-size: 30px;
    color: var(--rust);
}

/* ---- countdown ---- */
.count__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 32px;
}

.count__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.count__cell + .count__cell {
    border-left: 1px solid rgba(94, 106, 93, 0.22);
}

.count__num {
    font-size: 34px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.count__unit {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* ==========================================================================
   8. SCHEDULE
   ========================================================================== */
.day {
    padding-bottom: 84px;
}

.day__list {
    margin-top: 30px;
    list-style: none;
    text-align: left;
}

.day__item {
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: baseline;
    padding: 18px 0;
}

.day__item + .day__item {
    border-top: 1px solid rgba(94, 106, 93, 0.18);
}

.day__time {
    font-size: 24px;
    color: var(--rust);
    font-variant-numeric: tabular-nums;
}

.day__what {
    font-size: 19px;
    line-height: 1.4;
    color: var(--ink);
}

.day__where {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ==========================================================================
   8b. RSVP
   Shape rule for the page: sheets carry the 30px lip, every control a guest
   presses (choices, the send button) is a full pill, text fields are a
   single ink underline. Labels sit above inputs, errors below.
   ========================================================================== */
.rsvp {
    padding-bottom: 84px;
}

.rsvp__lead {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
}

.rsvp__form {
    margin-top: 30px;
    text-align: left;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.field__label {
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

/* 16px stops iOS zooming the page on focus. */
.field__input {
    width: 100%;
    padding: 8px 2px 10px;
    border: 0;
    border-bottom: 1px solid rgba(47, 59, 49, 0.35);
    border-radius: 0;
    background-color: transparent;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.3s ease;
}

.field__input:focus {
    border-bottom-color: var(--rust);
}

.field__error {
    min-height: 0;
    font-size: 13px;
    color: #9c3a1f;
}

.field__error:empty {
    display: none;
}

.pills {
    display: grid;
    gap: 10px;
}

.pills--two  { grid-template-columns: 1fr 1fr; }
.pills--five { grid-template-columns: repeat(5, 1fr); gap: 8px; }

.pill {
    position: relative;
    display: block;
    cursor: pointer;
}

.pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill span {
    display: block;
    padding: 11px 6px;
    border: 1px solid rgba(47, 59, 49, 0.3);
    border-radius: 999px;
    font-size: 16px;
    text-align: center;
    color: var(--ink);
    background-color: rgba(255, 252, 246, 0.5);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.pill:active span {
    transform: scale(0.97);
}

.pill input:checked + span {
    border-color: var(--env);
    background-color: var(--env);
    color: var(--env-ivory);
}

.pill input:focus-visible + span {
    outline: 2px solid var(--rust);
    outline-offset: 2px;
}

/* Party size only matters for a yes. */
.rsvp__count {
    transition: opacity 0.3s ease;
}

.rsvp__count.is-off {
    display: none;
}

.rsvp__btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 15px 20px;
    border: 0;
    border-radius: 999px;
    background-color: var(--rust);
    font-family: inherit;
    font-size: 17px;
    letter-spacing: 0.04em;
    color: #fffaf2;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.25s ease, transform 0.15s ease, opacity 0.25s ease;
}

.rsvp__btn:active {
    transform: scale(0.98);
}

.rsvp__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.rsvp__status {
    margin-top: 14px;
    min-height: 22px;
    font-size: 14px;
    text-align: center;
    color: var(--ink-soft);
}

.rsvp__status.is-error {
    color: #9c3a1f;
}

.rsvp__done {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--ink);
}

/* ==========================================================================
   9. FOOTER + CREDIT
   The last sheet closes on the envelope green the invitation opened with.
   ========================================================================== */
.sheet--foot {
    padding: 52px 16px calc(40px + env(safe-area-inset-bottom));
    text-align: center;
    background-color: var(--env);
    background-image: url('envelope.jpg');
    color: var(--env-ivory);
    box-shadow: 0 -14px 32px rgba(40, 52, 40, 0.22);
}

.sheet--foot::before {
    background-color: rgba(239, 230, 211, 0.16);
}

.foot__names {
    font-family: 'Vardi', serif;
    font-size: 36px;
}

.foot .amp {
    color: #d88a64;
}

.foot__date {
    margin-top: 6px;
    font-size: 14px;
    letter-spacing: 0.16em;
    opacity: 0.7;
}

.credit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 30px;
    font-size: 13px;
    color: var(--env-ivory);
    text-decoration: none;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.credit:hover,
.credit:focus-visible {
    opacity: 0.75;
}

.credit__logo {
    width: 16px;
    height: auto;
    filter: brightness(0) invert(0.92) sepia(0.2);
}

/* ==========================================================================
   10. REVEAL, REDUCED MOTION, BREAKPOINTS
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.reveal.is-in {
    opacity: 1;
    transform: none;
}

.mobile-prompt {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        transition: opacity 0.4s ease;
        transform: none;
    }
}

@media (min-width: 481px) {
    .hero__names { font-size: 64px; }
    .sheet__inner { max-width: 380px; }
    .note__text   { font-size: 19px; }
}

@media (min-width: 769px) {
    .mobile-prompt {
        position: fixed;
        inset: 0;
        z-index: 20000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 30px;
        background-color: var(--paper);
        text-align: center;
    }

    .mobile-prompt__icon {
        width: 52px;
        height: auto;
        margin-bottom: 10px;
        opacity: 0.8;
    }

    .mobile-prompt p {
        font-size: 17px;
        letter-spacing: 0.04em;
        color: var(--ink-soft);
    }

    .page,
    .envelope,
    .loader {
        display: none;
    }
}