/* Wholelistic for Her — motion system
   Principles: slow, soft, editorial. One orchestrated entrance per page, quiet reveals on scroll,
   ambient movement only in the hero. Only transform, opacity and clip-path are animated.
   Everything rests in its final, visible state: with reduced motion, without JS, or in browsers
   without scroll-driven animations, the page simply appears complete. */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* long, graceful settle */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-enter:1.1s;
  interpolate-size:allow-keywords;          /* lets <details> animate to auto height */
}

/* ---------- page-to-page transitions (cross-document View Transitions) ---------- */
@view-transition{navigation:auto}
header.site{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .32s var(--ease-soft) both}
::view-transition-new(root){animation:vt-in .6s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- header: scroll progress + compact state ---------- */
header.site{transition:box-shadow .4s var(--ease-soft),background-color .4s var(--ease-soft)}
header.site .nav{transition:padding-block .4s var(--ease-out)}
header.site.scrolled{box-shadow:0 10px 30px -22px rgba(36,26,35,.5)}
header.site.scrolled .nav{padding-block:8px}
.brand img{transition:transform .8s var(--ease-out)}
.brand:hover img{transform:rotate(-8deg) scale(1.04)}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--rose),var(--aubergine));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline: scroll()){
  .scroll-progress{animation:progress linear both;animation-timeline:scroll(root)}
}
@supports not (animation-timeline: scroll()){.scroll-progress{display:none}}
@keyframes progress{to{transform:scaleX(1)}}

/* nav underline draws from the left */
.nav ul a{border-bottom:0;background:linear-gradient(var(--rose),var(--rose)) no-repeat 0 100% / 0 1px;transition:background-size .5s var(--ease-out),color .3s}
.nav ul a:hover,.nav ul a[aria-current="page"]{background-size:100% 1px}

/* ---------- hero entrance (home and every inner page) ---------- */
.hero,.page-hero{position:relative;isolation:isolate;overflow:hidden}
.hero-copy > *{animation:enter-up var(--dur-enter) var(--ease-out) both}
.hero-copy > :nth-child(1){animation-delay:.05s}
.hero-copy > :nth-child(2){animation-delay:.15s}
.hero-copy > :nth-child(3){animation-delay:.55s}
.hero-copy > :nth-child(4){animation-delay:.68s}
.hero-copy > :nth-child(5){animation-delay:.8s}
.hero-copy > :nth-child(6){animation-delay:.9s}
@keyframes enter-up{from{opacity:0;transform:translateY(22px)}}

/* headline words rise from behind a mask (words are wrapped by motion.js) */
.split-ready{animation:none!important}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.word > span{display:inline-block;animation:word-rise 1.2s var(--ease-out) both;animation-delay:calc(var(--base,.15s) + var(--i) * 55ms)}
@keyframes word-rise{from{transform:translateY(105%) rotate(2deg)}}

/* arched photo unveils upward, then settles from a slight zoom */
.hero-photo .arch,.page-hero .arch{animation:arch-unveil 1.5s var(--ease-out) .2s both}
.hero-photo .arch img,.page-hero .arch img{animation:settle 2.6s var(--ease-out) .2s both}
@keyframes arch-unveil{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes settle{from{transform:scale(1.14)}}
.badge-float{animation:enter-up 1s var(--ease-out) 1s both,bob 7s ease-in-out 2s infinite}
@keyframes bob{50%{transform:translateY(-6px)}}

/* ambient aura behind hero content */
.hero::before,.page-hero::before{content:"";position:absolute;z-index:-1;inset:-20% -10% auto auto;width:min(70vw,820px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rose) 22%,transparent),transparent 70%),
             radial-gradient(closest-side at 30% 70%,color-mix(in srgb,var(--aubergine) 14%,transparent),transparent 70%);
  filter:blur(10px);animation:aura 22s ease-in-out infinite alternate;pointer-events:none}
@keyframes aura{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.08)}100%{transform:translate(4%,-4%) scale(.96)}}

/* pointer parallax on the hero photo (set by motion.js) */
.hero-photo,.page-hero .arch{translate:var(--px,0) var(--py,0);transition:translate 1.2s var(--ease-out)}

/* rotating seal on the home hero */
.seal{position:absolute;right:-14px;top:18px;width:118px;aspect-ratio:1;z-index:2;color:var(--ink);background:var(--ivory);border-radius:50%;box-shadow:0 16px 34px -22px rgba(36,26,35,.55);animation:enter-up 1s var(--ease-out) 1.2s both}
.seal svg{width:100%;height:100%;animation:spin 28s linear infinite}
.seal text{font:600 9.6px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;fill:currentColor}
.seal .seal-core{position:absolute;inset:30%;border-radius:50%;background:var(--rose);display:grid;place-items:center;color:#fff;font-family:var(--display);font-style:italic;font-size:1.35rem;box-shadow:0 10px 24px -14px rgba(36,26,35,.6)}
@keyframes spin{to{transform:rotate(1turn)}}
@media (max-width:860px){.seal{right:8px;width:96px}}

/* ---------- scroll reveals ---------- */
/* Applied to the parts of every block, so pages built from blocks animate automatically.
   motion.js uses the same list (REVEAL) for its fallback; keep them in sync. */
@supports (animation-timeline: view()){
  :where(main section:not(.hero,.page-hero), main .proof) :where(
    .sec-head,.center-head,.pillar,.now-card,.trio > article,.steps > li,.quote,.tier,.gallery > figure,
    .itinerary > li,.faq > details,.compare > div,.included > div,.talks > li,.milestones > li,.about-photos > img,
    .mosaic > img,.form-card,.reset,.proof li,.notice,.stack > .eyebrow,.stack > h2,.stack > .lede,.stack > .prose,
    .stack > .ctas,.stack > .link-arrow,.stack > .facts,.stack > .countdown,.stack > .pull,.stack > .signature,
    .stack > .pill,.stack > .rounded
  ){animation:reveal-up linear both;animation-timeline:view();animation-range:entry 4% entry 62%}

  /* stagger siblings in a row */
  :where(.pillar,.now-card,.trio > article,.steps > li,.quote,.tier,.gallery > figure,.compare > div,.included > div,.milestones > li,.about-photos > img,.mosaic > img,.proof li):nth-child(2){animation-range:entry 10% entry 72%}
  :where(.pillar,.now-card,.trio > article,.steps > li,.quote,.tier,.gallery > figure,.compare > div,.included > div,.milestones > li,.about-photos > img,.mosaic > img,.proof li):nth-child(3){animation-range:entry 16% entry 82%}
  :where(.gallery > figure,.milestones > li,.proof li):nth-child(4){animation-range:entry 22% entry 90%}

  /* arches unveil as they arrive; photos drift gently while on screen */
  main section:not(.hero,.page-hero) .arch{animation:arch-unveil linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
  :where(.arch,.rounded,.about-photos,.mosaic) img{animation:drift linear both;animation-timeline:view();animation-range:cover}
  .hero-photo .arch img,.page-hero .arch img{animation:settle 2.6s var(--ease-out) .2s both}
}
@keyframes reveal-up{from{opacity:0;transform:translateY(42px)}}
@keyframes drift{from{transform:scale(1.1) translateY(-3%)}to{transform:scale(1.1) translateY(3%)}}

/* Fallback for browsers without scroll-driven animations: motion.js adds .io-hidden only to
   elements below the fold, then removes it as each one scrolls into view. */
.io-hidden{opacity:0;transform:translateY(36px)}
.io-shown{transition:opacity 1s var(--ease-out),transform 1.2s var(--ease-out)}

/* ---------- motion graphics ---------- */

/* mantra ticker */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:22px;background:var(--ivory);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track > span{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;font-family:var(--display);font-style:italic;font-size:clamp(1.8rem,4vw,3rem);white-space:nowrap;color:var(--ink)}
.marquee-track i{font-style:normal;color:var(--rose);font-size:.6em}
@keyframes ticker{to{transform:translateX(-50%)}}

/* itinerary: a journey line that draws as you scroll, with stops that light up */
.itinerary{position:relative}
.itinerary > li{position:relative;padding-left:34px}
.itinerary::before{content:"";position:absolute;left:6px;top:28px;bottom:28px;width:1px;background:var(--line)}
.itinerary::after{content:"";position:absolute;left:6px;top:28px;bottom:28px;width:1px;background:linear-gradient(var(--rose),var(--aubergine));transform-origin:0 0}
.itinerary > li::before{content:"";position:absolute;left:0;top:26px;width:13px;height:13px;border-radius:50%;background:var(--rose);border:3px solid var(--sand);box-shadow:0 0 0 1px var(--rose)}
@supports (animation-timeline: view()){
  .itinerary{view-timeline:--journey block}
  .itinerary::after{animation:draw-line linear both;animation-timeline:--journey;animation-range:entry 30% exit 60%}
  .itinerary > li::before{animation:stop-on linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
}
@keyframes draw-line{from{transform:scaleY(0)}}
@keyframes stop-on{from{background:var(--sand);transform:scale(.6)}}
@media (max-width:560px){.itinerary > li{padding-left:28px}}

/* countdown digits roll when they change (class set by motion.js) */
.countdown b,.days-left b{display:inline-block}
.tick{animation:roll .6s var(--ease-out)}
@keyframes roll{from{transform:translateY(-55%);opacity:0}}

/* ---------- interaction ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--ease-out),background .4s,color .4s,box-shadow .5s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.btn:hover::after{transform:translateX(120%)}
.btn-primary:hover{box-shadow:0 14px 30px -16px color-mix(in srgb,var(--rose) 80%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}

.link-arrow{display:inline-flex;align-items:center;gap:.45em;border-bottom:0;background:linear-gradient(var(--rose),var(--rose)) no-repeat 0 100% / 100% 1px;transition:background-size .6s var(--ease-out),color .3s}
.link-arrow::after{content:"→";transition:transform .5s var(--ease-out)}
.link-arrow:hover{background-size:0 1px;background-position:100% 100%}
.link-arrow:hover::after{transform:translateX(5px)}

.arch img,.rounded img{transition:scale 1.4s var(--ease-out)}
.pillar:hover .arch img,.rounded:hover img{scale:1.04}
.pillar{transition:translate .7s var(--ease-out)}
.pillar:hover{translate:0 -6px}
.now-card,.tier,.quote,.steps > li,.compare > div{transition:translate .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s}
.now-card:hover,.tier:hover,.quote:hover,.steps > li:hover,.compare > div:hover{translate:0 -4px;box-shadow:0 22px 40px -30px rgba(36,26,35,.55)}
.gallery figure{overflow:hidden}
.gallery img{transition:transform 1.2s var(--ease-out),filter .8s}
.gallery figure:hover img{transform:scale(1.04);filter:saturate(1.08)}

/* FAQ opens smoothly where supported */
.faq summary::after{content:"+";transition:transform .5s var(--ease-out)}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease-out),content-visibility .5s allow-discrete}
.faq details[open]::details-content{block-size:auto}

/* mobile menu slides down */
@media (max-width:920px){
  .nav.open ul{animation:menu-in .5s var(--ease-out) both}
  .nav.open ul li{animation:enter-up .6s var(--ease-out) both}
  .nav.open ul li:nth-child(2){animation-delay:.04s}
  .nav.open ul li:nth-child(3){animation-delay:.08s}
  .nav.open ul li:nth-child(4){animation-delay:.12s}
  .nav.open ul li:nth-child(5){animation-delay:.16s}
  .nav.open ul li:nth-child(6){animation-delay:.2s}
}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* success messages */
.success:not([hidden]){animation:enter-up .7s var(--ease-out) both}

/* ---------- reduced motion: everything rests, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .io-hidden{opacity:1;transform:none}
  .hero-photo,.page-hero .arch{translate:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* booking-band photo: drifts like the other framed photos */
.now-photo img{transition:scale 1.4s var(--ease-out)}
.now-photo:hover img{scale:1.04}
@supports (animation-timeline: view()){
  .now-photo img{animation:drift linear both;animation-timeline:view();animation-range:cover}
}
@media (prefers-reduced-motion: reduce){.now-photo img{animation:none!important;transition:none!important}}

/* credentials banner items rise in one after another */
@supports (animation-timeline: view()){
  .creds > li{animation:reveal-up linear both;animation-timeline:view();animation-range:entry 4% entry 62%}
  .creds > li:nth-child(2){animation-range:entry 10% entry 72%}
  .creds > li:nth-child(3){animation-range:entry 16% entry 82%}
  .creds > li:nth-child(4){animation-range:entry 22% entry 90%}
}