/* Where To Go — shared motion layer for the city pages (the homepage carries its own copy inline). */
:root{--x-expo:cubic-bezier(.16,1,.3,1);--x-io:cubic-bezier(.76,0,.24,1);--x-spring:cubic-bezier(.34,1.56,.64,1)}

/* sturdier Bodoni hairlines everywhere */
[style*="Bodoni Moda"]{font-variation-settings:'opsz' 18}
.m-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* masked word reveals */
.x-w{display:inline-block}
html.x-js [data-split]:not(.x-split){visibility:hidden}
html.x-js [data-split] .x-w{transform:translateY(112%);clip-path:inset(-30% -14% 112% -14%);transition:transform 1.3s var(--x-expo),clip-path 1.3s var(--x-expo);transition-delay:var(--d,0s)}
html.x-js [data-split].x-on .x-w{transform:none;clip-path:inset(-30% -14% -40% -14%)}
html.x-js .x-in{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--x-expo),transform 1.5s var(--x-expo);transition-delay:var(--d,0s)}
html.x-js .x-in.x-on{opacity:1;transform:none}
html.x-js .x-clip{clip-path:inset(100% -30% 0 -30%);transition:clip-path 1.5s var(--x-expo);transition-delay:var(--d,0s)}
html.x-js .x-clip.x-on{clip-path:inset(-30% -30% -30% -30%)}

/* read-along */
html.x-js [data-read] .x-w{opacity:.14;transition:opacity .25s linear}

/* cursor: precise dot, small tag */
.x-cursor{display:none!important;position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#FBF4E7;mix-blend-mode:difference;opacity:0;box-sizing:border-box;border:1px solid transparent;transition:width .35s var(--x-expo),height .35s var(--x-expo),margin .35s var(--x-expo),background-color .25s,border-color .25s,opacity .2s}
.x-cursor.show{opacity:1}
.x-cursor.link{width:28px;height:28px;margin:-14px 0 0 -14px;background:transparent;border-color:#FBF4E7}
.x-cursor-tag{position:fixed;left:0;top:0;z-index:151;pointer-events:none;font-family:'DM Mono',monospace;font-weight:500;font-size:9.5px;line-height:1;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;color:#FBF4E7;background:#2A211C;padding:7px 10px 6px;opacity:0;scale:.85;transform-origin:0 0;transition:opacity .2s,scale .35s var(--x-expo)}
.x-cursor-tag.show{opacity:1;scale:1}
html.x-scrolling .x-cursor-tag{opacity:0}
html.x-cursor-on,html.x-cursor-on *{cursor:none!important}
html.x-cursor-on input,html.x-cursor-on textarea,html.x-cursor-on select{cursor:auto!important}

/* magnetic buttons + travelling arrow */
[data-magnetic]{transition:translate .7s var(--x-expo),background-color .3s,color .3s,border-color .3s}
.x-arrows{position:relative;display:inline-block;width:1.2em;height:1.1em;overflow:hidden;vertical-align:-.2em;margin-left:.3em}
.x-arrows i{position:absolute;inset:0;font-style:normal;line-height:1.1;transition:transform .5s var(--x-io)}
.x-arrows i+i{transform:translateX(-130%)}
:hover>.x-arrows i:first-child,:focus-visible>.x-arrows i:first-child{transform:translateX(130%)}
:hover>.x-arrows i+i,:focus-visible>.x-arrows i+i{transform:none}

/* book covers that tilt toward the cursor */
.m-tilt{--rx:0deg;--ry:0deg;--gx:50%;--gy:0%;--lift:0px;display:block}
.m-book{position:relative;perspective:1000px}
.m-turn{position:relative;transform-style:preserve-3d;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--x-io)}
.m-tilt:hover{--lift:-6px}
.m-tilt.tilting .m-turn{transition:transform .12s linear}
.m-pages{position:absolute;top:1.4%;bottom:1.4%;left:1%;right:-1.8%;transform:translateZ(-10px);background:repeating-linear-gradient(90deg,#FFFDF8 0 1px,#E3D8C3 1px 2px);box-shadow:0 0 0 1px rgba(42,33,28,.1)}
.m-glare{position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.6),rgba(255,255,255,0) 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .45s}
.m-tilt:hover .m-glare{opacity:1}

/* ticker that follows the scroll */
.z-mq{overflow:hidden;white-space:nowrap;cursor:default}
.z-track{display:flex;width:max-content;will-change:transform}
.z-copy{display:flex;align-items:center;flex:none}
.z-star{display:inline-block;transform:rotate(var(--spin,0deg))}

@media (prefers-reduced-motion: reduce){
  html.x-js [data-split] .x-w,html.x-js .x-in,html.x-js .x-clip{transform:none!important;clip-path:none!important;opacity:1!important;transition:none!important}
  html.x-js [data-read] .x-w{opacity:1!important}
}