/* ============================================================================
   EOH — Ritual Hero Illustrations
   CSS for the hand-drawn-style SVG illustrations rendered by
   js/ritual-illustrations.min.js on the Ritual page. The JS file generates
   the SVG markup at runtime; this file provides the layout, color, and
   animation. Do not put any HTML in this file.
   ============================================================================ */

/* ----- The illustration containers (set by the JS) ----- */
.ritual-hero-page__illu {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 18px auto 0;
  color: var(--gold-deep, #8B6B3E);
  max-width: 324px;  /* was 360, -10% */
}
.ritual-hero-page__illu .ritual-illu {
  width: 100%;
  height: auto;
  max-width: 324px;  /* was 360, -10% */
}

.ritual-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 36px 0 28px;  /* was 56/40, tightened */
  padding: 8px 0;        /* was 12, tightened */
  color: var(--gold-deep, #8B6B3E);
  clear: both;
  width: 100%;
}
.ritual-hero .ritual-illu {
  width: 100%;
  height: auto;
  max-width: 720px;       /* base for all */
  display: block;
}
/* The teacup is half-size: 50% smaller than the other two ritual heroes */
.ritual-hero--teacup .ritual-illu {
  max-width: 280px;       /* 50% smaller — was 720, now 280 (39%) */
}
/* The evening triptych and the sun-rising hero: -10% from 720 */
.ritual-hero--evening .ritual-illu,
.ritual-hero--sun .ritual-illu {
  max-width: 580px;       /* -19% of 720 (a touch more compact) */
}

.ritual-illu {
  width: 100%;
  height: auto;
  color: var(--gold-deep, #8B6B3E);
}
.ritual-illu svg,
.ritual-illu { display: block; }

.ritual-illu--teacup { color: var(--olive, #5C6240); }
.ritual-illu--evening { color: var(--gold-deep, #8B6B3E); }
.ritual-illu--sun { color: var(--gold, #B08B57); }

/* ----- Inline icon-style illustrations (the small ones in ritual-step__icon) ----- */
.ritual-step__icon svg,
.ritual-step__icon .ritual-illu,
.ritual-sense__icon svg,
.ritual-sense__icon .ritual-illu {
  width: 100%;
  height: 100%;
  color: var(--gold-deep, #8B6B3E);
}
.ritual-step__icon,
.ritual-sense__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----- Animation: flame flicker ----- */
@keyframes eoh-flame-flicker {
  0%   { transform: scale(1, 1) translate(0, 0); opacity: 0.95; }
  20%  { transform: scale(1.03, 0.97) translate(0.3px, -0.3px); opacity: 1; }
  40%  { transform: scale(0.98, 1.02) translate(-0.2px, 0.2px); opacity: 0.92; }
  60%  { transform: scale(1.02, 0.98) translate(0.1px, -0.1px); opacity: 0.98; }
  80%  { transform: scale(0.99, 1.01) translate(-0.3px, 0.1px); opacity: 0.94; }
  100% { transform: scale(1, 1) translate(0, 0); opacity: 0.95; }
}
.illu-flame-outer {
  transform-origin: 80px 145px;
  transform-box: fill-box;
  animation: eoh-flame-flicker 2.4s ease-in-out infinite;
}
.illu-flame-inner {
  transform-origin: 80px 153px;
  transform-box: fill-box;
  animation: eoh-flame-flicker 1.6s ease-in-out infinite reverse;
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .illu-flame-outer,
  .illu-flame-inner { animation: none; }
}

/* ----- Animation: smoke rise ----- */
@keyframes eoh-smoke-rise {
  0%   { transform: translate(0, 0); opacity: 0.2; }
  30%  { opacity: 0.6; }
  100% { transform: translate(-2px, -22px); opacity: 0; }
}
.illu-smoke path {
  transform-origin: center;
  transform-box: fill-box;
  animation: eoh-smoke-rise 4.5s ease-in-out infinite;
  stroke-dasharray: 80;
  stroke-dashoffset: 0;
}
.illu-smoke path:nth-child(2) { animation-delay: 1.5s; }
.illu-smoke path:nth-child(3) { animation-delay: 3s; }
@media (prefers-reduced-motion: reduce) {
  .illu-smoke path { animation: none; }
}

/* ----- Animation: steam rise ----- */
@keyframes eoh-steam-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(0, -18px) scale(1.08); opacity: 0; }
}
.illu-steam path {
  transform-origin: 120px 80px;
  transform-box: fill-box;
  animation: eoh-steam-rise 3.5s ease-in-out infinite;
}
.illu-steam path:nth-child(2) { animation-delay: 1.2s; }
.illu-steam path:nth-child(3) { animation-delay: 2.4s; }
@media (prefers-reduced-motion: reduce) {
  .illu-steam path { animation: none; }
}

/* ----- Animation: water ripple ----- */
@keyframes eoh-water-ripple {
  0%   { transform: scaleX(1); opacity: 0.7; }
  50%  { transform: scaleX(1.08); opacity: 0.5; }
  100% { transform: scaleX(1); opacity: 0.7; }
}
.illu-water ellipse,
.illu-ripple {
  transform-origin: center;
  transform-box: fill-box;
  animation: eoh-water-ripple 3.2s ease-in-out infinite;
}
.illu-water ellipse:nth-child(2) { animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .illu-water ellipse { animation: none; }
}

/* ----- Animation: incense spark glow ----- */
@keyframes eoh-spark-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.4); }
}
.illu-spark {
  transform-origin: 300px 75px;
  transform-box: fill-box;
  animation: eoh-spark-glow 1.8s ease-in-out infinite;
  color: var(--gold, #B08B57);
}
@media (prefers-reduced-motion: reduce) {
  .illu-spark { animation: none; opacity: 0.9; }
}

/* ----- Sun illustrations: rays, birds, stars ----- */
.illu-sun-rays line {
  transform-origin: 300px 150px;
  transform-box: fill-box;
  animation: eoh-flame-flicker 8s ease-in-out infinite;
}
.illu-bird {
  transform-origin: center;
  transform-box: fill-box;
  animation: eoh-flame-flicker 6s ease-in-out infinite;
}
.illu-stars path {
  transform-origin: center;
  transform-box: fill-box;
  animation: eoh-spark-glow 3s ease-in-out infinite;
}
.illu-stars path:nth-child(2n) { animation-delay: 1.2s; }
.illu-stars path:nth-child(3n) { animation-delay: 2.1s; }
@media (prefers-reduced-motion: reduce) {
  .illu-sun-rays line,
  .illu-bird,
  .illu-stars path { animation: none; }
}

/* ----- The four doors of the senses grid (also lives here for proximity) ----- */
.ritual-senses__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 50px;
  max-width: 920px;
}
.ritual-sense {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  background: var(--ivory, #ECE4D2);
  border: 1px solid var(--line, #D9CFC0);
  border-radius: 6px;
  padding: 28px 26px 30px;
  transition: all 0.3s var(--ease);
}
.ritual-sense:hover {
  border-color: var(--gold-deep, #8B6B3E);
  transform: translateY(-2px);
}
.ritual-sense__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--gold-deep, #8B6B3E);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ritual-sense__icon svg { width: 100%; height: 100%; }
.ritual-sense__body h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  margin: 0 0 4px;
  color: var(--ink, #1A1A1A);
  font-weight: 500;
}
.ritual-sense__body p {
  color: var(--ink-2, #2C2C2C);
  line-height: 1.55;
  margin: 6px 0 0;
  font-size: 0.95rem;
}
.ritual-sense__body .ja {
  font-size: 0.8rem;
  color: var(--muted, #6A6A6A);
  font-style: italic;
}
@media (max-width: 720px) {
  .ritual-senses__grid { grid-template-columns: 1fr; }
}