/* premium.css — visual experience layer (compact). Uses CSS scroll-timeline where supported, IntersectionObserver-driven .is-visible elsewhere, and CSS-only 3D for the signature balloon. All motion guarded by prefers-reduced-motion. */

/* 1. Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:transparent;z-index:1000;pointer-events:none}
.scroll-progress::before{content:"";display:block;height:100%;width:100%;background:linear-gradient(90deg,#E11D48 0%,#F59E0B 50%,#10B981 100%);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.scroll-progress::before{animation:sp linear;animation-timeline:scroll(root)}@keyframes sp{from{transform:scaleX(0)}to{transform:scaleX(1)}}}}

/* 2. Reveal-on-scroll */
.reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translate3d(0,24px,0);will-change:opacity,transform}
  .js .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
  .js .reveal-stagger>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .6s ease}
  .js .reveal-stagger.is-visible>*:nth-child(1){opacity:1;transform:none;transition-delay:0s}
  .js .reveal-stagger.is-visible>*:nth-child(2){opacity:1;transform:none;transition-delay:.08s}
  .js .reveal-stagger.is-visible>*:nth-child(3){opacity:1;transform:none;transition-delay:.16s}
  .js .reveal-stagger.is-visible>*:nth-child(4){opacity:1;transform:none;transition-delay:.24s}
  .js .reveal-stagger.is-visible>*:nth-child(5){opacity:1;transform:none;transition-delay:.32s}
  .js .reveal-stagger.is-visible>*:nth-child(6){opacity:1;transform:none;transition-delay:.40s}
  .js .reveal-stagger.is-visible>*:nth-child(n+7){opacity:1;transform:none;transition-delay:.48s}
}

/* 3. Premium hero — mesh-gradient + grain */
.hero-premium{position:relative;overflow:hidden;isolation:isolate}
.hero-premium::before{content:"";position:absolute;inset:-20% -10% -10% -10%;z-index:-2;background:radial-gradient(800px 600px at 18% 22%,rgba(225,29,72,.18),transparent 60%),radial-gradient(700px 500px at 78% 18%,rgba(245,158,11,.16),transparent 60%),radial-gradient(900px 700px at 50% 88%,rgba(16,185,129,.12),transparent 65%);filter:saturate(1.05)}
@media (prefers-reduced-motion:no-preference){.hero-premium::before{animation:mesh 22s cubic-bezier(.45,0,.55,1) infinite alternate}@keyframes mesh{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1%,0) scale(1.04)}100%{transform:translate3d(2%,-1%,0) scale(1.02)}}}
.hero-premium [data-depth]{will-change:transform}

/* 4. 3D CSS-only floating balloon */
.balloon-3d{position:relative;width:84px;height:120px;perspective:800px;perspective-origin:center 30%;pointer-events:none}
.balloon-3d .envelope{width:80px;height:90px;position:absolute;top:0;left:50%;transform-style:preserve-3d;transform:translateX(-50%)}
.balloon-3d .envelope::before,.balloon-3d .envelope::after{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(135deg,#E11D48 0%,#F59E0B 60%,#FCD34D 100%);box-shadow:inset -8px -2px 14px rgba(0,0,0,.25),inset 6px 2px 10px rgba(255,255,255,.18)}
.balloon-3d .envelope::after{transform:rotateY(70deg);opacity:.6;background:linear-gradient(135deg,#BE123C 0%,#D97706 60%,#F59E0B 100%)}
.balloon-3d .basket{position:absolute;bottom:0;left:50%;width:22px;height:14px;background:linear-gradient(180deg,#92400E 0%,#5B2D0A 100%);transform:translateX(-50%);border-radius:3px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.balloon-3d .basket::before,.balloon-3d .basket::after{content:"";position:absolute;top:-18px;width:1px;height:18px;background:rgba(60,40,20,.6)}
.balloon-3d .basket::before{left:2px;transform:rotate(-12deg);transform-origin:bottom}
.balloon-3d .basket::after{right:2px;transform:rotate(12deg);transform-origin:bottom}
@media (prefers-reduced-motion:no-preference){
  .balloon-3d .envelope{animation:bRot 9s ease-in-out infinite}
  .balloon-3d{animation:bBob 5s ease-in-out infinite}
  @keyframes bRot{0%{transform:translateX(-50%) rotateY(-18deg)}50%{transform:translateX(-50%) rotateY(22deg)}100%{transform:translateX(-50%) rotateY(-18deg)}}
  @keyframes bBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
}

/* 5. 3D card tilt (JS pointer-tracking sets transform) */
.tilt-3d{transform-style:preserve-3d;will-change:transform;transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
.tilt-3d .tilt-3d-inner{transform:translateZ(0);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .tilt-3d{transform:perspective(900px) rotateX(0) rotateY(0)}
  .tilt-3d:hover{box-shadow:0 28px 60px -22px rgba(15,23,42,.28),0 8px 14px -8px rgba(15,23,42,.12)}
  .tilt-3d:hover .tilt-3d-inner{transform:translateZ(22px)}
}

/* 6. Storytelling section */
.story-section{position:relative;margin:64px 0;padding:80px 0;overflow:hidden;isolation:isolate}
.story-section .story-bg{position:absolute;inset:-10%;z-index:-1;background:linear-gradient(120deg,#FFE4E6 0%,#FEF3C7 100%);opacity:.7;will-change:transform}
.story-section .story-eyebrow{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#BE123C;font-weight:600;margin-bottom:14px;display:inline-block}
.story-section .story-eyebrow::before{content:"";display:inline-block;vertical-align:middle;width:28px;height:2px;background:#E11D48;margin-right:12px}
.story-section .story-h2{font-family:var(--font-serif,"Fraunces",Georgia,serif);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:300;letter-spacing:-.02em;line-height:1.15;margin-bottom:18px}
.story-section .story-h2 em{font-style:italic;color:#BE123C;font-weight:400}
.story-section .story-lead{font-size:1.12rem;line-height:1.65;max-width:640px;color:var(--c-text-soft,#475569)}
@media (prefers-reduced-motion:no-preference){.story-section .story-bg{animation:sDrift 18s ease-in-out infinite alternate}@keyframes sDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-1%,-2%,0) scale(1.06)}}}

/* 7. Scroll cue chevron */
.scroll-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:rgba(15,23,42,.55);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.scroll-cue::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.scroll-cue{animation:cue 1.6s ease-in-out infinite}@keyframes cue{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(6px)}}}

/* 8. Premium card hover depth */
.card.card-premium{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
@media (prefers-reduced-motion:no-preference) and (hover:hover){.card.card-premium:hover{transform:translateY(-6px);box-shadow:0 24px 48px -20px rgba(15,23,42,.22),0 8px 14px -8px rgba(15,23,42,.10)}}

/* 8b. "Actually stayed here" trust badge */
.stayed-here-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:.78rem;font-weight:600;color:#065F46;background:#D1FAE5;border:1px solid #6EE7B7;margin:8px 0 4px;letter-spacing:.01em}
.stayed-here-dot{width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 0 2px rgba(16,185,129,.18)}
.hotel-card[data-stayed="1"]{position:relative}
@media (prefers-reduced-motion:no-preference){.stayed-here-dot{animation:shDot 2.4s ease-in-out infinite}@keyframes shDot{0%,100%{box-shadow:0 0 0 2px rgba(16,185,129,.18)}50%{box-shadow:0 0 0 5px rgba(16,185,129,.08)}}}

/* 9. Animated headline underline */
.headline-anim{position:relative;display:inline-block}
.headline-anim::after{content:"";position:absolute;bottom:-6px;left:0;height:3px;width:64px;background:linear-gradient(90deg,#E11D48 0%,#F59E0B 100%);border-radius:2px;transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){.headline-anim::after{animation:hu 1.4s cubic-bezier(.22,.61,.36,1) .3s both;transform:scaleX(0)}@keyframes hu{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}}

/* 10. Eyebrow refinement */
.eyebrow-premium{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#BE123C}
.eyebrow-premium::before{content:"";width:24px;height:1.5px;background:currentColor}

/* 11. Page-load fade-in */
@media (prefers-reduced-motion:no-preference){body{animation:pfi .6s ease-out}@keyframes pfi{0%{opacity:0;transform:translate3d(0,8px,0)}100%{opacity:1;transform:translate3d(0,0,0)}}}