/* ==========================================================================
   THINK BIG — Shared page entrance transition
   --------------------------------------------------------------------------
   Source of truth: Default_New.aspx, block "Luxury page entrance transition".
   Keyframes, durations, delays and easing below are copied verbatim from it:

     page root   : luxuryPageReveal    1.15s  cubic-bezier(.22,.61,.36,1)  both
     top bar     : luxuryContentReveal  .85s  delay .12s  same easing      both
     main > *    : luxuryContentReveal  .90s  same easing                  both
                   delay ladder .22 / .34 / .46 / .58 / .70s

   Mechanism: pure CSS entrance animation, played once when the document is
   first painted. No JavaScript, no exit animation, no libraries.

   Opt-in classes (the existing IDs / classes of each page are untouched):
     .tb-reveal-page   -> the page root   (Default_New: .page)
     .tb-reveal-head   -> the top bar     (Default_New: .topbar)
     .tb-reveal-main   -> the content box (Default_New: main) - its direct
                          children are revealed in sequence

   IMPORTANT: .tb-reveal-page keeps transform/filter/will-change after the
   animation (fill-mode: both, exactly like Default_New). That makes it the
   containing block of any position:fixed descendant, so the Bottom
   Navigation and the membership overlay must stay OUTSIDE the element that
   carries .tb-reveal-page - exactly as they are in Default_New.aspx.
   ========================================================================== */

.tb-reveal-page {
    animation: luxuryPageReveal 1.15s cubic-bezier(.22, .61, .36, 1) both;
    transform-origin: 50% 0;
    will-change: opacity, transform, filter;
}

.tb-reveal-head {
    animation: luxuryContentReveal .85s .12s cubic-bezier(.22, .61, .36, 1) both;
}

.tb-reveal-main > * {
    animation: luxuryContentReveal .9s cubic-bezier(.22, .61, .36, 1) both;
}

/* Same delay ladder as Default_New (.22 / .34 / .46 / .58 / .70) */
.tb-reveal-main > :nth-child(1) {
    animation-delay: .22s;
}

.tb-reveal-main > :nth-child(2) {
    animation-delay: .34s;
}

.tb-reveal-main > :nth-child(3) {
    animation-delay: .46s;
}

.tb-reveal-main > :nth-child(4) {
    animation-delay: .58s;
}

.tb-reveal-main > :nth-child(n+5) {
    animation-delay: .70s;
}

/* A top bar that sits inside the content box keeps the top-bar timing */
.tb-reveal-main > .tb-reveal-head {
    animation: luxuryContentReveal .85s .12s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes luxuryPageReveal {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(.985);
        filter: blur(8px);
    }

    65% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes luxuryContentReveal {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-reveal-page,
    .tb-reveal-head,
    .tb-reveal-main > * {
        animation: none;
        transform: none;
        filter: none;
    }
}

/* ASP.NET postback: the server re-renders the whole document (e.g. a login
   error or a saved form). Do not replay the entrance in that case. The class
   is written on <html> by the server (IsPostBack). */
html.tb-no-reveal .tb-reveal-page,
html.tb-no-reveal .tb-reveal-head,
html.tb-no-reveal .tb-reveal-main > * {
    animation: none;
    will-change: auto;
}
