/* ===== FX layer (all pages): transitions, reveals, sticky section strips, carousel, WhatsApp, top bar ===== */
:root{--hh:80px}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--hh) + 76px)}

/* Page transitions (browsers that support cross-document view transitions) */
@view-transition{navigation:auto}
.lv-top{view-transition-name:lv-top}
.lv-head{view-transition-name:lv-head}
::view-transition-old(root){animation:fx-out .28s ease both}
::view-transition-new(root){animation:fx-in .42s ease both}
@keyframes fx-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes fx-in{from{opacity:0;transform:translateY(10px)}}

/* Top bar: next stop */
.lv-top .lv-in{justify-content:space-between}
.lv-next{display:inline-flex;align-items:center;gap:10px;min-width:0;white-space:nowrap;padding-left:6px}
.lv-next-v{overflow:hidden;text-overflow:ellipsis;min-width:0}
.lv-next i{width:7px;height:7px;border-radius:50%;background:#C9A96E;flex:none;box-shadow:0 0 0 0 rgba(201,169,110,.6);animation:fx-ping 2.4s ease-out infinite}
.lv-next-k{color:#C9A96E;text-transform:uppercase;letter-spacing:.2em;font-size:10.5px}
.lv-next-v{color:#E6D6C0}
.lv-next-short{display:none}
.lv-next:hover .lv-next-v{color:#fff}
@keyframes fx-ping{0%{box-shadow:0 0 0 0 rgba(201,169,110,.55)}70%{box-shadow:0 0 0 9px rgba(201,169,110,0)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}
@media (max-width:700px){.lv-next-long{display:none}.lv-next-short{display:inline}.lv-next-k{letter-spacing:.14em}}

/* Reveal on scroll (only for things below the first screen; set by script) */
.fx-wait{opacity:0;transform:translateY(22px)}
.fx-wait.fx-in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--fx-i,0) * 90ms)}

/* Inner-page arch heroes open on load */
.p-arch img{animation:fx-arch 1.1s cubic-bezier(.2,.7,.2,1) both}
.p-arch figcaption{animation:fx-fade .6s ease .8s both}
@keyframes fx-arch{from{clip-path:inset(100% 0 0 0 round 300px 300px 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0 round 300px 300px 0 0);transform:scale(1)}}
@keyframes fx-fade{from{opacity:0;transform:translateY(6px)}}

/* Sticky section strip (Home strip + inner pages) */
.strip[data-spy],.lv-strip{position:sticky;top:var(--hh);z-index:40;transition:transform .45s ease,opacity .35s ease;background:rgba(10,7,8,.94);box-shadow:0 0 0 100vmax rgba(10,7,8,.94);clip-path:inset(0 -100vmax);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.strip[data-spy].spy-gone,.lv-strip.spy-gone{transform:translateY(-120%);opacity:0;pointer-events:none}
.strip[data-spy] a{position:relative;transition:color .2s}
.strip[data-spy] a.is-on{color:#E9D29C}
.strip[data-spy] a::after,.lv-strip a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:#C9A96E;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.strip[data-spy] a.is-on::after,.lv-strip a.is-on::after{transform:scaleX(1)}
.strip[data-spy].is-stuck{padding-top:14px;padding-bottom:14px}
.strip[data-spy].is-stuck .motto{display:none}
.lv-strip{border-top:1px solid rgba(201,169,110,.2);border-bottom:1px solid rgba(201,169,110,.2)}
.lv-strip ol{list-style:none;margin:0 auto;max-width:1360px;padding:16px 40px;display:flex;gap:10px 34px;overflow-x:auto;scrollbar-width:none}
.lv-strip ol::-webkit-scrollbar{display:none}
.lv-strip li{flex:none}
.lv-strip a{position:relative;display:inline-block;text-decoration:none;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#CFC3B2;transition:color .2s;padding:4px 0}
.lv-strip a b{font-weight:500;color:#C9A96E;margin-right:10px;letter-spacing:.1em}
.lv-strip a:hover,.lv-strip a.is-on{color:#E9D29C}
@media (max-width:900px){
 .lv-strip ol{padding:13px max(20px,env(safe-area-inset-left,0px));gap:10px 24px}
 .strip[data-spy]{overflow-x:auto;scrollbar-width:none}
 .strip[data-spy] ol{flex-wrap:nowrap}
 .strip[data-spy] li{flex:none}
}

/* Home: Next stops carousel */
.carousel.fx-car .track{cursor:grab}
.carousel.fx-car .track.wheeling{scroll-snap-type:none;scroll-behavior:auto}
.carousel.fx-car .track.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel.fx-car .track.dragging a{pointer-events:none}
.card.tile{transition:transform .3s ease,border-color .3s}
.card.tile:hover{transform:translateY(-4px);border-color:rgba(201,169,110,.6)}
.card.tile img{transition:transform .7s ease}
.card.tile:hover img{transform:scale(1.04)}
.card.tile{overflow:hidden}

/* Home: latest visit (Capuzzimati) */
.lt-route{display:flex;align-items:center;gap:18px;margin:0 0 26px;max-width:520px}
.lt-route svg{flex:1;min-width:0;height:auto;overflow:visible}
.lt-route .lt-path{fill:none;stroke:#A27A44;stroke-width:1.3;stroke-dasharray:2 5;stroke-linecap:round}
.lt-route text{font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:2px;fill:#CFC3B2}
.lt-km{flex:none;font-family:'Jost',sans-serif;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#9A8C7C;text-align:right;line-height:1.5}
.lt-km b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:34px;letter-spacing:0;color:#C9A96E;line-height:1;font-variant-numeric:tabular-nums}
.latest-art .arch-frame{transition:transform .6s ease}
.latest-art .arch-frame img{transition:transform .8s ease}
.latest-art .inset{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.latest-art:hover .arch-frame img{transform:scale(1.05)}
.latest-art:hover .inset{transform:translate(-10px,-14px) rotate(-1.5deg);box-shadow:0 28px 60px rgba(0,0,0,.7)}
.latest.fx-play .arch-frame{animation:fx-archframe 1.2s cubic-bezier(.2,.7,.2,1) both}
.latest.fx-play .inset{animation:fx-slidein .9s cubic-bezier(.2,.7,.2,1) .7s both}
@keyframes fx-archframe{from{clip-path:inset(100% 0 0 0 round 240px 240px 0 0)}to{clip-path:inset(0 0 0 0 round 240px 240px 0 0)}}
@keyframes fx-slidein{from{opacity:0;transform:translate(-30px,30px)}}
.latest .fact{transition:opacity .6s ease,transform .6s ease}

/* Inner pages: gentle hover lift on photo galleries */
.p-gallery figure{transition:transform .5s ease}

/* WhatsApp */
.wa{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:max(20px,env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:'Jost',sans-serif}
.wa-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 14px;border-radius:26px;background:#0F0A0B;border:1px solid rgba(201,169,110,.6);color:#E9D29C;font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.55);transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s,background .2s,border-color .2s}
.wa.show .wa-btn{opacity:1;transform:none;pointer-events:auto}
.wa-btn:hover{background:#1A1012;border-color:#C9A96E}
.wa-btn svg{width:24px;height:24px;flex:none}
.wa-btn .wa-dot{fill:#25D366}
.wa-btn:focus-visible,.wa-opt:focus-visible,.wa-x:focus-visible{outline:2px solid #E9D29C;outline-offset:2px}
.wa-panel{width:min(330px,calc(100vw - 40px));background:#0F0A0B;border:1px solid rgba(201,169,110,.5);box-shadow:0 24px 60px rgba(0,0,0,.7);padding:22px 22px 18px;transform-origin:bottom right;animation:fx-pop .28s cubic-bezier(.2,.7,.2,1)}
@keyframes fx-pop{from{opacity:0;transform:translateY(10px) scale(.97)}}
.wa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.wa-head b{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:24px;line-height:1.15;color:#F3EBDD}
.wa-head p{margin:6px 0 0;font-family:'EB Garamond',serif;font-size:15px;line-height:1.5;color:#CFC3B2}
.wa-x{background:none;border:0;color:#BFB2A0;font-size:22px;line-height:1;cursor:pointer;padding:2px 4px}
.wa-x:hover{color:#fff}
.wa-opts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.wa-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(201,169,110,.3);color:#F3EBDD;text-decoration:none;font-size:13px;letter-spacing:.06em;transition:border-color .2s,background .2s}
.wa-opt:hover{border-color:#C9A96E;background:rgba(201,169,110,.08)}
.wa-opt span{color:#C9A96E}
.wa-note{margin:12px 0 0;font-size:11px;letter-spacing:.04em;color:#9A8C7C;line-height:1.5}
@media (max-width:640px){.wa-btn .wa-l{display:none}.wa-btn{width:52px;padding:0;justify-content:center}}

@media (prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation:none}
 .fx-wait{opacity:1;transform:none}
 .p-arch img,.p-arch figcaption,.latest.fx-play .arch-frame,.latest.fx-play .inset,.wa-panel{animation:none}
 .lv-next i{animation:none}
 .strip[data-spy],.lv-strip,.wa-btn{transition:none}
}
/* snapping only for touch; mouse and trackpad glide freely */
.carousel.fx-car .track{scroll-snap-type:none}
@media (pointer:coarse){.carousel.fx-car .track{scroll-snap-type:x mandatory}}