/* zx: additive preview effects layer. Every rule is scoped to zx- classes. */
@property --zx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: zx-vt-out .32s cubic-bezier(.22,1,.36,1) both; }
  ::view-transition-new(root) { animation: zx-vt-in .45s cubic-bezier(.22,1,.36,1) both; }
}
@keyframes zx-vt-out { to { opacity: 0; transform: translateY(-14px); filter: blur(6px); } }
@keyframes zx-vt-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }

/* Scroll progress bar */
.zx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483000; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0); background: var(--zx-accent, #c9a45c);
  box-shadow: 0 0 12px var(--zx-accent, #c9a45c); }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .zx-progress.zx-native { animation: zx-grow linear both; animation-timeline: scroll(root); }
  }
}
@keyframes zx-grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .zx-progress { display: none; } }

/* Split text pieces */
.zx-w, .zx-c { display: inline-block; }
.zx-wr .zx-w { transition: opacity .35s linear; }

/* Shine / beam border */
.zx-has-beam { position: relative; }
.zx-beam { position: absolute; inset: 0; border-radius: inherit; padding: var(--zx-beam-w, 2px); pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--zx-a), transparent 0 62%, var(--zx-beam-c1, #fff6d8) 72%, var(--zx-accent, #c9a45c) 80%, transparent 90% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; animation: zx-spin 4.2s linear infinite; }
@keyframes zx-spin { to { --zx-a: 360deg; } }

/* Button sheen sweep */
.zx-has-sheen { position: relative; overflow: hidden; isolation: isolate; }
.zx-sheen { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(0); animation: zx-sheen 3.8s cubic-bezier(.22,1,.36,1) infinite; mix-blend-mode: soft-light; }
@keyframes zx-sheen { 0%, 55% { transform: skewX(-18deg) translateX(0); } 100% { transform: skewX(-18deg) translateX(420%); } }

/* Magnetic */
.zx-mag { transition: translate .35s cubic-bezier(.22,1,.36,1); }

/* Tilt */
.zx-tilt { transform-style: preserve-3d; will-change: transform; }
.zx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; opacity: 0;
  background: radial-gradient(420px circle at var(--zx-gx, 50%) var(--zx-gy, 50%), rgba(255,255,255,.28), transparent 45%);
  transition: opacity .3s ease; }
.zx-tilt:hover .zx-glare { opacity: 1; }

/* Aurora + grain */
.zx-aur-host { position: relative; isolation: isolate; }
.zx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.zx-aurora::before { content: ""; position: absolute; inset: -25% -15%;
  background:
    radial-gradient(ellipse 45% 40% at 20% 30%, var(--zx-au1, rgba(201,164,92,.30)), transparent 60%),
    radial-gradient(ellipse 40% 45% at 82% 70%, var(--zx-au2, rgba(201,164,92,.22)), transparent 62%),
    radial-gradient(ellipse 55% 35% at 50% 105%, var(--zx-au3, rgba(255,255,255,.10)), transparent 58%);
  animation: zx-aurora 14s ease-in-out infinite alternate; }
.zx-aurora::after { content: ""; position: absolute; inset: 0; opacity: var(--zx-grain, .10); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes zx-aurora { 0% { transform: translate3d(0,0,0) rotate(0deg) scale(1); } 100% { transform: translate3d(4%,-3%,0) rotate(6deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .zx-aurora::before { animation: none; } }

/* Spotlight following pointer */
.zx-spot { position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(600px circle at var(--zx-sx, 50%) var(--zx-sy, 50%), var(--zx-spot, rgba(201,164,92,.16)), transparent 40%); }
.zx-spot-host { isolation: isolate; }
.zx-spot-host:hover > .zx-spot { opacity: 1; }

/* Marquee */
.zx-marquee { position: relative; overflow: hidden; padding: 18px 0; background: var(--zx-mq-bg, #111); color: var(--zx-mq-fg, #f5efe2);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.zx-mq-track { display: flex; width: max-content; gap: 0; animation: zx-mq 38s linear infinite; }
.zx-marquee:hover .zx-mq-track { animation-play-state: paused; }
.zx-mq-item { white-space: nowrap; font: var(--zx-mq-font, 500 clamp(18px, 2.2vw, 30px)/1.2 inherit); letter-spacing: -.01em; padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.zx-mq-item::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--zx-accent, #c9a45c); flex: none; }
@keyframes zx-mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .zx-mq-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .zx-mq-track > .zx-mq-dup { display: none; }
  .zx-marquee { -webkit-mask: none; mask: none; }
  .zx-mq-item { white-space: normal; text-align: center; }
}

/* Swipe rails: nav buttons always 44px; layout only on mobile; .zx-all shows nav at every width */
.zx-rail-nav { display: none; align-items: center; justify-content: center; gap: 14px; margin: 14px auto 6px; position: relative; z-index: 2; }
.zx-rail-nav.zx-all { display: flex; }
.zx-rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; background: var(--zx-nav-bg, rgba(255,255,255,.92));
  color: var(--zx-nav-fg, #111); display: grid; place-items: center; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; transition: transform .2s ease, background-color .2s ease; }
.zx-rail-nav button:hover:not(:disabled) { transform: scale(1.06); }
.zx-rail-nav button:disabled { opacity: .35; cursor: default; }
.zx-rail-nav button:focus-visible { outline: 3px solid var(--zx-accent, #c9a45c); outline-offset: 3px; }
.zx-rail-count { min-width: 64px; text-align: center; font: 600 14px/1 system-ui, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--zx-count-fg, currentColor); }
@media (max-width: 900px) {
  .zx-rail-nav { display: flex; }
  .zx-rail-style.zx-rail-style.zx-rail-style { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; scroll-snap-type: x mandatory; gap: 14px !important; justify-content: flex-start !important; align-items: flex-start;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px !important; grid-template-columns: none !important; }
  .zx-rail-style::-webkit-scrollbar { display: none; }
  .zx-rail-style > * { flex: 0 0 var(--zx-rail-w, 84%) !important; max-width: var(--zx-rail-w, 84%) !important; scroll-snap-align: center; min-width: 0; }
}

/* Zoomable images */
.zx-zoom { cursor: zoom-in; }
.zx-zoom:focus-visible { outline: 3px solid var(--zx-accent, #c9a45c); outline-offset: 3px; }

/* Stacking cards */
@media (prefers-reduced-motion: no-preference) {
  .zx-stack > .zx-stack-item { position: sticky; top: var(--zx-stack-top, 90px); }
}