/* JLuxeAi motion layer for the sample sites. Loaded last on each page, so it refines the movement
   without touching layout, colour or type. Delete the <link> to this file and a page goes back to its old movement.

   The idea: how a thing travels matters more than how far. Four curves cover every case.
   Travel distances are short, nothing loops that did not loop before, and reduced-motion still switches it all off. */
:root{
  --e-out:cubic-bezier(.16,1,.3,1);       /* arriving: quick start, long soft landing */
  --e-soft:cubic-bezier(.33,1,.68,1);     /* small state changes: hover, focus, fade */
  --e-inout:cubic-bezier(.65,0,.35,1);    /* moving from one place to another */
  --e-spring:cubic-bezier(.34,1.3,.64,1); /* a touch of give, for things you press */
}

/* 1. Sections arriving on scroll: shorter travel, opacity settles before position does */
.js:not(.playful) [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e-soft),transform 1s var(--e-out),letter-spacing 1.1s var(--e-out);
  transition-delay:calc(var(--d,0)*90ms)}
.js:not(.playful) [data-reveal].in{opacity:1;transform:none}
/* once an item has arrived it answers hover straight away, with no leftover delay */
.js [data-reveal].done{transition:transform .5s var(--e-out),opacity .4s var(--e-soft),box-shadow .5s var(--e-out);transition-delay:0s}

/* small labels tighten into place as they appear */
.js:not(.playful) .eyebrow[data-reveal]:not(.in){letter-spacing:.42em}

/* photo strip: each photo arrives a beat after the one before it */
.js:not(.playful) .rail[data-reveal]{opacity:1;transform:none}
.js:not(.playful) .rail[data-reveal]>*{opacity:0;transform:translateY(22px) scale(.97);transition:opacity .7s var(--e-soft),transform 1.1s var(--e-out)}
.js:not(.playful) .rail[data-reveal]>:nth-child(2){transition-delay:70ms}
.js:not(.playful) .rail[data-reveal]>:nth-child(3){transition-delay:140ms}
.js:not(.playful) .rail[data-reveal]>:nth-child(4){transition-delay:210ms}
.js:not(.playful) .rail[data-reveal]>:nth-child(n+5){transition-delay:280ms}
.js:not(.playful) .rail[data-reveal].in>*{opacity:1;transform:none}

/* 2. Top of the page: headline first, then the line under it, the buttons, the rating, the photo */
.js:not(.playful) [data-words] .w{transform:translateY(.55em);animation:word .95s var(--e-out) forwards;animation-delay:calc(var(--i)*55ms + 80ms)}
@keyframes m-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes m-art{from{opacity:0;transform:translateY(18px) scale(.97)}}
.hero :is(.pill,.kick){animation:m-rise .8s var(--e-out) both}
.hero .tag{animation:m-rise .9s var(--e-out) .42s both}
.hero .cta{animation:m-rise .9s var(--e-out) .54s both}
.hero :is(.rating,.glass){animation:m-rise .9s var(--e-out) .66s both}
.hero :is(.art,.orb,.plate,.fan,.collage){animation:m-art 1.3s var(--e-out) .2s both}

/* 3. Things you press */
.btn{transition:transform .35s var(--e-spring),box-shadow .35s var(--e-soft),background-color .25s var(--e-soft),color .25s var(--e-soft),filter .25s var(--e-soft)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.09s}
.arrows button,.feel button,[data-tab]{transition:transform .3s var(--e-spring),background-color .25s var(--e-soft),color .25s var(--e-soft),border-color .25s var(--e-soft)}
.arrows button:active,.feel button:active,[data-tab]:active{transform:scale(.95);transition-duration:.09s}

/* 4. Cards and photos under the pointer */
.card,.ic,.set{transition:transform .5s var(--e-out),box-shadow .5s var(--e-out)}
.card img{transition:transform 1.2s var(--e-out)}
.card:hover img{transform:scale(1.05)}

/* 5. Menu links: a line draws in from the left and leaves to the right */
.nav a:not(.btn){position:relative}
.nav a:not(.btn):after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out)}
.nav a:not(.btn):hover:after,.nav a:not(.btn):focus-visible:after{transform:scaleX(1);transform-origin:left}

/* 6. Header and booking bar */
.site-head{transition:border-color .4s var(--e-soft),box-shadow .4s var(--e-soft)}
.site-head.stuck{box-shadow:0 10px 30px -24px rgba(0,0,0,.45)}
.bookbar{transition:transform .65s var(--e-out)}

/* 7. Questions open and close smoothly where the browser supports it; elsewhere they open as before */
summary:after{display:inline-block;transition:transform .45s var(--e-out)}
details[open] summary:after{transform:rotate(180deg)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  details::details-content{block-size:0;overflow:clip;opacity:0;transition:block-size .5s var(--e-out),opacity .35s var(--e-soft),content-visibility .5s allow-discrete}
  details[open]::details-content{block-size:auto;opacity:1}
}

/* 8. Price tabs: the new list eases in instead of snapping */
@keyframes m-panel{from{opacity:0;transform:translateY(10px)}}
[data-panel]:not([hidden]){animation:m-panel .55s var(--e-out)}

/* 9. Form fields */
form :is(input,select){transition:border-color .25s var(--e-soft),box-shadow .25s var(--e-soft)}
form :is(input,select):focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent,#888) 18%,transparent)}

/* Phone previews on the home page show the finished state, so nothing waits to play */
.embed .hero :is(.pill,.kick,.tag,.cta,.rating,.glass,.art,.orb,.plate,.fan,.collage){animation:none}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js [data-reveal],.js .rail[data-reveal]>*,.js [data-words] .w{opacity:1!important;transform:none!important}
}