/* ════════════════════════════════════════════════════════════
   V7 — OPENING · NAVIGATION · TRANSITIONS · BACKGROUND
   A cream brand opening, one continuous background, and page
   changes that dissolve instead of cutting.
   (Palette, typography and layouts unchanged.)
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. OPENING SHOT — cream, logo-led, ~3s ---------- */
.loader{
  background:var(--paper);            /* warm ivory, same family as the light sections */
  gap:0;
  transition:opacity .8s cubic-bezier(.22,1,.36,1), visibility 0s .8s;
  clip-path:none;                     /* dissolve, never wipe */
  opacity:1;
}
/* the ring mark and the dark treatment are retired */
.loader::before{content:none !important;display:none !important}

/* the wordmark IS the opening — inherit the brand's own treatment */
.loader .brand{
  color:var(--ink);                   /* "Practice" must be readable on cream */
  font-size:clamp(2rem,5.2vw,3rem);
  opacity:0;transform:translateY(10px);
  animation:loWord 1s cubic-bezier(.22,1,.36,1) .8s forwards;
  overflow:visible;
}
.loader .brand i{color:var(--gold)}   /* "Reach" keeps its gold italic */
.loader .brand::after{content:none}   /* no wipe panel */
@keyframes loWord{to{opacity:1;transform:none}}

/* a single muted-gold rule settles beneath the logo */
.loader .rule{
  width:min(180px,44vw);height:1px;background:rgba(165,129,60,.22);
  margin-top:22px;overflow:visible;
}
.loader .rule::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:center;
  animation:loRule2 .8s cubic-bezier(.22,1,.36,1) 1.7s forwards;
  box-shadow:none;
}
@keyframes loRule2{to{transform:scaleX(1)}}

/* keep it simple — the small caption stays out of the way */
.loader .pct{
  margin-top:16px;font-size:.6rem;letter-spacing:.32em;
  color:rgba(11,20,32,.42);opacity:0;
  animation:loMeta2 .7s cubic-bezier(.22,1,.36,1) 2s forwards;
}
@keyframes loMeta2{to{opacity:1}}

/* 2.4s → the cream dissolves and the hero emerges beneath it */
.loader.is-done{
  opacity:0;visibility:hidden;
  clip-path:none;
}
.loader.is-done .brand,.loader.is-done .rule,.loader.is-done .pct{
  transition:opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1);
  opacity:0;transform:translateY(-8px);
}
@media (prefers-reduced-motion:reduce){
  .loader .brand,.loader .rule::after,.loader .pct{animation:none}
  .loader .brand{opacity:1;transform:none}
  .loader .rule::after{transform:scaleX(1)}
  .loader .pct{opacity:1}
}

/* ---------- 2. ONE BACKGROUND ENVIRONMENT ---------- */
html,body{background:var(--paper)}    /* nothing can flash white between pages */

/* one shared grid: same size, weight, tone, on every light surface */
.statement-v2,#why-us,.path-v2,.plans-zone,.inwriting,.page-hero,
.section:not(.on-dark):not(.ba2):not(.cta):not(.band){
  background-image:
    repeating-linear-gradient(to right,rgba(158,124,58,.085) 0 1px,transparent 1px 104px),
    repeating-linear-gradient(to bottom,rgba(158,124,58,.07) 0 1px,transparent 1px 104px);
  background-position:0 0;
  background-attachment:fixed;        /* the grid belongs to the page, not the section */
}
/* barely-there drift, so the paper has depth without moving visibly */
@media (prefers-reduced-motion:no-preference){
  .statement-v2,#why-us,.plans-zone,.inwriting{
    animation:gridDrift 90s linear infinite alternate;
  }
}
@keyframes gridDrift{from{background-position:0 0}to{background-position:26px 18px}}

/* soften every seam between a light sheet and the dark sections */
.on-dark::before,.ba2::before,.cta::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:64px;
  background:linear-gradient(rgba(245,242,234,.5),rgba(245,242,234,0));
  pointer-events:none;z-index:0;opacity:.5;
}
.on-dark > *,.ba2 > *,.cta > *{position:relative;z-index:1}

/* ---------- 3. PAGE TRANSITIONS — dissolve, never cut ---------- */
html.pt-ready main,html.pt-ready .footer{
  transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
html.pt-leaving main,html.pt-leaving .footer{
  opacity:0;transform:translateY(-8px);
}
html.pt-entering main,html.pt-entering .footer{
  opacity:0;transform:translateY(10px);
}
/* the nav stays put so the frame feels continuous */
html.pt-leaving .nav,html.pt-entering .nav{transition:opacity .45s ease}
html.pt-leaving .nav{opacity:.35}
@media (prefers-reduced-motion:reduce){
  html.pt-ready main,html.pt-ready .footer,
  html.pt-leaving main,html.pt-leaving .footer,
  html.pt-entering main,html.pt-entering .footer{transition:none;opacity:1;transform:none}
}