/* Motion layer: cinematic hero, scroll-linked 3D tilt, staggered reveals, image wipes,
   ticker, count-up stats and button shine. All motion is disabled under reduced-motion. */
:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* hero: image layer with slow zoom-out, gradient above, staggered text */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#0e1716!important}
.hero-media{position:absolute;inset:-2%;z-index:-2;background:url('guide-photos/muttrah.jpg') center 55%/cover;transform:scale(1.18);animation:hero-zoom 2.4s var(--ease-out) .05s forwards, hero-drift 26s ease-in-out 2.4s infinite alternate;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 70% at 85% 0%,#0e948366,transparent 70%),radial-gradient(50% 60% at 10% 10%,#d9a35b40,transparent 70%),linear-gradient(270deg,#0b1513f0 5%,#0d1f1ccc 55%,#0d1f1c55)}
.hero .glow-orb{position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;filter:blur(60px);opacity:.55;pointer-events:none;background:radial-gradient(circle,#0e9483,transparent 65%);top:-180px;inset-inline-end:-120px;animation:orb 14s ease-in-out infinite alternate}
.hero .glow-orb.sand{background:radial-gradient(circle,#d9a35b,transparent 65%);top:auto;bottom:-260px;inset-inline-end:auto;inset-inline-start:-160px;animation-duration:18s;opacity:.35}
@keyframes hero-zoom{to{transform:scale(1.04)}}
@keyframes hero-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
@keyframes orb{to{transform:translate3d(-60px,40px,0) scale(1.15)}}
.intro{opacity:0;transform:translateY(26px);filter:blur(8px);animation:intro .95s var(--ease-out) forwards;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
@keyframes intro{to{opacity:1;transform:none;filter:none}}
.search-wrap.intro{animation-delay:.75s}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:#fff;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;width:max-content;gap:0;animation:ticker 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font-weight:600;color:var(--ink);white-space:nowrap}
.ticker span i{width:7px;height:7px;border-radius:50%;background:var(--sand);box-shadow:0 0 0 4px #d9a35b2e}
@keyframes ticker{to{transform:translateX(50%)}}
[dir=ltr] .ticker-track{animation-name:ticker-ltr}
@keyframes ticker-ltr{to{transform:translateX(-50%)}}

/* stats with count-up */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:26px 0 6px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:clamp(26px,3.4vw,36px);font-weight:700;color:var(--teal);line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:14px}

/* staggered reveal (overrides theme.css timing) */
.reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* images wipe in, then settle */
.card.reveal .photo,.destination.reveal{clip-path:inset(18% 0 0 0 round 0);transition:clip-path 1.1s var(--ease-out) var(--d,0ms),transform 1.6s var(--ease-out) var(--d,0ms)}
.card.reveal .photo{transform:scale(1.16)}
.card.reveal.in .photo,.destination.reveal.in{clip-path:inset(0 0 0 0 round 0)}
.card.reveal.in .photo{transform:scale(1)}
.card.reveal.in:hover .photo{transform:scale(1.06);transition:transform .7s var(--ease-out)}
.destination{background-size:110%!important;transition:background-size 1.2s var(--ease-out),transform .3s var(--ease-out)!important}
.destination:hover{background-size:122%!important}

/* scroll-linked 3D tilt for showcase grids */
.tilt-stage{perspective:2200px;overflow-x:clip}
.tilt{transform-origin:50% 0;transition:transform 1.2s var(--ease-out);will-change:transform}

/* parallax images */
.parallax{will-change:transform}

/* dialogs and inner images */
dialog[open]{animation:dlg-in .5s var(--ease-out)}
dialog[open]::backdrop{animation:fade-in .4s ease}
@keyframes dlg-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}}
dialog .detail-photo{animation:kb-in 1.6s var(--ease-out) both}
@keyframes kb-in{from{transform:scale(1.14);filter:saturate(.6) blur(2px);clip-path:inset(0 0 30% 0 round 12px)}to{transform:none;filter:none;clip-path:inset(0 0 0 0 round 12px)}}
dialog img:not(.detail-photo){animation:img-in .9s var(--ease-out) both}
@keyframes img-in{from{opacity:0;transform:scale(1.06)}}
#panel > *{animation:panel-in .6s var(--ease-out) both}
#panel > *:nth-child(2){animation-delay:.05s}#panel > *:nth-child(3){animation-delay:.1s}#panel > *:nth-child(4){animation-delay:.15s}#panel > *:nth-child(5){animation-delay:.2s}#panel > *:nth-child(n+6){animation-delay:.25s}
@keyframes panel-in{from{opacity:0;transform:translateY(14px)}}

/* button shine and press */
.primary,.accent{position:relative;overflow:hidden}
.primary::after,.accent::after{content:"";position:absolute;inset:-50% auto -50% -60%;width:40%;transform:skewX(-20deg) translateX(-160%);background:linear-gradient(90deg,transparent,#ffffff59,transparent);pointer-events:none}
.primary:hover::after,.accent:hover::after{animation:shine .9s var(--ease-out)}
.cta-pill::after{animation:shine 1.2s var(--ease-out) 2.6s 2}
@keyframes shine{to{transform:skewX(-20deg) translateX(520%)}}
.primary:active,.outline:active,.chip:active,.icon-btn:active{transform:scale(.97)}
.offer-icon{transition:transform .5s var(--ease-spring)}
.offer-card:hover .offer-icon{transform:rotate(-8deg) scale(1.08)}
.icon-btn svg{transition:transform .35s var(--ease-spring)}
.icon-btn:hover svg{transform:scale(1.15) rotate(-6deg)}

/* guide hero */
.guide-hero{position:relative;overflow:hidden}
.guide-hero > *{animation:intro .95s var(--ease-out) both}
.guide-hero > *:nth-child(2){animation-delay:.12s}.guide-hero > *:nth-child(3){animation-delay:.24s}

@media(max-width:820px){.stats-strip{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){
  .hero-media,.glow-orb,.ticker-track,.intro,.search-wrap.intro,dialog[open],dialog .detail-photo,dialog img,#panel > *,.guide-hero > *{animation:none!important}
  .intro{opacity:1;transform:none;filter:none}
  .hero-media{transform:none}
  .reveal,.card.reveal .photo,.destination.reveal{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .tilt{transform:none!important}
}