/* Scriptify: pharmacy scene (home page, "Preventative care happens between the visits").
   Line drawing in a 3D (isometric-style) view: white and cyan strokes draw themselves in as
   the page scrolls, the doors open, the camera pushes in and the 3D Scriptify pill comes out.
   Colours follow the site's light / dark mode. JS draws the paths and sets --copy. */
.ph-intro { padding: 0; }
.ph-track { height: 360vh; height: 360svh; position: relative; }
.ph-track.is-static { height: auto; }
.ph-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; box-sizing: border-box; display: flex; flex-direction: column; padding: 84px 0 24px; }
.ph-track.is-static .ph-sticky { position: static; height: 90vh; }
.ph-title { text-align: center; margin: 0; max-width: none; }
@media (min-width: 700px) { .ph-title { white-space: nowrap; font-size: clamp(1.25rem, 2.6vw, 2.75rem); } }
.ph-wrap { flex: 1; min-height: 0; margin-top: 18px; display: flex; }
.ph-stage {
  --ph-ink: #EEF2F7; --ph-cy: #22B8E8; --ph-gr: #6E7888; --ph-panel: rgba(255,255,255,.88); --ph-text: #0A0D12; --copy: 0;
  position: relative; flex: 1; min-width: 0; overflow: hidden; contain: paint;
}
[data-theme="light"] .ph-stage { background: #05080c; border-radius: 24px; } /* light is a dark card so the light-made pill reads */
.ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-svg path { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: butt; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ph-svg .ink { stroke: var(--ph-ink); } .ph-svg .cy { stroke: var(--ph-cy); } .ph-svg .gr { stroke: var(--ph-gr); }
.ph-svg .glow { stroke-width: 2.5; filter: drop-shadow(0 0 4px var(--ph-cy)) drop-shadow(0 0 12px var(--ph-cy)); animation: ph-glow 2.2s ease-in-out infinite; }
@keyframes ph-glow { 50% { filter: drop-shadow(0 0 7px var(--ph-cy)) drop-shadow(0 0 22px var(--ph-cy)); } }
@media (prefers-reduced-motion: reduce) { .ph-svg .glow { animation: none; } }
.ph-copy { position: absolute; left: 50%; bottom: 12px; width: min(92%, 720px); margin: 0; padding: 14px 20px; box-sizing: border-box; border-radius: 16px; text-align: center; font-size: .95rem;
           color: var(--ph-text); background: var(--ph-panel); backdrop-filter: blur(8px); opacity: var(--copy); transform: translate(-50%, calc((1 - var(--copy)) * 16px)); pointer-events: none; }
@media (max-width: 600px) { .ph-copy { font-size: .8rem; padding: 10px 14px; } }

.ph-word { position: absolute; top: 50%; left: 50%; opacity: 0; white-space: nowrap; pointer-events: none; font-family: Outfit, Figtree, sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1; color: #fff;
           text-shadow: 0 0 10px rgba(150,225,255,.9), 0 0 28px rgba(34,184,232,.7), 0 0 60px rgba(34,184,232,.4); }

.ph-fly { position: absolute; left: 0; top: 0; z-index: 3; transform-origin: 0 0; white-space: nowrap; pointer-events: none; color: #22B8E8; -webkit-text-stroke: 0 #22B8E8; }
.ph-word .ph-p { color: #00E5FF; text-shadow: 0 0 10px rgba(0,229,255,1), 0 0 28px rgba(0,229,255,.85), 0 0 60px rgba(0,229,255,.5); }
.ph-cap { position: fixed; left: 0; top: 0; z-index: 450; pointer-events: none; display: none; }
.ph-cap span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.ph-cap .lo { color: #00E5FF; text-shadow: 0 0 10px rgba(0,229,255,1), 0 0 28px rgba(0,229,255,.85); }

/* no dividing line between the pharmacy scene and the section after it */
#prevent-intro { border-bottom: 0 !important; box-shadow: none !important; }
#beats-show { border-top: 0 !important; box-shadow: none !important; }
#prevent-intro::after, #beats-show::before { border: 0 !important; }

.ph-cap { will-change: transform, opacity; }
/* phones and tablets: lighter glow and no animated blur, so scrolling stays smooth */
@media (pointer: coarse), (max-width: 799px) {
  .ph-word { filter: none !important; text-shadow: 0 0 14px rgba(150,225,255,.7); }
  .ph-word .ph-p { text-shadow: 0 0 14px rgba(0,229,255,.9); }
  .ph-cap .lo { text-shadow: 0 0 12px rgba(0,229,255,.9); }
}