/* ============================================================
   v5 POLISH — "The Vital Line" identity layer
   Motion tokens · custom cursor · view transitions · first-visit
   veil · nav indicator · mobile booking bar · 3D hero shell ·
   typography & micro-detail refinement.  See CREATIVE-DIRECTION.md.
   Additive layer: loads after style.css + scroll-cinema.css.
   ============================================================ */

:root {
  --t-fast: 140ms;
  --t-med: 320ms;
  --t-slow: 900ms;
  --e-out: cubic-bezier(.2,.65,.25,1);
  --e-inout: cubic-bezier(.65,.05,.35,1);
  --hairline: rgba(176,133,58,.55);
}

/* ---------- Typography refinement ---------- */
h1, h2 { letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); }
.hero h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 3.7vw, 2.7rem); }
.dek { line-height: 1.75; max-width: 40em; }
@media (min-width: 1200px) {
  section { padding: clamp(3.4rem, 7.5vw, 6rem) 0; }
}

/* prose links: animated underline (main content only, not buttons/cards) */
main p a:not(.btn), main li a:not(.btn), main figcaption a, main .small a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--t-fast) var(--e-out), color var(--t-fast) ease;
  padding-bottom: 1px;
}
main p a:not(.btn):hover, main li a:not(.btn):hover, main figcaption a:hover {
  background-size: 30% 1px;
}

/* selection, scrollbar, focus */
::selection { background: var(--gold); color: var(--paper); }
.dark ::selection { background: var(--gold-light); color: var(--deep); }
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--paper-soft); }
  ::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 6px; border: 3px solid var(--paper-soft); }
  ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* one shadow voice + calm transitions on interactive surfaces */
.btn { transition: background var(--t-fast) ease, color var(--t-fast) ease, box-shadow var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out), border-color var(--t-fast) ease; }
.sub-menu { transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out); }
.has-sub .sub-menu { display: block; opacity: 0; transform: translateY(6px); pointer-events: none; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 900px) {
  .has-sub .sub-menu { opacity: 1; transform: none; pointer-events: auto; }
}
tbody tr, table tr { transition: background var(--t-fast) ease; }
table tr:hover td { background: rgba(176,133,58,.05); }
.dark table tr:hover td { background: rgba(244,237,222,.04); }

/* ---------- Nav underline indicator ---------- */
.nav-menu > li > a:not(.btn) { position: relative; padding-bottom: 4px; }
.nav-menu > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--gold-light); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-fast) var(--e-out);
}
.nav-menu > li > a:not(.btn):hover::after, .nav-menu > li > a.nav-current::after { transform: scaleX(1); }

/* ---------- MPA view transitions (progressive, pure CSS) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: v5-out 200ms var(--e-inout) both; }
  ::view-transition-new(root) { animation: v5-in 320ms var(--e-out) both; }
}
@keyframes v5-out { to { opacity: 0; } }
@keyframes v5-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- First-visit veil ---------- */
.v5-veil { display: none; }
html.sc-veil .v5-veil {
  display: block; position: fixed; inset: 0; z-index: 999; background: #0C1728;
  transition: opacity 500ms var(--e-inout), visibility 500ms;
}
html.sc-veil .v5-veil::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  animation: veil-line 800ms var(--e-inout) 120ms forwards;
}
html.sc-veil .v5-veil::after {
  content: "DR. ANDREW SIMON · ND, BCB"; position: absolute; left: 0; right: 0; top: calc(50% + 22px);
  text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .34em;
  color: var(--gold-light); opacity: 0; animation: veil-name 500ms var(--e-out) 450ms forwards;
}
@keyframes veil-line { to { transform: scaleX(1); } }
@keyframes veil-name { to { opacity: .9; } }
html.sc-veil.veil-done .v5-veil { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { html.sc-veil .v5-veil { display: none; } }

/* ---------- Custom cursor (fine pointers only) ---------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.v5-cursor, html.v5-cursor a, html.v5-cursor button, html.v5-cursor .btn, html.v5-cursor summary { cursor: none; }
  html.v5-cursor input, html.v5-cursor textarea, html.v5-cursor select, html.v5-cursor iframe { cursor: auto; }
}
.cur-dot, .cur-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 998;
  border-radius: 50%; opacity: 0; transition: opacity var(--t-med) ease;
  will-change: transform;
}
.cur-dot { width: 6px; height: 6px; background: var(--gold); margin: -3px 0 0 -3px; }
.cur-ring { width: 30px; height: 30px; border: 1.4px solid rgba(176,133,58,.65); margin: -15px 0 0 -15px;
  transition: opacity var(--t-med) ease, width var(--t-fast) var(--e-out), height var(--t-fast) var(--e-out), margin var(--t-fast) var(--e-out), border-color var(--t-fast) ease; }
html.v5-cursor .cur-dot, html.v5-cursor .cur-ring { opacity: 1; }
html.v5-cursor.cur-link .cur-ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: var(--gold-light); }
html.v5-cursor.cur-link .cur-dot { background: var(--gold-light); }
html.v5-cursor.cur-hide .cur-dot, html.v5-cursor.cur-hide .cur-ring { opacity: 0; }

/* ---------- Mobile booking bar ---------- */
.book-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: stretch; gap: 0;
  background: var(--deep); border-top: 1px solid var(--hairline);
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  transform: translateY(110%); transition: transform var(--t-med) var(--e-out);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.book-bar.show { transform: none; }
.book-bar a {
  flex: 1; text-align: center; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  padding: .8rem .4rem; margin: 0 .25rem; min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.book-bar .bb-call { color: var(--gold-light); border: 1px solid rgba(201,167,112,.5); }
.book-bar .bb-book { background: var(--gold); color: var(--deep); border: 1px solid var(--gold); font-weight: 500; }
.book-bar .bb-x {
  flex: 0 0 auto; background: none; border: 0; color: rgba(244,237,222,.6);
  font-size: 1rem; padding: 0 .55rem; cursor: pointer; min-height: 44px;
}
@media (max-width: 820px) { .book-bar { display: flex; } }

/* ============================================================
   THE VITAL LINE — 3D hero shell (scene painted by vital-line.js)
   ============================================================ */
.hero-vital {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 900px);
  display: flex; align-items: flex-end;
  background: linear-gradient(165deg, #0A1322 0%, #0C1728 45%, #14263F 80%, #1A2F4F 100%);
  color: var(--paper);
  border-bottom: 1px solid var(--gold);   /* the line the scene becomes */
  padding: 0;
}
.hero-vital canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-vital .scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,19,34,.88) 6%, rgba(10,19,34,.35) 40%, rgba(10,19,34,.15) 100%);
}
.hero-vital .hero-content { position: relative; width: 100%; padding: clamp(7rem,17vh,10.5rem) 0 clamp(4.2rem,9vh,6rem); }
.hero-vital h1 { font-size: clamp(2.8rem, 6.6vw, 5.1rem); max-width: 12em; color: var(--paper); }
.hero-vital .kicker { color: var(--gold-light); }
.hero-vital .accent { color: var(--gold-light); }
.hero-vital .dek { color: var(--paper); opacity: .9; }
.hero-vital .btn { background: var(--gold); border-color: var(--gold); color: var(--deep); box-shadow: 4px 4px 0 rgba(0,0,0,.4); }
.hero-vital .btn:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--deep); box-shadow: 6px 6px 0 rgba(0,0,0,.4); }
.hero-vital .btn--gold { background: transparent; border-color: var(--gold-light); color: var(--gold-light); }
.hero-vital .btn--gold:hover { background: var(--gold); border-color: var(--gold); color: var(--deep); }

/* entrance choreography (skipped under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .hero-vital .kicker, .hero-vital .dek, .hero-vital .hero-cta {
    opacity: 0; transform: translateY(20px);
    animation: hv-rise 700ms var(--e-out) forwards;
  }
  .hero-vital .kicker { animation-delay: 1.15s; letter-spacing: .5em; animation-name: hv-kicker; }
  .hero-vital .dek { animation-delay: 1.55s; }
  .hero-vital .hero-cta { animation-delay: 1.7s; }
  .hero-vital h1 .rl { display: block; overflow: hidden; }
  .hero-vital h1 .rl > span { display: block; transform: translateY(110%); animation: hv-line 850ms var(--e-out) forwards; }
  .hero-vital h1 .rl:nth-child(1) > span { animation-delay: 1.25s; }
  .hero-vital h1 .rl:nth-child(2) > span { animation-delay: 1.4s; }
}
@keyframes hv-rise { to { opacity: 1; transform: none; } }
@keyframes hv-kicker { to { opacity: 1; transform: none; letter-spacing: .22em; } }
@keyframes hv-line { to { transform: none; } }

/* scroll cue */
.hero-vital .scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 1;
  width: 1.5px; height: 44px; overflow: hidden; opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-vital .scroll-cue { animation: hv-rise 600ms var(--e-out) 2.2s forwards; }
  .hero-vital .scroll-cue::before {
    content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent, var(--gold-light));
    animation: cue-drop 1.8s var(--e-inout) 2.4s infinite;
  }
}
@keyframes cue-drop { 0% { top: -100%; } 55% { top: 100%; } 100% { top: 100%; } }

/* scroll departure (scrubbed by --hp from vital-line.js) */
html.sc-on .hero-vital .hero-content {
  transform: translateY(calc(var(--hp, 0) * 74px));
  opacity: calc(1 - var(--hp, 0) * 1.3);
}
html.sc-on .hero-vital .scroll-cue { opacity: calc(1 - var(--hp, 0) * 3); }

/* static fallback ridge (visible when JS/scene is absent) */
.hero-vital .hv-fallback { position: absolute; inset: auto 0 18% 0; z-index: -2; opacity: .5; }
.hero-vital .hv-fallback svg { display: block; width: 100%; height: 90px; }
.hero-vital.hv-live .hv-fallback { display: none; }

/* ---------- micro-details ---------- */
.rule { border-top-color: var(--hairline); opacity: 1; }
.card .kicker, .post-card .cat { letter-spacing: .2em; }
.site-footer { border-top: 1px solid var(--hairline); }
.award-strip .wrap { letter-spacing: .22em; }
@media (max-width: 520px) {
  .hero-vital h1 { font-size: 2.35rem; }
}