/* ══════════════════════════════════════════════════════════════════════════════
   SITE KIT — motion.                                           motion.css v1.0
   Load AFTER kit.css. Optional: a site is complete and correct without it.

   THE RULE THAT SHAPES THIS WHOLE FILE: nothing here may ever be the reason a
   visitor cannot see something. An earlier build hid every section at opacity:0
   behind an IntersectionObserver, and when the observer did not fire whole bands
   were simply absent — worse, a transparent parent defers its lazy-loaded images,
   so eleven of twelve photographs never downloaded either.

   So the reveals below live inside @supports (animation-timeline: view()). A
   browser that does not support scroll-driven animation gets NO rule at all, not
   a broken one, and the page renders in its finished state. There is no JS in the
   reveal path, so there is no observer to fail.

   Everything else is a hover or pointer flourish that starts from the finished
   look and adds to it.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. ambient hero clip ────────────────────────────────────────────────────
   The client's OWN room, moving. Five to eight seconds, silent, looping. It sits
   where the hero photograph sits and carries the same gradient scrim over it, so
   the headline contrast is identical whether the clip plays or the poster shows.

   The poster is not optional. It is the first frame the visitor sees, it is what
   shows while the clip buffers, it is what shows if the clip is blocked, and it
   is what shows to anyone who asked their OS for less motion.                  */
.hero-img video, .pbanner .bimg video{
  width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}

/* A very slow drift on top of whatever the clip is doing. Six seconds of footage
   reads as a loop; a 28s drift over it stops the eye finding the seam. */
@media (prefers-reduced-motion:no-preference){
  .hero-img video.drift{animation:mo-drift 28s ease-in-out infinite alternate}
}
@keyframes mo-drift{from{transform:scale(1.0)}to{transform:scale(1.06)}}

/* ── 2. scroll reveals ───────────────────────────────────────────────────────
   Pure CSS, no observer, and gated so an unsupporting browser gets nothing. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .mo-rise{
      animation:mo-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 62%}
    .mo-fade{
      animation:mo-fade linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 50%}
    /* stagger the children of a grid so a row of cards arrives as a sequence */
    .mo-stagger>*{
      animation:mo-rise linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%}
    .mo-stagger>*:nth-child(2){animation-range:entry 4% entry 74%}
    .mo-stagger>*:nth-child(3){animation-range:entry 8% entry 78%}
    .mo-stagger>*:nth-child(4){animation-range:entry 12% entry 82%}
  }
}
/* Note the FROM values are gentle on purpose. A 60px slide reads as a template
   effect; 18px reads as the page settling. Opacity never starts below .55, so a
   half-scrolled screenshot never looks broken. */
@keyframes mo-rise{from{opacity:.55;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mo-fade{from{opacity:.55}to{opacity:1}}

/* ── 3. the light that follows the cursor ────────────────────────────────────
   Desktop only, pointer only. The single cheapest thing that reads expensive: a
   soft pool of the client's own accent colour tracking across raised glass. It
   is their signage colour, so it never looks like a generic template glow.

   --mx / --my are set by motion.js. Absent them the gradient sits at the card's
   centre, which is a perfectly good static highlight, so nothing depends on JS. */
@media (hover:hover) and (pointer:fine){
  .scard, .pcard, .rvw, .form{position:relative;overflow:hidden}
  .scard::after, .pcard::after, .rvw::after, .form::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    opacity:0;transition:opacity .4s ease;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
               rgba(255,255,255,.10), transparent 62%)}
  .scard:hover::after, .pcard:hover::after, .rvw:hover::after, .form:hover::after{opacity:1}
  .scard>*, .pcard>*, .rvw>*, .form>*{position:relative;z-index:1}
}

/* ── 4. the typographic moment ───────────────────────────────────────────────
   One per page, never two. An oversized line of the display serif that lands as
   a designed object rather than a heading. This is the element that makes a page
   look art-directed instead of assembled, and it costs nothing to render.

   Use it for a sentence worth reading slowly: a promise, a founding line, one
   real review. Never for a section label.                                      */
.moment{font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,6.4vw,5rem);line-height:1.06;letter-spacing:-.02em;
  max-width:16ch;color:#FBF8F1;
  text-wrap:balance;
  text-shadow:0 0 60px rgba(0,0,0,.4)}
.moment .lit{color:var(--lume);text-shadow:0 0 44px rgba(226,184,122,.42)}
/* .center matches .shead.center in kit.css. Without an auto margin the max-width box
   stays hard left even inside a centred parent, and the line reads as misaligned
   rather than placed. Caught in the reference build. */
.moment.center{margin-inline:auto;text-align:center}
.moment+.mattrib{margin-top:26px;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-2)}
@media(max-width:640px){.moment{max-width:none}}

/* ── 5. link and image flourishes ───────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .gal figure img, .split .s-media img{
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
  .gal figure:hover img, .split .s-media:hover img{transform:scale(1.04)}
}

/* ── the global brake ────────────────────────────────────────────────────────
   kit.css already flattens durations under prefers-reduced-motion. This repeats
   it for the animations declared above, because the kit rule cannot know about
   a scroll timeline that was attached later. */
@media (prefers-reduced-motion:reduce){
  .mo-rise,.mo-fade,.mo-stagger>*,.hero-img video.drift{
    animation:none!important;opacity:1!important;transform:none!important}
}


/* ── light page mode (body.light, kit.css) ───────────────────────────────────
   The moment is set in ink on paper, and the cursor light becomes the client's
   accent at low alpha, because white light on a cream card is invisible. */
body.light .moment{color:var(--ink);text-shadow:none}
body.light .moment .lit{color:var(--accent);text-shadow:none}
body.light .moment+.mattrib{color:var(--muted)}
body.light .sec-ink .moment,body.light .cta .moment{color:#FBF8F1}
@media (hover:hover) and (pointer:fine){
  body.light .scard::after,body.light .pcard::after,body.light .rvw::after,body.light .form::after{
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(176,141,87,.12),transparent 62%)}
}