/* =============================================================================
   TELEHEALTH — HEALING BACKDROP  (the dashboard's atmosphere, in green)
   -----------------------------------------------------------------------------
   WHY THIS EXISTS
   The patient dashboard breathes: a painted sky, the Hope Tree, drifting cloud,
   a stork that crosses now and then, leaves, soft motes. Telehealth was a flat
   white page. Walking from one to the other felt like leaving the product and
   entering a form — which is exactly the wrong feeling right before someone
   books a consultation about their cancer.

   So this is the same stack the dashboard uses (myapp/templates/partials/
   _healing_background.html + static/css/community_feed.css), rebuilt here with
   ONE deliberate change: the whole atmosphere is tuned GREEN instead of blue.
   Green is telehealth's colour on the dashboard's own cards (the Telehealth
   tile hovers green, #34C77B), so the tint tells you where you are without a
   single word of UI. Light green, never saturated — this has to sit behind
   clinical text for twenty minutes without tiring anyone's eyes.

   WHAT IT IS
   Pure CSS + inline SVG. No image files except two the platform already ships
   (the Hope Tree and the stork). No JavaScript — the sky must never depend on
   a script that might not load on a slow hospital connection.

   CONTRACT
   • aria-hidden + pointer-events:none — decorative, invisible to assistive tech,
     never intercepts a click.
   • Everything is scoped under .thb or body.thb-on. Nothing leaks.
   • Hidden entirely on the video call (body.iasa-immersive): a consultation is
     the whole screen, and drifting clouds behind a patient's face would be
     absurd.
   • Hidden under prefers-reduced-motion and on phone widths.

   LOADS LAST in base.html so these rules win over iasa_themes.css by source
   order (they must, to make .page-wrap transparent).
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. THE WASH — the page itself.
   iasa_themes.css paints body AND .page-wrap with an opaque --page-fade. That
   opaque wrapper would bury everything below, so the wrapper goes transparent
   and the wash moves to the body, fixed, so it doesn't scroll away.
   ══════════════════════════════════════════════════════════════════════════ */
body.thb-on:not(.iasa-immersive) {
  /* light theme: a mint dawn, palest at the top-right where the content starts */
  background:
    radial-gradient(48% 60% at 88% 4%,  rgba(255,255,255,.92), transparent 64%),
    radial-gradient(56% 62% at 6%  10%, rgba(52,199,123,.10),  transparent 70%),
    radial-gradient(70% 58% at 50% 100%, rgba(45,134,173,.07), transparent 72%),
    linear-gradient(178deg, #F1FBF5 0%, #F7FDF9 42%, #FFFFFF 100%) !important;
  background-attachment: fixed !important;
}
html[data-theme="dawn"] body.thb-on:not(.iasa-immersive) {
  /* dawn keeps its warmth; the green arrives as sage, not mint */
  background:
    radial-gradient(48% 60% at 88% 4%,  rgba(255,248,242,.94), transparent 64%),
    radial-gradient(56% 62% at 6%  10%, rgba(126,178,132,.16), transparent 70%),
    radial-gradient(70% 58% at 50% 100%, rgba(214,138,110,.10), transparent 72%),
    linear-gradient(178deg, #F4F6E9 0%, #FDF3EA 46%, #FFF8F2 100%) !important;
  background-attachment: fixed !important;
}
html[data-theme="dark"] body.thb-on:not(.iasa-immersive) {
  /* night: forest, not black — the same hue, just far down the lightness ramp */
  background:
    radial-gradient(52% 60% at 88% 4%,  rgba(19,48,44,.85),   transparent 66%),
    radial-gradient(56% 62% at 6%  10%, rgba(37,120,88,.16),  transparent 72%),
    linear-gradient(178deg, #0A1A22 0%, #0B1E24 48%, #0A1428 100%) !important;
  background-attachment: fixed !important;
}

/* The content wrapper must let the sky through. Its own readability now comes
   from the cards inside it (which carry --glass-bg), exactly as on the
   dashboard — the page is atmosphere, the cards are the paper. */
body.thb-on:not(.iasa-immersive) .page-wrap {
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. THE STAGE
   ══════════════════════════════════════════════════════════════════════════ */
/* z-index:-1, NOT 0 — and that single character matters. At z-index:0 the
   backdrop would sit above the page content, so every element on top of it
   would need its own z-index to climb back over, and each of those would open
   a new stacking context. A Bootstrap modal (z-index 1055) trapped inside one
   of those contexts renders *underneath* a nav that sits in a higher one — a
   classic, maddening bug to trace back to a decorative layer.
   At -1 the sky paints between the page background and everything else, with
   no z-index needed anywhere on earth. Body's own background still paints
   below it because a root-level background is drawn onto the canvas first. */
.thb {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
  /* one place to retune the whole atmosphere */
  --thb-tree-op:   .17;
  --thb-cloud-op:  .40;
  --thb-bird-op:   .13;
  --thb-leaf-op:   .15;
  --thb-mote:      rgba(52,199,123,.85);   /* the green the motes glow */
  --thb-leaf-a:    #3F9D7F;
  --thb-leaf-b:    #7FC8A0;
  --thb-canopy:    #2F7D6E;
  --thb-trunk:     #5B4636;
}
html[data-theme="dawn"] .thb {
  --thb-tree-op: .15; --thb-cloud-op: .34; --thb-mote: rgba(163,140,84,.8);
  --thb-canopy: #5E8F6B; --thb-leaf-a: #7EA84E; --thb-leaf-b: #C9A05E;
}
html[data-theme="dark"] .thb {
  --thb-tree-op: .13; --thb-cloud-op: .10; --thb-bird-op: .10; --thb-leaf-op: .10;
  --thb-mote: rgba(88,214,158,.7);
  --thb-canopy: #1F5C50; --thb-leaf-a: #2F7D6E; --thb-leaf-b: #3E8F73;
}

.thb svg, .thb span, .thb img {
  position: absolute; display: block; height: auto;
  will-change: transform, opacity;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. THE HOPE TREE — the platform's own asset, bottom-left, faded to texture.
   Same file the Community, the marketing site and the dashboard use, so it is
   literally the same tree in every room of the product.
   ══════════════════════════════════════════════════════════════════════════ */
.thb-tree {
  left: -34px; bottom: -20px;
  width: min(30vw, 420px); height: 74vh;
  background: url("../../img/home/hope_tree.webp") no-repeat left bottom / contain;
  opacity: var(--thb-tree-op);
  /* a green cast so the tree belongs to this room, not the blue one */
  filter: blur(2px) saturate(1.1) hue-rotate(-12deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
                      linear-gradient(90deg, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
              linear-gradient(90deg, #000 68%, transparent 100%);
  mask-composite: intersect;
}
html[data-theme="dark"] .thb-tree { filter: blur(2px) brightness(.75) saturate(.9) hue-rotate(-12deg); }

/* ═══════════════════════════════════════════════════════════════════════════
   3. CLOUDS — very slow horizontal drift. Two, at different heights, speeds
   and sizes, one started mid-journey so they never travel as a pair.
   They begin fully off-screen (-30% clears the widest clamp at any viewport),
   which is the bug the Community layer had to fix: a cloud stuck to the left
   edge that snapped back every cycle.
   ══════════════════════════════════════════════════════════════════════════ */
.thb-cloud { opacity: var(--thb-cloud-op); width: clamp(160px, 20vw, 300px); }
.thb-cloud--1 { top: 11%; left: -30%; animation: thb-cloud-drift 86s linear infinite; }
.thb-cloud--2 { top: 27%; left: -30%; width: clamp(120px, 15vw, 220px);
                animation: thb-cloud-drift 118s linear infinite; animation-delay: -44s; }
@keyframes thb-cloud-drift { from { transform: translateX(0); } to { transform: translateX(140vw); } }

/* ═══════════════════════════════════════════════════════════════════════════
   4. THE STORK — a soaring bird, not a darting one.
   -----------------------------------------------------------------------------
   SPEED IS THE WHOLE THING HERE, and the first version got it badly wrong: a
   crossing took about 8 seconds, so the storks shot across like insects. A
   real stork soaring the width of a window takes the better part of a minute,
   and anything faster stops reading as "bird" and starts reading as "something
   moved" — which is exactly the twitch an ambient layer must never provoke.

   The numbers below are the dashboard's, not invented. community_shell.js
   gives each bird a crossing of 34-52 SECONDS and launches one every 20-32s.
   Matched here: each crossing takes 30% of its cycle, and the cycles are
   150s / 173s / 197s, so the three crossings last 45s, 52s and 59s.

   Where the dashboard uses JavaScript to get irregular timing, this uses
   arithmetic. The three cycle lengths share no common factor, so the pattern
   of who-is-flying-when does not repeat for weeks — you get one bird most of
   the time, occasionally two, occasionally an empty sky, and never a rhythm
   you can anticipate. That matters: the moment ambient motion becomes
   predictable, the eye starts waiting for it instead of reading the page.

   Size and speed agree about distance, deliberately. The big bird is the
   fastest (near), the small one the slowest (far). Reversed, the brain reads
   it as wrong without being able to say why.
   ══════════════════════════════════════════════════════════════════════════ */
.thb-bird { left: 0; opacity: 0; transform: translate3d(-24vw, 0, 0); }
.thb-bird--1 { top: 13%; width: clamp(30px, 3.4vw, 54px);   /* near  — 45s crossing */
               animation: thb-bird-cross 150s linear infinite; }
.thb-bird--2 { top: 29%; width: clamp(24px, 2.7vw, 42px);   /* mid   — 52s crossing */
               animation: thb-bird-cross 173s linear infinite; animation-delay: -61s; }
.thb-bird--3 { top: 44%; width: clamp(18px, 2.0vw, 30px);   /* far   — 59s crossing */
               animation: thb-bird-cross 197s linear infinite; animation-delay: -133s; }
/* Fades in as it enters and out as it leaves, so it never pops at a screen
   edge. The gentle rise and fall across the middle is what stops it reading as
   a sprite sliding along a rail. After 30% the bird is off-screen and at zero
   opacity for the rest of the cycle — that long tail IS the empty sky. */
@keyframes thb-bird-cross {
  0%    { transform: translate3d(-24vw, 0, 0);    opacity: 0; }
  4%    {                                          opacity: var(--thb-bird-op); }
  15%   { transform: translate3d(50vw, -26px, 0);  opacity: var(--thb-bird-op); }
  26%   {                                          opacity: var(--thb-bird-op); }
  30%   { transform: translate3d(124vw, 8px, 0);   opacity: 0; }
  100%  { transform: translate3d(124vw, 8px, 0);   opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. LEAVES — falling slowly, turning as they go.
   ══════════════════════════════════════════════════════════════════════════ */
.thb-leaf { opacity: var(--thb-leaf-op); width: 20px; }
.thb-leaf--1 { top: -4%; left: 26%;            animation: thb-leaf-drift 19s linear infinite; }
.thb-leaf--2 { top: -6%; left: 58%; width:16px; animation: thb-leaf-drift 24s linear infinite; animation-delay: -9s; }
.thb-leaf--3 { top: -5%; left: 79%; width:22px; animation: thb-leaf-drift 21s linear infinite; animation-delay: -14s; }
@keyframes thb-leaf-drift {
  0%   { transform: translate(0, -10px) rotate(0deg);      opacity: 0; }
  12%  {                                                    opacity: var(--thb-leaf-op); }
  100% { transform: translate(-40px, 105vh) rotate(220deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MOTES — soft green glows that breathe in and out. The smallest layer and
   the one that does the most: it's what makes the page feel alive rather than
   merely decorated.
   ══════════════════════════════════════════════════════════════════════════ */
.thb-mote {
  width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--thb-mote) 0%, transparent 70%);
}
.thb-mote--1 { top: 31%; left: 17%; animation: thb-mote 9s  ease-in-out infinite; }
.thb-mote--2 { top: 53%; left: 39%; animation: thb-mote 12s ease-in-out infinite; animation-delay: -4s; }
.thb-mote--3 { top: 67%; left: 71%; animation: thb-mote 11s ease-in-out infinite; animation-delay: -7s; }
.thb-mote--4 { top: 44%; left: 85%; animation: thb-mote 14s ease-in-out infinite; animation-delay: -2s; }
.thb-mote--5 { top: 76%; left: 29%; animation: thb-mote 10s ease-in-out infinite; animation-delay: -5s; }
.thb-mote--6 { top: 21%; left: 57%; animation: thb-mote 13s ease-in-out infinite; animation-delay: -9s; }
@keyframes thb-mote {
  0%, 100% { opacity: 0;   transform: translateY(0)     scale(.8); }
  50%      { opacity: .65; transform: translateY(-16px) scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. WHERE IT MUST NOT APPEAR
   ══════════════════════════════════════════════════════════════════════════ */

/* The video call is full-bleed by design — a consultation is the whole screen,
   not a box inside a website. Clouds behind a patient's face would be absurd,
   and every frame the browser spends animating them is a frame it isn't
   spending on video. */
   Note the wash rules above are all :not(.iasa-immersive) rather than being
   undone here — that way iasa_call.css keeps full control of the call's own
   background and there is no !important arms race between the two files. */
body.iasa-immersive .thb { display: none !important; }

/* Phones: the tree and clouds land on top of the content at this width, and
   the battery cost of six looping animations is real. Keep the wash, drop the
   moving parts. Tablets keep everything. */
@media (max-width: 700px) {
  .thb { display: none; }
}

/* Someone who has asked their operating system for less motion has asked for
   exactly this. The sky stays — still, which is the right failure mode. */
@media (prefers-reduced-motion: reduce) {
  .thb-cloud, .thb-bird, .thb-leaf, .thb-mote { animation: none !important; }
  .thb-bird, .thb-leaf, .thb-mote { opacity: 0 !important; }
}