/* ============================================
   HERO RESERVE CTA — the gold seal

   The one action the whole site is built around, sitting under the hero
   lede. Three layers, painted back to front:

     .reserve-cta__halo   a conic gold light that orbits behind the pill
     .reserve-cta__face   the pill itself: liquid-gold fill + moving sheen
     .reserve-cta__rail   the venues it can book, previewed on hover

   The pointer effects (magnetic drift, 3D tilt, the specular highlight
   that tracks the cursor) are driven by custom properties that
   js/hero-reserve.js writes: --pull-x/--pull-y, --tilt-x/--tilt-y and
   --mx/--my. With no JS they all fall back to their rest values, so the
   button still renders and still works.

   Loaded after premium-fx.css. It shares no class names with the older
   .hero-reserve-btn on the category pages — that one stays as it is.
   ============================================ */

.reserve-cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-6);
    /* The tilt is a real 3D rotation, so the parent needs a camera. */
    perspective: 900px;
}

/* ============================================
   THE BUTTON
   ============================================ */
.reserve-cta__btn {
    position: relative;
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-full);
    transform-style: preserve-3d;
    transform:
        translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    /* Slow, springy return to centre when the cursor leaves. While the
       cursor is being tracked the JS adds .is-tracking, which shortens this
       to near-nothing so the button follows instead of lagging. */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reserve-cta__btn.is-tracking {
    transition: transform 0.12s ease-out;
}

.reserve-cta__btn:focus-visible {
    outline: 2px solid #ffe9a8;
    outline-offset: 6px;
}

/* The orbiting light. Blurred and sitting slightly proud of the pill on
   every side, so what shows is a moving glow around the edge rather than a
   readable ring. */
.reserve-cta__halo {
    position: absolute;
    inset: -7px;
    z-index: 1;
    border-radius: var(--radius-full);
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 236, 170, 0.95) 42deg,
        transparent 130deg,
        transparent 205deg,
        rgba(232, 199, 102, 0.75) 250deg,
        transparent 340deg
    );
    filter: blur(11px);
    opacity: 0.8;
    animation: reserve-orbit 5.5s linear infinite;
    pointer-events: none;
}

@keyframes reserve-orbit {
    to { transform: rotate(360deg); }
}

/* The sonar ping: one ring leaving the pill every few seconds. It is what
   catches the eye in peripheral vision — deliberately slow and faint. */
.reserve-cta__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius-full);
    border: 1px solid rgba(245, 225, 164, 0.55);
    animation: reserve-ping 3.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    pointer-events: none;
}

@keyframes reserve-ping {
    0%        { transform: scale(1);    opacity: 0.7; }
    70%, 100% { transform: scale(1.35); opacity: 0; }
}

/* The pill. The first background layer is the specular highlight and
   tracks the cursor through --mx/--my; the second is the metal itself,
   oversized so the sheen animation has somewhere to travel. */
.reserve-cta__face {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 13px 30px 13px 13px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 244, 214, 0.8);
    background:
        radial-gradient(140px 90px at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.75), transparent 62%),
        linear-gradient(115deg, #9c7a1a 0%, #c9a227 18%, #f5e1a4 38%, #fff6dc 50%, #e8c766 64%, #c9a227 82%, #9c7a1a 100%);
    background-size: auto, 230% auto;
    /* Named rather than left at the initial 0% so that stopping the sheen —
       which css/desktop-static.css does on desktop — leaves the pill on a
       frame with the highlight across its middle, not on the dark bronze
       end of the ramp. */
    background-position: 0 0, 50% center;
    animation: reserve-sheen 6s linear infinite;
    box-shadow:
        0 16px 42px rgba(201, 162, 39, 0.34),
        0 4px 14px rgba(5, 10, 28, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -2px 7px rgba(120, 88, 10, 0.35);
    color: #0f1b3d;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.015em;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

@keyframes reserve-sheen {
    from { background-position: 0 0, 0 center; }
    to   { background-position: 0 0, 230% center; }
}

.reserve-cta__btn:hover .reserve-cta__face,
.reserve-cta__btn:focus-visible .reserve-cta__face {
    box-shadow:
        0 22px 54px rgba(201, 162, 39, 0.5),
        0 6px 18px rgba(5, 10, 28, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -2px 7px rgba(120, 88, 10, 0.3);
}

.reserve-cta__btn:active .reserve-cta__face {
    box-shadow:
        0 8px 22px rgba(201, 162, 39, 0.4),
        inset 0 2px 8px rgba(120, 88, 10, 0.45);
}

/* Navy medallion holding the icon — the one dark note on the pill, so the
   gold has something to read against. */
.reserve-cta__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 26%, #243562 0%, #0b1430 72%);
    color: #f5e1a4;
    font-size: var(--icon-md);
    box-shadow:
        0 3px 10px rgba(5, 10, 28, 0.55),
        inset 0 0 0 1px rgba(245, 225, 164, 0.4);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.reserve-cta__btn:hover .reserve-cta__icon {
    transform: rotate(-8deg) scale(1.06);
}

/* Label roll: two copies of the same string stacked in one grid cell, the
   spare one parked below the mask. On hover the pair slides up one line, so
   the word appears to refresh itself. Whole words, not split characters —
   it has to survive ten translations, Hebrew included. */
.reserve-cta__roll {
    display: inline-grid;
    overflow: hidden;
    line-height: 1.35;
}

.reserve-cta__label {
    grid-area: 1 / 1;
    white-space: nowrap;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.reserve-cta__label--ghost {
    transform: translateY(115%);
}

.reserve-cta__btn:hover .reserve-cta__label,
.reserve-cta__btn:focus-visible .reserve-cta__label {
    transform: translateY(-115%);
}

.reserve-cta__btn:hover .reserve-cta__label--ghost,
.reserve-cta__btn:focus-visible .reserve-cta__label--ghost {
    transform: translateY(0);
}

.reserve-cta__arrow {
    font-size: var(--text-sm);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.reserve-cta__btn:hover .reserve-cta__arrow,
.reserve-cta__btn:focus-visible .reserve-cta__arrow {
    transform: translateX(5px);
}

/* Live count, pinned to the pill's shoulder. Hidden until
   js/hero-reserve.js has a real number to put in it — never a placeholder. */
.reserve-cta__count {
    position: absolute;
    top: -11px;
    right: -4px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--radius-full);
    background: rgba(11, 20, 48, 0.94);
    border: 1px solid rgba(245, 225, 164, 0.5);
    color: #f5e1a4;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.reserve-cta__count[hidden] {
    display: none;
}

.reserve-cta__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #25d366;
    animation: reserve-live 2.4s ease-out infinite;
}

@keyframes reserve-live {
    0%        { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70%, 100% { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
}

/* ============================================
   PRESS FEEDBACK
   ============================================ */
/* Ripples are clipped by the pill; sparks are not, so they live in the
   wrapper and fly out past its edge. Both are removed on animationend. */
.reserve-cta__ripple {
    position: absolute;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 236, 170, 0.22) 55%, transparent 70%);
    pointer-events: none;
    animation: reserve-ripple 0.55s ease-out forwards;
}

@keyframes reserve-ripple {
    to { transform: scale(20); opacity: 0; }
}

.reserve-cta__spark {
    position: absolute;
    z-index: 5;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff6dc, #e8c766);
    box-shadow: 0 0 8px rgba(245, 225, 164, 0.9);
    pointer-events: none;
    animation: reserve-spark 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes reserve-spark {
    to {
        transform: translate(var(--spark-x), var(--spark-y)) scale(0.2);
        opacity: 0;
    }
}

/* ============================================
   NOTE
   ============================================ */
.reserve-cta__note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    max-width: min(52ch, 88vw);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(244, 239, 226, 0.92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.reserve-cta__note i {
    color: #25d366;
    font-size: var(--icon-sm);
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

/* ============================================
   THE RAIL — what the button can actually book

   A popover above the button, not below it: .hero is only one viewport tall
   and clips its overflow, and the button sits near the bottom of it, so
   anything opening downwards is cut off. Upwards it opens over the lede,
   which is why it is a solid card rather than loose chips.

   Absolutely positioned, so revealing it never moves the hero. Hidden with
   visibility rather than display: the chips keep their box (no reflow on
   open) and stay out of the tab order while closed.
   ============================================ */
.reserve-cta__rail {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(245, 225, 164, 0.3);
    background: rgba(9, 17, 42, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 24px 60px rgba(3, 7, 20, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px) scale(0.97);
    transform-origin: 50% 100%;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s;
}

/* The tail, pointing down at the button it belongs to. */
.reserve-cta__rail::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -8px 0 0 -7px;
    transform: rotate(45deg);
    background: rgba(9, 17, 42, 0.86);
    border-right: 1px solid rgba(245, 225, 164, 0.3);
    border-bottom: 1px solid rgba(245, 225, 164, 0.3);
}

.reserve-cta:hover .reserve-cta__rail,
.reserve-cta:focus-within .reserve-cta__rail {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.reserve-cta__rail[hidden] {
    display: none;
}

.reserve-cta__rail-caption {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 239, 226, 0.7);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.reserve-cta__venues {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.reserve-cta__venue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 78px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* Each chip arrives a beat after the one before it. --i is set inline
       by js/hero-reserve.js. */
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.4s ease calc(var(--i, 0) * 55ms),
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 55ms);
}

.reserve-cta:hover .reserve-cta__venue,
.reserve-cta:focus-within .reserve-cta__venue {
    opacity: 1;
    transform: translateY(0);
}

.reserve-cta__venue-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, #16295f, #0b1430);
    color: #f5e1a4;
    font-size: var(--icon-sm);
    box-shadow:
        0 6px 18px rgba(5, 10, 28, 0.5),
        0 0 0 1px rgba(245, 225, 164, 0.45);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.reserve-cta__venue-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reserve-cta__venue:hover .reserve-cta__venue-thumb,
.reserve-cta__venue:focus-visible .reserve-cta__venue-thumb {
    transform: translateY(-4px) scale(1.09);
    box-shadow:
        0 12px 26px rgba(5, 10, 28, 0.6),
        0 0 0 2px rgba(255, 236, 170, 0.9);
}

.reserve-cta__venue:focus-visible {
    outline: none;
}

.reserve-cta__venue-name {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: rgba(244, 239, 226, 0.9);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
    /* Two lines at most, then ellipsis — some venue names are long and the
       chips have to stay the same width. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* No hover to open it with, so on phones and tablets the rail is simply not
   built — tapping the button opens the full picker, which is the same list
   with search and filters. */
@media (hover: none), (max-width: 767px) {
    .reserve-cta__rail {
        display: none;
    }
}

@media (max-width: 767px) {
    .reserve-cta {
        margin-top: var(--space-5);
    }

    .reserve-cta__face {
        padding: 11px 24px 11px 11px;
        font-size: var(--text-base);
    }

    .reserve-cta__icon {
        width: 36px;
        height: 36px;
        font-size: var(--icon-sm);
    }

    .reserve-cta__note {
        font-size: var(--text-xs);
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reserve-cta__halo,
    .reserve-cta__btn::after,
    .reserve-cta__face,
    .reserve-cta__dot {
        animation: none;
    }

    .reserve-cta__halo {
        opacity: 0.5;
    }

    .reserve-cta__btn,
    .reserve-cta__label,
    .reserve-cta__icon,
    .reserve-cta__arrow,
    .reserve-cta__venue,
    .reserve-cta__venue-thumb {
        transition-duration: 0.01ms;
    }
}