/* ==========================================================================
   THE WALK DOWN TO THE ROOT. Home page only.

   You arrive at a seedling on the surface, in daylight. Scrolling takes you
   down through the soil. The roots draw themselves as you pass them, the
   labels name what each depth is (the symptom, where most treatment stops,
   the pattern underneath, the root), and at the bottom the clinic's own
   line is waiting: Heal. From the Root. Then the page proper begins.

   Architecture, ported from the proven walk-in engines on the DBC, Keshav
   and Digital Pratik sites:
   - display:none until assets/exp.js proves it can run (html.exp-on). No
     JavaScript, reduced motion, or any failure: the intro does not exist
     and the page starts at the hero, plain.
   - a FIXED stage (sticky un-sticks under overflow-x ancestors in some
     Safari builds) over a tall scroll track on desktop.
   - on touch devices the walk is TIME based, not scroll based, because
     Safari hands scroll positions to JavaScript in bursts and a scroll
     driven zoom can never be smooth there. One swipe plays the descent,
     the next swipe after the welcome moves you on to the page.
   - self-contained: brand colours are copied here on purpose so a theme
     token change can never half-break the scene.
   ========================================================================== */

.exp{display:none}
html.exp-on .exp{display:block;height:380vh;height:380svh;position:relative;background:#2a1d14}
html.exp-on .exp-stage{
  position:fixed;top:0;left:0;right:0;bottom:0;
  height:100vh;height:100svh;
  overflow:hidden;z-index:700;cursor:pointer;
  background:#faf7f2;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;
  contain:paint;
}
:root[data-theme="dark"] .exp-stage{background:#14100d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-stage{background:#14100d}}

/* the world: sky, surface, soil, stacked vertically, moved as one */
.exp-world{position:absolute;left:0;right:0;top:0;height:260vh;height:260svh;will-change:transform;transform:translateZ(0)}
.exp-sky{position:absolute;left:0;right:0;top:0;height:70vh;height:70svh;
  background:
    radial-gradient(ellipse 40% 32% at 72% 22%,rgba(245,234,216,.9),transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 70%,rgba(221,238,227,.55),transparent 70%),
    linear-gradient(#faf7f2,#f3ede3 70%,#e8dece)}
:root[data-theme="dark"] .exp-sky{background:radial-gradient(ellipse 40% 32% at 72% 22%,rgba(205,166,104,.16),transparent 70%),linear-gradient(#14100d,#1d1712 70%,#2a221b)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-sky{background:radial-gradient(ellipse 40% 32% at 72% 22%,rgba(205,166,104,.16),transparent 70%),linear-gradient(#14100d,#1d1712 70%,#2a221b)}}
.exp-sun{position:absolute;top:10%;right:16%;width:min(34vw,260px);aspect-ratio:1;border-radius:50%;transform:translate(calc(var(--px,0) * 18px),calc(var(--py,0) * 12px));transition:transform .6s ease-out;
  background:radial-gradient(circle,rgba(245,234,216,1),rgba(245,234,216,.3) 55%,transparent 72%);opacity:.9}
:root[data-theme="dark"] .exp-sun{background:radial-gradient(circle,rgba(205,166,104,.5),rgba(205,166,104,.1) 55%,transparent 72%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-sun{background:radial-gradient(circle,rgba(205,166,104,.5),rgba(205,166,104,.1) 55%,transparent 72%)}}

/* the surface line sits at the bottom of the sky */
.exp-surface{position:absolute;left:0;right:0;top:calc(70vh - 2px);top:calc(70svh - 2px);height:4px;background:#3b2a1c;z-index:3}
.exp-surface::before{content:'';position:absolute;left:0;right:0;bottom:2px;height:18px;
  background:
    radial-gradient(ellipse 6px 18px at 12% 100%,#4a7c59 40%,transparent 42%),
    radial-gradient(ellipse 5px 14px at 30% 100%,#7aab88 40%,transparent 42%),
    radial-gradient(ellipse 6px 16px at 66% 100%,#4a7c59 40%,transparent 42%),
    radial-gradient(ellipse 5px 12px at 84% 100%,#7aab88 40%,transparent 42%);
  opacity:.8}

/* the seedling, standing on the surface, centred */
.exp-seedling{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:min(50vw,250px);height:auto;z-index:4;margin-bottom:-3px;
  transform-origin:50% 100%;animation:xsway 5s ease-in-out infinite}
@keyframes xsway{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(1.6deg)}}
.exp-seedling .stem{stroke:#4a7c59;stroke-width:7;fill:none;stroke-linecap:round}
.exp-seedling .leaf{fill:#4a7c59}
.exp-seedling .leaf.b{fill:#7aab88}

/* the soil */
.exp-soil{position:absolute;left:0;right:0;top:70vh;top:70svh;height:190vh;height:190svh;overflow:hidden;
  background:
    linear-gradient(180deg,#3b2a1c 0%,#2f2016 18%,#2a1d14 50%,#1f150e 100%)}
.exp-strata{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,transparent 0 140px,rgba(255,240,225,.03) 140px 142px);
  mask-image:linear-gradient(#000,transparent 85%);-webkit-mask-image:linear-gradient(#000,transparent 85%)}
/* three layers of stones and grains, each parallaxing at its own rate */
.exp-grit{position:absolute;left:0;right:0;top:-10%;height:120%;pointer-events:none;will-change:transform}
.exp-grit.g1{background:
  radial-gradient(4px 3px at 8% 12%,#55402c 60%,transparent 61%),
  radial-gradient(6px 4px at 22% 34%,#4a3625 60%,transparent 61%),
  radial-gradient(3px 3px at 36% 22%,#6a5038 60%,transparent 61%),
  radial-gradient(5px 4px at 58% 48%,#55402c 60%,transparent 61%),
  radial-gradient(7px 5px at 74% 18%,#4a3625 60%,transparent 61%),
  radial-gradient(3px 3px at 88% 40%,#6a5038 60%,transparent 61%),
  radial-gradient(5px 4px at 14% 66%,#55402c 60%,transparent 61%),
  radial-gradient(4px 3px at 44% 74%,#6a5038 60%,transparent 61%),
  radial-gradient(8px 5px at 66% 82%,#4a3625 60%,transparent 61%),
  radial-gradient(3px 3px at 92% 70%,#55402c 60%,transparent 61%)}
.exp-grit.g2{background:
  radial-gradient(12px 8px at 18% 20%,#22170f 60%,transparent 61%),
  radial-gradient(16px 10px at 80% 30%,#241910 60%,transparent 61%),
  radial-gradient(10px 7px at 50% 58%,#22170f 60%,transparent 61%),
  radial-gradient(18px 11px at 10% 84%,#241910 60%,transparent 61%),
  radial-gradient(14px 9px at 70% 76%,#22170f 60%,transparent 61%);opacity:.9}
.exp-grit.g3{background:
  radial-gradient(2px 2px at 5% 8%,rgba(245,234,216,.18) 60%,transparent 61%),
  radial-gradient(2px 2px at 28% 44%,rgba(245,234,216,.14) 60%,transparent 61%),
  radial-gradient(2px 2px at 62% 26%,rgba(245,234,216,.16) 60%,transparent 61%),
  radial-gradient(2px 2px at 84% 58%,rgba(245,234,216,.14) 60%,transparent 61%),
  radial-gradient(2px 2px at 40% 80%,rgba(245,234,216,.12) 60%,transparent 61%),
  radial-gradient(2px 2px at 76% 92%,rgba(245,234,216,.16) 60%,transparent 61%)}

/* the root system, drawn as you pass it */
/* sized to the soil, not the screen: a 400 by 1000 box fitted inside the
   soil block (meet), so the root tips always land above the bottom edge */
.exp-roots{position:absolute;left:0;top:-2px;width:100%;height:100%;z-index:2}
.exp-roots path{fill:none;stroke:#e7d3b0;stroke-linecap:round;stroke-linejoin:round}
.exp-roots .tap{stroke-width:9;stroke:#efddbd}
.exp-roots .lat{stroke-width:4.5}
.exp-roots .fine{stroke-width:2.2;stroke:#d9c39c;opacity:.85}
.exp-roots .hair{stroke-width:1.4;stroke:#cdb68f;opacity:.7}

/* the depth labels */
.exp-depth{position:absolute;left:8%;font-family:'Caveat',cursive;font-size:clamp(22px,3.6vw,34px);color:rgba(250,247,242,.88);
  opacity:0;transform:translateX(-10px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1);z-index:3;white-space:nowrap}
.exp-depth small{display:block;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(250,247,242,.5);margin-bottom:2px}
.exp-depth.on{opacity:1;transform:none}
/* the labels live in the world, not the soil, so the first one can sit
   beside the seedling above the surface. Tops are in viewport heights of
   the 260 high world: the surface is at 100. */
.exp-depth.d0{top:50vh;top:50svh;color:#3d2f24}
.exp-depth.d0 small{color:#7a6355}
.exp-depth.d1{top:100vh;top:100svh;left:auto;right:8%;text-align:right;transform:translateX(10px)}
.exp-depth.d2{top:150vh;top:150svh}
.exp-depth.d3{top:200vh;top:200svh;left:auto;right:8%;text-align:right;transform:translateX(10px)}

/* the thesis line in the sky */
.exp-lede{position:absolute;left:0;right:0;top:22vh;top:22svh;text-align:center;z-index:4;padding:0 20px;pointer-events:none;
  transform:translateY(calc(var(--lede,0) * -40px));opacity:calc(1 - var(--lede,0))}
.exp-lede h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(34px,5.2vw,66px);line-height:1.05;letter-spacing:-.02em;color:#1c1410;text-wrap:balance}
.exp-lede h2 em{font-style:italic;color:#4a7c59}
.exp-lede .hand{font-family:'Caveat',cursive;font-size:clamp(20px,2.6vw,28px);color:#9a6f3a;margin-top:10px;transform:rotate(-1.5deg);display:inline-block}
:root[data-theme="dark"] .exp-lede h2{color:#f6f0e7}
:root[data-theme="dark"] .exp-lede h2 em{color:#8cbb99}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-lede h2{color:#f6f0e7}:root:not([data-theme="light"]) .exp-lede h2 em{color:#8cbb99}}

/* the symptoms, floating around the seedling. --x/--y place them, --k is
   how much they lean away from the pointer, --lede is the descent. */
.exp-pills{position:absolute;inset:0;z-index:3;pointer-events:none}
.exp-pill{position:absolute;left:var(--xm,var(--x));top:var(--ym,var(--y));
  font-family:'DM Sans',sans-serif;font-size:clamp(13px,1.4vw,16px);font-weight:600;letter-spacing:.02em;color:#3d2f24;
  background:rgba(255,255,255,.72);border:1px solid rgba(60,40,20,.12);padding:9px 16px;border-radius:999px;
  box-shadow:0 6px 18px rgba(45,30,15,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap;
  transform:translate(calc(var(--px,0) * var(--k) * -22px),calc(var(--py,0) * var(--k) * -14px)) rotate(var(--r)) translateY(calc(var(--lede,0) * -160px));
  opacity:calc(1 - var(--lede,0) * 1.6);transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .4s;
  animation:pillfloat 6s ease-in-out infinite;animation-delay:var(--d)}
.exp-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:#c45c3a;display:inline-block;margin-right:9px;vertical-align:middle;opacity:.75}
@keyframes pillfloat{0%,100%{margin-top:0}50%{margin-top:-10px}}
:root[data-theme="dark"] .exp-pill{background:rgba(40,30,24,.7);color:#f6f0e7;border-color:rgba(255,240,225,.14)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-pill{background:rgba(40,30,24,.7);color:#f6f0e7;border-color:rgba(255,240,225,.14)}}
@media(max-width:600px){
  .exp-lede{top:19svh}
  .exp-pill{font-size:12.5px;padding:7px 12px}
  /* six symptoms on a phone, placed clear of the title and the seedling */
  /* inline --x/--y come from the markup, so the phone positions use their
     own variables, which the left/top fall back through */
  .exp-pill:nth-child(1){--xm:4%;--ym:72%}
  .exp-pill:nth-child(2){--xm:70%;--ym:66%}
  .exp-pill:nth-child(3){--xm:5%;--ym:88%}
  .exp-pill:nth-child(4){--xm:70%;--ym:88%}
  .exp-pill:nth-child(5){--xm:62%;--ym:21%}
  .exp-pill:nth-child(6){--xm:4%;--ym:21%}
  .exp-pill:nth-child(n+7){display:none}
  .exp-stage .exp-plaque .p-kick,.exp-stage .exp-plaque .p-sub{display:none}
  .exp-stage .exp-plaque{top:18px;padding:0 130px 0 20px;text-align:left}
  .exp-stage .exp-plaque .p-name{font-size:22px;margin-top:0}
  .exp-stage .exp-lede{top:22svh}
  /* the pills ARE the symptoms on a phone, the label would only crowd them */
  .exp-depth.d0{display:none}
  .exp-stage .exp-skip{top:12px;right:12px;padding:9px 13px;font-size:10.5px}
}
:root[data-theme="dark"] .exp-depth.d0{color:#ded3c5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-depth.d0{color:#ded3c5}}

/* the roots photograph at the very bottom, under the welcome */
.exp-photo{position:absolute;left:0;right:0;bottom:0;height:100vh;height:100svh;opacity:0;z-index:1}
.exp-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.78)}
.exp-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,#2a1d14,rgba(42,29,20,.08) 30%,rgba(15,35,24,.42))}

/* the plaque at the top, fades as you go down */
.exp-plaque{position:absolute;top:clamp(16px,3.5vh,40px);left:0;right:0;text-align:center;z-index:5;pointer-events:none;padding:0 20px}
.exp-plaque .p-kick{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:#4a7c59;font-weight:700}
.exp-plaque .p-name{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3.4vw,36px);font-weight:600;color:#1c1410;margin-top:8px;letter-spacing:-.3px}
.exp-plaque .p-sub{font-family:'Caveat',cursive;font-size:clamp(18px,2.4vw,24px);color:#9a6f3a;margin-top:2px}
:root[data-theme="dark"] .exp-plaque .p-name{color:#f6f0e7}
:root[data-theme="dark"] .exp-plaque .p-kick{color:#8cbb99}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .exp-plaque .p-name{color:#f6f0e7}
  :root:not([data-theme="light"]) .exp-plaque .p-kick{color:#8cbb99}
}

/* the welcome at the root */
.exp-welcome{position:absolute;inset:0;display:grid;place-items:center;text-align:center;opacity:0;padding:24px;z-index:6;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(15,35,24,.55),rgba(15,35,24,.1))}
.exp-welcome .w-in{max-width:1040px;transform:translateY(26px);will-change:transform}
.exp-welcome .w-line{white-space:nowrap}
.exp-welcome .w-kick{font-family:'Caveat',cursive;font-size:clamp(22px,3vw,30px);color:#b6dcc2}
.exp-welcome h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(33px,5.4vw,78px);letter-spacing:-.02em;line-height:1.06;color:#ffffff;margin:12px 0 20px;text-shadow:0 2px 30px rgba(0,0,0,.45)}
.exp-welcome h2 em{font-style:italic;color:#9fd0ad}
.exp-welcome p{font-family:'DM Sans',sans-serif;font-size:clamp(16px,2vw,19.5px);color:rgba(250,247,242,.94);text-shadow:0 1px 14px rgba(0,0,0,.45);max-width:580px;margin:0 auto 32px;line-height:1.7}
.exp-welcome .w-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.wbtn{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:999px;font-family:'DM Sans',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.07em;text-transform:uppercase;transition:transform .2s ease,background .2s ease,border-color .2s}
.wbtn-fill{background:#faf7f2;color:#0f2318}
.wbtn-fill:hover{transform:translateY(-2px);background:#fff}
.wbtn-ghost{border:1.5px solid rgba(250,247,242,.4);color:#faf7f2}
.wbtn-ghost:hover{border-color:#faf7f2;background:rgba(250,247,242,.08);transform:translateY(-2px)}
.exp-welcome .w-more{margin-top:34px;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(250,247,242,.55);animation:xbob 2.4s ease-in-out infinite}
@keyframes xbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* the hint at the bottom of the first screen */
.exp-hint{position:absolute;left:0;right:0;bottom:max(4.5vh,calc(env(safe-area-inset-bottom,0px) + 16px));display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7a6355;transition:opacity .5s ease;z-index:5;padding:0 20px;text-align:center}
.exp-hint svg{width:15px;height:15px;stroke:#4a7c59;fill:none;animation:xbob 2.4s ease-in-out infinite;flex-shrink:0}
.exp-hint .t-touch{display:none}
@media (hover:none) and (pointer:coarse){.exp-hint .t-mouse{display:none}.exp-hint .t-touch{display:inline}}
:root[data-theme="dark"] .exp-hint{color:#b1a294}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-hint{color:#b1a294}}

/* the idle invitation: the seedling leans, as if the wind is asking */
.exp-nudge .exp-seedling{animation:xnudge 2.4s ease-in-out infinite}
@keyframes xnudge{0%,100%{transform:translateX(-50%) rotate(0)}50%{transform:translateX(-50%) rotate(4deg) translateY(-4px)}}

/* a skip control for anyone who would rather just read */
.exp-skip{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:16px;z-index:8;font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#7a6355;background:rgba(250,247,242,.7);border:1px solid rgba(60,40,20,.14);padding:10px 16px;border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:opacity .4s}
.exp-skip:hover{color:#1c1410}
:root[data-theme="dark"] .exp-skip{color:#b1a294;background:rgba(20,16,13,.6);border-color:rgba(255,240,225,.16)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .exp-skip{color:#b1a294;background:rgba(20,16,13,.6);border-color:rgba(255,240,225,.16)}}
.exp-welcome.live~.exp-skip{opacity:0;pointer-events:none}

@media(max-width:600px){
  .exp-depth{font-size:22px}
  .exp-depth.d1,.exp-depth.d3{right:6%}
  .exp-depth.d0,.exp-depth.d2{left:6%}
  .exp-welcome .w-in{padding:0 4px}
  .wbtn{padding:15px 26px;font-size:13px}
}