/* (c) 2026 The Lowry Group at Coldwell Banker Realty. All rights reserved. Proprietary — unauthorized copying, reuse, or redistribution prohibited. */
/* ==========================================================================
   THE LOWRY GROUP — PHASE 1 ENHANCEMENT LAYER
   Branded loader · scroll-reveal choreography · image wipes · count-ups ·
   subtle hero parallax.

   Design principle: restraint. Every animated behaviour below is wrapped in
   `@media (prefers-reduced-motion: no-preference)`, so a visitor whose device
   asks to minimize motion gets a calm, fully-visible, completely static site
   with nothing hidden and nothing moving. If JavaScript never runs, none of
   the reveal classes are applied, so content is always visible by default.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) BRANDED LOADER  (home page only — markup lives at the top of index.html)
   The gold logo fades and scales in, a thin gold line draws beneath it, a soft
   highlight sweeps across the lettering, then the whole panel lifts away to
   reveal the hero. It auto-dismisses via CSS animation alone, so even with
   JavaScript disabled the site is never left covered.
   -------------------------------------------------------------------------- */
#siteLoader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#siteLoader .loader-logo { position: relative; display: inline-block; line-height: 0; }
#siteLoader .loader-mark { display: block; width: min(340px, 62vw); height: auto; }
#siteLoader .loader-shimmer {
  position: absolute;
  inset: 0;
  -webkit-mask: url(../images/brand/mark.png) center / contain no-repeat;
          mask: url(../images/brand/mark.png) center / contain no-repeat;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  background-size: 250% 100%;
  background-position: 160% 0;
  opacity: 0;
}
#siteLoader .loader-line {
  width: 0;
  height: 1px;
  margin-top: 1.5rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  body.is-loading { overflow: hidden; }

  #siteLoader { animation: loaderOut 0.9s cubic-bezier(0.7, 0, 0.25, 1) 2.05s forwards; }
  #siteLoader .loader-mark { opacity: 0; transform: scale(0.94); animation: loaderMark 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s forwards; }
  #siteLoader .loader-shimmer { animation: loaderShimmer 1.3s ease-in-out 0.7s 1 forwards; }
  #siteLoader .loader-line { animation: loaderLine 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s forwards; }
}

/* A visitor who prefers reduced motion skips the entrance entirely. */
@media (prefers-reduced-motion: reduce) {
  #siteLoader { display: none; }
}

@keyframes loaderMark   { to { opacity: 1; transform: scale(1); } }
@keyframes loaderLine   { to { width: min(240px, 46vw); } }
@keyframes loaderShimmer { 0% { opacity: 0; background-position: 160% 0; } 15% { opacity: 1; } 100% { opacity: 0; background-position: -160% 0; } }
@keyframes loaderOut    { to { transform: translateY(-100%); visibility: hidden; } }

/* --------------------------------------------------------------------------
   2) SCROLL-REVEAL CHOREOGRAPHY
   Elements tagged (by js/enhance.js) with .js-reveal ease up and fade in as
   they enter the viewport. Staggering within a group is applied inline by JS.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .js-reveal.is-inview { opacity: 1; transform: none; }

  /* Signature image "wipe" — used sparingly on feature images. */
  .js-reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.25, 1); }
  .js-reveal-img.is-inview { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------------
   3) HERO PARALLAX (home) — a very slight depth shift applied inline by JS.
   Only the transition easing lives here; the transform values are set in JS
   and cleared for reduced-motion users.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-video { will-change: transform; }
}