/* ============================================================
   HAUS OF LUXUR — ANIMATION LAYER (test build)
   Loaded after styles.css. Delete this file + animations.js
   to fully revert to the base site.
   Everything motion-related is gated behind
   prefers-reduced-motion: no-preference for accessibility.
   ============================================================ */

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

  /* ---------- Page enter / exit ---------- */
  body { animation: pageIn .6s var(--ease) both; }
  @keyframes pageIn { from { opacity: 0; } }
  body.page-exit { opacity: 0; transition: opacity .22s ease; }

  /* ---------- Scroll progress hairline ---------- */
  .scroll-progress {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0); transform-origin: 0 0;
    z-index: 300; pointer-events: none;
  }

  /* ---------- Header: hide on scroll down, return on scroll up ---------- */
  .site-header { transition: background .4s var(--ease), padding .4s var(--ease),
                 border-color .4s var(--ease), transform .45s var(--ease); }
  .site-header.is-tucked { transform: translateY(-100%); }

  /* ---------- Hero: slow Ken Burns + content that drifts on scroll ---------- */
  .hero__media { animation: kenburns 18s ease-out both; will-change: transform; }
  @keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
  .hero__inner { will-change: transform, opacity; }

  /* ---------- Headline word reveal (h1 split into masked words) ---------- */
  h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
  h1 .wi { display: inline-block; transform: translateY(115%); transition: transform .9s var(--ease); }
  body.is-loaded h1 .wi { transform: none; }

  /* ---------- Marquee strip (homepage) ---------- */
  .marquee {
    overflow: hidden;
    background: var(--black);
    color: rgba(255,255,255,.55);
    border-top: 1px solid var(--line-dark);
    padding: 1rem 0;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: .66rem;
    white-space: nowrap;
  }
  .marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
  .marquee__track span { padding-right: 3.2rem; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ---------- Button sheen sweep ---------- */
  .btn { position: relative; overflow: hidden; }
  .btn::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
    transform: translateX(-130%);
  }
  .btn:hover::before { transform: translateX(130%); transition: transform .7s var(--ease); }

  /* ---------- Card lift on hover ---------- */
  .plan, .doc-card, .quote {
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .plan:hover, .doc-card:hover, .quote:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(0,0,0,.10);
    z-index: 1; position: relative;
  }

  /* ---------- Gallery filter transitions ---------- */
  .gallery-grid .item.is-entering,
  .gallery-grid .item.is-leaving { opacity: 0; transform: scale(.96); }

  /* ---------- FAQ answers get JS height animation; keep overflow tidy ---------- */
  .faq details .answer { overflow: hidden; }

  /* ---------- Image frames: slight settle-in ---------- */
  .frame .ph { transition: transform 1.1s var(--ease), filter 1.1s var(--ease); }
  .frame:hover .ph { filter: brightness(1.04); }
}

/* Reduced motion: kill the marquee entirely (it never stops otherwise) */
@media (prefers-reduced-motion: reduce) {
  .marquee { display: none; }
  .scroll-progress { display: none; }
}