/* ================================================================
   EZ2FLY — animations.css
   Unique scroll-triggered animations & transitions
================================================================ */

/* ─── SCROLL PROGRESS BAR ───────────────────────────────────────── */
#ez-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #FD951E, #EE7212, #C03705);
  z-index: 9999;
  pointer-events: none;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(238,114,18,0.6);
  transition: width 0.08s linear;
}

/* ─── EXTRA REVEAL VARIANTS ─────────────────────────────────────── */

/* Scale + fade */
.reveal-scale {
  opacity: 0;
  transform: scale(0.88) translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.75s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity, transform;
}
.reveal-scale.in {
  opacity: 1;
  transform: scale(1) translateY(0);
  will-change: auto;
}

/* Blur + fade */
.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              filter 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity, filter, transform;
}
.reveal-blur.in {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  will-change: auto;
}

/* Clip-path horizontal wipe (left to right) */
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}
.reveal-wipe.in {
  clip-path: inset(0 0% 0 0);
  will-change: auto;
}

/* Clip-path reveal from bottom */
.reveal-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}
.reveal-clip.in {
  clip-path: inset(0% 0 0 0);
  will-change: auto;
}

/* Skew entrance */
.reveal-skew {
  opacity: 0;
  transform: skewY(4deg) translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
  will-change: opacity, transform;
}
.reveal-skew.in {
  opacity: 1;
  transform: skewY(0deg) translateY(0);
  will-change: auto;
}

/* Rotate in */
.reveal-rotate {
  opacity: 0;
  transform: rotate(-6deg) scale(0.9);
  transform-origin: bottom left;
  transition: opacity 0.65s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}
.reveal-rotate.in {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  will-change: auto;
}

/* Stagger delays for children */
.stagger > *:nth-child(1)  { transition-delay: 0.0s !important; }
.stagger > *:nth-child(2)  { transition-delay: 0.08s !important; }
.stagger > *:nth-child(3)  { transition-delay: 0.16s !important; }
.stagger > *:nth-child(4)  { transition-delay: 0.24s !important; }
.stagger > *:nth-child(5)  { transition-delay: 0.32s !important; }
.stagger > *:nth-child(6)  { transition-delay: 0.40s !important; }
.stagger > *:nth-child(7)  { transition-delay: 0.48s !important; }
.stagger > *:nth-child(8)  { transition-delay: 0.56s !important; }
.stagger > *:nth-child(9)  { transition-delay: 0.64s !important; }
.stagger > *:nth-child(10) { transition-delay: 0.72s !important; }

/* ─── PARALLAX IMAGES ───────────────────────────────────────────── */
.parallax-wrap {
  overflow: hidden;
  will-change: transform;
}
.parallax-wrap img {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ─── 3D CARD TILT ──────────────────────────────────────────────── */
.tilt-wrap {
  perspective: 900px;
  transform-style: preserve-3d;
}
.tilt-target {
  transform-style: preserve-3d;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tilt-target:hover {
  box-shadow: 0 28px 60px rgba(0,0,0,0.18);
}

/* ─── MAGNETIC BUTTON GLOW ──────────────────────────────────────── */
.magnetic-btn {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}

/* ─── STAT COUNTER ──────────────────────────────────────────────── */
.count-animated {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── SPLIT TEXT ────────────────────────────────────────────────── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.split-text-in .split-word-inner {
  transform: translateY(0);
}

/* ─── SECTION UNDERLINE DRAW ────────────────────────────────────── */
.underline-draw {
  position: relative;
  display: inline-block;
}
.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #FD951E, #C03705);
  border-radius: 1px;
  transition: width 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.underline-draw.in::after {
  width: 100%;
}

/* ─── FLOATING PARTICLES (CTA section) ─────────────────────────── */
.ez-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ez-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255,255,255,0.15);
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { transform: translateY(100%) scale(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-120vh) scale(1); opacity: 0; }
}

/* ─── SCROLL-VELOCITY SKEW ──────────────────────────────────────── */
.velocity-el {
  transition: transform 0.3s ease;
  will-change: transform;
}

/* ─── SECTION SPOTLIGHT ─────────────────────────────────────────── */
.section-spotlight {
  position: relative;
  overflow: hidden;
}
.section-spotlight::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238,114,18,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.4s ease, top 0.4s ease;
}

/* ─── HERO ENTRANCE SEQUENCE ────────────────────────────────────── */
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(40px) skewY(2deg); }
  to   { opacity: 1; transform: translateY(0) skewY(0deg); }
}
@keyframes heroSubIn {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroStatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-title         { animation: heroTitleIn 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s both; }
.hero-italic        { animation: heroTitleIn 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.5s both; }
.hero-sub           { animation: heroSubIn  0.8s cubic-bezier(0.25,0.46,0.45,0.94) 0.7s both; }
.hero-ctas          { animation: heroStatIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.9s both; }
.hero-stats         { animation: heroStatIn 0.7s cubic-bezier(0.34,1.56,0.64,1) 1.1s both; }

/* ─── IMAGE REVEAL OVERLAY ──────────────────────────────────────── */
.img-reveal-wrap {
  position: relative;
  overflow: hidden;
}
.img-reveal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0B1D35, #0B1D35);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.img-reveal-wrap.in::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* ─── QUICK DEST HOVER SHIMMER ──────────────────────────────────── */
.quick-dest-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(238,114,18,0.15) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 2;
  pointer-events: none;
}
.quick-dest-card:hover::before {
  transform: translateX(100%);
}

/* ─── HERITAGE MOSAIC HOVER LIFT ────────────────────────────────── */
.hm-big, .hm-sm {
  transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94),
              box-shadow 0.4s ease;
}
.hm-big:hover, .hm-sm:hover {
  transform: scale(1.015);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  z-index: 2;
}

/* ─── FLOATING NAV INDICATOR ────────────────────────────────────── */
@keyframes navPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(238,114,18,0); }
  50%       { box-shadow: 0 0 0 6px rgba(238,114,18,0.12); }
}
#site-nav.scrolled .nav-cta-btn {
  animation: navPulse 3s ease-in-out infinite;
}

/* ─── SECTION TRANSITION GRADIENTS ─────────────────────────────── */
.section-fade-bottom {
  position: relative;
}
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  pointer-events: none;
  z-index: 1;
}

/* ─── CURSOR FIX — hide on mobile/touch devices ─────────────────── */
/*
  The #ez-cursor SVG is injected into the DOM for all devices, but the
  JS that adds position:fixed / size styles only runs when
  (pointer:fine) matches. On mobile, this leaves a raw, unstyled block
  div (containing a 24×24 SVG) visible at the top of every page.
  Fix: position it off-screen by default; hide entirely on touch.
*/
#ez-cursor {
  position: fixed !important;
  width: 22px !important;
  height: 22px !important;
  left: -200px !important;
  top: -200px !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}
#ez-cursor-trail {
  position: fixed !important;
  width: 8px !important;
  height: 8px !important;
  left: -200px !important;
  top: -200px !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}
/* Completely hidden on touch / coarse-pointer devices */
@media (pointer: coarse), (hover: none) {
  #ez-cursor,
  #ez-cursor-trail {
    display: none !important;
  }
}

/* ─── IMAGE FIXES — remove fixed-height cropping ────────────────── */
/*
  Root cause: sections like .heritage-mosaic had a fixed `height:540px`
  (and .highlights-grid `height:520px`). Landscape slide images placed
  inside portrait-ratio cells get cropped top & bottom.

  Fix: remove the fixed height and let each cell define its own
  aspect-ratio. Keep object-fit:cover so photos fill nicely (no bars).
  object-fit:contain is NOT used — it causes white/cream letterboxing.
*/

/* ── Heritage mosaic ─────────────────────────────────────────────── */
.heritage-mosaic {
  height: auto !important;
}
.hm-big {
  aspect-ratio: 16 / 9;
}
.hm-stacked {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  min-height: 0;
}
.hm-sm {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
/* Images keep cover — they fill the cell without letterboxing */
.hm-big img,
.hm-sm img {
  object-fit: cover;           /* intentional: fills the cell cleanly */
  object-position: center top; /* bias toward top so faces/landmarks show */
}

/* Responsive overrides (mirror original breakpoints) */
@media (max-width: 900px) {
  .hm-big { grid-column: span 2 !important; aspect-ratio: 16 / 9 !important; }
  .hm-sm  { aspect-ratio: 4 / 3 !important; }
}
@media (max-width: 768px) {
  .hm-big { aspect-ratio: 4 / 3 !important; grid-column: span 1 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCENT IMAGE VISIBILITY FIX
   ───────────────────────────────────────────────────────────────
   Root cause: .about-visual, .why-img-col, .svc-intro-img-col
   all had `overflow: clip` (from the responsive block in styles.css).
   The accent images are positioned at bottom:-2rem / right:-2rem,
   which puts them OUTSIDE the container box. `overflow: clip` was
   silently cutting them off.

   Fix: overflow → visible on all image column containers.
   Horizontal scroll is still prevented because the parent sections
   already carry `overflow-x: hidden`.
═══════════════════════════════════════════════════════════════ */
.about-visual,
.why-img-col,
.svc-intro-img-col,
.halal-img-wrap {
  overflow: visible !important;
}

/* Add bottom padding so accent images that hang below don't
   collapse into the next section */
.about-visual  { padding-bottom: 2.5rem !important; }
.svc-intro-img-col { padding-bottom: 2rem !important; }

/* ── Why section — receptionist image ───────────────────────────── */
/*
  Revert the incorrect aspect-ratio: 4/3 override from the previous
  fix. The original 3/4 (portrait) matches receptionist.png.
  Use object-fit: contain + ocean bg so the FULL photo shows with
  no visible letterboxing (section bg is the same dark navy).
*/
.why-main-img {
  aspect-ratio: 3 / 4 !important;   /* restored — portrait matches the photo */
  object-fit: contain !important;    /* show full image, no cropping */
  background-color: var(--ocean) !important; /* = #0B1D35, same as section bg → bars invisible */
  object-position: center center !important;
}

/* ── About page main image ───────────────────────────────────────── */
/*
  about_us1.png (office interior) is a landscape photo in a 3/4
  portrait container → was being cropped top & bottom.
  contain + cream bg (matches about section bg) = no visible bars.
*/
.about-main-img {
  object-fit: contain !important;
  background-color: var(--cream) !important; /* matches about section bg */
  object-position: center center !important;
}

/* ── Services intro main image ───────────────────────────────────── */
/*
  svc-intro section bg is var(--white). Use contain so the full
  airplane photo shows; white bars blend into the white section.
*/
.svc-intro-img {
  object-fit: contain !important;
  background-color: var(--white) !important;
}

/* ── Destinations highlights grid ───────────────────────────────── */
.highlights-grid {
  height: auto !important;
}
.hl-card.wide {
  aspect-ratio: 16 / 9;
}
.hl-card:not(.wide) {
  aspect-ratio: 4 / 3;
}
.hl-card img {
  object-fit: cover !important;
  object-position: center !important;
}

/* ── Quick destinations strip ────────────────────────────────────── */
/* Keep background-size:cover — these are intentional banner cards */
.qd-bg {
  background-size: cover !important;
  background-position: center !important;
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-scale, .reveal-blur, .reveal-wipe, .reveal-clip,
  .reveal-skew, .reveal-rotate {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .hero-title, .hero-italic, .hero-sub, .hero-ctas, .hero-stats {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .ez-particle { animation: none !important; display: none; }
  .img-reveal-wrap::after { display: none; }
}