/* Fivelle motion system.
 * Everything is scoped to html.motion, which is only set when JS runs and the
 * visitor has not asked for reduced motion. One house curve, slow and soft:
 * entrances 0.8 to 1.2s, micro-interactions 0.2 to 0.4s.
 * LCP safety: the hero image never starts hidden; hero text starts at 0.01
 * opacity so it counts as painted on the first frame. */
:root{--ease:cubic-bezier(.2,.75,.22,1);--ease-soft:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- Page transitions (Chrome/Edge/Safari 18+, ignored elsewhere) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .site-header{view-transition-name:site-header}
  ::view-transition-old(root){animation:.35s var(--ease-soft) both vt-out}
  ::view-transition-new(root){animation:.55s var(--ease) both vt-in}
}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

/* ---------- Keyframes ---------- */
@keyframes rise{from{opacity:.01;transform:translateY(.42em)}to{opacity:1;transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes draw-frame{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes seal-in{from{opacity:0;transform:scale(.6) rotate(-35deg)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sway{from{transform:rotate(6deg) translateY(0)}to{transform:rotate(2deg) translateY(-12px)}}
@keyframes breathe{0%,100%{transform:scaleX(.35);opacity:.5}50%{transform:scaleX(1);opacity:1}}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes ring{0%{box-shadow:0 0 0 0 #c8a66c66}100%{box-shadow:0 0 0 18px #c8a66c00}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes lb-body{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- Hero entrance ---------- */
.motion .hero .h1-kicker,.motion .svc-hero .micro{animation:fade-up .9s var(--ease) both}
.motion .hero .h1-kicker .micro-rule,.motion .svc-hero .micro-rule{transform-origin:left;animation:rule-in 1s .15s var(--ease) both}
.motion .h1-line,.motion .svc-hero h1{display:block;animation:rise 1.05s var(--ease-out) both}
.motion .h1-line:nth-child(2){animation-delay:.08s}
.motion .h1-line:nth-child(3){animation-delay:.18s}
.motion .h1-line:nth-child(4){animation-delay:.3s}
.motion .hero-content>p,.motion .svc-lede{animation:fade-up 1s .45s var(--ease) both}
.motion .hero-actions{animation:fade-up 1s .6s var(--ease) both}
.motion .hero-index{animation:fade-up 1s .75s var(--ease) both}
.motion .hero-frame img{animation:settle 2.2s var(--ease-out) both}
.motion .hero-image-underlay{animation:draw-frame 1.4s .35s var(--ease) both}
.motion .hero-photo-note{animation:fade-up .9s 1s var(--ease) both}
.motion .hero-seal{animation:seal-in 1.1s .7s var(--ease-out) both}
.motion .hero-seal i{display:inline-block;animation:spin 22s linear infinite}
.motion .hero-floral{animation:sway 11s ease-in-out infinite alternate}
.motion .down-line{transform-origin:left;animation:breathe 2.8s ease-in-out infinite}
.motion .hero-scroll{animation:fade-up 1s 1.2s var(--ease) both}

/* ---------- Header ---------- */
.motion .site-header{transition:height .3s,box-shadow .3s,transform .5s var(--ease)}
.motion .site-header.is-tucked{transform:translateY(-100%)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#b9955e,#ead0a0,#b9955e);transform-origin:left;transform:scaleX(var(--scroll,0));opacity:.85;pointer-events:none}
.motion .desktop-nav a{position:relative;padding:6px 0}
.motion .desktop-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--goldlight);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.motion .desktop-nav a:hover::after,.motion .desktop-nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.motion .desktop-nav a.is-current{color:var(--goldlight)}
.motion .header-cta span,.motion .btn span,.motion .text-action span,.motion .line-link span,.motion .footer-action span,.motion .pkg-button span,.motion .rental-basket a span,.motion .contact-lines a span,.motion .whatsapp-inquiry span{display:inline-block;transition:transform .35s var(--ease)}
.motion .header-cta:hover span,.motion .btn:hover span,.motion .line-link:hover span,.motion .footer-action:hover span,.motion .pkg-button:hover span,.motion .rental-basket a:hover span,.motion .contact-lines a:hover span,.motion .whatsapp-inquiry:hover span{transform:translate(3px,-3px)}
.motion .text-action:hover span{transform:translateX(6px)}

/* Mobile menu: hamburger to X, links stagger in */
.motion .menu-toggle span{transition:transform .4s var(--ease),opacity .25s}
.motion .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.motion .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.motion .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.motion .mobile-menu:not([hidden]){animation:lb-in .35s var(--ease-soft) both}
.motion .mobile-menu:not([hidden])>*{animation:fade-up .6s var(--ease) both}
.motion .mobile-menu:not([hidden])>*:nth-child(2){animation-delay:.04s}.motion .mobile-menu:not([hidden])>*:nth-child(3){animation-delay:.08s}
.motion .mobile-menu:not([hidden])>*:nth-child(4){animation-delay:.12s}.motion .mobile-menu:not([hidden])>*:nth-child(5){animation-delay:.16s}
.motion .mobile-menu:not([hidden])>*:nth-child(6){animation-delay:.2s}.motion .mobile-menu:not([hidden])>*:nth-child(7){animation-delay:.24s}
.motion .mobile-menu:not([hidden])>*:nth-child(8){animation-delay:.28s}

/* ---------- Buttons ---------- */
.motion .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .2s,color .2s}
.motion .btn:hover{box-shadow:0 14px 30px -12px #af874d99}
.motion .btn:active{transform:translateY(-1px) scale(.985);transition-duration:.12s}
.motion .btn-metal::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,#fff6dd 48%,transparent 66%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.motion .btn-metal:hover::after{transform:translateX(120%)}
.motion .header-cta{transition:background .35s var(--ease),color .35s,border-color .35s}
.motion .line-link,.motion .text-action,.motion .footer-action{position:relative}
.motion .text-action::after,.motion .footer-action::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:#ead0a0;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.motion .text-action:hover::after,.motion .footer-action:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Scroll reveals ---------- */
.motion .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-soft),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.motion .reveal.visible{opacity:1;transform:none}
.motion .hero-content.reveal,.motion .svc-hero-copy.reveal{opacity:1;transform:none}
.motion .reveal .micro-rule{transform-origin:left;transform:scaleX(0);transition:transform 1s .2s var(--ease)}
.motion .reveal.visible .micro-rule{transform:scaleX(1)}
.motion .center-heading.reveal .micro-rule:last-child{transform-origin:right}
.motion .reveal .heading>span,.motion .footer h2>span{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity 1s .25s var(--ease-soft),transform 1.1s .25s var(--ease)}
.motion .reveal.visible .heading>span,.motion .footer.is-in h2>span{opacity:1;transform:none}
.motion .tiny-flourish span{transform:scaleX(0);transition:transform 1s .4s var(--ease)}
.motion .reveal.visible .tiny-flourish span{transform:scaleX(1)}

/* Image wipes: the frame opens upward while the photo settles */
.motion .wipe{clip-path:inset(12% 0 0 0);transition:clip-path 1.3s var(--ease);transition-delay:var(--d,0s)}
.motion .wipe img{transform:scale(1.12);transition:transform 1.8s var(--ease),filter .7s;transition-delay:var(--d,0s)}
.motion .wipe.in{clip-path:inset(0 0 0 0)}
.motion .wipe.in img{transform:scale(1)}
/* After the entrance, hand hover zoom back to the original rules */
.motion .wipe.done img{transition:transform .8s ease,filter .7s;transition-delay:0s}
.motion .service-card.wipe.done:hover img{transform:scale(1.06)}
.motion .portfolio-item.wipe.done:hover img{transform:scale(1.055)}
.motion .rental-card:hover .wipe.done img{transform:scale(1.045)}

/* Manifesto: line by line */
.motion .manifesto .m-line{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity 1.1s var(--ease-soft),transform 1.2s var(--ease)}
.motion .manifesto .m-line+br+.m-line{transition-delay:.25s}
.motion .manifesto.is-in .m-line{opacity:1;transform:none}
.motion .manifesto-foot{opacity:0;transition:opacity 1.2s .6s}
.motion .manifesto.is-in .manifesto-foot{opacity:1}
.motion .manifesto-flower,.motion .portfolio-flower,.motion .rental-floral,.motion .experience-floral,.motion .questionnaire-floral,.motion .inquiry-flower,.motion .intro-flower{will-change:transform}

/* Ribbon */
.motion .quiet-ribbon i{display:inline-block;animation:spin 18s linear infinite}
.motion .quiet-ribbon i:nth-of-type(even){animation-direction:reverse}

/* ---------- Services ---------- */
.motion .service-shade{transition:opacity .6s var(--ease)}
.motion .service-card:hover .service-shade{opacity:.85}
.motion .service-label{transition:transform .5s var(--ease),letter-spacing .5s var(--ease)}
.motion .service-card:hover .service-label{transform:translateX(6px);letter-spacing:.24em}
.motion .service-card-foot h3{transition:transform .6s var(--ease)}
.motion .service-card:hover .service-card-foot h3{transform:translateY(-6px)}
.motion .round-arrow{transition:background .3s,color .3s,transform .5s var(--ease)}
.motion .service-card:hover .round-arrow{transform:rotate(45deg)}
.motion .service-mini::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.motion .service-mini:hover::after{transform:scaleX(1)}
.motion .service-mark{transition:transform .6s var(--ease)}
.motion .service-mini:hover .service-mark{transform:rotate(90deg) scale(1.1)}

/* ---------- Portfolio + rentals filters ---------- */
.motion .filter{position:relative;border-bottom-color:transparent!important}
.motion .filter::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#ad8854;transform:scaleX(0);transition:transform .45s var(--ease)}
.motion .filter:hover::after{transform:scaleX(.35)}
.motion .filter.is-active::after{transform:scaleX(1)}
.motion .portfolio-plus{transition:transform .5s var(--ease),background .3s}
.motion .portfolio-item:hover .portfolio-plus{transform:rotate(45deg);background:#c8a66c99}
.motion .portfolio-caption{transition:transform .6s var(--ease)}
.motion .portfolio-item:hover .portfolio-caption{transform:translateY(-6px)}
.motion .rental-filter{transition:background .3s,border-color .3s,color .3s,transform .25s var(--ease)}
.motion .rental-filter:active{transform:scale(.96)}

/* ---------- Rentals ---------- */
.motion .rental-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.rental-card:has(.rental-select[aria-pressed="true"]){border-color:#b49057;box-shadow:0 0 0 1px #b49057 inset}
.motion .rental-select i{display:inline-block;transition:transform .45s var(--ease)}
.motion .rental-select[aria-pressed="true"] i{transform:rotate(180deg)}
.motion .rental-select:active i{transform:scale(.7)}
.motion .rental-select span{transition:letter-spacing .4s var(--ease)}
.motion .rental-select:hover span{letter-spacing:.17em}
.motion #rental-count.bump{display:inline-block;animation:bump .55s var(--ease)}
.motion .rental-basket.flash{animation:ring .9s var(--ease-soft)}
.motion .rental-visual-art svg{transition:transform .9s var(--ease)}
.motion .rental-card:hover .rental-visual-art svg{transform:translateY(-6px) rotate(-1.5deg)}
.motion .rental-art-numbers{transition:transform .9s var(--ease),text-shadow .9s}
.motion .rental-card:hover .rental-art-numbers{transform:scale(1.05)}
.motion .rental-form-selection:not([hidden]){animation:pop-in .5s var(--ease) both}

/* ---------- Collections ---------- */
.motion .package-card{position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.motion .package-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,#b9955e,#ead0a0,#b9955e);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.motion .package-card:hover::before{transform:scaleX(1)}
.motion .package-top span:last-child{display:inline-block;transition:transform .9s var(--ease)}
.motion .package-card:hover .package-top span:last-child{transform:rotate(180deg) scale(1.15)}
.motion .package-card li{transition:transform .4s var(--ease),color .3s}
.motion .package-card:hover li{transform:translateX(3px)}
.motion .package-card:hover li:nth-child(2){transition-delay:.04s}.motion .package-card:hover li:nth-child(3){transition-delay:.08s}.motion .package-card:hover li:nth-child(4){transition-delay:.12s}

/* ---------- Disclosure (FAQ, add-ons, questionnaire) ---------- */
.motion .faq-items summary span,.motion .extras summary span,.motion .questionnaire-expand{display:inline-block;transition:transform .45s var(--ease)}
.motion .faq-items summary,.motion .extras summary{transition:color .3s,padding-left .45s var(--ease)}
.motion .faq-items summary:hover,.motion .extras summary:hover{color:var(--gold);padding-left:6px}
.motion details.is-animating{overflow:hidden}

/* ---------- Process ---------- */
.motion .process-step{position:relative;border-top-color:transparent}
.motion .process-step::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#9c805766;transform:scaleX(0);transition:transform 1.2s var(--ease);transition-delay:calc(var(--d,0s) + .15s)}
.motion .process-step.visible::before{transform:scaleX(1)}
.motion .step-num{display:inline-block;transition:transform .5s var(--ease),color .3s}
.motion .process-step:hover .step-num{transform:translateY(-3px);color:#ead0a0}

/* ---------- Questionnaire ---------- */
.motion .questionnaire-divider{display:inline-block;transition:transform 1s var(--ease)}
.motion .questionnaire-right:hover .questionnaire-divider{transform:rotate(180deg)}

/* ---------- Form ---------- */
.motion .inquiry-panel input:not([type=checkbox]),.motion .inquiry-panel select,.motion .inquiry-panel textarea{background-image:linear-gradient(#a17b44,#a17b44);background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;transition:background-size .55s var(--ease),border-color .3s}
.motion .inquiry-panel input:focus,.motion .inquiry-panel select:focus,.motion .inquiry-panel textarea:focus{background-size:100% 1px}
.motion .inquiry-panel label{transition:color .3s}
.motion .inquiry-panel label:focus-within{color:#8c6636}
.motion .submit-button:disabled span{display:inline-block;animation:spin 1.2s linear infinite}
.motion .form-status.success,.motion .form-status.error{animation:pop-in .5s var(--ease) both}
.motion .contact-lines a{transition:border-color .4s,color .3s,padding-left .45s var(--ease)}
.motion .contact-lines a:hover{border-color:#c9ab7e;padding-left:6px}

/* ---------- Lightbox ---------- */
.motion .lightbox:not([hidden]) .lightbox-backdrop{animation:lb-in .4s var(--ease-soft) both}
.motion .lightbox:not([hidden]) .lightbox-body{animation:lb-body .6s var(--ease-out) both}
.motion .lightbox.is-closing .lightbox-backdrop{animation:lb-in .3s reverse both}
.motion .lightbox.is-closing .lightbox-body{animation:lb-body .3s reverse both}
.motion .lightbox-close,.motion .lightbox-prev,.motion .lightbox-next{transition:background .3s,transform .35s var(--ease),border-color .3s}
.motion .lightbox-close:hover{transform:rotate(90deg);border-color:#c8a66c}
.motion .lightbox-prev:hover{transform:translateX(-3px);border-color:#c8a66c}
.motion .lightbox-next:hover{transform:translateX(3px);border-color:#c8a66c}

/* ---------- Footer + floating ---------- */
.motion .footer-bottom>a{display:inline-block;transition:transform .45s var(--ease),color .3s}
.motion .footer-bottom>a:hover{transform:translateY(-5px)}
.motion .footer-bottom nav a{transition:color .3s}
.motion .floating-whatsapp{animation:fade-up .8s 1.4s var(--ease) both;transition:transform .35s var(--ease),box-shadow .35s}
.motion .floating-whatsapp.pulse{animation:ring 1.4s var(--ease-soft) 2}
.motion .floating-whatsapp:hover{box-shadow:0 12px 30px #0006}
.motion .floating-whatsapp svg{transition:transform .5s var(--ease)}
.motion .floating-whatsapp:hover svg{transform:rotate(-12deg) scale(1.08)}

/* Pointer-only niceties */
@media (hover:none){.motion .btn:hover{box-shadow:none}}