/* =============================================================================
   TELEHEALTH — APPROVED PHASE-1 REDESIGN (production port)
   -----------------------------------------------------------------------------
   Ports the approved 2026-08-04 mockup into the live module. Loads AFTER
   tele_healing_bg.css (see base.html) so these rules win by source order.

   WHAT CHANGES
   • The wash: green → the approved Community-blue (classic), peach (dawn),
     deep navy (dark) — the same palettes the mockup was signed off with.
   • The Hope Tree: enlarged to a true page anchor, shown in its natural
     ribbon colours (no green hue-rotate), softly blurred and edge-feathered.
   • Storks: the old PNG sprite becomes an inline SVG bird with a beating
     wing group (see _tele_healing_background.html). Crossing rhythm is
     untouched — the 150/173/197s cycles are right and stay.
   • Leaves: three muted greens become eight vivid ribbon-palette leaves.
   • Command Center hero: dark navy panel → light glass card with the
     signature ribbon top border, script greeting and a faded consultation
     photograph.
   • Category cards: each of the twelve gains its own soft-focus clinical
     photograph at 5–12% opacity behind the glass. Photos are DECORATION:
     blurred, masked, never allowed to compete with text.

   ASSETS
   Photos live in static/tele/img/care_photos/ and are fetched once by
   scripts/download_design_photos.ps1. Until that script runs the cards
   simply render without photos — nothing breaks.

   CONTRACT (inherited from tele_healing_bg.css and kept)
   • Decorative layers stay aria-hidden / pointer-events:none.
   • Everything respects prefers-reduced-motion.
   • body.iasa-immersive (video call) shows none of this.
   ========================================================================== */

/* ═══ 0. THE WASH — approved palettes ═══ */
body.thb-on:not(.iasa-immersive) {
  background:
    radial-gradient(48% 60% at 88% 4%, rgba(255,255,255,.5), transparent 64%),
    radial-gradient(56% 62% at 6% 10%, rgba(40,186,237,.08), transparent 70%),
    linear-gradient(175deg, #E3F2FB 0%, #EDF8F3 48%, #DDEEF9 100%) !important;
  background-attachment: fixed !important;
}
html[data-theme="dawn"] body.thb-on:not(.iasa-immersive) {
  background:
    radial-gradient(48% 60% at 88% 4%, rgba(255,250,244,.92), transparent 64%),
    linear-gradient(175deg, #FFF0E2 0%, #FFE9EF 48%, #FFF7DF 100%) !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body.thb-on:not(.iasa-immersive) {
  background:
    radial-gradient(48% 60% at 88% 4%, rgba(29,45,94,.55), transparent 64%),
    linear-gradient(175deg, #0B1230 0%, #101A3E 48%, #0A1028 100%) !important;
  background-attachment: fixed !important;
}

/* ═══ 1. ATMOSPHERE TUNING — one place, per theme ═══ */
.thb {
  --thb-tree-op: .50;
  --thb-leaf-op: .60;
  --thb-bird-op: .35;
  --thb-cloud-op: .55;
  --thb-mote: rgba(40,186,237,.8);            /* motes glow sky-blue now */
  /* vivid ribbon palette for the eight leaves */
  --thb-leaf-a: #E91E8C;  --thb-leaf-b: #F5C518;
  --thb-leaf-c: #7AC943;  --thb-leaf-d: #009688;
  --thb-leaf-e: #8E44AD;  --thb-leaf-f: #29B6F6;
  --thb-leaf-g: #FD66C4;  --thb-leaf-h: #FF8C45;
}
html[data-theme="dawn"] .thb {
  --thb-tree-op: .45; --thb-cloud-op: .45; --thb-mote: rgba(255,164,96,.75);
}
html[data-theme="dark"] .thb {
  --thb-tree-op: .16; --thb-cloud-op: .12; --thb-bird-op: .18;
  --thb-leaf-op: .28; --thb-mote: rgba(87,199,248,.6);
}

/* ═══ 2. THE HOPE TREE — enlarged, natural ribbon colours ═══
   No masks at all: the base rule's two-layer -webkit-mask-composite made any
   single-layer override render empty in Chrome. The soft edge now comes from
   blur + multiply blending, which also dissolves any light backing into the
   sky — simpler, and it cannot break. */
.thb-tree {
  left: -60px; bottom: -40px;
  width: min(42vw, 760px); height: 84vh;
  /* telehealth's own copy of the asset — the main-site static path the base
     rule uses is not served on every deployment, which is why the tree never
     appeared. Same load pattern as .thb-photo, which provably renders. */
  background: url("../img/home/hope_tree.webp") no-repeat left bottom / contain;
  opacity: .20;                    /* background presence — never the subject */
  filter: blur(3.5px) saturate(.85);
  -webkit-mask-image: none; mask-image: none;
}
html[data-theme="dawn"] .thb-tree { filter: blur(3.5px) sepia(.15) saturate(.9); }
html[data-theme="dark"] .thb-tree {
  opacity: .10;
  filter: blur(3.5px) brightness(1.25) saturate(.65);
}

/* ═══ 2b. RIGHT-SIDE MEDICAL SCENE — the mockup's counterweight to the tree.
   A sunlit treatment room, heavily faded, feathered into the sky on its left
   edge. Fresh element (.thb-photo), so no inherited mask rules to fight. ═══ */
.thb-photo {
  right: 0; top: 16%;
  width: min(34vw, 560px); height: 62vh;
  background: url("../img/care_photos/empty_treatment_room.webp") right center / cover no-repeat;
  opacity: .13; filter: blur(2.5px) saturate(.85);
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
  mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
html[data-theme="dawn"] .thb-photo { filter: blur(2.5px) sepia(.3) saturate(.9); opacity: .11; }
html[data-theme="dark"] .thb-photo { filter: blur(2.5px) brightness(.8) saturate(.7); opacity: .07; }
@media (max-width: 1100px) { .thb-photo { display: none; } }

/* ═══ 3. STORKS — the SVG bird's beating wings ═══ */
.thb { --thb-bird-op: .45; }
html[data-theme="dark"] .thb { --thb-bird-op: .2; }
.thb-bird { color: #8FA6BD; }
html[data-theme="dawn"] .thb-bird { color: #C99A8A; }
html[data-theme="dark"] .thb-bird { color: #AFC6EF; }
/* The IASA stork itself — the bird from the logo — crossing nearest of all.
   Its own cycle length (131s) shares no factor with the other three, so the
   sky stays unpredictable. Slight bank via rotate; crossing pace unchanged. */
.thb-bird--logo {
  top: 8%; width: clamp(54px, 5.4vw, 92px);
  animation: thb-bird-cross 131s linear infinite; animation-delay: -33s;
}
html[data-theme="dark"] .thb-bird--logo { filter: brightness(.8); }
.thb-bird .wings {
  animation: thb-flap .7s ease-in-out infinite alternate;
  transform-origin: 50% 62%;
}
.thb-bird--2 .wings { animation-duration: .55s; }
.thb-bird--3 .wings { animation-duration: .5s; }
@keyframes thb-flap { from { transform: scaleY(1); } to { transform: scaleY(.2); } }

/* ═══ 4. LEAVES — five more, everyone vivid ═══ */
.thb-leaf--4 { top: -5%; left: 12%; width: 18px; animation: thb-leaf-drift 23s linear infinite; animation-delay: -5s; }
.thb-leaf--5 { top: -6%; left: 40%; width: 15px; animation: thb-leaf-drift 26s linear infinite; animation-delay: -17s; }
.thb-leaf--6 { top: -4%; left: 68%; width: 19px; animation: thb-leaf-drift 20s linear infinite; animation-delay: -11s; }
.thb-leaf--7 { top: -5%; left: 88%; width: 14px; animation: thb-leaf-drift 25s linear infinite; animation-delay: -3s; }
.thb-leaf--8 { top: -6%; left: 50%; width: 17px; animation: thb-leaf-drift 22s linear infinite; animation-delay: -19s; }

/* ═══ 5. COMMAND CENTER HERO — additions on top of the glass hero ═══
   The hero's frosted-glass surface, ribbon (::after) and ink-on-light prime
   tiles now live in command_center.html's own style block, driven by the
   tele_glass.css tokens. This file adds only what that recipe lacks:
   the script greeting and the faded consultation photograph.
   The photo takes ::before — ::after is the ribbon and must stay. */
.cc-hero::before {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 58%; z-index: 0;
  background: url("../img/care_photos/hero_consult.webp") right center / cover no-repeat;
  opacity: .16; filter: blur(3px) saturate(.85); pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 50%, transparent);
  mask-image: linear-gradient(to left, #000 50%, transparent);
}
html[data-theme="dawn"] .cc-hero::before { filter: blur(3px) sepia(.3) saturate(.9); opacity: .14; }
html[data-theme="dark"] .cc-hero::before { filter: blur(3px) brightness(.85) saturate(.7); opacity: .10; }
/* body-prefixed so this outranks the template's .cc-hero h1 by specificity */
body .cc-hero h1 {
  font-family: "Kaushan Script", "Dancing Script", cursive;
  font-weight: 400; font-size: 1.7rem; line-height: 1.2;
}

/* ═══ 6. CATEGORY CARDS — one soft-focus photograph each, 5–12% opacity ═══ */
/* Owner review 2026-08-04: cards were blending into the sky. Surfaces go
   near-solid white (body-prefixed to outrank the template's --tg-card rule)
   and the photos drop to a barely-there tint. */
body .cc-cat { background: rgba(255,255,255,.94); }
html[data-theme="dawn"] body .cc-cat { background: rgba(255,252,247,.94); }
html[data-theme="dark"] body .cc-cat { background: rgba(22,32,74,.94); }
.cc-cat::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: .05; filter: blur(4px) saturate(.8);
  transition: opacity .3s ease;
}
.cc-cat:hover::after { opacity: .08; }
html[data-theme="dawn"] .cc-cat::after { filter: blur(4px) sepia(.3) saturate(.85); opacity: .04; }
html[data-theme="dark"] .cc-cat::after { filter: blur(4px) brightness(.85) saturate(.7); opacity: .03; }
/* content rides above the photo; the hover sweep (::before, z-index:1) already does */
.cc-cat > * { position: relative; z-index: 1; }

.cc-cat--n1::after  { background-image: url("../img/care_photos/cat01_start_care.webp"); }
.cc-cat--n2::after  { background-image: url("../img/care_photos/cat02_expert_oncology.webp"); }
.cc-cat--n3::after  { background-image: url("../img/care_photos/cat03_precision_genetics.webp"); }
.cc-cat--n4::after  { background-image: url("../img/care_photos/cat04_navigation.webp"); }
.cc-cat--n5::after  { background-image: url("../img/care_photos/cat05_remote_monitoring.webp"); }
.cc-cat--n6::after  { background-image: url("../img/care_photos/cat06_supportive_care.webp"); }
.cc-cat--n7::after  { background-image: url("../img/care_photos/cat07_rehabilitation.webp"); }
.cc-cat--n8::after  { background-image: url("../img/care_photos/cat08_caregiver_family.webp"); }
.cc-cat--n9::after  { background-image: url("../img/care_photos/cat09_community.webp"); }
.cc-cat--n10::after { background-image: url("../img/care_photos/cat10_marketplace.webp"); }
.cc-cat--n11::after { background-image: url("../img/care_photos/cat11_outcomes.webp"); }
.cc-cat--n12::after { background-image: url("../img/care_photos/cat12_legal.webp"); }

/* ═══ 6b. THE ZERO-HEIGHT SPAN BUG — root cause of the invisible tree ═══
   tele_healing_bg.css declares `.thb svg, .thb span, .thb img { height:auto }`.
   `.thb span` (0,1,1) OUTRANKS single-class rules like `.thb-tree` (0,1,0),
   so every span-based layer — the tree, the photo, the motes — collapsed to
   height:auto, which for an empty span is 0px. They were all rendering at
   zero height all along. SVG/img layers survived because height:auto means
   "keep aspect ratio" for them. These selectors (0,2,1) win. */
.thb span.thb-tree  { height: 84vh; }
.thb span.thb-photo { height: 62vh; }
.thb span.thb-mote  { width: 8px; height: 8px; }

/* ═══ 7. GUARDRAILS ═══ */
@media (prefers-reduced-motion: reduce) {
  .thb-bird .wings { animation: none !important; }
}