/* ==========================================================================
   IdeaSweetSpot — LIVING ZEN ATMOSPHERE  ·  SPRING ZEN v2.0
   Loads right after iss-theme.css (uses its tokens).
   --------------------------------------------------------------------------
   Goal: the brand's watercolor world "across the whole back" — a calm painterly
   backdrop behind EVERY view, with gentle, tai-chi-slow life on top: cherry
   blossom petals drifting down, soft gold "threads" (water lines) weaving, an
   enso brush breathing behind the four circles, and mist that slowly drifts.

   Everything here is decorative + pointer-events:none, sits BEHIND content
   (z-index:-1), and fully yields to prefers-reduced-motion. Body text always
   rides Ink on paper/veil, so contrast never depends on the watercolor.
   Source plates: assets/hero/*.jpg (the approved no-text brand hero plates).
   ========================================================================== */

/* Let the fixed atmosphere show through: body must carry NO opaque paint of its
   own (a z-index:-1 layer is hidden behind an opaque body background). html holds
   an ivory fallback so there is never a white flash. The !important + body.ss-body
   specificity beats the legacy sweetspot.css `.ss-body { background: …--cloud }`
   rule that loads afterwards. */
html { background: var(--iss-ivory, #FAF6EF); }
body.ss-body { background: transparent !important; }

/* ---- the fixed atmosphere shell ------------------------------------------ */
.iss-atmos {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;               /* isolate paint — keeps scrolling smooth   */
}

/* ---- 1) the watercolor scene (blossoms + stones + mist) ------------------ */
.iss-atmos__scene {
  position: absolute;
  inset: -4% -4% -4% -4%;        /* bleed so the slow drift never shows edges */
  background:
    url("assets/hero/hero-zen-blossoms.jpg") center top / cover no-repeat;
  will-change: transform;
  animation: iss-scene-drift 46s ease-in-out infinite;
  transform-origin: 60% 40%;
}
/* A tunable ivory veil OVER the scene keeps text legible. It is a separate
   layer so its opacity can change per view without touching the image. */
.iss-atmos__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,253,247,.16), transparent 55%),
    linear-gradient(180deg, rgba(250,246,239,.52) 0%, rgba(250,246,239,.60) 50%, rgba(250,246,239,.70) 100%);
}
/* On the working views (score / explore / journey / threads) the scene stays
   quiet so the tools read cleanly; on HOME it opens up and clearly breathes. */
body[data-view="home"] .iss-atmos__veil {
  background:
    linear-gradient(180deg, rgba(250,246,239,.22) 0%, rgba(250,246,239,.30) 50%, rgba(250,246,239,.44) 100%);
}

/* ---- 2) flowing "threads" — soft gold + moss water-lines ----------------- */
.iss-atmos__threads {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .5;
}
.iss-atmos__threads svg { width: 100%; height: 100%; }
.iss-thread { fill: none; stroke-linecap: round; will-change: transform; transform-box: view-box; }
.iss-thread--gold  { stroke: #E7C67D; stroke-width: 1.4; animation: iss-thread-a 24s ease-in-out infinite; }
.iss-thread--moss  { stroke: #9DBE86; stroke-width: 1.1; animation: iss-thread-b 30s ease-in-out infinite; }
.iss-thread--blush { stroke: #EBB7C6; stroke-width: 1.1; animation: iss-thread-a 27s ease-in-out infinite reverse; }
body[data-view="home"] .iss-atmos__threads { opacity: .72; }

/* ---- 3) drifting petals + a couple of full blossoms ---------------------- */
.iss-atmos__petals { position: absolute; inset: 0; }
.iss-petal {
  position: absolute;
  top: -8vh;
  will-change: transform, opacity;
  animation: iss-fall linear infinite;
  opacity: 0;
}
.iss-petal svg { display: block; width: 100%; height: 100%; }
/* Per-petal placement / size / tempo — all tai-chi slow (22–46s). */
.iss-petal:nth-child(1)  { left: 6%;  width: 18px; height: 22px; animation-duration: 30s; animation-delay: -3s;  }
.iss-petal:nth-child(2)  { left: 17%; width: 13px; height: 16px; animation-duration: 38s; animation-delay: -14s; }
.iss-petal:nth-child(3)  { left: 28%; width: 22px; height: 26px; animation-duration: 26s; animation-delay: -9s;  }
.iss-petal:nth-child(4)  { left: 39%; width: 15px; height: 18px; animation-duration: 42s; animation-delay: -22s; }
.iss-petal:nth-child(5)  { left: 51%; width: 19px; height: 23px; animation-duration: 34s; animation-delay: -6s;  }
.iss-petal:nth-child(6)  { left: 62%; width: 12px; height: 15px; animation-duration: 40s; animation-delay: -18s; }
.iss-petal:nth-child(7)  { left: 71%; width: 24px; height: 28px; animation-duration: 28s; animation-delay: -12s; }
.iss-petal:nth-child(8)  { left: 82%; width: 14px; height: 17px; animation-duration: 44s; animation-delay: -2s;  }
.iss-petal:nth-child(9)  { left: 90%; width: 20px; height: 24px; animation-duration: 32s; animation-delay: -26s; }
.iss-petal:nth-child(10) { left: 46%; width: 16px; height: 19px; animation-duration: 46s; animation-delay: -33s; }
.iss-petal:nth-child(11) { left: 12%; width: 26px; height: 26px; animation-duration: 50s; animation-delay: -16s; } /* blossom */
.iss-petal:nth-child(12) { left: 76%; width: 30px; height: 30px; animation-duration: 54s; animation-delay: -40s; } /* blossom */

/* Petals only truly come alive on HOME; on working views they rest hidden so
   the atmosphere stays a still wash and nothing competes with the form. */
.iss-atmos__petals { opacity: 0; transition: opacity 1.2s ease; }
body[data-view="home"] .iss-atmos__petals { opacity: 1; }

/* ============================ keyframes ============================ */
@keyframes iss-scene-drift {
  0%,100% { transform: scale(1.03) translate3d(0, 0, 0); }
  50%     { transform: scale(1.07) translate3d(-1.1%, -0.9%, 0); }
}
/* fall = descend + sway + slow rotation, fading in and out at the edges */
@keyframes iss-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);           opacity: 0; }
  8%   { opacity: .62; }
  50%  { transform: translate3d(4.5vw, 58vh, 0) rotate(180deg);  opacity: .62; }
  92%  { opacity: .5; }
  100% { transform: translate3d(-2.5vw, 120vh, 0) rotate(360deg); opacity: 0; }
}
@keyframes iss-thread-a {
  0%,100% { transform: translateY(0) scaleY(1); }
  50%     { transform: translateY(-16px) scaleY(1.015); }
}
@keyframes iss-thread-b {
  0%,100% { transform: translateY(0) scaleX(1); }
  50%     { transform: translateY(12px) scaleX(1.01); }
}

/* ============================ the enso (hero) ============================ */
/* A hand-drawn brush ring that breathes behind the four-circle bloom. */
.iss-enso {
  position: absolute;
  top: 47%; left: 50%;
  width: 98%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}
.iss-enso svg { width: 100%; height: 100%; overflow: visible; }
.iss-enso__ring {
  fill: none;
  stroke: #C9A24B;
  stroke-linecap: round;
  opacity: .32;
  transform-origin: 50% 50%;
  animation: iss-enso-breathe 20s ease-in-out infinite;
}
@keyframes iss-enso-breathe {
  0%,100% { transform: rotate(-6deg) scale(1);    opacity: .30; }
  50%     { transform: rotate(2deg)  scale(1.03); opacity: .40; }
}

/* ============================ scroll-reveal ============================ */
/* Sections settle in with a slow, soft rise — the "flow" between features.
   Scoped to .js so the page still shows everything if scripting is off. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s ease, transform 1.05s cubic-bezier(.16,.72,.24,1);
  transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* children of a revealing section flow in, gently staggered, once it enters */
.js [data-reveal] .iss-circlecard,
.js [data-reveal] .iss-lstep,
.js [data-reveal] .iss-priceprev__card,
.js [data-reveal] .iss-path {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,.72,.24,1);
}
.js [data-reveal].is-in .iss-circlecard,
.js [data-reveal].is-in .iss-lstep,
.js [data-reveal].is-in .iss-priceprev__card,
.js [data-reveal].is-in .iss-path { opacity: 1; transform: none; }
.js [data-reveal].is-in .iss-circlecard:nth-child(1),
.js [data-reveal].is-in .iss-lstep:nth-child(1),
.js [data-reveal].is-in .iss-path:nth-child(1)      { transition-delay: .08s; }
.js [data-reveal].is-in .iss-circlecard:nth-child(2),
.js [data-reveal].is-in .iss-lstep:nth-child(2),
.js [data-reveal].is-in .iss-path:nth-child(2)      { transition-delay: .20s; }
.js [data-reveal].is-in .iss-circlecard:nth-child(3),
.js [data-reveal].is-in .iss-lstep:nth-child(3)     { transition-delay: .32s; }
.js [data-reveal].is-in .iss-circlecard:nth-child(4){ transition-delay: .44s; }

/* ============================ calm + performance ============================ */
@media (max-width: 720px) {
  /* fewer petals on phones; keep the scene + a couple of threads */
  .iss-petal:nth-child(n+7) { display: none; }
  .iss-atmos__scene {
    background-image: url("assets/hero/hero-zen-mobile.jpg");
    background-position: center top;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iss-atmos__scene { animation: none; transform: scale(1.03); }
  .iss-thread { animation: none; }
  .iss-enso__ring { animation: none; opacity: .3; }
  /* petals hold still (a scattered few) rather than drifting */
  .iss-petal { animation: none; opacity: .4; top: auto; }
  .iss-petal:nth-child(1)  { top: 12vh; } .iss-petal:nth-child(3)  { top: 34vh; }
  .iss-petal:nth-child(5)  { top: 58vh; } .iss-petal:nth-child(7)  { top: 22vh; }
  .iss-petal:nth-child(9)  { top: 74vh; } .iss-petal:nth-child(11) { top: 46vh; }
  .iss-petal:nth-child(2),.iss-petal:nth-child(4),.iss-petal:nth-child(6),
  .iss-petal:nth-child(8),.iss-petal:nth-child(10),.iss-petal:nth-child(12) { display: none; }
  .js [data-reveal],
  .js [data-reveal] .iss-circlecard,
  .js [data-reveal] .iss-lstep,
  .js [data-reveal] .iss-priceprev__card,
  .js [data-reveal] .iss-path { opacity: 1; transform: none; transition: none; }
}