/**
 * animations.css
 * -----------------------------------------------------------------------
 * This file styles states that GSAP (animations.js) reads/writes or that
 * exist only because a JS module creates a DOM node at runtime. It does
 * NOT define page layout — that's style.css/responsive.css's job. If a
 * selector below isn't driven by a JS tween or CustomEvent-triggered
 * attribute, it doesn't belong here.
 *
 * Sources cross-referenced: animations.js, dishCard.js, modal.js,
 * search.js.
 * -----------------------------------------------------------------------
 */

/* ============================================================
   NAV ACTIVE PILL
   animations.js's setupNavActivePill() only ever tweens `x` (via
   translateX) and `width` on this element — it never sets position,
   height, color, or z-index, so those have to live here or the pill
   has no shape to animate in the first place.
   ============================================================ */
.nav-tab-pill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 0;
  block-size: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  /* No transition here — GSAP drives x/width directly every frame via
     gsap.to(); a CSS transition on transform would fight the tween. */
}

/* Nav buttons sit above the pill and need transparent backgrounds so the
   pill reads through; JS toggles aria-pressed for color contrast. */
#nav-categories {
  position: relative;
}

.nav-tab {
  position: relative;
  z-index: 1;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out-standard);
}

.nav-tab[aria-pressed="true"] {
  color: var(--color-background);
}

/* ============================================================
   DISH CARD — tilt, hover-lift, idle-float anchors
   ============================================================ */
.dish-card {
  position: relative;
  cursor: pointer;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
  will-change: transform;
  transition:
    opacity var(--dish-hover-duration, 0.2s) var(--ease-out-standard),
    filter var(--dish-hover-duration, 0.2s) var(--ease-out-standard);

  /* Fallback perspective/3D context for browsers where GSAP hasn't run
     yet (first paint) or failed to load; animations.js's gsap.set()
     writes the same properties once initAnimations() runs, so this is
     belt-and-braces, not a duplicate source of truth. */
  transform-style: preserve-3d;
  transform-perspective: 800px;

  /* setupDishTilt()'s quickTo() targets these two custom properties
     every pointermove; nothing else in the codebase reads or writes
     them. Falling back to 0px keeps the shadow anchored under the card
     until the pointer first moves. */
  --tilt-shadow-x: 0px;
  --tilt-shadow-y: 0px;
  box-shadow:
    var(--tilt-shadow-x) var(--tilt-shadow-y) 24px var(--color-shadow),
    var(--shadow-card);
}

.dish-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: var(--shadow-card-hover);
  transition: opacity var(--dish-hover-duration, 0.2s) var(--ease-out-standard);
}

.dish-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.dish-card[data-hovered="true"]::after {
  opacity: 1;
}

.dish-card-image {
  will-change: transform;
}

.dish-card-dimmed {
  opacity: var(--dish-detail-dimmed-card-opacity, 0.34);
}

.dish-card-source-hidden {
  opacity: 0;
}

.dish-card[data-touch-pressed="true"] {
  transform: scale(var(--dish-touch-press-scale, 0.97));
}

/* ============================================================
   BADGES — pop-in transform origin
   gsap.set(badges, { scale: 0 }) / gsap.to(..., { scale: 1 }) needs a
   centered transform-origin or the scale reads as sliding out of a
   corner instead of "popping."
   ============================================================ */
.badge {
  display: inline-block;
  transform-origin: center;
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-primary);
  color: var(--color-background);
}

.badge-spicy {
  background-color: var(--color-secondary);
  color: var(--color-text);
}

.badge-vegetarian {
  background-color: var(--color-success);
  color: var(--color-background);
}

/* ============================================================
   WHATSAPP FAB PULSE
   setupWhatsappFabPulse() creates <span class="fab-pulse-ring"> at
   runtime and tweens its scale/opacity in an infinite loop; the ring
   needs shape/position from CSS since JS only ever touches those two
   animated properties.
   ============================================================ */
#whatsapp-fab {
  position: fixed; /* re-declared here only to establish the ring's
                       containing block; layout values still live in
                       style.css/responsive.css */
}

.fab-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-success);
  pointer-events: none;
  transform-origin: center;
}

/* ============================================================
   MODAL
   No styling exists anywhere else for this class family — modal.js
   (Phase 9) builds the DOM, playModalOpen/playModalClose (Phase 7)
   tween opacity/scale (desktop) or yPercent (mobile) on .modal-dialog.
   Mobile baseline here is the bottom-sheet; responsive.css's 768px
   breakpoint already overrides .modal-dialog to the centered dialog
   layout — this block must stay consistent with that override rather
   than duplicate it.
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-2) 0;
  pointer-events: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: color-mix(
    in srgb,
    var(--color-overlay) calc(var(--dish-detail-overlay-opacity, 0.78) * 100%),
    transparent
  );
  backdrop-filter: blur(var(--dish-detail-backdrop-blur, 18px));
  opacity: 0;
  pointer-events: auto;
}

.modal-dialog {
  position: relative;
  inline-size: min(100%, calc(100vw - (var(--space-2) * 2)));
  block-size: min(92vh, 920px);
  max-block-size: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-start-radius: calc(var(--radius-lg) + 6px);
  border-start-end-radius: calc(var(--radius-lg) + 6px);
  box-shadow: var(--shadow-modal);
  pointer-events: auto;
  isolation: isolate;
  contain: layout paint;
}

.modal-dialog:focus-visible,
.modal-dialog:focus {
  outline: none; /* focus is programmatic on open, not a keyboard nav
                    target — an outline on the whole sheet reads as a
                    stray highlight rather than a real focus ring */
}

.modal-scroll-shell {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: hidden;
  border-radius: inherit;
}

.modal-scroll-shell::before,
.modal-scroll-shell::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 2;
  block-size: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out-standard);
}

.modal-scroll-shell::before {
  inset-block-start: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 98%, transparent), transparent);
}

.modal-scroll-shell::after {
  inset-block-end: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-surface) 98%, transparent), transparent);
}

.modal-scroll-shell[data-can-scroll-up="true"]::before,
.modal-scroll-shell[data-can-scroll-down="true"]::after {
  opacity: 1;
}

.modal-scroll {
  block-size: 100%;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.modal-scroll::-webkit-scrollbar {
  inline-size: 0;
  block-size: 0;
}

.modal-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--color-surface) 96%, transparent), color-mix(in srgb, var(--color-surface) 88%, transparent)),
    var(--color-surface);
  backdrop-filter: blur(14px);
}

.modal-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.modal-back-button {
  position: sticky;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 44px;
  inline-size: fit-content;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-surface) 84%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.modal-back-icon {
  font-size: var(--font-size-small);
}

.modal-back-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
}

.modal-image-wrap {
  position: relative;
  overflow: hidden;
}

.modal-image {
  inline-size: 100%;
  block-size: clamp(180px, 28vw, 280px);
  object-fit: cover;
  border-radius: calc(var(--radius-lg) - 2px);
}

.modal-badges {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: flex;
  gap: var(--space-2);
}

.modal-title-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.modal-name {
  font-size: var(--font-size-section);
}

.modal-description {
  color: var(--color-text-muted);
  line-height: 1.7;
}

.modal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 clamp(var(--space-3), 4vw, var(--space-5)) clamp(var(--space-4), 4vw, var(--space-5));
}

.modal-price {
  font-size: var(--font-size-price);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.modal-calories {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.modal-spicy {
  display: flex;
  gap: var(--space-1);
}

.spicy-flame {
  inline-size: 16px;
  block-size: 16px;
  border-radius: var(--radius-sm);
  background-color: var(--color-border);
}

.spicy-flame-active {
  background-color: var(--color-secondary);
}

.modal-list-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.modal-list-heading {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.modal-list li {
  padding-block: var(--space-1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  font-size: var(--font-size-small);
}

.modal-actions {
  display: flex;
  justify-content: flex-start;
  padding-block-start: var(--space-3);
}

.modal-inline-back {
  min-block-size: 44px;
}

.modal-allergens li {
  color: var(--color-error);
}

.modal-dietary li {
  color: var(--color-success);
}

/* ============================================================
   REDUCED MOTION
   animations.js already skips creating the tilt/idle-float/parallax/
   pulse tweens entirely under prefers-reduced-motion, and reset.css
   zeroes transition/animation durations globally. The one thing that
   still needs an explicit override here is the tilt's resting shadow,
   since --tilt-shadow-x/y default to 0 already — no motion-specific
   CSS override is required beyond confirming that baseline holds.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dish-card {
    --tilt-shadow-x: 0px;
    --tilt-shadow-y: 0px;
  }

  .modal-backdrop {
    backdrop-filter: none;
  }

  .modal-scroll {
    scroll-behavior: auto;
  }

  .modal-header {
    backdrop-filter: none;
  }
}

@media (pointer: coarse) {
  .dish-card {
    transition:
      transform 0.1s var(--ease-out-standard),
      opacity var(--dish-hover-duration, 0.2s) var(--ease-out-standard),
      filter var(--dish-hover-duration, 0.2s) var(--ease-out-standard);
  }
}