/* public/css/animations.css — motion & polish layer for shortstay9ja
   Additive only: builds on site.css, never restructures layout. Everything
   here is fully disabled under prefers-reduced-motion at the bottom. */

/* ---------------------------------------------------------------- *
 * 1. Scroll-reveal primitives
 *    Elements start slightly down + transparent, then ease into place
 *    when they enter the viewport (JS toggles .in-view).
 * ---------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity,transform;
  /* Failsafe: if JS/observer never fires, force visible after 2s so content is
     NEVER stuck invisible (this was causing blank cards on some mobile browsers). */
  animation:revealFailsafe 0s linear 2s forwards;
}
@keyframes revealFailsafe{to{opacity:1;transform:none}}
[data-reveal="left"]{transform:translateX(-34px)}
[data-reveal="right"]{transform:translateX(34px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in-view{opacity:1;transform:none;animation:none}

/* Stagger children (cards in a grid, steps, band cells, etc.) */
[data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .65s cubic-bezier(.16,.84,.44,1), transform .65s cubic-bezier(.16,.84,.44,1);
  animation:revealFailsafe 0s linear 2s forwards;
}
[data-reveal-stagger].in-view > *{opacity:1;transform:none;animation:none}
[data-reveal-stagger].in-view > *:nth-child(1){transition-delay:.04s}
[data-reveal-stagger].in-view > *:nth-child(2){transition-delay:.11s}
[data-reveal-stagger].in-view > *:nth-child(3){transition-delay:.18s}
[data-reveal-stagger].in-view > *:nth-child(4){transition-delay:.25s}
[data-reveal-stagger].in-view > *:nth-child(5){transition-delay:.32s}
[data-reveal-stagger].in-view > *:nth-child(6){transition-delay:.39s}
[data-reveal-stagger].in-view > *:nth-child(7){transition-delay:.46s}
[data-reveal-stagger].in-view > *:nth-child(8){transition-delay:.53s}
[data-reveal-stagger].in-view > *:nth-child(n+9){transition-delay:.6s}

/* ---------------------------------------------------------------- *
 * 2. Hero — layered entrance + living gradient + drifting house marks
 * ---------------------------------------------------------------- */
.hero-inner > *{
  opacity:0;
  transform:translateY(24px);
  animation:heroRise .9s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-inner > *:nth-child(1){animation-delay:.10s}
.hero-inner > *:nth-child(2){animation-delay:.22s}
.hero-inner > *:nth-child(3){animation-delay:.34s}
.searchdock{
  opacity:0;
  transform:translateY(30px);
  animation:heroRise .9s cubic-bezier(.16,.84,.44,1) .46s forwards;
}
@keyframes heroRise{to{opacity:1;transform:none}}

/* A slow, living aurora behind the hero — cool teal depth, no orange wash. */
.hero::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height:140%;
  z-index:0;
  background:
    radial-gradient(40% 55% at 18% 30%, rgba(26,102,128,.30), transparent 70%),
    radial-gradient(45% 60% at 82% 18%, rgba(17,86,107,.42), transparent 72%),
    radial-gradient(40% 50% at 60% 80%, rgba(13,70,87,.30), transparent 70%);
  filter:blur(8px);
  animation:auroraDrift 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes auroraDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(2%,3%,0) scale(1.08)}
  100%{transform:translate3d(4%,-3%,0) scale(1.04)}
}
/* Make the existing pattern slowly drift so the canvas feels alive. */
.hero-marks{animation:marksDrift 60s linear infinite}
@keyframes marksDrift{from{background-position:0 0}to{background-position:320px 320px}}

/* A subtle, steady teal accent glow (no orange wash, no pulsing). */
.hero::after{animation:glowPulse 9s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.5;transform:scale(1)}to{opacity:.72;transform:scale(1.06)}}

/* ---------------------------------------------------------------- *
 * 3. Buttons — shine sweep + magnetic press
 * ---------------------------------------------------------------- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";
  position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(0) scale(.97)}

/* ---------------------------------------------------------------- *
 * 4. Property cards — depth lift, image zoom, arrow nudge, sheen
 * ---------------------------------------------------------------- */
.pcard{transition:transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease}
.pcard .ph{overflow:hidden}
.pcard .ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,40,50,.42));
  opacity:.6;transition:opacity .35s ease;
}
.pcard:hover .ph::after{opacity:.85}
.pcard .ph[style*="background-image"]{transition:transform .7s cubic-bezier(.16,.84,.44,1)}
.pcard:hover .ph[style*="background-image"]{transform:scale(1.07)}
.pcard .arrow{transition:transform .3s ease,background .25s,color .25s}
.pcard:hover .arrow{transform:translateX(4px) rotate(-2deg)}
.pcard .tag,.pcard .disc-badge{transition:transform .3s ease}
.pcard:hover .tag{transform:translateY(-2px)}

/* ---------------------------------------------------------------- *
 * 5. Nav links — animated underline grow from center
 * ---------------------------------------------------------------- */
.nav a{position:relative}
.nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:2px;
  background:var(--orange);border-radius:2px;
  transition:left .28s ease,right .28s ease;
}
.nav a:hover::after,.nav a.active::after{left:0;right:0}

/* Header shrinks subtly once the page is scrolled (JS adds .scrolled). */
.site-header{transition:background .3s ease, box-shadow .3s ease}
.site-header.scrolled{background:rgba(10,56,69,.96);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.site-header.scrolled .bar{height:64px;transition:height .3s ease}

/* ---------------------------------------------------------------- *
 * 6. Eyebrow house-mark — gentle breathing so the brand motif feels alive
 * ---------------------------------------------------------------- */
.eyebrow::before{animation:markBeat 4.5s ease-in-out infinite}
@keyframes markBeat{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-6deg) scale(1.12)}}

/* Step + band icons get a tiny float on hover of their card */
.step,.band .cell{transition:transform .3s ease,background .3s ease}
.step:hover{transform:translateY(-5px)}
.step:hover .n{animation:markBeat 1.2s ease-in-out}
.band .cell:hover{background:var(--teal-2)}
.band .cell:hover .ico{animation:markBeat 1.2s ease-in-out}

/* ---------------------------------------------------------------- *
 * 7. Count-up stats: the number "rolls" in with a slight blur clear
 * ---------------------------------------------------------------- */
.hero-strip .stat b{transition:opacity .4s ease}

/* ---------------------------------------------------------------- *
 * 8. Section headings — animated gradient sweep on the eyebrow text
 * ---------------------------------------------------------------- */
.eyebrow{
  background:linear-gradient(90deg,var(--orange),var(--orange-2),var(--orange));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  color:var(--orange); /* fallback */
}
@supports(-webkit-background-clip:text){
  .eyebrow{color:transparent;-webkit-text-fill-color:transparent;animation:eyebrowSheen 5s linear infinite}
}
@keyframes eyebrowSheen{to{background-position:200% center}}
.eyebrow::before{-webkit-text-fill-color:initial} /* keep the mark solid */

/* ---------------------------------------------------------------- *
 * 9. WhatsApp float — soft attention pulse ring
 * ---------------------------------------------------------------- */
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(15,138,67,.55);
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(15,138,67,.5)}
  70%{box-shadow:0 0 0 16px rgba(15,138,67,0)}
  100%{box-shadow:0 0 0 0 rgba(15,138,67,0)}
}

/* ---------------------------------------------------------------- *
 * 10. Carousel slide change — gentle fade-in of the active media
 * ---------------------------------------------------------------- */
.carousel-slide img,.carousel-slide video{transition:opacity .4s ease}

/* ---------------------------------------------------------------- *
 * 11. Form focus — soft ring bloom
 * ---------------------------------------------------------------- */
.field input:focus,.field select:focus,.filterbar input:focus,.filterbar select:focus,
.searchdock input:focus,.searchdock select:focus{
  box-shadow:0 0 0 4px rgba(254,127,56,.14);
  transition:box-shadow .2s ease,border-color .15s ease;
}

/* ---------------------------------------------------------------- *
 * 12. Page load — a faint top progress shimmer (purely decorative)
 * ---------------------------------------------------------------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9000;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  box-shadow:0 0 10px rgba(254,127,56,.6);
  transition:width .1s linear;
}

/* ---------------------------------------------------------------- *
 * 13. Success / confirmation moments — drawn checkmark + badge stamp
 * ---------------------------------------------------------------- */
.success-check{
  width:84px;height:84px;margin:0 auto 6px;display:block;
}
.success-check circle{
  fill:none;stroke:#16a34a;stroke-width:4;
  stroke-dasharray:289;stroke-dashoffset:289;
  animation:checkRing .7s cubic-bezier(.65,0,.45,1) .1s forwards;
}
.success-check path{
  fill:none;stroke:#16a34a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:60;stroke-dashoffset:60;
  animation:checkTick .45s cubic-bezier(.65,0,.45,1) .7s forwards;
}
@keyframes checkRing{to{stroke-dashoffset:0}}
@keyframes checkTick{to{stroke-dashoffset:0}}

/* The status badge "stamps" in */
.badge.green,.badge.coral{
  animation:badgeStamp .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes badgeStamp{
  0%{opacity:0;transform:scale(1.6) rotate(-6deg)}
  60%{opacity:1;transform:scale(.94) rotate(1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* Quote/summary rows cascade in on confirmation cards */
.quote .line{opacity:0;animation:lineIn .5s ease forwards}
.quote .line:nth-child(1){animation-delay:.85s}
.quote .line:nth-child(2){animation-delay:.95s}
.quote .line:nth-child(3){animation-delay:1.05s}
.quote .line:nth-child(4){animation-delay:1.15s}
.quote .line:nth-child(5){animation-delay:1.25s}
.quote .line:nth-child(6){animation-delay:1.35s}
@keyframes lineIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- *
 * 14. Carousel media — soft Ken Burns drift on the active still image
 * ---------------------------------------------------------------- */
.carousel-slide img{transition:transform 8s ease-out}
.carousel:hover .carousel-slide img{transform:scale(1.04)}

/* Thumbnails lift slightly on hover */
.carousel-thumbs .cthumb{transition:transform .2s ease,border-color .2s ease}
.carousel-thumbs .cthumb:hover{transform:translateY(-3px)}

/* Amenity ticks pop their house-mark when the list reveals */
[data-reveal-stagger].in-view .amenities li::before{animation:markBeat 1.4s ease-in-out}

/* Sticky booking box gets a gentle entrance from the right on desktop */
@media(min-width:981px){
  .booking-box{animation:none}
}

/* Processing spinner (pending states) — house-mark pulses inside a spinning ring */
.proc-spin{width:64px;height:64px;margin:0 auto 18px;position:relative}
.proc-spin::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(254,127,56,.2);border-top-color:var(--orange);
  animation:procRing .9s linear infinite;
}
.proc-spin .mark{
  position:absolute;inset:0;margin:auto;width:24px;height:24px;
  background:var(--orange);clip-path:var(--house);
  animation:markBeat 1.6s ease-in-out infinite;
}
@keyframes procRing{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  .hero-inner > *,.searchdock{animation:none!important;opacity:1!important;transform:none!important}
  .hero::before,.hero::after,.hero-marks,.eyebrow,.eyebrow::before,
  .wa-float::before{animation:none!important}
  .btn::after{display:none}
  .scroll-progress{display:none}
  .success-check circle,.success-check path{animation:none!important;stroke-dashoffset:0!important}
  .badge.green,.badge.coral,.quote .line{animation:none!important;opacity:1!important;transform:none!important}
  .carousel-slide img{transition:none!important}
  .proc-spin::before,.proc-spin .mark{animation:none!important}
}