/* ==========================================================================
   Saxon Manor — homepage image layer (v1.30.0)

   Loaded on the front page only, after main.css. Client direction from the
   2026-10-02 call: more elegant, more photography, scrollytelling, and the
   three venue tabs as interiors that click through. MOTION-PROFILE.md §v2.

   Contract, same as sonic-motion.js: CSS owns the final state. The hidden
   start states below apply only under .has-reveal, which home-motion.js sets
   — so with JS off, failed, or reduced motion, every photograph is simply
   there.
   ========================================================================== */

:root{
  --ease-reveal:cubic-bezier(.65,0,.15,1);
  --dur-reveal:1300ms;
}

/* Reveal: the curtain ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  /* The clip goes on the CHILD. IntersectionObserver treats an element that
     its own clip-path hides completely as never intersecting, so clipping the
     observed element itself means it never reveals. */
  .has-reveal [data-reveal="clip"] > :first-child{
    clip-path:inset(100% 0 0 0);
    transition:clip-path var(--dur-reveal) var(--ease-reveal);
    transition-delay:calc(var(--i, 0) * 120ms);
  }
  /* Negative inset, not none: clip-path cannot transition to none, and
     inset(0) would shave off the card shadows. */
  .has-reveal [data-reveal="clip"].is-revealed > :first-child{clip-path:inset(-80px -80px -80px -80px)}

  /* Scale-settle only where an overflow:hidden box contains it. */
  .has-reveal [data-reveal="clip"] .room-media img,
  .has-reveal .story-inline[data-reveal="clip"] img{
    scale:1.16;
    transition:scale calc(var(--dur-reveal) + 500ms) var(--ease-settle);
    transition-delay:calc(var(--i, 0) * 120ms);
  }
  .has-reveal [data-reveal="clip"].is-revealed .room-media img,
  .has-reveal .story-inline[data-reveal="clip"].is-revealed img{scale:1}
  /* Hover zoom has to outrank the settled state above. */
  .has-reveal [data-reveal="clip"].is-revealed .room-link:hover .room-media img,
  .has-reveal [data-reveal="clip"].is-revealed .room-link:focus-visible .room-media img{scale:1.07;transition-delay:0s}

  .has-reveal [data-reveal="rise"]{
    opacity:0;translate:0 22px;
    transition:opacity 900ms var(--ease-settle),translate 900ms var(--ease-settle);
  }
  .has-reveal [data-reveal="rise"] + [data-reveal="rise"]{transition-delay:110ms}
  .has-reveal [data-reveal="rise"].is-revealed{opacity:1;translate:0 0}
}

/* Hero: the photograph eases closer as you leave it (home-motion.js). */
.hero-bg img{transform-origin:50% 100%;will-change:scale}

/* 1b. The rooms ------------------------------------------------------------ */
.rooms-section{padding-block:72px 88px}
.rooms-head{text-align:center;max-width:760px;margin:0 auto 64px}
.rooms-head h2{font-size:clamp(32px,3.8vw,48px)}

.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
/* Editorial offset — the middle room sits lower, so the row reads as three
   photographs laid on a table rather than a product grid. */
.room:nth-child(2){margin-top:64px}

.room-link{position:relative;display:block;border-radius:var(--radius-card);overflow:hidden;
  color:#fff;text-decoration:none;background:var(--sunken);box-shadow:var(--shadow-raised);
  transition:box-shadow 600ms var(--ease-settle),translate 600ms var(--ease-settle)}
.room-link:hover,.room-link:focus-visible{color:#fff;box-shadow:var(--shadow-lift);translate:0 -6px}
.room-link:focus-visible{outline:3px solid var(--rose-deep);outline-offset:4px}

.room-media{display:block;aspect-ratio:4/5;overflow:hidden}
.room-media img{width:100%;height:100%;object-fit:cover;
  transition:scale 1400ms var(--ease-settle)}
.room-link:hover .room-media img,.room-link:focus-visible .room-media img{scale:1.07}

/* Scrim for the type, deepening on hover. */
.room-link::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,22,20,0) 38%,rgba(26,22,20,.30) 62%,rgba(26,22,20,.78) 100%);
  transition:opacity 600ms var(--ease-settle)}
/* Gold hairline that draws in on hover — the ornamental layer, on the photo. */
.room-link::after{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;
  border:1px solid rgba(232,197,122,.85);border-radius:calc(var(--radius-card) - 8px);
  opacity:0;scale:1.03;transition:opacity 600ms var(--ease-settle),scale 800ms var(--ease-settle)}
.room-link:hover::after,.room-link:focus-visible::after{opacity:1;scale:1}

.room-copy{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 36px;
  display:flex;flex-direction:column;gap:6px;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.room-kick{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-oak-gold)}
.room-name{font-family:var(--font-display);font-size:clamp(30px,2.7vw,40px);line-height:1.08;font-weight:400}
.room-cta{margin-top:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;translate:0 10px;transition:opacity 500ms var(--ease-settle),translate 500ms var(--ease-settle)}
.room-cta [aria-hidden]{display:inline-block;transition:translate 500ms var(--ease-settle)}
.room-link:hover .room-cta,.room-link:focus-visible .room-cta{opacity:1;translate:0 0}
.room-link:hover .room-cta [aria-hidden]{translate:5px 0}
/* No hover on touch — the invitation has to be visible from the start. */
@media (hover:none){
  .room-cta{opacity:1;translate:0 0}
}

/* 2b. The day — scrollytelling --------------------------------------------- */
.story{padding-block:var(--section-y);background:var(--ground)}
.story-head{text-align:center;max-width:800px;margin:0 auto 80px}
.story-head h2{font-size:clamp(32px,3.8vw,48px)}

.story-grid{display:grid;grid-template-columns:1fr}
.story-stage{display:none}
.story-steps{display:grid;gap:72px;max-width:720px;margin-inline:auto;padding:0;counter-reset:none}

.story-inline{margin:0 0 28px;border-radius:var(--radius-card);overflow:hidden;
  aspect-ratio:4/5;background:var(--sunken);box-shadow:var(--shadow-raised)}
.story-inline img{width:100%;height:100%;object-fit:cover}

.story-when{display:flex;align-items:baseline;gap:14px;margin:0 0 12px;
  font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose-deep)}
.story-n{font-family:var(--font-display);font-size:30px;font-weight:300;letter-spacing:0;
  color:var(--gold-text);line-height:1}
.story-text h3{font-size:clamp(30px,3.2vw,46px);font-weight:300;letter-spacing:-.015em;margin:0 0 16px}
.story-text p:last-child{font-size:18px;line-height:1.7;color:var(--muted);max-width:46ch}

@media (min-width:1001px){
  .story.is-live .story-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    gap:clamp(56px,7vw,112px);align-items:start}
  .story.is-live .story-stage{display:flex;flex-direction:column;gap:18px;
    position:sticky;top:112px;height:calc(100vh - 148px);min-height:540px;max-height:900px}
  .story.is-live .story-inline{display:none}
  .story.is-live .story-steps{gap:0;max-width:none;margin:0}
  .story.is-live .story-step{min-height:82vh;display:flex;align-items:center}
  .story.is-live .story-step:first-child{min-height:62vh;align-items:flex-start;padding-top:8vh}
  .story.is-live .story-step:last-child{min-height:72vh}
  .story.is-live .story-text{opacity:.26;translate:0 14px;
    transition:opacity 700ms var(--ease-settle),translate 700ms var(--ease-settle)}
  .story.is-live .story-step.is-active .story-text{opacity:1;translate:0 0}
}

.story-frame{position:relative;flex:1;border-radius:var(--radius-card);overflow:hidden;
  background:var(--sunken);box-shadow:var(--shadow-lift)}
.story-frame::after{content:"";position:absolute;inset:16px;z-index:2;pointer-events:none;
  border:1px solid rgba(232,197,122,.7);border-radius:calc(var(--radius-card) - 8px)}
.story-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;scale:1.08;
  transition:opacity 1100ms var(--ease-settle),scale 1800ms var(--ease-settle)}
.story-img.is-active{opacity:1;scale:1}
/* The desktop frame is wider than 4:5, so cover trims top and bottom. The
   ceremony's guests sit at the very bottom edge — trim the tree, not them. */
.story-img[src*="day-ceremony"]{object-position:50% 100%}

.story-meter{display:flex;align-items:center;gap:18px}
.story-count{font-family:var(--font-display);font-size:20px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.story-count [data-story-num]{color:var(--ink)}
.story-bar{position:relative;flex:1;height:2px;background:var(--whisper);border-radius:2px;overflow:hidden}
.story-bar span{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;
  transform:scaleX(0)}

@media (prefers-reduced-motion: reduce){
  .story-img,.story.is-live .story-text{transition:none}
  .story-img{scale:1}
}

/* 4. Venue cards — the whole card is the link ------------------------------ */
.card--venue{transition:box-shadow 600ms var(--ease-settle),translate 600ms var(--ease-settle)}
.card--venue:hover{translate:0 -6px}
.card--venue .card-crest{pointer-events:none}
.card--venue .card-media{display:block;overflow:hidden}
.card--venue .card-media img{transition:scale 1400ms var(--ease-settle)}
.card--venue:hover .card-media img{scale:1.06}
.card--venue h3 a{color:inherit;text-decoration:none}
.card-cover::after{content:"";position:absolute;inset:0;z-index:1}
.card-cover:focus-visible{outline:none}
.card--venue:has(.card-cover:focus-visible){outline:3px solid var(--rose-deep);outline-offset:4px}
.card--venue .card-link{margin-top:4px}
.card--venue .card-link span{display:inline-block;transition:translate 500ms var(--ease-settle)}
.card--venue:hover .card-link span{translate:5px 0}

/* 5. The quote, over the Garden Room --------------------------------------- */
.quote-band{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(120px,15vw,200px);background:var(--oak-deep);color:#fff;text-align:center}
.quote-band__bg{position:absolute;inset:0;z-index:-1}
.quote-band__bg img{width:100%;height:100%;object-fit:cover}
.quote-band__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,22,20,.62) 0%,rgba(24,22,20,.56) 50%,rgba(24,22,20,.74) 100%)}
.quote-band__inner{margin:0 auto;max-width:920px}
.quote-band .kicker{color:var(--on-oak-gold)}
.quote-band blockquote{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:clamp(24px,2.9vw,40px);line-height:1.38;letter-spacing:-.005em;text-wrap:pretty}
.quote-band figcaption{margin-top:32px;font-size:14px;letter-spacing:.05em;color:rgba(255,255,255,.86)}
.quote-band figcaption strong{color:#fff;font-weight:600}

/* 6. Rain photograph ------------------------------------------------------- */
.framed-media{display:block;overflow:hidden;border-radius:calc(var(--radius-card) - 6px)}
.framed-media img{display:block;border-radius:0}

/* 8. Gallery --------------------------------------------------------------- */
.gallery li img{transition:scale 900ms var(--ease-settle),box-shadow 600ms var(--ease-settle)}
.gallery li:hover img{scale:1.025;box-shadow:var(--shadow-lift)}

/* Tablet / phone ----------------------------------------------------------- */
@media (max-width:1000px){
  .rooms{gap:18px}
  .room:nth-child(2){margin-top:40px}
  .room-copy{padding:22px 20px}
  .room-link::before{background:linear-gradient(180deg,rgba(26,22,20,0) 22%,rgba(26,22,20,.42) 52%,rgba(26,22,20,.84) 100%)}
  .room-name{font-size:clamp(24px,3.4vw,32px)}
  .room-kick{font-size:11px;letter-spacing:.16em}
  .room-cta-long{display:none}
  .story-inline{aspect-ratio:1/1}
}

@media (max-width:760px){
  .rooms-section{padding-block:72px 88px}
  .rooms-head{margin-bottom:40px}
  .rooms{grid-template-columns:1fr;gap:18px}
  .room:nth-child(2){margin-top:0}
  .room-cta-long{display:inline}
  .room-name{font-size:32px}
  .room-kick{font-size:12px}
  .story-inline{aspect-ratio:4/5}

  .story{padding-block:var(--section-y-mobile)}
  .story-head{margin-bottom:48px}
  .story-steps{gap:56px}
  .story-text p:last-child{font-size:16px}

  .quote-band{padding-block:64px}
  .quote-band blockquote{font-size:22px}
}