/*
  YANTRA — Home, Japanese Aesthetic Pass (2026-07-30)
  Wabi-sabi / ma / kanso layer on top of the existing home shell.
  Nothing here renames or removes a selector from home.css or the
  shared card/shell system — it only adds texture, photography,
  asymmetry, and a few small interactions (byōbu tilt, unfold-then-
  navigate, ink-stamp, vertical sankalpa). All hooks used by home.js
  and app.js (ids, --value, aria-pressed, etc.) are left untouched.
*/

/* ================= Washi grain (whole page) ================= */

.yantra-main {
  position: relative;
}

.yantra-main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--washi-grain-opacity, 0.05);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.yantra-main > * {
  position: relative;
  z-index: 1;
}

/* ================= Hero photo =================
   The .yantra-hero-scene__photo rule itself now lives in css/shell.css
   (shared — Shoonya and Vajra reuse it on their own hero-scene
   placeholders). Only the home-specific quote flourish stays here. */

.yantra-hero-scene__quote::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: var(--space-sm);
  background: var(--color-gold);
  opacity: 0.6;
}

/* ================= Section rhythm — ma, brush hairline ================= */

.yantra-section__header {
  position: relative;
  padding-left: var(--space-md);
}

.yantra-section__header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), transparent);
  opacity: 0.55;
}

/* Slight fukinsei — section titles sit a hair off the grid instead of
   dead-flush, and subtitles get a touch more breathing room. */
.yantra-section__subtitle {
  max-width: 46ch;
}

/* ================= Byōbu — Five Rooms folding screen ================= */

.yantra-room-grid .yantra-card-grid--5 {
  perspective: 1600px;
}

.yantra-room-grid .yantra-card--room {
  position: relative;
  overflow: hidden;
  border-top: none;
  padding-top: 0;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  will-change: transform;
  transition:
    transform 600ms var(--ease-ink),
    box-shadow 600ms var(--ease-ink),
    border-radius 600ms var(--ease-ink);
  box-shadow: var(--paper-shadow);
}

/* Each panel leans like a standing folding screen — alternating tilt,
   asymmetric, never a flat grid of identical boxes. */
.yantra-room-grid .yantra-card--room:nth-child(1) { transform: rotateY(-6deg) translateY(2px); }
.yantra-room-grid .yantra-card--room:nth-child(2) { transform: rotateY(3deg)  translateY(-6px); }
.yantra-room-grid .yantra-card--room:nth-child(3) { transform: rotateY(-2deg) translateY(4px); }
.yantra-room-grid .yantra-card--room:nth-child(4) { transform: rotateY(4deg)  translateY(-4px); }
.yantra-room-grid .yantra-card--room:nth-child(5) { transform: rotateY(-4deg) translateY(0); }

.yantra-room-grid .yantra-card--room:hover,
.yantra-room-grid .yantra-card--room:focus-visible {
  transform: rotateY(0deg) translateY(-10px) scale(1.035);
  border-radius: var(--ink-bleed-radius);
  box-shadow: 0 18px 40px rgba(46, 43, 40, 0.18);
  z-index: 2;
}

/* Click-to-enter: home-zen.js adds this class, waits, then navigates —
   a fold rather than a jump-cut. Purely additive; if JS never runs,
   the plain <a href> still works instantly. */
.yantra-room-grid .yantra-card--room.is-unfolding {
  transform: rotateY(0deg) scale(0.9);
  opacity: 0.35;
  transition: transform 420ms var(--ease-ink), opacity 420ms var(--ease-ink);
}

.yantra-card__media {
  position: relative;
  border-radius: var(--radius-md);
  isolation: isolate;
}

.yantra-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--room-photo);
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

.yantra-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(200deg, rgba(46, 43, 40, 0.06) 0%, rgba(46, 43, 40, 0.55) 100%);
}

.yantra-card__media svg {
  position: relative;
  z-index: 2;
  width: 30%;
  height: 30%;
  color: var(--color-paper);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  align-self: flex-end;
  justify-self: flex-end;
  margin: 0 var(--space-sm) var(--space-sm) 0;
}

.yantra-card__media {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* ================= Enso progress ring ================= */
/* Kept fully functional (--value / .yantra-card__ring-value untouched
   by home.js) — just dressed as a hand-brushed circle instead of a
   flat conic-gradient dial. */

.yantra-card__ring {
  box-shadow:
    0 0 0 1px rgba(46, 43, 40, 0.06),
    var(--paper-shadow);
  animation: yantra-enso-breathe 6s var(--ease-ink) infinite;
}

@keyframes yantra-enso-breathe {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.06); }
}

.yantra-card__ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--color-gold);
  opacity: 0.25;
}

/* ================= Today's Flow — red seal (inkan) ================= */

.yantra-timeline__item--completed .yantra-timeline__dot {
  position: relative;
}

.yantra-timeline__item--completed .yantra-timeline__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-vermillion);
  opacity: 0;
  animation: yantra-stamp 700ms var(--ease-ink) 200ms forwards;
}

@keyframes yantra-stamp {
  0%   { opacity: 0; transform: scale(1.6); }
  60%  { opacity: 0.9; transform: scale(0.94); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* ================= Sankalpa — vertical script toggle ================= */

.yantra-sankalpa {
  position: relative;
}

.yantra-sankalpa__vertical-toggle {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--text-xs);
  background: var(--surface-0);
  transition: color 200ms var(--ease-ink), border-color 200ms var(--ease-ink);
}

.yantra-sankalpa__vertical-toggle:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.yantra-sankalpa--vertical .yantra-sankalpa__text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 220px;
  max-height: 40vh;
  margin-inline: auto;
  padding: var(--space-md) var(--space-xs);
}

/* ================= Quick theme/sound toggles (page header) ================= */

.yantra-page-header__icon-btn[data-zen-toggle] svg {
  width: 16px;
  height: 16px;
}

/* ================= Brush divider ================= */

.yantra-brush-divider {
  display: block;
  width: 64px;
  height: 10px;
  margin: 0 auto var(--space-lg);
  opacity: 0.4;
  color: var(--color-ink);
}

@media (prefers-reduced-motion: reduce) {
  .yantra-hero-scene__photo,
  .yantra-card__ring,
  .yantra-room-grid .yantra-card--room {
    animation: none !important;
    transition: none !important;
  }
}