/* ==========================================================================
   COURAGEOUS — EXPERIENCE LAYER
   Loader · Cursor · Living header · Page transitions
   Depends on motion.css tokens. Every value here references a token.
   ========================================================================== */

/* ==========================================================================
   1. FIRST-VISIT LOADER
   Ivory ground. A copper line sets itself out, the lion resolves from it, the
   wordmark arrives, then two panels part like doors onto the hero.
   Session-scoped: full sequence once, 300ms fade thereafter.
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--bone-200);
  overflow: hidden;
}
.loader[hidden] { display: none; }

/* The two doors */
.loader__panel {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--bone-200);
  z-index: 2;
  transition: transform var(--t-cine) var(--e-panel);
}
.loader__panel--l { left: 0;  transform: translate3d(0,0,0); }
.loader__panel--r { right: 0; transform: translate3d(0,0,0); }
.loader.is-opening .loader__panel--l { transform: translate3d(-101%,0,0); }
.loader.is-opening .loader__panel--r { transform: translate3d(101%,0,0); }

/* Faint technical grid, fades in behind the mark */
.loader__grid {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(154,84,51,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,84,51,.09) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0;
  transition: opacity var(--t-cine) var(--e-out);
}
.loader.is-drawing .loader__grid { opacity: 1; }

.loader__stage { position: relative; z-index: 3; display: grid; justify-items: center; gap: 1.1rem; }

.loader__mark { width: clamp(76px, 12vw, 116px); height: auto; overflow: visible; }
.loader__mark path {
  fill: none;
  stroke: var(--lion);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The line draws itself; JS sets --len from the real path length. */
.loader__mark path {
  stroke-dasharray: var(--len, 900);
  stroke-dashoffset: var(--len, 900);
  transition: stroke-dashoffset var(--t-cine-slow) var(--e-draw),
              fill-opacity var(--t-comp) var(--e-out) var(--t-comp);
  fill: var(--lion); fill-opacity: 0;
}
.loader.is-drawing .loader__mark path { stroke-dashoffset: 0; fill-opacity: 1; }

.loader__word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 2.4rem);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow: hidden;
}
.loader__word span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--t-comp-slow) var(--e-out-deep);
}
.loader.is-drawing .loader__word span { transform: none; }

.loader__sub {
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--fg-muted);
  opacity: 0;
  transition: opacity var(--t-comp) var(--e-out) 160ms;
}
.loader.is-drawing .loader__sub { opacity: 1; }

/* Reduced motion: no sequence at all, just get out of the way. */
html[data-motion="off"] .loader { display: none !important; }

/* ==========================================================================
   2. DESKTOP CURSOR
   Fine pointers only. Never replaces the caret over text inputs.
   ========================================================================== */
.cursor, .cursor-dot { display: none; }

@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
  /* Form fields keep the native caret — replacing it hurts usability. */
  html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }

  .cursor-dot, .cursor {
    position: fixed; top: 0; left: 0; z-index: 400;
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  .cursor-dot {
    display: block;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    background: var(--lion);
    transition: opacity var(--t-micro) var(--e-out),
                background var(--t-micro-slow) var(--e-out);
  }
  .cursor {
    display: grid; place-items: center;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid var(--lion);
    transition: width var(--t-micro-slow) var(--e-out),
                height var(--t-micro-slow) var(--e-out),
                margin var(--t-micro-slow) var(--e-out),
                background var(--t-micro-slow) var(--e-out),
                border-color var(--t-micro-slow) var(--e-out),
                opacity var(--t-micro) var(--e-out);
  }
  .cursor__label {
    font-size: .58rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: #fff;
    opacity: 0; transform: scale(.85);
    transition: opacity var(--t-micro) var(--e-out), transform var(--t-micro-slow) var(--e-out);
    white-space: nowrap;
  }

  /* State: over an interactive element — compress toward the dot */
  html[data-cursor="link"] .cursor { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(154,84,51,.1); }
  html[data-cursor="link"] .cursor-dot { opacity: 0; }

  /* State: expanded label — VIEW / DRAG / PLAY */
  html[data-cursor="label"] .cursor {
    width: 92px; height: 92px; margin: -46px 0 0 -46px;
    background: var(--lion); border-color: var(--lion);
  }
  html[data-cursor="label"] .cursor__label { opacity: 1; transform: none; }
  html[data-cursor="label"] .cursor-dot { opacity: 0; }

  /* On dark grounds the mark inverts to ivory */
  html[data-cursor-tone="light"] .cursor { border-color: var(--bone-200); }
  html[data-cursor-tone="light"] .cursor-dot { background: var(--bone-200); }
  html[data-cursor-tone="light"][data-cursor="link"] .cursor { background: rgba(250,247,244,.12); }

  html[data-motion="off"] .cursor, html[data-motion="off"] .cursor-dot { display: none; }
  html[data-motion="off"], html[data-motion="off"] a, html[data-motion="off"] button { cursor: auto; }
}

/* ==========================================================================
   3. LIVING HEADER
   Blended over the hero, then compacts into a frosted ivory bar.
   ========================================================================== */
.site-header {
  transition: background var(--t-comp) var(--e-out),
              box-shadow var(--t-comp) var(--e-out),
              border-color var(--t-comp) var(--e-out);
}
.site-header .nav { transition: min-height var(--t-comp) var(--e-out); }
.brand__mark { transition: height var(--t-comp) var(--e-out); }

/* Over-hero state: transparent, ivory content */
.site-header.is-over {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.site-header.is-over .nav__link,
.site-header.is-over .brand__name,
.site-header.is-over .nav__phone strong { color: var(--bone-100); }
.site-header.is-over .brand__sub,
.site-header.is-over .nav__phone span { color: rgba(255,255,255,.66); }
.site-header.is-over .nav__toggle { border-color: rgba(255,255,255,.34); }
.site-header.is-over .nav__toggle span { background: #fff; }

/* Compact state after scroll */
.site-header.is-compact {
  background: rgba(251,247,244,.86);
  backdrop-filter: saturate(180%) blur(16px);
}
.site-header.is-compact .nav { min-height: 62px; }
.site-header.is-compact .brand__mark { height: 34px; }

/* Nav underline grows from where the pointer entered */
.nav__link { position: relative; }
.nav__link::after {
  left: var(--from, 0);
  width: 0;
  transition: width var(--t-micro-slow) var(--e-out), left var(--t-micro-slow) var(--e-out);
}
.nav__link:hover::after { left: 0; width: 100%; }

/* ==========================================================================
   4. PAGE TRANSITIONS
   A single copper-edged panel wipes across. Progressive enhancement: with no
   View Transition API the wipe still runs, driven by the class alone.
   ========================================================================== */
.wipe {
  position: fixed; inset: 0; z-index: 250;
  background: var(--copper-900);
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
  border-top: 2px solid var(--lion);
}
html.is-leaving .wipe {
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-page) var(--e-panel);
}
html.is-arriving .wipe {
  transform: translate3d(0, -100%, 0);
  transition: transform var(--t-page) var(--e-panel);
}
html[data-motion="off"] .wipe { display: none; }

/* Native View Transitions where supported */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out var(--t-page) var(--e-panel) both; }
  ::view-transition-new(root) { animation: vt-in  var(--t-page) var(--e-panel) both; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================================================
   5. HOUSE ASSEMBLY  (§6 "Built before your eyes")
   Scroll-linked on desktop, staged reveals on mobile. SVG + GSAP, no WebGL:
   the sequence is line work, and line work is what SVG is for.
   ========================================================================== */
.assembly {
  position: relative;
  background: var(--copper-950);
  color: var(--bone-200);
  --fg: var(--bone-100); --fg-muted: #bda591;
  overflow: clip;
}
.assembly__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding-block: var(--sp-7);
}
@media (min-width: 981px) {
  .assembly__inner { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); min-height: 100svh; }
}

.assembly__copy { position: relative; z-index: 2; max-width: 34ch; }
.assembly__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.16; letter-spacing: -.02em;
}
.assembly__quote em { font-style: italic; color: var(--lion-300); }

/* Stage readout */
.assembly__stage {
  margin-top: var(--sp-4);
  display: flex; align-items: center; gap: .8rem;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--copper-100);
}
.assembly__stage b { font-family: var(--font-mono); font-weight: 400; color: var(--lion-300); }
.assembly__track { flex: 1; height: 1px; background: rgba(255,255,255,.18); position: relative; }
.assembly__track i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: var(--lion); width: var(--p, 0%);
  transition: width var(--t-comp) var(--e-out);
}

/* Drawing surface */
.assembly__figure { position: relative; }
.assembly__svg { width: 100%; height: auto; overflow: visible; display: block; }
.assembly__svg .ln { fill: none; stroke: var(--lion); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.assembly__svg .ln--thin { stroke: var(--copper-200); stroke-width: 1.1; }
.assembly__svg .grid-ln { stroke: rgba(226,171,139,.16); stroke-width: 1; }
.assembly__svg .pl { fill: var(--lion); opacity: 0; }

/* The finished photograph the drawing becomes */
.assembly__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
.assembly__frame { position: relative; aspect-ratio: 4/3; }

@media (max-width: 980px) {
  .assembly__inner { padding-block: var(--sp-6); }
  .assembly__frame { aspect-ratio: 4/3; }
}

/* ==========================================================================
   6. FOOTER BLUEPRINT MODE  (§16)
   Copper grid, drawn measurements, outlined lion. No continuous animation.
   ========================================================================== */
.site-footer { position: relative; overflow: clip; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(154,84,51,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,84,51,.13) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0;
  transition: opacity var(--t-cine) var(--e-out);
}
.site-footer.is-blueprint::before { opacity: 1; }

.footer__measure {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  pointer-events: none; z-index: 1;
}
.footer__measure svg { width: 100%; height: 100%; overflow: visible; }
.footer__measure .m { fill: none; stroke: rgba(202,122,79,.5); stroke-width: 1; }
.footer__measure text {
  fill: rgba(226,171,139,.6); font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .1em;
}

/* Action bar compacts while scrolling down, expands on the way back up. */
.action-bar { transition: transform var(--t-comp) var(--e-out); }
.action-bar.is-compact .action-bar__btn { min-height: 46px; padding-block: .55rem; }
.action-bar.is-compact .action-bar__btn small { font-size: .55rem; opacity: .55; }

/* ==========================================================================
   7. GOOGLE REVIEWS
   Real reviews when the Places API is configured; an honest link-out panel
   when it is not. No placeholder review is ever styled or shown.
   ========================================================================== */
.reviews__summary {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .92rem; color: var(--fg-muted);
}
.reviews__summary strong { color: var(--fg); font-size: 1.05rem; }

.review {
  display: grid; gap: .9rem; align-content: start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--bg);
}
.review__text {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.08rem; line-height: 1.45; letter-spacing: -.01em;
  margin: 0;
}
.review__by { display: grid; gap: .15rem; }
.review__by strong { font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; }
.review__by span { font-size: .8rem; color: var(--fg-muted); }

/* Link-out panel shown until the API key is added */
.reviews__fallback {
  display: grid; gap: var(--sp-3); justify-items: start;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
.reviews__gmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* Featured review — a long, specific review is more convincing than a pull
   quote, so it is given room rather than truncated. */
.review--feature { border: 0; padding: 0; background: none; gap: var(--sp-3); }
.review--feature .review__text { font-size: 1.06rem; line-height: 1.55; font-style: normal; }
.review--feature .review__text p { margin: 0 0 .85rem; }
.review--feature .review__text p:first-child::before {
  content: "\201C"; font-family: var(--font-display); font-size: 2.4rem;
  line-height: 0; color: var(--lion); margin-right: .25rem; vertical-align: -.35rem;
}
.review--feature .review__by strong { font-size: .9rem; }
@media (min-width: 981px) { .review--feature .review__text { font-size: 1.12rem; } }