/* ============================================================
   BRAND MOTION — shared by the homepage and every supporting page
   ------------------------------------------------------------
   Four things live here, and nothing else:
     1. the opening curtain the first time a session lands
     2. cross-page transitions, so clicking never hard-cuts
     3. the sand-mist closing section on every page
     4. the scroll-stepped roadmap (one item per scroll)
   Everything degrades to plain, readable HTML without JS and
   turns itself off under prefers-reduced-motion.
   ============================================================ */

/* the brand palette the curtain, rail and bridge all draw from */
:root{
  --wvx-ink:#17150f;
  --wvx-red:#a8412a;
  --wvx-orange:#e08a3c;
  --wvx-cream:#f7f1e4;
}

/* ------------------------------------------------------------
   1. CROSS-PAGE TRANSITIONS
   Chromium runs this natively for same-origin navigations, so the
   old page melts into the new one instead of blinking white.
   ------------------------------------------------------------ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:pageLeave .26s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pageArrive .42s cubic-bezier(.22,.61,.36,1) both}

@keyframes pageLeave{to{opacity:0;transform:translateY(-10px) scale(.994)}}
@keyframes pageArrive{from{opacity:0;transform:translateY(14px)}}

/* the nav and footer stay put while the body swaps underneath them */
.site-header,.nav{view-transition-name:site-nav}
.site-footer,.footer{view-transition-name:site-foot}

/* Browsers without view transitions still get a soft arrival. */
.js-motion body{animation:pageArrive .5s cubic-bezier(.22,.61,.36,1) both}

/* ------------------------------------------------------------
   2. OPENING CURTAIN (first load of a session, homepage)
   Injected by JS, so no-JS visitors never see or wait on it.
   ------------------------------------------------------------ */
.intro-curtain{
  position:fixed;inset:0;z-index:400;
  display:grid;place-items:center;
  background:var(--wvx-ink);
  overflow:hidden;
  animation:curtainLift 1.15s cubic-bezier(.76,0,.24,1) .78s both;
}
.intro-curtain::before{
  content:"";position:absolute;inset:-45%;
  background:
    conic-gradient(from 200deg at 34% 42%,
      var(--wvx-red) 0deg,var(--wvx-orange) 68deg,var(--wvx-cream) 128deg,
      var(--wvx-red) 196deg,var(--wvx-ink) 268deg,var(--wvx-red) 360deg),
    radial-gradient(48% 42% at 72% 68%,rgb(224 138 60 / 85%),transparent 70%);
  filter:blur(58px) saturate(125%);
  opacity:.85;
  animation:curtainSwirl 9s linear infinite;
}
.intro-curtain::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(110% 85% at 50% 46%,rgb(23 21 15 / 12%),rgb(23 21 15 / 88%) 74%);
}
/* the monogram ships on its own cream field, so it reads as a pressed tile */
.intro-mark{
  position:relative;z-index:1;
  width:min(132px,30vw);height:auto;
  border-radius:24px;
  box-shadow:0 22px 50px rgb(0 0 0 / 55%),0 0 0 1px rgb(247 241 228 / 18%);
  animation:markRise .82s cubic-bezier(.22,.61,.36,1) both;
}
.intro-rule{
  position:relative;z-index:1;
  width:min(210px,44vw);height:2px;margin-top:20px;
  border-radius:2px;background:rgb(247 241 228 / 22%);overflow:hidden;
}
.intro-rule i{
  display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--wvx-orange),var(--wvx-cream));
  transform-origin:left;
  animation:ruleSweep .85s cubic-bezier(.22,.61,.36,1) .12s both;
}
@keyframes curtainLift{to{transform:translateY(-101%)}}
@keyframes markRise{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ruleSweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes curtainSwirl{to{transform:rotate(1turn)}}

/* the hero content lifts in behind the curtain rather than sitting there waiting */
.js-motion .curtain-active{overflow:hidden}

/* ------------------------------------------------------------
   3. CLOSING GLOW — the last section of every page
   The original Webvex treatment: a soft orange sand mist drifting
   behind centred copy on the cream page, bleeding down into the
   footer where the big italic Webvex sits. Same on every page.
   ------------------------------------------------------------ */
.cta-glow{
  position:relative;overflow:hidden;
  text-align:center;
  padding-block:clamp(4rem,8vw,6.5rem) clamp(3.5rem,7vw,5.5rem);
}
.cta-glow-mist{
  position:absolute;inset:auto -60px -50px;height:360px;z-index:0;
  filter:blur(64px);opacity:.92;pointer-events:none;
  background:
    radial-gradient(34% 58% at 15% 54%,#f0d3a6 0%,transparent 66%),
    radial-gradient(40% 64% at 46% 46%,#eac899 0%,transparent 66%),
    radial-gradient(36% 60% at 84% 58%,#d8c3a0 0%,transparent 66%),
    radial-gradient(42% 62% at 64% 74%,#f3e4c6 0%,transparent 70%);
  animation:ctaGlowDrift 11s ease-in-out infinite;
}
@keyframes ctaGlowDrift{
  0%{transform:translateX(0) scale(1);opacity:.92}
  50%{transform:translateX(14px) scale(1.04);opacity:1}
  100%{transform:translateX(0) scale(1);opacity:.92}
}
.cta-glow-inner{position:relative;z-index:1}
.cta-glow h2{
  max-width:18ch;margin-inline:auto;margin-bottom:0;
  font-size:clamp(2rem,4.4vw,2.9rem);letter-spacing:-.02em;line-height:1.06;
}
.cta-glow .cta-lede{
  max-width:52ch;margin:1.1rem auto 0;
  color:var(--muted,#4c483f);font-size:1.02rem;line-height:1.55;
}
.cta-glow-actions{
  position:relative;z-index:1;
  display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin-top:2.1rem;
}

/* the mist runs on into the contact details, so no rule between them */
main:has(.cta-glow) + .site-footer,
main:has(.cta-glow) + .footer{border-top:0}

/* the big italic wordmark closes every page, not just the homepage */
.footer-watermark{
  font-family:'Newsreader',serif;font-style:italic;font-weight:500;
  font-size:clamp(64px,19vw,255px);line-height:.78;letter-spacing:-.03em;
  text-align:center;color:#e7ddcb;
  overflow:hidden;user-select:none;
  margin:1.5rem -10px 0;
}

/* ------------------------------------------------------------
   4. SCROLL-STEPPED ROADMAP
   Each row arrives on its own as you scroll past it, and the rail
   fills in behind it. Without JS every row is simply visible.
   ------------------------------------------------------------ */
.steps{
  position:relative;
  margin:0;padding:0 0 0 clamp(2.4rem,5vw,3.4rem);
  list-style:none;
}
.steps::before{
  content:"";position:absolute;left:calc(clamp(2.4rem,5vw,3.4rem) / 2 - 1px);
  top:.6rem;bottom:.6rem;width:2px;border-radius:2px;
  background:var(--line,#e6e0d3);
}
/* the fill that tracks how far down the list you have read */
.steps-progress{
  position:absolute;left:calc(clamp(2.4rem,5vw,3.4rem) / 2 - 1px);
  top:.6rem;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--wvx-orange),var(--wvx-red));
  transition:height .55s cubic-bezier(.22,.61,.36,1);
}
.step{
  position:relative;
  padding-block:clamp(1rem,2vw,1.35rem);
  border-bottom:1px solid var(--line,#e6e0d3);
}
.step:last-child{border-bottom:0;padding-bottom:0}
.step::before{
  content:"";position:absolute;
  left:calc(clamp(2.4rem,5vw,3.4rem) / -2 - 5px);
  top:calc(clamp(1rem,2vw,1.35rem) + .5em);
  width:12px;height:12px;border-radius:50%;
  border:2px solid var(--line-strong,#c3b59b);
  background:var(--paper,#f4f2ec);
  transition:border-color .4s ease,background .4s ease,box-shadow .4s ease;
}
.step h3{margin-bottom:.4rem}
.step p{margin-bottom:0;color:var(--muted,#4c483f)}
.step-index{
  display:block;margin-bottom:.3rem;
  color:var(--accent-dark,#5e4325);
  font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
}

.js-motion .step{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.js-motion .step.is-in{opacity:1;transform:none}
.js-motion .step.is-in::before{
  border-color:var(--wvx-red);background:var(--wvx-orange);
  box-shadow:0 0 0 5px rgb(224 138 60 / 18%);
}

/* ------------------------------------------------------------
   5. SECTION BRIDGE — carries the hero into the next section
   A line that draws itself as you scroll, with a lead travelling
   down it, so the two sections read as one continuous thought.
   ------------------------------------------------------------ */
.section-bridge{
  position:relative;
  display:grid;justify-items:center;gap:.85rem;
  padding:clamp(1.5rem,4vw,3rem) 1rem clamp(.5rem,2vw,1.25rem);
}
.bridge-line{display:block;width:64px;height:96px;overflow:visible}
.bridge-line path{
  fill:none;stroke:var(--line-strong,#c3b59b);stroke-width:1.5;stroke-linecap:round;
}
.bridge-line .bridge-draw{
  stroke:var(--wvx-red);
  stroke-dasharray:96px;
  stroke-dashoffset:calc(96px * (1 - var(--bridge-progress,0)));
}
/* a plain translate, so it works everywhere offset-path does not */
.bridge-lead{
  fill:var(--wvx-orange);
  opacity:var(--bridge-progress,0);
  transform:translateY(calc(var(--bridge-progress,0) * 94px));
}
.bridge-label{
  max-width:26ch;
  font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dark,#5e4325);text-align:center;line-height:1.5;
  opacity:calc(.25 + var(--bridge-progress,0) * .75);
  transition:opacity .3s linear;
}

/* ------------------------------------------------------------
   6. QUIET MODE
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .intro-curtain{display:none}
  .js-motion body{animation:none}
  .cta-glow-mist{animation:none}
  .js-motion .step{opacity:1;transform:none}
  .steps-progress{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}