/* 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("/logo/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 ---------- */
  header { transition: box-shadow .3s ease; }
  header.is-scrolled { box-shadow: 0 8px 26px rgba(0,0,0,.45); }
  .brand-mark { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
  .brand:hover .brand-mark { transform: rotate(-10deg) scale(1.08); }
  nav a:not(.active):not(.call-btn) { position: relative; }
  nav a:not(.active):not(.call-btn)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
    background: var(--gold-light); transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  nav a:not(.active):not(.call-btn):hover::after { transform: scaleX(1); }
  .call-btn { transition: background .2s, transform .2s, box-shadow .2s; }
  .call-btn:hover { box-shadow: 0 6px 18px rgba(201,160,99,.4); }

  .fx-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9990;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
    transform: scaleX(0); transform-origin: left; pointer-events: none;
  }

  /* ---------- hero ---------- */
  .hero { position: relative; overflow: hidden; isolation: isolate; background: #0b0b0c; }
  .hero .wrap { position: relative; z-index: 1; }
  .hero::before {
    content: ""; position: absolute; inset: -5%; z-index: -1;
    background:
      linear-gradient(90deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.62) 55%, rgba(8,8,9,.42) 100%),
      url("/images/hero.jpg") center 40% / cover no-repeat;
    transform-origin: 62% 42%;
    translate: 0 var(--py, 0px);
    animation: fxLand 2.4s cubic-bezier(.2,.8,.2,1) var(--ix) backwards, fxPush 30s ease-in-out calc(var(--ix) + 2.4s) infinite alternate;
    will-change: transform, filter;
  }
  @keyframes fxLand { from { transform: scale(1.25); filter: blur(10px) brightness(.5); } }
  @keyframes fxPush { from { transform: scale(1); } to { transform: scale(1.1); } }
  @media (max-width: 640px) { .hero::before { background-position: 60% 40%; } }
  /* a pool of gold light follows the cursor */
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
    background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 35%), rgba(201,160,99,.26), transparent 62%);
  }
  .hero:hover::after { opacity: 1; }

  .fx-word { display: inline-block; animation: fxWord .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .15s + var(--wi, 0) * .09s) backwards; }
  @keyframes fxWord { from { opacity: 0; transform: translateY(70%) rotate(5deg); filter: blur(7px); } }
  .hero h1 { position: relative; }
  .hero h1::after {
    content: ""; position: absolute; left: 0; bottom: -14px; width: 84px; height: 5px; background: var(--gold);
    transform-origin: left; animation: fxBar .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .9s) backwards;
  }
  @keyframes fxBar { from { transform: scaleX(0); } }
  .hero p { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .55s) backwards; }
  .hero .btn-primary { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .75s) backwards, fxRing 3.2s ease calc(var(--ix) + 3s) infinite; }
  .hero .btn-ghost { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .88s) backwards; }
  @keyframes fxRise { from { opacity: 0; transform: translateY(30px); } }
  @keyframes fxRing { 0% { box-shadow: 0 0 0 0 rgba(201,160,99,.6); } 70%, 100% { box-shadow: 0 0 0 18px rgba(201,160,99,0); } }

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

  /* ---------- cards and photos: 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;
    will-change: transform;
  }
  [data-tilt].is-tilting { transition: transform .12s ease-out, box-shadow .3s ease; }
  .grid .card[data-tilt]:hover, .about-cols .card[data-tilt]:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
  }
  .photo.has-img[data-tilt]:hover, .tile[data-tilt]:hover { box-shadow: 0 18px 38px rgba(0,0,0,.28); }
  .tile::after, .photo.has-img::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--gold);
    transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); pointer-events: none;
  }
  .tile:hover::after, .photo.has-img:hover::after { transform: scaleX(1); }
  /* photos drift against the scroll */
  .tile img, .photo.has-img img { scale: 1.12; translate: 0 var(--ty, 0px); transition: transform .7s cubic-bezier(.2,.7,.2,1); }

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

  /* ---------- gold band: a glint that sweeps, and light that follows the cursor ---------- */
  .cta { position: relative; overflow: hidden; }
  .cta .wrap { position: relative; }
  .cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.32) 50%, transparent 62%);
    transform: translateX(-110%); animation: fxGlint 7s ease-in-out 1.5s infinite;
  }
  @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: 70%; aspect-ratio: 1; right: -15%; top: -60%;
    background: radial-gradient(closest-side, rgba(201,160,99,.22), transparent);
    pointer-events: none; animation: fxDrift 14s ease-in-out infinite alternate;
  }
  @keyframes fxDrift { from { transform: translate(0,0); } to { transform: translate(-22%, 34%); } }
  .page-hero h1 { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .1s) backwards; }
  .page-hero p { animation: fxRise .9s cubic-bezier(.2,.8,.2,1) calc(var(--ix) + .25s) backwards; }

  /* ---------- reveal on scroll: slide in from the side, photos wipe open ---------- */
  .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); } }
  .photo.rv.in, .tile.rv.in { animation-name: fxWipe; animation-duration: 1.1s; }
  @keyframes fxWipe { from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(24px); } to { clip-path: inset(0 0 0 0); } }
  .trust li.rv.in { animation-name: fxPop; animation-duration: .6s; }
  @keyframes fxPop { from { opacity: 0; transform: translateY(14px) scale(.9); } }

  /* ---------- photo viewer ---------- */
  .lb.open { animation: fxFade .25s ease; }
  .lb.open img { animation: fxZoom .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes fxFade { from { opacity: 0; } }
  @keyframes fxZoom { from { opacity: 0; transform: scale(.94); } }
}