/* esoteric suds — the shrine of Sudsy.
   Deliberately the opposite pole of mysticalsoap.com: vermilion and sumi ink
   over warm washi, straight architectural edges, still and weighted where
   Soapy is pastel, rounded and floaty. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

:root {
  --washi: #f3ead6;          /* warm rice-paper ground */
  --washi-raised: #fbf5e7;   /* lit paper — panels, silk */
  --sumi: #26201d;           /* warm ink, body text */
  --sumi-soft: #6a5f56;      /* faded ink, secondary text */
  --vermilion: #c6402b;      /* 朱 — torii, the identity color */
  --vermilion-deep: #97301f; /* lacquer shadow side of the vermilion */
  --vermilion-bright: #d9563a;
  --seal: var(--vermilion-deep); /* small caption ink — darker for AA contrast on washi */
  --kin: #b0862f;            /* 金 — bell, rope, gohei fittings */
  --tokiwa: #33513e;         /* 常磐 — evergreen of the sacred grove */
  --hinoki: #cda878;         /* 檜 — unpainted cypress, the board and rods */
  --hinoki-deep: #a67c4c;
  --shide: #fbf5e7;          /* 紙垂 — the paper streamer, always pale, never inverted with the theme */
  --line: rgba(38, 32, 29, 0.16);
  --shadow: 0 20px 44px -24px rgba(80, 30, 20, 0.4);
  color-scheme: light;
}

/* night shrine, lantern-lit: lacquer ground, gold becomes the light source */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --washi: #16120e;
    --washi-raised: #221a13;
    --sumi: #f0e5d2;
    --sumi-soft: #b6a68f;
    --vermilion: #d9563a;
    --vermilion-deep: #8f2d1d;
    --vermilion-bright: #ec6a48;
    --seal: var(--vermilion); /* bright ink reads fine on the dark lacquer ground */
    --kin: #d9b45a;
    --tokiwa: #5c7c64;
    --hinoki: #b98f5d;
    --hinoki-deep: #8c6740;
    --shide: #cbb99a;
    --line: rgba(240, 229, 210, 0.16);
    --shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.72);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --washi: #16120e;
  --washi-raised: #221a13;
  --sumi: #f0e5d2;
  --sumi-soft: #b6a68f;
  --vermilion: #d9563a;
  --vermilion-deep: #8f2d1d;
  --vermilion-bright: #ec6a48;
  --seal: var(--vermilion);
  --kin: #d9b45a;
  --tokiwa: #5c7c64;
  --hinoki: #b98f5d;
  --hinoki-deep: #8c6740;
  --shide: #cbb99a;
  --line: rgba(240, 229, 210, 0.16);
  --shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.72);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--washi);
  color: var(--sumi);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
  /* faint paper grain — pure CSS, no image asset */
  background-image:
    repeating-linear-gradient(0deg, rgba(120, 90, 60, 0.025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(120, 90, 60, 0.02) 0 2px, transparent 2px 4px);
}

.display {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", "Songti SC", Georgia, "Times New Roman", serif;
}
.caption {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.64rem;
  color: var(--sumi-soft);
}

.sando {
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 1.4rem 4rem;
  position: relative;
  z-index: 1;
}

/* falling leaves — the still, downward answer to Soapy's rising bubbles */
.leaf-field { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.leaf {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--vermilion);
  opacity: 0.5;
  /* momiji-ish maple silhouette */
  clip-path: polygon(50% 0, 60% 28%, 88% 20%, 68% 44%, 100% 52%, 66% 60%, 78% 92%, 50% 68%, 22% 92%, 34% 60%, 0 52%, 32% 44%, 12% 20%, 40% 28%);
  animation: fall linear infinite;
}
.l1 { left: 12%; animation-duration: 15s; animation-delay: 0s; }
.l2 { left: 44%; animation-duration: 19s; animation-delay: 5s; width: 10px; height: 10px; color: var(--kin); background: var(--kin); }
.l3 { left: 72%; animation-duration: 17s; animation-delay: 2s; }
.l4 { left: 88%; animation-duration: 21s; animation-delay: 8s; width: 11px; height: 11px; background: var(--hinoki-deep); }
@keyframes fall {
  0%   { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(112vh) rotate(320deg); opacity: 0; }
}

/* masthead — the approach under the gate */
.approach { text-align: center; margin-bottom: 3rem; }
.torii { width: 200px; height: auto; filter: drop-shadow(0 12px 16px rgba(120, 40, 25, 0.28)); }
.seal { display: block; margin: 0.6rem 0 0.2rem; color: var(--seal); letter-spacing: 0.2em; }
.wordmark {
  margin: 0.1rem 0 0;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sumi);
}
.tagline {
  margin: 0.6rem auto 0;
  max-width: 34ch;
  color: var(--sumi-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* omikuji */
.omikuji { text-align: center; margin-bottom: 3rem; }
.draw {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: inherit; font-size: 0.95rem;
  cursor: pointer;
  color: var(--washi-raised);
  background: var(--vermilion);
  border: 1px solid var(--vermilion-deep);
  padding: 0.7rem 1.3rem;
  border-radius: 3px;
  box-shadow: var(--shadow);
  transition: transform 0.16s ease, background 0.16s ease;
}
.draw:hover { transform: translateY(-2px); background: var(--vermilion-bright); }
.draw:focus-visible { outline: 3px solid var(--kin); outline-offset: 3px; }
.draw .bell { width: 20px; height: 20px; }
.draw:disabled { cursor: default; opacity: 0.5; transform: none; }
.draw:disabled:hover { transform: none; background: var(--vermilion); }

.slip { min-height: 1px; margin: 1.2rem auto 0; max-width: 320px; }
.slip .paper {
  background: var(--washi-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--vermilion);
  border-radius: 2px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--shadow);
  animation: unfurl 0.4s ease;
}
.slip .grade {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif CJK JP", serif;
  font-size: 2rem;
  color: var(--vermilion);
  margin: 0 0 0.1rem;
  line-height: 1;
}
.slip .grade small { display: block; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sumi-soft); font-family: ui-monospace, monospace; margin-top: 0.35rem; }
@keyframes unfurl {
  0% { transform: scaleY(0.2); opacity: 0; transform-origin: top; }
  100% { transform: scaleY(1); opacity: 1; }
}
/* colophon — a small votive plaque hung at the shrine's edge */
.colophon { text-align: center; margin-top: 2.5rem; }
.colophon a {
  color: var(--sumi-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.colophon a:hover { color: var(--vermilion); border-color: var(--vermilion); }
.colophon a:focus-visible { outline: 3px solid var(--kin); outline-offset: 3px; border-color: transparent; }

/* light/dark toggle — same mechanism as the shrine's sister site, vermilion here */
.theme-toggle {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 10;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
  color: var(--vermilion);
  background: var(--washi-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform 0.16s ease;
}
.theme-toggle:hover { transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 3px solid var(--kin); outline-offset: 3px; }
.theme-toggle svg { width: 22px; height: 22px; }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 420px) {
  .wordmark { font-size: 2.1rem; }
  .sando { padding-top: 2.2rem; }
}