/* odNOVA HOME V4-V9 — shared welcome-intro system.
   The overlay is injected only by JS, so no-JS visitors never meet a blocker. */

.home-welcome-active,
.home-welcome-active body {
  overscroll-behavior: none;
}

.home-welcome {
  --home-welcome-ink: #f2eee6;
  --home-welcome-muted: #9ba8b3;
  --home-welcome-gold: #c7a66d;
  --home-welcome-blue: #7fa3bb;
  --home-welcome-ease: cubic-bezier(.18,.76,.22,1);
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  min-width: 0;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(90% 72% at 16% 108%, rgba(22,73,65,.26), transparent 68%),
    linear-gradient(132deg, #040b11 0%, #07131d 52%, #0b1c29 100%);
  color: var(--home-welcome-ink);
  font-family: Archivo, Arial, sans-serif;
  opacity: 1;
  transition: opacity .46s var(--home-welcome-ease), visibility .46s linear;
}

.home-welcome,
.home-welcome * {
  box-sizing: border-box;
}

.home-welcome.is-leaving {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-welcome__timeline {
  position: absolute;
  inset: 0;
  /* Explicit V10 review adjustment: keep the approved First Visit frame
     on screen for one additional quarter-second. */
  animation: home-welcome-timeline 2.99s linear both;
}

.home-welcome__field,
.home-welcome__grid,
.home-welcome__beam,
.home-welcome__moon,
.home-welcome__variant {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-welcome__field {
  z-index: -4;
  background:
    radial-gradient(64% 86% at 92% 42%, rgba(67,103,127,.17), transparent 67%),
    linear-gradient(112deg, transparent 0 41%, rgba(235,222,197,.025) 48%, transparent 57%);
}

.home-welcome__grid {
  z-index: -3;
  background-image:
    linear-gradient(rgba(233,238,240,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,238,240,.022) 1px, transparent 1px);
  background-size: 12.5vw 12.5vh;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.74), transparent 94%);
  opacity: .52;
  animation: home-welcome-grid 2.74s var(--home-welcome-ease) both;
}

.home-welcome__beam {
  z-index: -2;
  inset: -45% -48%;
  background: linear-gradient(108deg, transparent 32%, rgba(116,159,191,.04) 42%, rgba(242,229,204,.24) 49%, rgba(112,157,191,.06) 56%, transparent 67%);
  opacity: 0;
  transform: translate3d(-47%,0,0) rotate(-3deg);
  animation: home-welcome-beam 2.42s .1s var(--home-welcome-ease) both;
}

.home-welcome__moon {
  z-index: -1;
  inset: auto -7vw -43vw auto;
  width: min(69vw, 920px);
  aspect-ratio: 1;
  border: 1px solid rgba(225,208,177,.14);
  border-radius: 50%;
  box-shadow: 0 0 100px rgba(91,136,168,.055) inset;
  opacity: 0;
  transform: scale(.91);
  animation: home-welcome-moon 2.2s .28s var(--home-welcome-ease) both;
}

.home-welcome__variant {
  z-index: 1;
}

.home-welcome__stage {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(1180px, calc(100% - 96px));
  height: 100%;
  margin: 0 auto;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.home-welcome__mark {
  --odn-h: clamp(42px, 5vw, 66px);
  opacity: 0;
  transform: translateY(9px);
  animation: home-welcome-mark .76s .24s var(--home-welcome-ease) forwards;
}

.home-welcome__kicker {
  margin: 31px 0 0;
  color: #c5aa7c;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .31em;
  line-height: 1.5;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: home-welcome-copy .68s .68s var(--home-welcome-ease) forwards;
}

.home-welcome__message {
  max-width: 17ch;
  margin: 18px 0 0;
  color: var(--home-welcome-ink);
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(38px, 5.1vw, 72px);
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: .98;
  text-wrap: balance;
  opacity: 0;
  filter: blur(5px);
  transform: translateY(15px);
  animation: home-welcome-message .82s .92s var(--home-welcome-ease) forwards;
}

.home-welcome__message em {
  color: #dfc79d;
  font-weight: 300;
}

.home-welcome__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 29px 0 0;
  color: #8999a6;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: 0;
  animation: home-welcome-copy .66s 1.35s var(--home-welcome-ease) forwards;
}

.home-welcome__meta::before,
.home-welcome__meta::after {
  width: 31px;
  height: 1px;
  background: rgba(199,166,109,.48);
  content: "";
}

.home-welcome__skip {
  position: absolute;
  z-index: 8;
  top: max(22px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  display: inline-flex;
  min-width: 74px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(226,229,229,.18);
  border-radius: 999px;
  background: rgba(4,11,17,.22);
  color: #b9c2c8;
  cursor: pointer;
  font: 400 9px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  animation: home-welcome-skip .55s .35s ease forwards;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}

.home-welcome__skip:hover,
.home-welcome__skip:focus-visible {
  border-color: rgba(223,199,157,.72);
  background: rgba(12,27,39,.72);
  color: #f2eee6;
  outline: none;
}

/* V4 — architectural aperture. */
.home-welcome--v4 .home-welcome__panel {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 50.15%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 22%),
    #08131d;
  box-shadow: 0 0 80px rgba(0,0,0,.18);
}

.home-welcome--v4 .home-welcome__panel--left {
  left: 0;
  transform-origin: left center;
  animation: home-welcome-v4-left 2.25s .16s var(--home-welcome-ease) both;
}

.home-welcome--v4 .home-welcome__panel--right {
  right: 0;
  transform-origin: right center;
  animation: home-welcome-v4-right 2.25s .16s var(--home-welcome-ease) both;
}

.home-welcome--v4 .home-welcome__seam {
  position: absolute;
  z-index: 3;
  top: 14%;
  bottom: 14%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(217,190,143,.72), transparent);
  box-shadow: 0 0 24px rgba(207,177,124,.38);
  animation: home-welcome-v4-seam 2.2s .14s var(--home-welcome-ease) both;
}

/* V5 — portrait, held behind one travelling clinical light. */
.home-welcome--v5 .home-welcome__stage {
  justify-items: start;
  text-align: left;
}

.home-welcome--v5 .home-welcome__stage-inner {
  width: min(540px, 47vw);
}

.home-welcome--v5 .home-welcome__portrait {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 43%;
  background:
    linear-gradient(90deg, #061018 0%, rgba(6,16,24,.83) 16%, rgba(6,16,24,.12) 62%),
    linear-gradient(0deg, rgba(4,10,15,.68), transparent 43%),
    url(../assets/images/piotr-editorial-colour-1600.webp) center 16% / cover no-repeat;
  filter: saturate(.48) contrast(.98) brightness(.82);
  opacity: 0;
  transform: scale(1.025);
  animation: home-welcome-v5-portrait 2.5s .08s var(--home-welcome-ease) both;
}

.home-welcome--v5 .home-welcome__portrait-line {
  position: absolute;
  z-index: 1;
  top: 16%;
  bottom: 16%;
  left: 43%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(215,187,139,.58), transparent);
  opacity: 0;
  animation: home-welcome-v5-line 2.15s .22s var(--home-welcome-ease) both;
}

/* V6 — the small decision sequence Piotr liked: NOTICE → UNDERSTAND → DECIDE. */
.home-welcome--v6 .home-welcome__stage {
  align-content: center;
}

.home-welcome--v6 .home-welcome__decision {
  display: grid;
  width: min(760px, 72vw);
  margin: 37px 0 0;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 17px;
  color: #8f9da8;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.home-welcome--v6 .home-welcome__decision span,
.home-welcome--v6 .home-welcome__decision i {
  opacity: 0;
}

.home-welcome--v6 .home-welcome__decision span:nth-of-type(1) { animation: home-welcome-v6-word .52s .76s var(--home-welcome-ease) forwards; }
.home-welcome--v6 .home-welcome__decision i:nth-of-type(1) { animation: home-welcome-v6-line .68s 1.02s var(--home-welcome-ease) forwards; }
.home-welcome--v6 .home-welcome__decision span:nth-of-type(2) { animation: home-welcome-v6-word .52s 1.25s var(--home-welcome-ease) forwards; }
.home-welcome--v6 .home-welcome__decision i:nth-of-type(2) { animation: home-welcome-v6-line .68s 1.48s var(--home-welcome-ease) forwards; }
.home-welcome--v6 .home-welcome__decision span:nth-of-type(3) { animation: home-welcome-v6-word .52s 1.73s var(--home-welcome-ease) forwards; }

.home-welcome--v6 .home-welcome__decision i {
  height: 1px;
  background: linear-gradient(90deg, rgba(199,166,109,.7), rgba(124,157,179,.18));
  transform: scaleX(0);
  transform-origin: left;
}

/* V7 — an atlas of points becoming one route. */
.home-welcome--v7 .home-welcome__atlas {
  position: absolute;
  inset: 11% 8%;
  border: 1px solid rgba(132,159,177,.09);
  border-radius: 48% 52% 44% 56% / 56% 43% 57% 44%;
  opacity: 0;
  transform: scale(.9) rotate(-5deg);
  animation: home-welcome-v7-atlas 2.3s .2s var(--home-welcome-ease) both;
}

.home-welcome--v7 .home-welcome__point {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(222,196,151,.8);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 0 rgba(222,196,151,.17);
  animation: home-welcome-v7-point .72s var(--home-welcome-ease) forwards;
}

.home-welcome--v7 .home-welcome__point:nth-child(1) { top: 24%; left: 17%; animation-delay: .62s; }
.home-welcome--v7 .home-welcome__point:nth-child(2) { top: 63%; left: 28%; animation-delay: .88s; }
.home-welcome--v7 .home-welcome__point:nth-child(3) { top: 31%; right: 24%; animation-delay: 1.14s; }
.home-welcome--v7 .home-welcome__point:nth-child(4) { right: 13%; bottom: 16%; animation-delay: 1.4s; }

.home-welcome--v7 .home-welcome__coordinate {
  position: absolute;
  right: 9%;
  bottom: 8%;
  color: #607583;
  font: 400 8px/1.7 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .22em;
  text-align: right;
  text-transform: uppercase;
  opacity: 0;
  animation: home-welcome-copy .6s 1.5s ease forwards;
}

/* V8 — patient and clinician perspectives meet without collision. */
.home-welcome--v8 .home-welcome__voices {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.home-welcome--v8 .home-welcome__voice {
  display: flex;
  align-items: center;
  padding: 8vw;
  color: #8394a0;
  font: 400 9px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: 0;
}

.home-welcome--v8 .home-welcome__voice--patient {
  justify-content: flex-start;
  border-right: 1px solid rgba(223,199,157,.1);
  transform: translateX(-34px);
  animation: home-welcome-v8-left 1.55s .42s var(--home-welcome-ease) forwards;
}

.home-welcome--v8 .home-welcome__voice--clinician {
  justify-content: flex-end;
  transform: translateX(34px);
  animation: home-welcome-v8-right 1.55s .42s var(--home-welcome-ease) forwards;
}

.home-welcome--v8 .home-welcome__convergence {
  position: absolute;
  top: 13%;
  bottom: 13%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(223,199,157,.6), transparent);
  transform: scaleY(0);
  animation: home-welcome-v8-converge 1.4s .88s var(--home-welcome-ease) forwards;
}

/* V9 — a single clinical thread carries the visitor into the existing hero. */
.home-welcome--v9 .home-welcome__thread {
  position: absolute;
  inset: 8% 5%;
  width: 90%;
  height: 84%;
  overflow: visible;
}

.home-welcome--v9 .home-welcome__thread path {
  fill: none;
  stroke: rgba(216,183,126,.68);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1160;
  stroke-dashoffset: 1160;
  filter: drop-shadow(0 0 9px rgba(199,166,109,.18));
  animation: home-welcome-v9-thread 2.18s .25s var(--home-welcome-ease) forwards;
}

.home-welcome--v9 .home-welcome__thread circle {
  fill: #d5b478;
  opacity: 0;
  animation: home-welcome-v9-node .52s 1.83s ease forwards;
}

/* Existing HOME hero handoff: only V4 needs a shared animation.
   V5 is restarted by JS; V6-V9 retain their own established entrance CSS. */
.home-welcome-handoff .v4-hero-copy,
.home-welcome-handoff .v4-hero-note {
  animation: home-welcome-v4-handoff 1.1s var(--home-welcome-ease) both !important;
}

.home-welcome-handoff .v4-hero-architecture {
  animation: home-welcome-v4-architecture 1.45s var(--home-welcome-ease) both;
}

.home-welcome-pending .v4-scroll-cue i::after {
  animation-play-state: paused;
}

.v9-intro #v9-hero-title:target {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@keyframes home-welcome-timeline { from { opacity: .999; } to { opacity: 1; } }
@keyframes home-welcome-grid { from { opacity: 0; transform: scale(1.025); } to { opacity: .52; transform: none; } }
@keyframes home-welcome-beam { 0% { opacity: 0; transform: translate3d(-47%,0,0) rotate(-3deg); } 38% { opacity: .92; } 100% { opacity: 0; transform: translate3d(46%,0,0) rotate(-3deg); } }
@keyframes home-welcome-moon { 0% { opacity: 0; transform: scale(.91); } 48%,100% { opacity: .78; transform: scale(1); } }
@keyframes home-welcome-mark { to { opacity: 1; transform: none; } }
@keyframes home-welcome-copy { to { opacity: 1; transform: none; } }
@keyframes home-welcome-message { to { opacity: 1; filter: none; transform: none; } }
@keyframes home-welcome-skip { to { opacity: 1; } }

@keyframes home-welcome-v4-left { 0%,24% { transform: translateX(0); } 100% { transform: translateX(-102%); } }
@keyframes home-welcome-v4-right { 0%,24% { transform: translateX(0); } 100% { transform: translateX(102%); } }
@keyframes home-welcome-v4-seam { 0% { opacity: 0; transform: scaleY(.18); } 25%,55% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.4); } }

@keyframes home-welcome-v5-portrait { 0% { opacity: 0; transform: scale(1.04); } 38%,78% { opacity: 1; } 100% { opacity: .82; transform: scale(1.012); } }
@keyframes home-welcome-v5-line { 0% { opacity: 0; transform: scaleY(.15); } 42%,100% { opacity: .68; transform: scaleY(1); } }

@keyframes home-welcome-v6-word { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes home-welcome-v6-line { to { opacity: 1; transform: scaleX(1); } }

@keyframes home-welcome-v7-atlas { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes home-welcome-v7-point { 0% { opacity: 0; box-shadow: 0 0 0 0 rgba(222,196,151,.18); } 58% { opacity: 1; box-shadow: 0 0 0 13px rgba(222,196,151,0); } 100% { opacity: .72; } }

@keyframes home-welcome-v8-left { to { opacity: 1; transform: none; } }
@keyframes home-welcome-v8-right { to { opacity: 1; transform: none; } }
@keyframes home-welcome-v8-converge { to { transform: scaleY(1); } }

@keyframes home-welcome-v9-thread { to { stroke-dashoffset: 0; } }
@keyframes home-welcome-v9-node { to { opacity: 1; } }

@keyframes home-welcome-v4-handoff {
  from { opacity: 0; filter: blur(6px); transform: translateY(20px); }
  to { opacity: 1; filter: none; transform: none; }
}

@keyframes home-welcome-v4-architecture {
  from { opacity: .18; transform: translate3d(14px,0,0) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .home-welcome__stage {
    width: calc(100% - 44px);
  }

  .home-welcome__grid {
    background-size: 25vw 12.5vh;
  }

  .home-welcome__moon {
    right: -31vw;
    bottom: -13vw;
    width: 108vw;
  }

  .home-welcome__mark {
    --odn-h: 45px;
  }

  .home-welcome__kicker {
    max-width: 30ch;
    margin-top: 26px;
    font-size: 8px;
  }

  .home-welcome__message {
    margin-top: 15px;
    font-size: clamp(38px, 12vw, 51px);
  }

  .home-welcome__meta {
    gap: 9px;
    margin-top: 24px;
    font-size: 6.5px;
  }

  .home-welcome__meta::before,
  .home-welcome__meta::after {
    width: 20px;
  }

  .home-welcome__skip {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
  }

  .home-welcome--v5 .home-welcome__stage {
    align-content: end;
    padding-bottom: max(92px, 13vh);
  }

  .home-welcome--v5 .home-welcome__stage-inner {
    width: min(100%, 340px);
  }

  .home-welcome--v5 .home-welcome__portrait {
    inset: 0 0 27% 0;
    background:
      linear-gradient(0deg, #061018 0%, rgba(6,16,24,.88) 17%, rgba(6,16,24,.05) 58%),
      url(../assets/images/piotr-editorial-colour-1600.webp) 54% 12% / cover no-repeat;
  }

  .home-welcome--v5 .home-welcome__portrait-line {
    top: 11%;
    right: 20px;
    bottom: 28%;
    left: auto;
  }

  .home-welcome--v6 .home-welcome__decision {
    width: min(100%, 340px);
    margin-top: 31px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 10px;
    font-size: 7px;
  }

  .home-welcome--v6 .home-welcome__decision i {
    width: 1px;
    height: 22px;
    transform: scaleY(0);
    transform-origin: top;
  }

  .home-welcome--v6 .home-welcome__decision i:nth-of-type(1),
  .home-welcome--v6 .home-welcome__decision i:nth-of-type(2) {
    animation-name: home-welcome-v6-line-mobile;
  }

  .home-welcome--v7 .home-welcome__atlas {
    inset: 13% -24%;
  }

  .home-welcome--v7 .home-welcome__coordinate {
    right: 20px;
    bottom: 31px;
    font-size: 6px;
  }

  .home-welcome--v8 .home-welcome__voices {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .home-welcome--v8 .home-welcome__voice {
    justify-content: center;
    padding: 24px;
    text-align: center;
  }

  .home-welcome--v8 .home-welcome__voice--patient {
    align-items: flex-end;
    padding-bottom: 86px;
    border-right: 0;
    border-bottom: 1px solid rgba(223,199,157,.1);
    transform: translateY(-24px);
  }

  .home-welcome--v8 .home-welcome__voice--clinician {
    align-items: flex-start;
    padding-top: 86px;
    transform: translateY(24px);
  }

  .home-welcome--v8 .home-welcome__convergence {
    top: 50%;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    transform: scaleX(0);
    animation-name: home-welcome-v8-converge-mobile;
  }

  .home-welcome--v9 .home-welcome__thread {
    inset: 6% -41%;
    width: 175%;
    height: 90%;
  }
}

@keyframes home-welcome-v6-line-mobile { to { opacity: 1; transform: scaleY(1); } }
@keyframes home-welcome-v8-converge-mobile { to { transform: scaleX(1); } }

@media (max-width: 380px) {
  .home-welcome__stage { width: calc(100% - 32px); }
  .home-welcome__message { font-size: 38px; }
  .home-welcome__kicker { letter-spacing: .24em; }
  .home-welcome__skip { min-width: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-welcome {
    display: none !important;
  }

  .home-welcome-handoff .v4-hero-copy,
  .home-welcome-handoff .v4-hero-note,
  .home-welcome-handoff .v4-hero-architecture {
    animation: none !important;
  }
}