/* Motion. Everything animated here uses transform and opacity (plus clip-path for image reveals), and all of it is
   switched off for visitors who prefer reduced motion. Without JavaScript the content simply shows. */

@media (prefers-reduced-motion: no-preference) {
  main { animation: page-in 0.8s var(--ease-out) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Scroll reveals: .reveal / [data-reveal] fade up, [data-reveal="fade"] only fades, [data-stagger] children step in */
  .js .reveal, .js [data-reveal] {
    opacity: 0; transform: translateY(30px);
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal="fade"] { transform: none; }
  .js .reveal.is-in, .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Image unmask: the picture is uncovered from the top while it settles from a slight zoom */
  .js .reveal-img { --rv: 1.16; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
  .js .reveal-img.is-in { --rv: 1; clip-path: inset(0 0 0 0); }
  .js .reveal-img img { transform: scale(calc(var(--s, 1) * var(--rv, 1))); }

  /* Parallax layers are moved by motion.js through --py */
  [data-parallax] { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

  /* Hero: slow zoom, headline lines rise out of a mask, then the rest follows */
  .hero-bg-img { animation: kenburns 28s var(--ease) both; }
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }
  .hero h1 .line { overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .hero h1 .line > span { display: block; transform: translateY(110%); animation: line-up 1.4s var(--ease-out) forwards; animation-delay: calc(0.3s + var(--l, 0) * 0.16s); }
  @keyframes line-up { to { transform: none; } }
  .hero .eyebrow { animation: fade-up 1.2s var(--ease-out) 0.1s both; }
  .hero p.lead { animation: fade-up 1.2s var(--ease-out) 0.85s both; }
  .hero .hero-cta { animation: fade-up 1.2s var(--ease-out) 1s both; }
  .hero .search-bar { animation: fade-up 1.2s var(--ease-out) 1.15s both; }
  @keyframes fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .scroll-cue::after { content: ""; position: absolute; top: -45%; left: 0; right: 0; height: 45%; background: var(--brass-300); animation: cue 2.6s var(--ease) infinite; }
  @keyframes cue { 0% { transform: translateY(0); } 70%, 100% { transform: translateY(330%); } }
}

/* If the script never ran (blocked, offline), nothing stays hidden */
.no-motion .reveal, .no-motion [data-reveal], .no-motion .reveal-img { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* Cursor follower: desktop mouse only. The real cursor stays visible; this is a soft ring that eases after it. */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 5000; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.cursor-on .cursor-dot, .cursor-on .cursor-ring { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); }
.cursor-ring {
  display: grid; place-items: center; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid var(--accent); border-radius: 50%;
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out), background 0.3s, opacity 0.3s;
}
.cursor-ring span { font: 600 0.58rem/1 var(--font-ui); letter-spacing: 0.16em; text-transform: uppercase; color: #1a1408; opacity: 0; transition: opacity 0.25s; }
.cursor-ring.is-view { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--accent); }
.cursor-ring.is-view span { opacity: 1; }
.cursor-ring.is-link { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cursor-on .cursor-ring.is-hidden, .cursor-on .cursor-dot.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }