/* Rize marketing: "What's inside" feature scenes.
   Desktop: a sticky stage crossfades between six scenes cloned from the list.
   Mobile: each scene sits in its own card above its feature.
   Shared gradients live in the hidden .viz-defs sprite in index.html. */

/* ---------------------------------------------------------------- Stage */
.stage {
  position: sticky;
  top: 13vh;
  height: 74vh;
  display: grid;
  place-items: center;
  border-radius: 36px;
  background: var(--white);
  border: 1px solid rgba(138, 158, 140, 0.18);
  overflow: hidden;
  isolation: isolate;
}
.stage-glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.75;
  z-index: -1;
  transition: transform 1.8s var(--ease-out), background-color 1.8s var(--ease-out);
}
.stage-glow-a { top: -20%; left: -20%; background-color: #D5E6DF; }
.stage-glow-b { bottom: -25%; right: -20%; background-color: #E9E1D1; }
.stage[data-active="1"] .stage-glow-a { transform: translate(40%, 10%); background-color: #EDE3D1; }
.stage[data-active="1"] .stage-glow-b { transform: translate(-10%, -20%); background-color: #DCE9E4; }
.stage[data-active="2"] .stage-glow-a { transform: translate(20%, 30%); background-color: #F1E3CE; }
.stage[data-active="2"] .stage-glow-b { transform: translate(-30%, -10%); background-color: #CFE0DA; }
.stage[data-active="3"] .stage-glow-a { transform: translate(30%, 40%); background-color: #CDE7E0; }
.stage[data-active="3"] .stage-glow-b { transform: translate(-40%, -40%); background-color: #E4ECE7; }
.stage[data-active="4"] .stage-glow-a { transform: translate(-5%, 45%); background-color: #E0EAD9; }
.stage[data-active="4"] .stage-glow-b { transform: translate(-20%, -50%); background-color: #D2E5E4; }
.stage[data-active="5"] .stage-glow-a { transform: translate(45%, 0); background-color: #D6E7E6; }
.stage[data-active="5"] .stage-glow-b { transform: translate(-45%, -15%); background-color: #EFE6D6; }

.stage > svg {
  grid-area: 1 / 1;
  width: min(86%, 460px);
  height: auto;
  opacity: 0;
  transform: scale(0.96) translateY(12px);
  transition: opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
}
.stage > svg.is-active { opacity: 1; transform: none; }

.viz-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.viz { display: block; width: 100%; height: auto; overflow: visible; }
/* Pivot CSS animations on each shape's own centre. Elements that carry an SVG
   transform attribute are left alone, because transform-origin also shifts
   the attribute's rotate() and scale() pivots. */
.viz *:not([transform]) { transform-box: fill-box; transform-origin: center; }
.viz.is-paused, .viz.is-paused * { animation-play-state: paused !important; }

.feature-viz { display: none; }

/* ---------------------------------------------------------------- 01 Breathwork: breathing flower */
.viz .bf-flower, .viz .bf-flower-2 {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: spin 90s linear infinite;
}
.bf-flower-2 { animation-duration: 140s; animation-direction: reverse; }
.bf-petal { animation: bf-petal var(--breath) var(--ease-breath) infinite; }
.bf-flower-2 .bf-petal { animation-delay: 0.35s; }
@keyframes bf-petal {
  0%, 100% { transform: translateY(48px) scale(0.5); }
  50% { transform: translateY(0) scale(1); }
}
.bf-glow { animation: bf-glow var(--breath) var(--ease-breath) infinite; }
@keyframes bf-glow {
  0%, 100% { transform: scale(0.78); opacity: 0.6; }
  50% { transform: scale(1); opacity: 1; }
}
.bf-core { animation: bf-core var(--breath) var(--ease-breath) infinite; }
@keyframes bf-core {
  0%, 100% { transform: scale(1.4); }
  50% { transform: scale(0.8); }
}
.viz .bf-dash {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: spin 120s linear infinite reverse;
}

/* ---------------------------------------------------------------- 02 Journaling: page and pen */
.jn-card { animation: jn-float 10s var(--ease-breath) infinite; }
@keyframes jn-float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-6px) rotate(0.4deg); }
}
.jn-shadow { animation: jn-shadow 10s var(--ease-breath) infinite; }
@keyframes jn-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.08; }
  50% { transform: scaleX(0.92); opacity: 0.05; }
}
.jn-sprig { transform-origin: bottom center; animation: jn-sway 8s var(--ease-breath) infinite; }
@keyframes jn-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* ---------------------------------------------------------------- 03 Meditation: moon gate at dawn */
.viz .md-dash {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: spin 160s linear infinite;
}
.md-sun { animation: md-rise 18s var(--ease-breath) infinite alternate; }
@keyframes md-rise {
  from { transform: translateY(16px); }
  to { transform: translateY(-8px); }
}
.md-mist { animation: md-mist 26s var(--ease-breath) infinite alternate; }
.md-mist-2 { animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes md-mist {
  from { transform: translateX(-26px); }
  to { transform: translateX(26px); }
}
.md-glint { animation: md-glint 5s var(--ease-breath) infinite; }
.md-glint:nth-of-type(2) { animation-delay: -1.2s; }
.md-glint:nth-of-type(3) { animation-delay: -2.4s; }
.md-glint:nth-of-type(4) { animation-delay: -3.6s; }
@keyframes md-glint {
  0%, 100% { transform: scaleX(1); opacity: 0.75; }
  50% { transform: scaleX(0.6); opacity: 0.35; }
}
.md-ripple {
  opacity: 0;
  animation: md-ripple 9s var(--ease-soft) infinite;
}
.md-ripple:nth-of-type(2) { animation-delay: 3s; }
.md-ripple:nth-of-type(3) { animation-delay: 6s; }
@keyframes md-ripple {
  0% { transform: scale(0.3); opacity: 0; }
  12% { opacity: 0.8; }
  100% { transform: scale(3.4); opacity: 0; }
}
.md-birds { animation: md-birds 32s linear infinite; }
@keyframes md-birds {
  0% { transform: translate(-40px, 10px); opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(300px, -30px); opacity: 0; }
}
.md-wing { animation: md-flap 2.4s var(--ease-breath) infinite; }
.md-wing-2 { animation-delay: -0.9s; }
@keyframes md-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.45); }
}
.md-reed { transform-origin: bottom center; animation: jn-sway 7s var(--ease-breath) infinite; }
.md-reed:nth-of-type(2) { animation-delay: -2s; animation-duration: 8.5s; }
.md-reed:nth-of-type(3) { animation-delay: -4s; animation-duration: 6.5s; }
.md-reed:nth-of-type(4) { animation-delay: -1s; animation-duration: 9s; }

/* ---------------------------------------------------------------- 04 Lumina: orb in conversation */
.lm-glow { animation: bf-glow var(--breath) var(--ease-breath) infinite; }
.viz .lm-orb {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: orb-breathe var(--breath) var(--ease-breath) infinite;
}
/* Water ripples: they slow as they spread, thin out, and each has a pale
   trailing ring like light catching the second crest. */
.lm-ripple {
  opacity: 0;
  stroke-width: 2;
  animation: lm-ripple 10.4s cubic-bezier(0.15, 0.55, 0.3, 1) infinite;
  animation-delay: var(--d, 0s);
}
.lm-ripple-trail { animation-name: lm-ripple-trail; }
@keyframes lm-ripple {
  0% { transform: scale(1); opacity: 0; stroke-width: 2.4; }
  6% { opacity: 0.8; }
  55% { opacity: 0.35; }
  100% { transform: scale(2.9); opacity: 0; stroke-width: 0.5; }
}
@keyframes lm-ripple-trail {
  0% { transform: scale(1); opacity: 0; stroke-width: 3; }
  8% { opacity: 0.9; }
  50% { opacity: 0.4; }
  100% { transform: scale(2.75); opacity: 0; stroke-width: 0.6; }
}
.lm-b1, .lm-b2, .lm-typing { opacity: 0; }
.lm-b1 { animation: lm-b1 14s var(--ease-out) infinite; }
.lm-typing { animation: lm-typing 14s var(--ease-out) infinite; }
.lm-b2 { animation: lm-b2 14s var(--ease-out) infinite; }
@keyframes lm-b1 {
  0%, 4% { opacity: 0; transform: translateY(14px) scale(0.96); }
  12%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes lm-typing {
  0%, 18% { opacity: 0; transform: translateY(10px); }
  23%, 35% { opacity: 1; transform: none; }
  39%, 100% { opacity: 0; transform: none; }
}
@keyframes lm-b2 {
  0%, 37% { opacity: 0; transform: translateY(14px) scale(0.96); }
  46%, 86% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-8px); }
}
.lm-dot { animation: typing 1.4s var(--ease-soft) infinite; }
.lm-dot:nth-of-type(3) { animation-delay: 0.18s; }
.lm-dot:nth-of-type(4) { animation-delay: 0.36s; }

/* ---------------------------------------------------------------- 05 Check-ins: PIES sliders
   The app's daily check-in edit view: one FacetSliderCard per PIES
   dimension (Physical, Intellectual, Emotional, Spiritual) with the
   gradient icon badge, the facet word, a five-step track, and the
   smiley thumb. Each slider slides from the default middle step to that
   day's rating in turn, as if someone were checking in. Track, thumb,
   word, and face all switch to the new rating band's colour. */
.sl-cards { animation: sl-cards 16s var(--ease-out) infinite; }
@keyframes sl-cards {
  0%, 2% { opacity: 0; }
  5%, 90% { opacity: 1; }
  94%, 100% { opacity: 0; }
}
.sl-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 300;
  fill: #2C3830;
}
.sl-word {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02px;
}
.viz .sl-thumb, .viz .sl-fill, .sl-face, .sl-word, .sl-curve {
  animation-duration: 16s;
  animation-timing-function: var(--ease-out);
  animation-iteration-count: infinite;
}
.viz .sl-fill { transform-box: fill-box; transform-origin: left center; }
.sl-thumb-0 { animation-name: sl-thumb-0; }
.sl-fill-0 { animation-name: sl-fill-0; }
.sl-face-0 { animation-name: sl-face-0; }
.sl-word-a-0 { animation-name: sl-out-0; }
.sl-word-b-0 { animation-name: sl-in-0; }
.sl-curve-a-0 { animation-name: sl-out-0; }
.sl-curve-b-0 { animation-name: sl-in-0; }
@keyframes sl-thumb-0 {
  0%, 6% { transform: translateX(0); }
  16%, 90% { transform: translateX(78.0px); }
  95%, 100% { transform: translateX(0); }
}
@keyframes sl-fill-0 {
  0%, 6% { transform: scaleX(0.500); fill: #A8C5BB; }
  12% { fill: #7BA99A; }
  16%, 90% { transform: scaleX(0.750); fill: #7BA99A; }
  95%, 100% { transform: scaleX(0.500); fill: #A8C5BB; }
}
@keyframes sl-face-0 {
  0%, 11% { fill: #A8C5BB; }
  13%, 90% { fill: #7BA99A; }
  95%, 100% { fill: #A8C5BB; }
}
@keyframes sl-out-0 {
  0%, 10% { opacity: 1; }
  14%, 90% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes sl-in-0 {
  0%, 10% { opacity: 0; }
  14%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.sl-thumb-1 { animation-name: sl-thumb-1; }
.sl-fill-1 { animation-name: sl-fill-1; }
.sl-face-1 { animation-name: sl-face-1; }
.sl-word-a-1 { animation-name: sl-out-1; }
.sl-word-b-1 { animation-name: sl-in-1; }
.sl-curve-a-1 { animation-name: sl-out-1; }
.sl-curve-b-1 { animation-name: sl-in-1; }
@keyframes sl-thumb-1 {
  0%, 20% { transform: translateX(0); }
  30%, 90% { transform: translateX(-78.0px); }
  95%, 100% { transform: translateX(0); }
}
@keyframes sl-fill-1 {
  0%, 20% { transform: scaleX(0.500); fill: #A8C5BB; }
  26% { fill: #8A9A93; }
  30%, 90% { transform: scaleX(0.250); fill: #8A9A93; }
  95%, 100% { transform: scaleX(0.500); fill: #A8C5BB; }
}
@keyframes sl-face-1 {
  0%, 25% { fill: #A8C5BB; }
  27%, 90% { fill: #8A9A93; }
  95%, 100% { fill: #A8C5BB; }
}
@keyframes sl-out-1 {
  0%, 24% { opacity: 1; }
  28%, 90% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes sl-in-1 {
  0%, 24% { opacity: 0; }
  28%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.sl-thumb-2 { animation-name: sl-thumb-2; }
.sl-fill-2 { animation-name: sl-fill-2; }
.sl-face-2 { animation-name: sl-face-2; }
.sl-word-a-2 { animation-name: sl-out-2; }
.sl-word-b-2 { animation-name: sl-in-2; }
.sl-curve-a-2 { animation-name: sl-out-2; }
.sl-curve-b-2 { animation-name: sl-in-2; }
@keyframes sl-thumb-2 {
  0%, 34% { transform: translateX(0); }
  44%, 90% { transform: translateX(156.0px); }
  95%, 100% { transform: translateX(0); }
}
@keyframes sl-fill-2 {
  0%, 34% { transform: scaleX(0.500); fill: #A8C5BB; }
  40% { fill: #4A6B5F; }
  44%, 90% { transform: scaleX(1.000); fill: #4A6B5F; }
  95%, 100% { transform: scaleX(0.500); fill: #A8C5BB; }
}
@keyframes sl-face-2 {
  0%, 39% { fill: #A8C5BB; }
  41%, 90% { fill: #4A6B5F; }
  95%, 100% { fill: #A8C5BB; }
}
@keyframes sl-out-2 {
  0%, 38% { opacity: 1; }
  42%, 90% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes sl-in-2 {
  0%, 38% { opacity: 0; }
  42%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.sl-thumb-3 { animation-name: sl-thumb-3; }
.sl-fill-3 { animation-name: sl-fill-3; }
.sl-face-3 { animation-name: sl-face-3; }
.sl-word-a-3 { animation-name: sl-out-3; }
.sl-word-b-3 { animation-name: sl-in-3; }
.sl-curve-a-3 { animation-name: sl-out-3; }
.sl-curve-b-3 { animation-name: sl-in-3; }
@keyframes sl-thumb-3 {
  0%, 48% { transform: translateX(0); }
  58%, 90% { transform: translateX(78.0px); }
  95%, 100% { transform: translateX(0); }
}
@keyframes sl-fill-3 {
  0%, 48% { transform: scaleX(0.500); fill: #A8C5BB; }
  54% { fill: #7BA99A; }
  58%, 90% { transform: scaleX(0.750); fill: #7BA99A; }
  95%, 100% { transform: scaleX(0.500); fill: #A8C5BB; }
}
@keyframes sl-face-3 {
  0%, 53% { fill: #A8C5BB; }
  55%, 90% { fill: #7BA99A; }
  95%, 100% { fill: #A8C5BB; }
}
@keyframes sl-out-3 {
  0%, 52% { opacity: 1; }
  56%, 90% { opacity: 0; }
  95%, 100% { opacity: 1; }
}
@keyframes sl-in-3 {
  0%, 52% { opacity: 0; }
  56%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* ---------------------------------------------------------------- 06 Insights: living chart */
/* The line draws at a steady speed from 4% to 40% of the cycle.
   Each point pops in the moment the line reaches it: the start, then 33%,
   67% and 100% of the path length, as measured with getTotalLength(). */
.in-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: in-line 14s linear infinite;
}
@keyframes in-line {
  0%, 4% { stroke-dashoffset: 100; opacity: 1; }
  40%, 88% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.in-pt { animation: 14s linear infinite; }
.in-pt-0 { animation-name: in-pt-0; }
.in-pt-1 { animation-name: in-pt-1; }
.in-pt-2 { animation-name: in-pt-2; }
.in-pt-3 { animation-name: in-pt-3; }
@keyframes in-pt-0 {
  0%, 4.00% { transform: scale(0); opacity: 0; }
  5.20% { transform: scale(1.25); opacity: 1; }
  6.60%, 88% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0.6); opacity: 0; }
}
@keyframes in-pt-1 {
  0%, 15.94% { transform: scale(0); opacity: 0; }
  17.14% { transform: scale(1.25); opacity: 1; }
  18.54%, 88% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0.6); opacity: 0; }
}
@keyframes in-pt-2 {
  0%, 28.03% { transform: scale(0); opacity: 0; }
  29.23% { transform: scale(1.25); opacity: 1; }
  30.63%, 88% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0.6); opacity: 0; }
}
@keyframes in-pt-3 {
  0%, 40.00% { transform: scale(0); opacity: 0; }
  41.20% { transform: scale(1.25); opacity: 1; }
  42.60%, 88% { transform: scale(1); opacity: 1; }
  95%, 100% { transform: scale(0.6); opacity: 0; }
}
.in-halo { animation: in-halo 2.8s var(--ease-soft) infinite; }
@keyframes in-halo {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.in-tip { animation: in-tip 14s var(--ease-out) infinite; }
@keyframes in-tip {
  0%, 42% { transform: translateY(8px); opacity: 0; }
  48%, 88% { transform: none; opacity: 1; }
  95%, 100% { transform: translateY(-4px); opacity: 0; }
}
.in-guide { animation: in-guide 14s var(--ease-out) infinite; stroke-dasharray: 2 5; }
@keyframes in-guide {
  0%, 41% { opacity: 0; }
  46%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.in-spark { animation: in-spark 4s var(--ease-breath) infinite; }
@keyframes in-spark {
  0%, 100% { transform: scale(0.4) rotate(0deg); opacity: 0.2; }
  50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* ---------------------------------------------------------------- Mobile cards */
@media (max-width: 960px) {
  .stage { display: none; }
  .feature-viz {
    display: grid;
    place-items: center;
    width: min(100%, 380px);
    aspect-ratio: 1;
    margin: 0 0 2rem;
    border-radius: 28px;
    border: 1px solid rgba(138, 158, 140, 0.18);
    background:
      radial-gradient(circle at 20% 15%, rgba(213, 230, 223, 0.9), transparent 60%),
      radial-gradient(circle at 85% 90%, rgba(233, 225, 209, 0.9), transparent 60%),
      var(--white);
    overflow: hidden;
  }
  .feature-viz .viz { width: 90%; }
}