/* ==========================================================================
   Durga drag-to-reveal login animation
   --------------------------------------------------------------------------
   Storyboard sequence:
     1. Durga appears from the left, card hidden above the viewport.
     2. She walks in closer to the card and takes up the rope.
     3-5. She pulls; the card descends, slows, and settles.
     6. The rope is released and she folds her hands in namaste.

   Design notes:
   - The card animation is pure CSS (keyframes + `both` fill mode). During the
     delay the card rests on the 0% keyframe, so it starts off-screen with no
     flash and no JS involvement. If JS is disabled or durga-login.js fails,
     the card still arrives correctly; only the rope is missing.
   - Nothing here animates layout properties (top/height/margin), so the
     sequence cannot shift the page or spawn scrollbars.
   - Timings live in custom properties and are read back by durga-login.js, so
     the choreography has a single source of truth.
   ========================================================================== */

:root {
    --durga-enter-delay: 0.15s;
    --durga-enter-dur: 1.9s;   /* walk in from off-screen, then closer to the card */
    --durga-pull-delay: 2.1s;
    --durga-pull-dur: 2.4s;
    --durga-rope-at: 2.15s;
    --durga-card-delay: 2.35s;
    --durga-card-dur: 2.05s;   /* long, eased descent — the centrepiece */
    --durga-bless-at: 4.5s;    /* release the rope, fold hands in namaste */
}

/* Durga starts outside the left edge; keep that from becoming scrollable. */
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Stage
   Sits behind `.login-wrapper` (z-index 2) so the rope can never paint over
   the email/password/remember/sign-in controls.
   -------------------------------------------------------------------------- */
.durga-stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Rope
   -------------------------------------------------------------------------- */
.durga-rope {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.durga-rope-path {
    fill: none;
    stroke: #e8b64c;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(245, 190, 90, 0.55));
}

/* --------------------------------------------------------------------------
   Durga figure
   Positioned against the *card's* centre rather than the viewport edge: the
   card is always centred with a fixed max-width, so `50% - Npx` keeps her
   tucked beside it at every desktop width instead of stranded at the far
   left.
   -------------------------------------------------------------------------- */
.durga-figure {
    position: absolute;
    left: calc(50% - 470px);
    bottom: 0;
    height: min(76vh, 660px);
    aspect-ratio: 320 / 760;
    will-change: transform;
    animation: durgaEnter var(--durga-enter-dur) cubic-bezier(0.33, 0.1, 0.25, 1)
               var(--durga-enter-delay) both;
}

.durga-figure-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    animation: durgaPull var(--durga-pull-dur) cubic-bezier(0.45, 0, 0.35, 1)
               var(--durga-pull-delay) both;
}

.durga-svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}

/* Rope attachment point, pinned over the gripping hand in the SVG
   (cx 279 / cy 175 within the 320x760 viewBox). */
.durga-hand {
    position: absolute;
    left: 87.2%;
    top: 23%;
    width: 2px;
    height: 2px;
}

/* Divine glow — present from the start (storyboard step 1), brightening once
   she gives the blessing. */
.durga-glow {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 130%;
    height: 62%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 230, 138, 0.32) 0%, rgba(245, 158, 11, 0.12) 45%, transparent 70%);
    opacity: 0.55;
    animation: durgaGlow 1.6s ease-out var(--durga-bless-at) both;
}

/* Step 6: swap the pulling arms for the namaste pose. */
.durga-arm-pull {
    animation: durgaFadeOut 0.55s ease var(--durga-bless-at) both;
}

.durga-arm-bless {
    opacity: 0;
    animation: durgaFadeIn 0.7s ease calc(var(--durga-bless-at) + 0.25s) both;
}

/* --------------------------------------------------------------------------
   The existing login card, pulled down from above
   -------------------------------------------------------------------------- */
.login-card {
    will-change: transform;
    animation: durgaCardDescend var(--durga-card-dur) linear var(--durga-card-delay) both;
}

/*
   Enter from off-screen left, pause, then walk in closer to the card. The
   small vertical bob reads as footsteps without animating any body parts.
*/
@keyframes durgaEnter {
    0%   { transform: translate3d(-165%, 0, 0); opacity: 0; }
    12%  { opacity: 1; }
    22%  { transform: translate3d(-118%, -7px, 0); }
    34%  { transform: translate3d(-92%, 0, 0); }
    46%  { transform: translate3d(-64%, -7px, 0); }
    58%  { transform: translate3d(-40%, 0, 0); }
    72%  { transform: translate3d(-22%, -5px, 0); }
    86%  { transform: translate3d(-7%, 0, 0); }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* A restrained lean into the rope — weight shift, not a body animation. */
@keyframes durgaPull {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    28%  { transform: translate3d(-8px, 0, 0) rotate(-1.7deg); }
    62%  { transform: translate3d(-5px, 0, 0) rotate(-1deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/*
   Descent shape. Percentages carry the easing (hence `linear` above) so the
   card accelerates away from the top, travels smoothly, decelerates hard near
   the end, then settles with a ~1.2% overshoot — enough to read as weight on a
   rope, well short of a cartoon bounce. The small tilt is the rope's tension
   pulling from the left, resolving to level as it settles.
*/
@keyframes durgaCardDescend {
    0%   { transform: translate3d(0, calc(-50vh - 100%), 0) rotate(-1deg); opacity: 0; }
    5%   { opacity: 1; }
    16%  { transform: translate3d(0, -66%, 0) rotate(-0.9deg); }
    34%  { transform: translate3d(0, -40%, 0) rotate(-0.75deg); }
    54%  { transform: translate3d(0, -18%, 0) rotate(-0.5deg); }
    74%  { transform: translate3d(0, -5%, 0) rotate(-0.25deg); }
    89%  { transform: translate3d(0, 1.2%, 0) rotate(0.1deg); }
    96%  { transform: translate3d(0, -0.4%, 0) rotate(-0.03deg); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
}

@keyframes durgaGlow {
    0%   { opacity: 0.55; }
    100% { opacity: 1; }
}

@keyframes durgaFadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes durgaFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .durga-figure {
        left: max(0px, calc(50% - 400px));
        height: min(56vh, 470px);
    }
}

/* --------------------------------------------------------------------------
   Mobile: Hide Durga figure and rope only.
   The card's descend animation is intentionally preserved so the form still
   drops in from above — only the deity structure and rope are removed.
   Card delay is cut to 0.3 s (no need to wait for Durga to walk in) and the
   descent itself is capped at 1.5 s for a snappy feel on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --durga-card-delay: 0.3s;   /* don't wait for hidden Durga to enter */
        --durga-card-dur:   1.5s;   /* fast, snappy descent on mobile */
    }

    .durga-stage,
    .durga-figure,
    .durga-rope,
    .durga-rope-path {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion: no entrance, no rope, no drag. Everything lands in its
   final position immediately and stays fully functional.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .login-card,
    .durga-figure,
    .durga-figure-inner,
    .durga-glow,
    .durga-arm-pull,
    .durga-arm-bless {
        animation: none;
    }

    .login-card {
        transform: none;
        opacity: 1;
    }

    .durga-glow {
        opacity: 1;
    }

    /* Show the resting blessing pose, not a pull with no rope attached. */
    .durga-arm-pull {
        opacity: 0;
    }

    .durga-arm-bless {
        opacity: 1;
    }

    .durga-rope {
        display: none;
    }
}