/* ==========================================================================
   Yujverse — Experiential moments (interactive, meditative)
   Daily Intention · Singing bowl · Seven Centres (chakra journey)
   ========================================================================== */

/* ---------------- Daily Intention (Sankalpa) flip card ---------------- */
.intention { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }
.intention__card {
  width: min(380px, 86vw); aspect-ratio: 3/4; perspective: 1600px;
  background: none; border: none; padding: 0; cursor: pointer; border-radius: var(--radius-lg);
}
.intention__card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent); }
.intention__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s var(--ease-spring); }
.intention__card.is-flipped .intention__inner { transform: rotateY(180deg); }
.intention__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 2rem; text-align: center;
}
.intention__back {
  background: radial-gradient(70% 60% at 50% 30%, color-mix(in srgb, var(--brick) 75%, #000), var(--brick-deep));
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
}
.intention__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: brightness(3); }
.intention__emblem { position: relative; color: var(--gold); }
.intention__emblem::after {
  content: ""; position: absolute; inset: -18px; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 50%;
}
.intention__hint { position: absolute; bottom: 1.5rem; font-family: var(--font-accent); letter-spacing: .26em; text-transform: uppercase; font-size: .68rem; color: color-mix(in srgb, var(--gold) 85%, white); }
.intention__card:hover .intention__hint { color: #fff; }

.intention__front {
  background: linear-gradient(165deg, var(--surface), var(--cream-warm));
  transform: rotateY(180deg); border: 1px solid var(--line);
}
.intention__sanskrit { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); color: var(--brick); line-height: 1; }
.intention__meaning { font-family: var(--font-accent); letter-spacing: .2em; text-transform: uppercase; font-size: .76rem; color: var(--accent); }
.intention__affirm { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); color: var(--ink); margin-top: 1.1rem; max-width: 24ch; }
.intention__again { transition: opacity var(--dur) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .intention__inner { transition: none; }
}

/* ---------------- Singing bowl (breathe section) ---------------- */
.breathe__circle { cursor: pointer; }
.breathe__bowl-hint {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem;
  font-family: var(--font-accent); letter-spacing: .2em; text-transform: uppercase; font-size: .66rem; color: var(--gold);
  opacity: .85;
}
.breathe__circle.is-ringing { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 140px -10px var(--gold); }
.bowl-ripple { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold); pointer-events: none; animation: bowl-ring 1.6s var(--ease-out) forwards; }
@keyframes bowl-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(1.7); opacity: 0; } }

/* ---------------- Seven Centres — chakra scroll journey ---------------- */
.chakras { position: relative; }
.chakras__rail { position: relative; max-width: 760px; margin-inline: auto; }
.chakras__line { position: absolute; left: 38px; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--line-soft), var(--clay), var(--line-soft)); }
.chakras__line-fill { position: absolute; left: 38px; top: 0; width: 2px; height: 0; background: linear-gradient(var(--gold), var(--brick)); transition: height .2s linear; box-shadow: 0 0 12px var(--gold); }
.chakra {
  position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 1.4rem; align-items: center;
  padding: 1.1rem 0; opacity: .45; transition: opacity .5s var(--ease-out);
}
.chakra.is-lit { opacity: 1; }
.chakra__node {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--surface); border: 2px solid var(--line); color: var(--c, var(--brick));
  transition: all .5s var(--ease-spring); z-index: 1;
}
.chakra.is-lit .chakra__node { border-color: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 0 30px -4px var(--c); transform: scale(1.05); }
.chakra__sym { font-family: var(--font-serif); font-size: 1.5rem; color: var(--c); }
.chakra__name { font-family: var(--font-serif); font-size: 1.2rem; color: var(--brick); }
.chakra__sanskrit { font-family: var(--font-accent); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--accent); }
.chakra__desc { color: var(--ink-soft); font-size: .96rem; margin-top: .2rem; max-width: 52ch; }
@media (max-width: 560px) {
  .chakra { grid-template-columns: 56px 1fr; gap: 1rem; }
  .chakra__node { width: 56px; height: 56px; }
  .chakras__line, .chakras__line-fill { left: 27px; }
}