/* ===================================
   UK HOTEL CLUB — Animations CSS
=================================== */

/* ── Fade-in on Scroll ────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ── Marquee Strip ────────────────── */
.marquee-wrap {
  overflow: hidden;
  padding: 18px 0;
  background: var(--champagne);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee-track span {
  white-space: nowrap;
  padding: 0 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--charcoal);
  letter-spacing: 0.04em;
}
.marquee-track span::before {
  content: '◆';
  margin-right: 40px;
  font-size: 0.55rem;
  vertical-align: middle;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Floating Label ───────────────── */
.tab-pills {
  display: flex; gap: 4px;
  background: rgba(201,169,110,0.08);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  width: fit-content;
  margin-bottom: 40px;
}
.tab-pill {
  padding: 10px 28px;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,240,232,0.55);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  border: none; background: none;
}
.tab-pill.active {
  background: var(--champagne);
  color: var(--charcoal);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Lightbox ─────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(26,23,20,0.95);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.lightbox-overlay.open {
  opacity: 1; pointer-events: all;
}
.lightbox-inner {
  position: relative;
  max-width: 90vw; max-height: 88vh;
}
.lightbox-inner img {
  max-width: 90vw; max-height: 85vh;
  border-radius: 4px;
  object-fit: contain;
}
.lightbox-close {
  position: absolute; top: -40px; right: 0;
  background: none; border: none; cursor: pointer;
  color: var(--ivory); font-size: 1.8rem;
  line-height: 1;
}
.lightbox-close:hover { color: var(--champagne); }

/* ── Map Placeholder ──────────────── */
.map-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  height: 360px;
  background: var(--charcoal-mid);
  display: flex; align-items: center; justify-content: center;
}

/* ── Notification Toast ───────────── */
.toast {
  position: fixed; bottom: 90px; right: 32px; z-index: 9997;
  background: var(--charcoal-mid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--champagne);
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  color: var(--ivory);
  font-size: 0.9rem;
  transform: translateX(120%);
  transition: transform 0.4s ease;
  max-width: 320px;
}
.toast.show { transform: translateX(0); }