/* Motion and polish. Colors, layout and type are untouched: this only adds movement.
   Loaded after styles.css. Everything is switched off when the visitor asks for reduced motion. */

@media (prefers-reduced-motion: no-preference) {

  html { --ix: 0s; }
  html.fx-intro { --ix: 1.55s; }
  @view-transition { navigation: auto; }

  /* ---------- opening curtain: logo, gold line, then the curtain lifts (once per visit) ---------- */
  html.fx-intro::before {
    content: ""; position: fixed; inset: 0; z-index: 9998; background: #0b0b0c; pointer-events: none;
    animation: fxCurtain 1s cubic-bezier(.75,0,.2,1) 1.25s forwards;
  }
  html.fx-intro::after {
    content: ""; position: fixed; left: 50%; top: 50%; width: 104px; height: 104px; margin: -66px 0 0 -52px;
    z-index: 9999; pointer-events: none; border-radius: 50%;
    background: url("/images/logo-mark.png") center / contain no-repeat;
    animation: fxLogo 1.9s cubic-bezier(.2,.8,.2,1) both;
  }
  html.fx-intro body::before {
    content: ""; position: fixed; left: 50%; top: 50%; width: 0; height: 3px; margin: 64px 0 0 -70px; z-index: 9999;
    background: var(--gold); pointer-events: none;
    animation: fxLine 1s cubic-bezier(.2,.8,.2,1) .3s forwards, fxLineOut .35s ease 1.3s forwards;
  }
  @keyframes fxCurtain { to { transform: translateY(-101%); } }
  @keyframes fxLogo { 0% { opacity: 0; transform: scale(.7); } 22%, 66% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.08) translateY(-14px); } }
  @keyframes fxLine { to { width: 140px; } }
  @keyframes fxLineOut { to { opacity: 0; } }

  /* ---------- header ---------- */
  .site-header { transition: box-shadow .3s ease; }
  .site-header.is-scrolled { box-shadow: 0 8px 26px rgba(11,11,12,.14); }
  .brand-mark { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
  @media (min-width: 900px) {
    .site-nav a { position: relative; }
    .site-nav a:not([aria-current="page"])::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
      background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.7,.2,1);
    }
    .site-nav a:not([aria-current="page"]):hover::after { transform: scaleX(1); }
  }
  .fx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9990;
    background: linear-gradient(90deg, var(--gold-text), var(--gold));
    transform: scaleX(0); transform-origin: left; pointer-events: none;
  }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; }
  .hero > .container { position: relative; z-index: 1; }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(520px circle at var(--mx2, 70%) var(--my2, 40%), rgba(200,161,58,.22), transparent 62%);
  }
  .hero:hover::after { opacity: 1; }

  .fx-word { display: inline-block; animation: fxWord .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .2s + var(--wi, 0) * .1s) backwards; }
  @keyframes fxWord { from { opacity: 0; transform: translateY(70%) rotate(5deg); filter: blur(7px); } }
  .hero .eyebrow { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .05s) backwards; }
  .hero .lead { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .55s) backwards; }
  .hero-actions { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .75s) backwards; }
  @keyframes fxRise { from { opacity: 0; transform: translateY(30px); } }
  .eyebrow::before { transform-origin: left; animation: fxDraw .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .3s) backwards; }
  @keyframes fxDraw { from { transform: scaleX(0); } }
  .hero h1 em, .hero h1 .fx-hl { color: inherit; }

  /* the illustration: tilts toward the cursor, the buildings grow up, lights come on, sun turns, clouds drift */
  .hero-art { animation: fxArt 1.1s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .15s) backwards; }
  @keyframes fxArt { from { opacity: 0; transform: translateY(40px) scale(.95); } }
  .hero-art svg {
    transform: perspective(1000px) rotateY(calc(var(--mx, 0) * 8deg)) rotateX(calc(var(--my, 0) * -6deg));
    transition: transform .3s ease-out; animation: fxFloat 7s ease-in-out calc(var(--ix) + 1.5s) infinite;
  }
  @keyframes fxFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
  .fx-main, .fx-side { transform-box: fill-box; transform-origin: 50% 100%; }
  .fx-main { translate: calc(var(--mx, 0) * 7px) 0; animation: fxBuild 1.2s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .3s) backwards; }
  .fx-side { translate: calc(var(--mx, 0) * 3px) 0; animation: fxBuild 1s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .55s) backwards; }
  @keyframes fxBuild { from { transform: scaleY(.08); opacity: 0; } }
  .fx-win { animation: fxLight .8s ease backwards; animation-delay: calc(var(--ix) + 1.5s + var(--i, 0) * .38s); }
  .fx-door { animation: fxLight .8s ease backwards; animation-delay: calc(var(--ix) + 3.2s); }
  @keyframes fxLight { from { fill: #2c2c30; } }
  .fx-sun { transform-box: fill-box; transform-origin: center; translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px); animation: fxSun 5s ease-in-out infinite; }
  @keyframes fxSun { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.18); opacity: .8; } }
  .fx-rays { transform-origin: 392px 86px; translate: calc(var(--mx, 0) * -16px) calc(var(--my, 0) * -10px); animation: fxSpin 38s linear infinite; }
  @keyframes fxSpin { to { transform: rotate(360deg); } }
  .fx-cloud { animation: fxCloud 34s linear infinite; }
  .fx-cloud.b { animation-duration: 48s; animation-delay: -20s; }
  @keyframes fxCloud { from { transform: translateX(-140px); } to { transform: translateX(620px); } }
  .fx-tree { transform-origin: 404px 340px; animation: fxSway 4.5s ease-in-out infinite alternate; }
  @keyframes fxSway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

  /* ---------- buttons: magnetic, with a shine ---------- */
  .btn { translate: var(--bx, 0px) var(--by, 0px); position: relative; }
  .btn { transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .25s, translate .2s ease-out; }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,11,12,.2); }
  .btn-gold:hover { box-shadow: 0 10px 26px rgba(200,161,58,.45); }
  .btn::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%) 160% 0 / 250% 100% no-repeat;
  }
  .btn:hover::after { background-position: -60% 0; transition: background-position .7s ease; }
  .filter-btn { transition: background .2s, color .2s, border-color .2s, transform .2s; }
  .filter-btn:hover { transform: translateY(-2px); border-color: var(--ink); }

  /* ---------- cards: 3D tilt that follows the cursor ---------- */
  [data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; will-change: transform;
  }
  [data-tilt].is-tilting { transition: transform .12s ease-out, box-shadow .3s ease, border-color .3s ease; }
  [data-tilt]:hover { box-shadow: 0 20px 40px rgba(11,11,12,.16); }
  .step[data-tilt]:hover { border-color: var(--gold); }
  .step-num { transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
  .step:hover .step-num { transform: scale(1.18) rotate(-8deg); }
  .listing-media { overflow: hidden; }
  .listing-media > img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .listing:hover .listing-media > img { transform: scale(1.08); }
  .badge-available { animation: fxBadge 2.4s ease-in-out infinite; }
  @keyframes fxBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,161,58,.6); } 60% { box-shadow: 0 0 0 10px rgba(200,161,58,0); } }

  /* section headings get a gold bar that draws itself */
  .section-head h2 { position: relative; }
  .section-head h2::after {
    content: ""; position: absolute; left: 0; bottom: -8px; width: 56px; height: 4px; border-radius: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left;
  }
  .section-head.in h2::after { animation: fxBarTo .9s cubic-bezier(.2,.8,.2,1) .35s forwards; }
  @keyframes fxBarTo { to { transform: scaleX(1); } }

  /* ---------- dark band: glint plus light that follows the cursor ---------- */
  .cta-band { position: relative; overflow: hidden; }
  .cta-band > .container { position: relative; z-index: 1; }
  .cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(200,161,58,.2) 50%, transparent 62%);
    transform: translateX(-110%); animation: fxGlint 7s ease-in-out 1.5s infinite;
  }
  .cta-band::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(480px circle at var(--mx2, 50%) var(--my2, 50%), rgba(200,161,58,.22), transparent 62%);
  }
  .cta-band:hover::after { opacity: 1; }
  @keyframes fxGlint { 0% { transform: translateX(-110%); } 35%, 100% { transform: translateX(110%); } }

  /* ---------- inner page banners ---------- */
  .page-hero { position: relative; overflow: hidden; }
  .page-hero > * { position: relative; }
  .page-hero::before {
    content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -12%; top: -70%;
    background: radial-gradient(closest-side, rgba(200,161,58,.22), transparent);
    pointer-events: none; animation: fxDrift 14s ease-in-out infinite alternate;
  }
  @keyframes fxDrift { from { transform: translate(0,0); } to { transform: translate(-20%, 32%); } }
  .page-hero h1 { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .1s) backwards; }
  .page-hero .lead, .page-hero .eyebrow { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .25s) backwards; }

  /* ---------- reveal on scroll: slide in from the side ---------- */
  .rv { opacity: 0; }
  .rv.in { opacity: 1; animation: fxReveal .95s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }
  @keyframes fxReveal { from { opacity: 0; transform: translate(var(--dx, 0px), 48px) scale(.96); } }
}