/* ============================================================
   AURORA SPA — Motion layer
   Everything here is decoration. Loading this file last means
   a single deletion turns the whole site static if ever needed.
   ============================================================ */

/* ============================================================
   1. HERO — slow Ken Burns drift on the background photo
   ============================================================ */
@keyframes ken-burns {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  50%  { transform: scale(1.16) translate3d(-1.5%, -1%, 0); }
  100% { transform: scale(1.06) translate3d(0, 0, 0); }
}
.hero-bg img,
.page-hero .hero-bg img {
  animation: ken-burns 28s ease-in-out infinite;
  transform-origin: center 45%;
}

/* Gold light bloom that breathes over the hero */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% 75%, rgba(200,161,90,.22), transparent 70%);
  animation: bloom 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bloom {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.12); }
}

/* ============================================================
   2. FLOATING PARTICLES (hero) — slow drifting motes of light
   ============================================================ */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.particle {
  position: absolute;
  bottom: -12%;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,220,175,.95), rgba(200,161,90,0) 70%);
  opacity: 0;
  animation: drift var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(.6);            opacity: 0; }
  12%  {                                                        opacity: .9; }
  50%  { transform: translate3d(var(--x, 40px), -55vh, 0) scale(1); }
  88%  {                                                        opacity: .7; }
  100% { transform: translate3d(calc(var(--x, 40px) * -.6), -115vh, 0) scale(.5); opacity: 0; }
}

/* ============================================================
   3. WORD-BY-WORD HEADING REVEAL
   JS wraps each word of a section heading in .w > i
   ============================================================ */
.split-words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* The gap is a margin, not a text space — a `display: table` heading box
     drops whitespace between inline-blocks and the words would run together */
  margin-inline-end: .26em;
}
.split-words .w:last-child { margin-inline-end: 0; }
.split-words .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(115%) rotate(4deg);
  opacity: 0;
  transition: transform .95s var(--ease), opacity .7s var(--ease-soft);
  transition-delay: var(--wd, 0ms);
}
.split-words.in .w > i { transform: none; opacity: 1; }

/* ============================================================
   4. SHINE SWEEP across cards on hover
   ============================================================ */
.cat-card::before,
.pkg-media::before,
.svc-media::before,
.mos-item::before,
.vid-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: -75%;
  width: 50%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  opacity: 0;
  transition: none;
}
.cat-card:hover::before,
.pkg:hover .pkg-media::before,
.svc-card:hover .svc-media::before,
.mos-item:hover::before,
.vid-card:hover::before {
  opacity: 1;
  animation: shine .95s var(--ease-soft) forwards;
}
@keyframes shine {
  to { inset-inline-start: 130%; }
}

/* ============================================================
   5. BUTTON RIPPLE (JS adds the span on click)
   ============================================================ */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: ripple-out .65s var(--ease-soft) forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes ripple-out {
  to { transform: scale(2.6); opacity: 0; }
}

/* ============================================================
   6. PAGE TRANSITION — gold curtain wipes in on navigation
   ============================================================ */
#page-curtain {
  position: fixed;
  inset: 0;
  z-index: 9996;
  background: var(--bg);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  transition: transform .55s var(--ease);
}
#page-curtain.out {
  transform: scaleY(1);
  transform-origin: bottom;
}
#page-curtain::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Content eases up on arrival */
body.loaded main > section:first-child { animation: page-in .8s var(--ease) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   7. UNDERLINE GROW on section eyebrows when revealed
   ============================================================ */
.eyebrow::before,
.section-head.center .eyebrow::after {
  transform-origin: inline-start;
  animation: rule-grow 1s var(--ease) both;
}
@keyframes rule-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   8. IMAGE CLIP REVEAL — used on split media
   ============================================================ */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease);
  transition-delay: var(--d, 0ms);
}
.clip-reveal.in { clip-path: inset(0 0 0 0); }

/* ============================================================
   9. SCROLL-DRIVEN PARALLAX for images inside cards
   JS sets --py from scroll position
   ============================================================ */
.parallax-inner img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.14);
  will-change: transform;
}

/* ============================================================
   10. MICRO-INTERACTIONS
   ============================================================ */

/* Nav links lift a hair on hover */
.nav-link { transition: color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease); }
.nav-link:hover { transform: translateY(-2px); }

/* Perk icon draws a gold ring on hover */
.perk-icon { position: relative; }
.perk-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .45s var(--ease-soft), transform .45s var(--ease);
}
.perk:hover .perk-icon::after { opacity: .8; transform: scale(1); }

/* Package price ticks up on card hover */
.pkg-price .now { transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease-soft); }
.pkg:hover .pkg-price .now { transform: translateY(-3px); color: var(--gold); }

/* Filter buttons squash slightly when pressed */
.filter-btn:active { transform: scale(.95); }

/* Stat cells glow as they enter */
.stat-cell .num { transition: text-shadow .6s var(--ease-soft); }
.stat-cell:hover .num { text-shadow: 0 0 26px rgba(200,161,90,.55); }

/* Social buttons pop in sequence when the footer arrives */
.socials .social-btn { animation: pop-in .55s var(--ease) both; }
.socials .social-btn:nth-child(1) { animation-delay: .05s; }
.socials .social-btn:nth-child(2) { animation-delay: .15s; }
.socials .social-btn:nth-child(3) { animation-delay: .25s; }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.6) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Scroll cue keeps nudging */
.scroll-cue { animation: cue-bob 3s ease-in-out infinite; }
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Gold sheen sweeping the "most popular" flag */
.pkg-flag {
  background: linear-gradient(100deg, var(--gold-deep), var(--gold-soft) 45%, var(--gold-deep));
  background-size: 220% auto;
  animation: shimmer 4.5s linear infinite;
}

/* Section headings get a faint gold underline that draws in */
/* `table` shrink-wraps like inline-block but still breaks onto its own line,
   so the underline matches the text width without riding up beside the eyebrow */
.section-head.center h2 { position: relative; display: table; margin-inline: auto; }
/* Insets rather than width + translateX — the translate version resolves
   to the wrong edge under RTL and the rule escapes the heading box */
.section-head.center h2::after {
  content: '';
  position: absolute;
  inset-inline: 50%;
  bottom: -.55rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: inset-inline .9s var(--ease) .35s;
}
.section-head.center h2.in::after { inset-inline: 19%; }

/* Form fields lift on focus */
.field input, .field textarea, .field select {
  transition: border-color var(--t-fast) var(--ease-soft),
              box-shadow var(--t-fast) var(--ease-soft),
              transform var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { transform: translateY(-2px); }

/* WhatsApp button gets a gentle wave every few seconds */
@keyframes wa-wave {
  0%, 88%, 100% { transform: rotate(0); }
  91%           { transform: rotate(-13deg); }
  94%           { transform: rotate(11deg); }
  97%           { transform: rotate(-6deg); }
}
.wa-btn svg { animation: wa-wave 6s ease-in-out infinite; }
.wa-btn:hover svg { animation-play-state: paused; }

/* Logo shimmer sweep on hover */
.brand { position: relative; overflow: hidden; }

/* ============================================================
   11. REDUCED MOTION — kill everything decorative
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-bg img, .page-hero .hero-bg img,
  .hero::before, .particle, .scroll-cue,
  .wa-btn svg, .pkg-flag, .socials .social-btn {
    animation: none !important;
  }
  .particles { display: none; }
  .split-words .w > i { transform: none !important; opacity: 1 !important; }
  .clip-reveal { clip-path: none !important; }
  .parallax-inner img { transform: none !important; }
  #page-curtain { display: none; }
  .section-head.center h2::after { transition: none; inset-inline: 19%; }
}