/* =====================================================================
   ISEA2026 motion
   ---------------------------------------------------------------------
   Small, quiet, and cheap: only transform and opacity move, durations stay
   under ~350ms, one easing curve throughout. Everything collapses to an
   instant change when the visitor asks for reduced motion.
   Scroll reveals are driven by js/frontend/isea-motion.js.
   ===================================================================== */

:root {
  --dur-fast: 150ms;   /* hover, press, focus */
  --dur-base: 220ms;   /* things appearing */
  --dur-slow: 360ms;   /* page and section entrances */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rise: 10px;        /* how far entering content travels */
  --dur-reveal: 560ms; /* cards fading in on scroll: slower, so the one-by-one order reads */
  --rise-reveal: 14px;
}

/* ---------------------------------------------------------------------
   1. Buttons: lift on hover, settle on press.
   Replaces the old "transition: all 0.3s ease-in", which animated every
   property with a slow start and made buttons feel sluggish.
   --------------------------------------------------------------------- */
.btn,
.isea-card__btn,
.isea-ticket-landing__cta,
.isea-ticket-details__cta,
.isea-empty-state__cta,
.isea-confirm-modal__btn,
.isea-success-modal__btn,
.isea-agenda__filter {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .btn:not(:disabled):not(.disabled):hover,
  .isea-card__btn:hover,
  .isea-ticket-landing__cta:hover,
  .isea-ticket-details__cta:hover,
  .isea-empty-state__cta:hover,
  .isea-confirm-modal__btn:hover,
  .isea-success-modal__btn:hover {
    transform: translateY(-2px);
  }
}

.btn:not(:disabled):not(.disabled):active,
.isea-card__btn:active,
.isea-ticket-landing__cta:active,
.isea-ticket-details__cta:active,
.isea-empty-state__cta:active,
.isea-confirm-modal__btn:active,
.isea-success-modal__btn:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 80ms;
}

/* Arrow inside a button nudges forward (backward in Arabic). */
.isea-card__btn svg,
.btn .btn-icon svg {
  transition: transform var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .isea-card__btn:hover svg,
  .btn:hover .btn-icon svg {
    transform: translateX(3px);
  }

  /* Arabic: the arrow is mirrored (see below), so keep the flip while it nudges forward (left). */
  html[dir="rtl"] .isea-card__btn:hover svg,
  html[dir="rtl"] .btn:hover .btn-icon svg {
    transform: scaleX(-1) translateX(3px);
  }
}

/* Arabic: directional arrows point the reading way ("Learn more" ←, "Go back" →,
   "Get directions" ↖). Non-directional icons (ticket, heart, play, globe) stay as drawn. */
html[dir="rtl"] .isea-card__btn svg,
html[dir="rtl"] .btn .btn-icon svg,
html[dir="rtl"] .isea-back-link__icon svg,
html[dir="rtl"] .isea-ticket-details__direction-link svg {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------------------
   2. Fields: border and focus ring fade instead of snapping.
   --------------------------------------------------------------------- */
.form-control,
.form-select,
.form-check-input,
.otp-input,
.select2-selection {
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.form-label {
  transition: color var(--dur-fast) var(--ease-out);
}

/* Inline errors fade in under their field each time they are shown. */
.fs_inline_error {
  animation: isea-fade-down var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------
   3. Cards: a gentle lift, and the image breathes inside its frame.
   --------------------------------------------------------------------- */
.isea-card {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.isea-card__image-wrap img {
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .isea-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  }

  .isea-card:hover .isea-card__image-wrap img {
    transform: scale(1.03);
  }
}

/* ---------------------------------------------------------------------
   4. Page entrance: once the loading cover lifts, the content rises in.
   html.is-ready is set by page-skeleton.js.
   --------------------------------------------------------------------- */
/* fill-mode "backwards", not "both": an animation that keeps holding its end
   transform makes <main> the containing block for every position:fixed element
   inside it (filter sheet, modals), which then scroll away with the page. */
html.is-ready main.inner-page {
  animation: isea-rise var(--dur-slow) var(--ease-out) backwards;
}

/* ---------------------------------------------------------------------
   5. Reveal on scroll: cards and [data-reveal] blocks below the fold fade
   up as they enter view (once). isea-motion.js adds .isea-reveal and
   .is-revealed; without JS nothing is hidden.
   --------------------------------------------------------------------- */
.isea-reveal {
  opacity: 0;
  transform: translateY(var(--rise-reveal));
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}

.isea-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Cards keep their hover lift once revealed. */
.isea-card.isea-reveal.is-revealed {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* ---------------------------------------------------------------------
   6. Agenda tabs: the underline grows into place instead of jumping.
   --------------------------------------------------------------------- */
.isea-agenda__tab {
  position: relative;
  border-bottom-color: transparent !important;
  transition: color var(--dur-base) var(--ease-out);
}

.isea-agenda__tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-out);
}

.isea-agenda__tab.active::after {
  transform: scaleX(1);
}

@media (hover: hover) {
  .isea-agenda__tab:not(.active):hover::after {
    transform: scaleX(0.35);
  }
}

/* ---------------------------------------------------------------------
   7. Language switch: the page content fades out, and the new language
   fades in (js/frontend/lang-switch.js).
   The header bar itself stays put, so only the words appear to change.
   --------------------------------------------------------------------- */
html.is-lang-leaving main,
html.is-lang-leaving footer,
html.is-lang-leaving .isea-agenda-header > *,
html.is-lang-leaving .logo-block,
html.is-lang-leaving .isea-lang-mini,
html.is-lang-leaving .isea-mobile-nav__list,
html.is-lang-leaving .isea-mobile-nav__footer {
  opacity: 0;
  transform: translateY(4px);
  /* ease-in-out (not the usual ease-out) so the words fade away evenly
     instead of vanishing in the first few frames. */
  transition:
    opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

html.is-lang-arriving main,
html.is-lang-arriving main.inner-page,
html.is-lang-arriving footer,
html.is-lang-arriving .isea-agenda-header > *,
html.is-lang-arriving .logo-block,
html.is-lang-arriving .isea-lang-mini {
  animation: isea-lang-in 420ms var(--ease-out) 40ms backwards;
}

@keyframes isea-lang-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

/* ---------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------- */
@keyframes isea-rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes isea-fade-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------
   Reduced motion: keep state changes, drop the movement.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .isea-reveal {
    opacity: 1;
    transform: none;
  }
}