/* ============================================================
   HOUSE GENTRY — MOTION LAYER
   One shared layer attached to the incumbent design.
   Transforms / opacity / filter only. No layout animation.
   Content is fully visible by default: every hidden state in
   this file is either a keyframe "from" (the element's own
   styles are its resting state) or a class that motion.js
   adds only to elements still below the fold. If this file
   or the script fails to load, the site reads exactly as
   before — nothing waits on motion to appear.
   Register: quiet luxury. Slow easings, small distances.
   ============================================================ */

:root{
  --hgm-out:cubic-bezier(.16,1,.3,1);   /* confident arrival, exponential out */
  --hgm-soft:cubic-bezier(.33,.66,.34,1);
  --hgm-inout:cubic-bezier(.45,0,.55,1);
}

/* ---------- 1 · Home hero — the one authored moment ----------
   The photograph settles from a breath larger while the
   eyebrow, headline, line and buttons rise in sequence.
   The headline alone sharpens out of a slight blur. Once.
   ROTATION OWNERSHIP (settled by Robert, 2026-11-04): the
   hero's top layer (.bg2, the lady) belongs to the hero
   rotation in index.html — an opacity crossfade toggled by
   the .show2 class. No animation in this file may land on
   .bg2: the settle keyframes animate opacity, and a filled
   animation pins the layer's opacity in the cascade above
   the rotation's transition, which would freeze the
   crossfade on the second photograph. The settle and the
   drift therefore sit on the static base layer alone
   (.bg:not(.bg2) — the cigar man, the stage the rotation
   fades over). */
@media (prefers-reduced-motion: no-preference){
  .hero .bg:not(.bg2){
    animation:
      hgm-hero-settle 1.5s var(--hgm-out) both,
      hgm-hero-drift 44s var(--hgm-inout) 1.7s infinite alternate;
  }
  .hero .wrap>*{
    animation:hgm-rise .72s var(--hgm-out) both;
  }
  .hero .wrap>*:nth-child(1){animation-delay:.05s}
  .hero .wrap>*:nth-child(2){animation-delay:.14s}
  .hero .wrap>*:nth-child(3){animation-delay:.23s}
  .hero .wrap>*:nth-child(4){animation-delay:.32s}
  .hero .wrap>h1{animation-name:hgm-rise-blur}
}
@keyframes hgm-hero-settle{
  from{opacity:0;transform:scale(1.06)}
  to{opacity:1;transform:scale(1)}
}
/* ---------- 2 · Hero drift — ambient, barely there ---------- */
@keyframes hgm-hero-drift{
  from{transform:scale(1)}
  to{transform:scale(1.04)}
}
@keyframes hgm-rise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes hgm-rise-blur{
  from{opacity:0;transform:translateY(10px);filter:blur(3px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ---------- 3 · Page hero photograph — settle once ---------- */
@media (prefers-reduced-motion: no-preference){
  .hero-img{animation:hgm-img-settle 1.1s var(--hgm-out) both}
}
@keyframes hgm-img-settle{
  from{opacity:0;transform:scale(1.04)}
  to{opacity:1;transform:scale(1)}
}

/* ---------- 4–6 · Scroll reveal — set by motion.js ----------
   .hgm-pre is added by script only, only to elements still
   below the fold, and removed again once the reveal lands.
   Panels rise 12px as units; Haunts rows, being tall, take a
   shorter rise over a longer breath. Nothing textual is a
   reveal target — headings and prose appear instantly. */
.hgm-pre{opacity:0;transform:translateY(12px)}
.hgm-pre.hgm-in{
  opacity:1;transform:translateY(0);
  transition:opacity .56s var(--hgm-out),transform .56s var(--hgm-out);
}
.haunt.hgm-pre{transform:translateY(6px)}
.haunt.hgm-pre.hgm-in{transition-duration:.68s,.68s}

/* ---------- 7 · Card hover — fine pointers only ----------
   The container takes the feedback, never the photograph
   alone; the one framed photograph (.listing .vimg, already
   clipped by its card on the house's pages) settles inside
   its frame. Touch devices never see these states. */
@media (hover:hover) and (pointer:fine){
  .door{
    transition:border-color .25s var(--hgm-soft),transform .28s var(--hgm-out),box-shadow .32s var(--hgm-soft);
  }
  .door:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(0,0,0,.32);
  }
  .listing{
    overflow:hidden;
    transition:transform .28s var(--hgm-out),box-shadow .32s var(--hgm-soft);
  }
  .listing:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(0,0,0,.32);
  }
  .listing .vimg{transition:transform .7s var(--hgm-out)}
  .listing:hover .vimg{transform:scale(1.03)}
}

/* ---------- 8 · Link underline — drawn, not switched ----------
   Prose and footer links draw their underline in gold-soft
   (their own colour) on hover and on keyboard focus. Links
   inside the shared header/auth furniture are excluded by
   the guard rules at the foot of this file. */
.wrap p a:not(.btn),
.wrap li a:not(.btn),
footer a:not(.btn),
a.backlink{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .26s var(--hgm-out);
}
.wrap p a:not(.btn):hover,
.wrap p a:not(.btn):focus-visible,
.wrap li a:not(.btn):hover,
.wrap li a:not(.btn):focus-visible,
footer a:not(.btn):hover,
footer a:not(.btn):focus-visible,
a.backlink:hover,
a.backlink:focus-visible{
  background-size:100% 1px;
}

/* ---------- 9 · Button press — instant tactile answer ---------- */
.btn{transition:background .2s var(--hgm-soft),color .2s var(--hgm-soft),border-color .2s var(--hgm-soft),transform .12s var(--hgm-soft)}
.btn:active{transform:scale(.97)}

/* ---------- Guards — the shared header/auth furniture ----------
   Nothing in this layer reaches the sign-in controls, the
   modal, the gate, or any hg-* element. */
.hg-modal a,.hg-gate a,.hg-note a,.hg-tabs a{
  background-image:none;
  transition:none;
}

/* ---------- 11 · Reduced motion — everything becomes instant ----------
   State changes still land (final states are the elements'
   own styles); movement, drift and blur do not run. */
@media (prefers-reduced-motion: reduce){
  .hero .bg,.hero .wrap>*,.hero-img,
  .door,.listing,.listing .vimg,.btn,
  .wrap p a:not(.btn),.wrap li a:not(.btn),footer a:not(.btn),a.backlink,
  .hgm-pre,.hgm-pre.hgm-in{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hgm-pre{opacity:1 !important;transform:none !important}
  .door:hover,.listing:hover{transform:none}
  .listing:hover .vimg{transform:none}
  .btn:active{transform:none}
}