/* =====================================================================
   VCM LOGIN SCREEN  -  animated devotional welcome / sign-in
   (markup + behaviour: auth/auth-login-screen.js)
   ---------------------------------------------------------------------
   Everything here is scoped under .vc-login, so no other screen can be
   affected. The screen is a DOM overlay inside .app (same model as the
   Settings / About popups), so on desktop it sits INSIDE the centred
   phone frame, and nav/back-nav.js treats it as the top-most layer.

   STAGED REVEAL
   Every animated element carries class .vc-reveal plus a data-step
   name. The delay of each step is set ONCE, in the "TIMELINE" block
   below - change a number there to re-time the whole sequence:

     step  1  background + KBS logo   (0.0s, 2.6s fade / zoom / glow)
     step  2  "Hare Krishna"          (0.8s)
     step  3  "Welcome"               (1.6s)
     step  4  "Vaishnava Calendar Myanmar" (+ rule, subtitle)  (2.4s)
     step  5  glass login card        (3.6s)
     step  6  Username field          (4.3s)
     step  7  Password field          (4.75s)
     step  8  Login button (+ note)   (5.2s)
     step  9  Google Account          (5.65s)
     step 10  Or Phone Number         (6.1s)
     (then)   Continue as Guest       (6.7s)

   Elements stay visibility:hidden until their step, so keyboard focus
   can never land on something that is not on screen yet. A tap / key
   press adds .is-instant (fast-forward), and prefers-reduced-motion
   skips the sequence entirely. The base (un-animated) state of every
   element is fully visible, so if animations are unavailable the
   screen is still complete and usable.

   The login card, Google and Phone buttons are always dark-themed
   (a cinematic scene) - they intentionally do not follow the app's
   light/dark theme toggle.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Overlay shell
   --------------------------------------------------------------------- */

.special-days-overlay.vc-login {

    /* scoped palette - taken from the KBS logo (navy ring, gold line,
       cream face) */
    --vc-navy-0: #050810;
    --vc-navy-1: #0a1426;
    --vc-navy-2: #12294a;
    --vc-gold: #d6b26e;
    --vc-gold-hi: #f0d28f;
    --vc-gold-lo: #b98f45;
    --vc-cream: #f4ecd8;
    --vc-text: #f4f6f8;
    --vc-muted: rgba(244, 236, 216, 0.74);

    position: absolute;
    inset: 0;

    /* cover the whole viewport even if .app is short */
    min-height: 100vh;
    min-height: 100dvh;

    /* override the generic centred-popup layout of .special-days-overlay */
    display: block;
    padding: 0;
    overflow: hidden;

    background: var(--vc-navy-0);
    color: var(--vc-text);

    animation: vc-login-overlay-in 0.6s ease both;
}

.special-days-overlay.vc-login.is-leaving {
    animation: vc-login-out 0.38s ease forwards;
    pointer-events: none;
}

.vc-login :focus-visible {
    outline: 2px solid var(--vc-gold);
    outline-offset: 2px;
}

/* Myanmar script: letter-spacing pulls stacked glyph clusters apart */
.vc-login[lang="my"] * {
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-style: normal !important;
}


/* ---------------------------------------------------------------------
   Step 1 - background: navy base + gold glow + KBS logo + readability veil
   All four layers live in ONE isolated group (.vc-login-bg) so the logo's
   mix-blend-mode:screen blends against the navy base below it: the
   logo's black JPEG corners vanish and only the badge glows through.
   --------------------------------------------------------------------- */

.vc-login-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    animation: vc-login-bg-in 2.6s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

.vc-login-bg-base {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(120% 78% at 50% 34%, var(--vc-navy-2) 0%, var(--vc-navy-1) 46%, var(--vc-navy-0) 100%);
}

.vc-login-glow,
.vc-login-logo {
    position: absolute;
    inset: 0;
    margin: auto;
    aspect-ratio: 1 / 1;
}

.vc-login-glow {
    width: 150%;
    background:
        radial-gradient(circle,
            rgba(214, 178, 110, 0.30) 0%,
            rgba(214, 178, 110, 0.11) 34%,
            rgba(214, 178, 110, 0) 62%);

    transform: translateY(-14%);
    animation: vc-login-glow 7s ease-in-out 1.2s infinite;
}

.vc-login-logo {
    width: 122%;
    max-width: none;
    height: auto;

    object-fit: cover;
    opacity: 0.30;
    mix-blend-mode: screen;
    filter: blur(0.6px) saturate(1.05);

    /* feather the badge's rim into the background */
    -webkit-mask-image: radial-gradient(circle closest-side, #000 70%, transparent 97%);
            mask-image: radial-gradient(circle closest-side, #000 70%, transparent 97%);

    transform: translateY(-14%);
    animation: vc-login-logo-breathe 10s ease-in-out 2.6s infinite;

    user-select: none;
    -webkit-user-drag: none;
}

.vc-login-veil {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(ellipse 92% 72% at 50% 44%, rgba(5, 8, 16, 0) 28%, rgba(5, 8, 16, 0.58) 100%),
        linear-gradient(180deg,
            rgba(5, 8, 16, 0.64) 0%,
            rgba(5, 8, 16, 0.30) 32%,
            rgba(5, 8, 16, 0.56) 62%,
            rgba(5, 8, 16, 0.88) 100%);
}


/* ---------------------------------------------------------------------
   Stage - centres greeting + card in the phone frame
   --------------------------------------------------------------------- */

.vc-login-stage {
    position: relative;
    z-index: 1;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;

    padding:
        max(30px, env(safe-area-inset-top))
        20px
        max(24px, env(safe-area-inset-bottom));
}

.vc-login-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    max-width: 340px;
    text-align: center;
}

/* step 2 */
.vc-login-hare {
    margin: 0;

    font: italic 400 36px/1.15 Georgia, "Times New Roman", serif;
    letter-spacing: 0.04em;

    background: linear-gradient(180deg, #f8e6b3 0%, var(--vc-gold) 55%, var(--vc-gold-lo) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;

    filter: drop-shadow(0 0 14px rgba(214, 178, 110, 0.45));
}

/* step 3 */
.vc-login-welcome {
    margin: 0;

    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.36em;
    text-transform: uppercase;

    color: var(--vc-muted);
}

/* step 4 */
.vc-login-title {
    margin: 6px 0 0;

    font: 400 25px/1.28 Georgia, "Times New Roman", serif;
    letter-spacing: 0.01em;
    text-wrap: balance;

    color: var(--vc-cream);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
}

.vc-login-rule {
    width: 64px;
    height: 1px;
    margin: 10px 0 2px;

    background: linear-gradient(90deg, transparent, var(--vc-gold), transparent);
}

.vc-login-subtitle {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.5;
    letter-spacing: 0.03em;

    color: var(--vc-muted);
}


/* ---------------------------------------------------------------------
   Step 5 - glass login card
   --------------------------------------------------------------------- */

.vc-login-card {
    position: relative;

    width: 100%;
    max-width: 340px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    padding: 20px 18px 18px;

    border-radius: 22px;
    border: 1px solid rgba(214, 178, 110, 0.26);

    /* dark enough that the logo's bright cream face behind the card
       never turns the form area muddy / grey */
    background: rgba(9, 16, 31, 0.64);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
            backdrop-filter: blur(16px) saturate(1.25);

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 44px rgba(214, 178, 110, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* thin gold hairline along the top edge */
.vc-login-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    right: 26px;
    height: 1px;

    background: linear-gradient(90deg, transparent, rgba(240, 210, 143, 0.9), transparent);
    pointer-events: none;
}


/* ---------------------------------------------------------------------
   Steps 6-8 - Username / Password / Login  (visual only, disabled)
   --------------------------------------------------------------------- */

.vc-login-creds {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vc-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc-login-label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: var(--vc-muted);
}

.vc-login-input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;

    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.07);

    /* 16px: stops iOS from zooming the page on focus */
    font-size: 16px;
    color: var(--vc-text);

    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.vc-login-input::placeholder {
    color: rgba(244, 246, 248, 0.42);
}

.vc-login-input:focus {
    border-color: var(--vc-gold);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 3px rgba(214, 178, 110, 0.22);
}

.vc-login-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* gold primary button - Login (disabled for now) and Send Code / Verify */
.vc-login-primary {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;

    border: none;
    border-radius: 14px;

    background: linear-gradient(180deg, var(--vc-gold-hi) 0%, var(--vc-gold) 58%, var(--vc-gold-lo) 100%);
    box-shadow: 0 8px 22px rgba(214, 178, 110, 0.28);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #1a1408;

    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease;
}

.vc-login-primary:hover:not(:disabled) {
    filter: brightness(1.06);
}

.vc-login-primary:active:not(:disabled) {
    transform: scale(0.985);
}

/* Disabled look is done with filter, NOT opacity: this button is a
   staged-reveal step, and the reveal animation's fill-mode holds
   opacity:1 - an opacity-based dim would be silently overridden and the
   disabled Login button would look enabled. */
.vc-login-primary:disabled {
    filter: grayscale(0.55) brightness(0.62);
    box-shadow: none;
    cursor: not-allowed;
}

/* honest "not available yet" note under the disabled Login button */
.vc-login-soon {
    margin: 0;

    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;

    color: var(--vc-muted);
}

.vc-login-soon-badge {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;

    border-radius: 999px;
    border: 1px solid rgba(214, 178, 110, 0.6);

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    vertical-align: 1px;

    color: var(--vc-gold);
}


/* ---------------------------------------------------------------------
   Steps 9-10 - Google Account / Or Phone Number
   --------------------------------------------------------------------- */

.vc-login-divider {
    position: relative;
    height: 1px;
    margin: 2px 6px;

    background: linear-gradient(90deg, transparent, rgba(214, 178, 110, 0.5), transparent);
}

.vc-login-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;

    width: 7px;
    height: 7px;
    border-radius: 1px;

    background: var(--vc-gold);
    box-shadow: 0 0 10px rgba(214, 178, 110, 0.75);
    transform: translate(-50%, -50%) rotate(45deg);
}

.vc-login-google,
.vc-login-phone-toggle {
    width: 100%;
    min-height: 50px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border-radius: 14px;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
    transition: transform 0.15s ease, filter 0.2s ease, background 0.2s ease;
}

.vc-login-google {
    border: none;
    background: #f8f5ec;
    color: #1f2937;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.vc-login-google:hover {
    filter: brightness(1.04);
}

.vc-login-google svg {
    width: 20px;
    height: 20px;
    flex: none;
}

.vc-login-phone-toggle {
    border: 1px solid rgba(214, 178, 110, 0.55);
    background: rgba(214, 178, 110, 0.09);
    color: var(--vc-cream);
}

.vc-login-phone-toggle:hover {
    background: rgba(214, 178, 110, 0.16);
}

.vc-login-phone-toggle[aria-expanded="true"] {
    background: rgba(214, 178, 110, 0.18);
}

.vc-login-phone-toggle svg {
    width: 19px;
    height: 19px;
    flex: none;

    fill: none;
    stroke: var(--vc-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vc-login-google:active,
.vc-login-phone-toggle:active {
    transform: scale(0.985);
}

.vc-login button[aria-busy="true"] {
    opacity: 0.65;
    pointer-events: none;
}


/* inline phone-number panel (opens under "Or Phone Number") */

.vc-login-phone {
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* opacity/transform only (no visibility): its first field is focused
       the moment the panel opens, and a visibility:hidden element cannot
       take focus */
    animation: vc-login-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vc-login-phone-info {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;
    text-align: center;

    color: var(--vc-muted);
}

.vc-login-link {
    align-self: center;
    min-height: 40px;
    padding: 6px 14px;

    border: none;
    background: none;

    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;

    color: var(--vc-gold);
    cursor: pointer;
}

.vc-login-error {
    margin: 0;
    padding: 10px 12px;

    border-radius: 12px;
    border: 1px solid rgba(255, 120, 120, 0.4);
    background: rgba(214, 70, 70, 0.14);

    font-size: 13px;
    line-height: 1.5;

    color: #ffd6d6;
}

.vc-login-error[hidden] {
    display: none;
}


/* guest link - keeps the whole calendar usable without an account */

.vc-login-guest {
    min-height: 44px;
    padding: 10px 18px;

    border: none;
    background: none;

    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(214, 178, 110, 0.5);
    text-underline-offset: 5px;

    color: var(--vc-muted);
    cursor: pointer;
}

.vc-login-guest:hover {
    color: var(--vc-cream);
}


/* ---------------------------------------------------------------------
   Short screens (small phones, landscape, short desktop windows):
   tighten spacing and drop the subtitle so the greeting, all login
   options AND the guest link fit on one screen without scrolling.

   Desktop (>=600px) uses a higher threshold: the full layout needs ~800px
   of frame height and the frame is (viewport - 48px) tall, so anything
   under ~880px of window height takes the compact layout.
   --------------------------------------------------------------------- */

@media (max-height: 740px), (min-width: 600px) and (max-height: 880px) {

    .vc-login-stage {
        gap: 14px;
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    .vc-login-hero {
        gap: 4px;
    }

    .vc-login-hare {
        font-size: 30px;
    }

    .vc-login-title {
        margin-top: 2px;
        font-size: 21px;
    }

    .vc-login-rule {
        margin: 6px 0 0;
    }

    .vc-login-subtitle {
        display: none;
    }

    .vc-login-card {
        gap: 10px;
        padding: 14px 16px 12px;
    }

    .vc-login-creds {
        gap: 10px;
    }

    .vc-login-field {
        gap: 4px;
    }

    .vc-login-input {
        height: 44px;
    }

    .vc-login-primary,
    .vc-login-google,
    .vc-login-phone-toggle {
        min-height: 46px;
    }

    .vc-login-soon {
        font-size: 12px;
        line-height: 1.4;
    }

    .vc-login-guest {
        min-height: 40px;
        padding: 6px 18px;
    }
}


/* ---------------------------------------------------------------------
   Desktop phone-frame (>=600px)
   There .app is a rounded, overflow:hidden card whose height follows the
   calendar content (~760px on a festival day), NOT the browser window, so
   the login must be sized to the card rather than to 100dvh:
     - while the login is open the card is given a phone-like minimum
       height (window height minus the 24px body padding top + bottom),
     - the overlay is exactly the card; the stage fills it and centres its
       content,
     - if the content is still taller than the card (phone panel + error
       message open) the stage scrolls inside the card instead of being
       clipped. The background stays put; only the stage scrolls.
   Phones (<600px) are untouched.
   --------------------------------------------------------------------- */

@media (min-width: 600px) {

    .app:has(> .vc-login) {
        min-height: clamp(660px, calc(100vh - 48px), 960px);
        min-height: clamp(660px, calc(100dvh - 48px), 960px);
    }

    .special-days-overlay.vc-login {
        min-height: 0;
    }

    .vc-login-stage {
        position: absolute;
        inset: 0;
        min-height: 0;

        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(214, 178, 110, 0.4) transparent;

        /* centre with auto margins instead of justify-content:center, so a
           taller-than-card content scrolls from its top instead of being
           cut off above the first line */
        justify-content: flex-start;
    }

    .vc-login-hero {
        margin-top: auto;
    }

    .vc-login-guest {
        margin-bottom: auto;
    }
}


/* ---------------------------------------------------------------------
   TIMELINE  -  when each step appears (single source of truth)
   --------------------------------------------------------------------- */

.vc-login [data-step="hare"]     { --vc-delay: 0.8s;  }
.vc-login [data-step="welcome"]  { --vc-delay: 1.6s;  }
.vc-login [data-step="title"]    { --vc-delay: 2.4s;  }
.vc-login [data-step="subtitle"] { --vc-delay: 3.0s;  }
.vc-login [data-step="card"]     { --vc-delay: 3.6s;  }
.vc-login [data-step="username"] { --vc-delay: 4.3s;  }
.vc-login [data-step="password"] { --vc-delay: 4.75s; }
.vc-login [data-step="login"]    { --vc-delay: 5.2s;  }
.vc-login [data-step="soon"]     { --vc-delay: 5.45s; }
.vc-login [data-step="google"]   { --vc-delay: 5.65s; }
.vc-login [data-step="phone"]    { --vc-delay: 6.1s;  }
.vc-login [data-step="guest"]    { --vc-delay: 6.7s;  }

.vc-login .vc-reveal {
    animation: vc-login-rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--vc-delay, 0s) both;
}

.vc-login .vc-login-hare.vc-reveal {
    animation-name: vc-login-hare-in;
    animation-duration: 1.3s;
}

.vc-login .vc-login-card.vc-reveal {
    animation-name: vc-login-card-in;
    animation-duration: 1.1s;
}


/* ---------------------------------------------------------------------
   Fast-forward (tap / key) and reduced motion
   --------------------------------------------------------------------- */

.special-days-overlay.vc-login.is-instant,
.vc-login.is-instant .vc-login-bg,
.vc-login.is-instant .vc-reveal {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {

    .special-days-overlay.vc-login,
    .vc-login-bg,
    .vc-login-glow,
    .vc-login-logo,
    .vc-login .vc-reveal,
    .vc-login-phone {
        animation: none !important;
    }
}


/* ---------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------- */

@keyframes vc-login-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes vc-login-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* step 1: background eases in - soft fade + slow zoom-out */
@keyframes vc-login-bg-in {
    from { opacity: 0; transform: scale(1.18); }
    to   { opacity: 1; transform: scale(1); }
}

/* ambient loops (very subtle, run after the intro) */
@keyframes vc-login-glow {
    0%, 100% { opacity: 0.62; transform: translateY(-14%) scale(1); }
    50%      { opacity: 1;    transform: translateY(-14%) scale(1.07); }
}

@keyframes vc-login-logo-breathe {
    0%, 100% { opacity: 0.30; transform: translateY(-14%) scale(1); }
    50%      { opacity: 0.38; transform: translateY(-14%) scale(1.035); }
}

/* generic step: fade + gentle rise */
@keyframes vc-login-rise {
    from { opacity: 0; transform: translateY(16px); visibility: hidden; }
    to   { opacity: 1; transform: none;             visibility: visible; }
}

/* inline phone panel: fade + rise, focusable from the first frame */
@keyframes vc-login-panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* step 2: greeting - fade + rise + un-blur, with its golden glow */
@keyframes vc-login-hare-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.94);
        filter: blur(8px) drop-shadow(0 0 0 rgba(214, 178, 110, 0));
        visibility: hidden;
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0) drop-shadow(0 0 14px rgba(214, 178, 110, 0.45));
        visibility: visible;
    }
}

/* step 5: card - fade + rise + soft scale */
@keyframes vc-login-card-in {
    from { opacity: 0; transform: translateY(26px) scale(0.965); visibility: hidden; }
    to   { opacity: 1; transform: none;                          visibility: visible; }
}