/* ============================================================
   XAYA motion layer — shared by every page.
   Rules: motion supports content, never hides it.
   - Content is visible by default; only hidden once JS adds .js to <html>.
   - Everything switches off under prefers-reduced-motion.
   ============================================================ */

/* ---- Scroll reveal ---- */
.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.js [data-reveal].in{ opacity:1; transform:none; }

/* ---- Load-in for hero text (no scroll needed) ---- */
.js .load-in > *{
  opacity:0; transform:translateY(18px);
  animation:xLoadIn .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.js .load-in > *:nth-child(1){ animation-delay:.05s; }
.js .load-in > *:nth-child(2){ animation-delay:.18s; }
.js .load-in > *:nth-child(3){ animation-delay:.31s; }
.js .load-in > *:nth-child(4){ animation-delay:.44s; }
.js .load-in > *:nth-child(5){ animation-delay:.57s; }
.js .load-in > *:nth-child(6){ animation-delay:.70s; }
@keyframes xLoadIn{ to{ opacity:1; transform:none; } }

/* Logo symbol: settles in with a soft scale */
.js .symbol-in{ animation:xSymbol 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes xSymbol{ from{ opacity:0; transform:scale(.82) rotate(-8deg); } to{ opacity:.95; transform:none; } }

/* ---- Ken Burns: slow settle-zoom on a hero photo ---- */
.kenburns{ overflow:hidden; }
.kenburns img{ animation:xKen 16s cubic-bezier(.25,.6,.3,1) both; transform-origin:60% 50%; }
@keyframes xKen{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

/* ---- Crossfade gallery ---- */
.xgallery{ position:relative; }
.xgallery > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.1s ease, transform 6s ease;
  transform:scale(1.04);
}
.xgallery > img.on{ opacity:1; transform:scale(1); }
.xgallery > img:first-of-type{ position:relative; } /* keeps height without JS */
.xg-dots{
  position:absolute; left:14px; bottom:12px; z-index:3; display:flex; gap:6px;
}
.xg-dots button{
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.55); transition:width .25s ease, background .25s ease;
}
.xg-dots button.on{ width:18px; border-radius:4px; background:#fff; }
.xg-caption{
  position:absolute; left:14px; bottom:30px; z-index:3; color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.xgallery::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(20,16,10,.45), transparent);
}

/* ---- Marquee (brand ribbon) ---- */
.marquee{ overflow:hidden; white-space:nowrap; position:relative; }
.marquee-track{ display:inline-flex; gap:0; animation:xMarquee 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; gap:22px; padding-right:22px; }
.marquee-item .sep{ width:6px; height:6px; border-radius:50%; background:var(--orange,#F5821F); display:inline-block; }
@keyframes xMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---- Hover lift for photos inside cards ---- */
.zoom-hover{ overflow:hidden; }
.zoom-hover img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.zoom-hover:hover img{ transform:scale(1.05); }

/* ---- Reduced motion: everything static and visible ---- */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal], .js .load-in > *, .js .symbol-in{ opacity:1 !important; transform:none !important; animation:none !important; }
  .kenburns img, .marquee-track{ animation:none !important; }
  .marquee{ white-space:normal; }
  .xgallery > img{ transition:none; }
}