/* ================================================
   日々の香 — 香そのものの見た目
   本体ページ（/hibinoka/）と埋め込み（/hibinoka/embed/）で共有する。
   ここには「香がどう見えるか」だけを書く。
   ページの余白・並び・モーダルは各ページ側に置く。
================================================ */

:root {
  --coil-color: #ADB574; /* デフォルト: 新緑色（1〜2月）。app.js が月ごとに上書きする */
}

/* ── 本体の螺旋 ────────────────────────── */

#incense-svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: block;
  overflow: visible;
}

#coil-unburned {
  stroke: var(--coil-color, #ADB574);
  stroke-width: 16;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

#coil-ash {
  stroke: #2A1A0A;
  stroke-width: 16;
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

#coil-heat {
  stroke: rgba(255, 140, 50, 0.42);
  stroke-width: 18;
  fill: none;
  stroke-linecap: round;
}

/* 螺旋に沿う日付テキスト。色は app.js が月ごとに上書きする */
#spiral-text {
  fill: #D4B89A;
}

.hour-dot {
  fill: #6A6050;
}

.hour-label {
  font-family: 'Zen Maru Gothic', serif;
  font-size: 10px;
  fill: #6A6050;
  letter-spacing: 0.05em;
}

/* 印（しるし）の帯 */
.mark-band {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* ── 火種 ──────────────────────────────── */

.ember-halo {
  fill: rgba(220, 40, 0, 0.18);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ember-red {
  fill: rgba(255, 50, 0, 0.70);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ember-orange {
  fill: rgba(255, 150, 20, 0.90);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ember-yellow {
  fill: #FFDD60;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ember-core {
  fill: #FEFCEE;
}

/* ── 煙 ────────────────────────────────── */

.smoke-wisp {
  fill: url(#smoke-grad);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: smoke-rise var(--dur, 3s) var(--del, 0s) ease-out infinite;
  animation-fill-mode: backwards; /* delay中は0%フレームを適用→opacity:0で非表示 */
  will-change: transform, opacity; /* GPU合成レイヤーに昇格してCPU負荷を軽減 */
}

@keyframes smoke-rise {
  0%   { transform: translate(0, 0)                                  scale(0.55) rotate(0deg);   opacity: 0;    }
  8%   { transform: translate(0, -10px)                              scale(0.60) rotate(0deg);   opacity: 0.80; }
  20%  { transform: translate(calc(var(--dx, 10px) * 0.20), -40px)  scale(0.80) rotate(-3deg);  opacity: 0.65; }
  45%  { transform: translate(calc(var(--dx, 10px) * 0.50), -130px) scale(1.40) rotate(3deg);   opacity: 0.40; }
  72%  { transform: translate(calc(var(--dx, 10px) * 0.82), -260px) scale(2.50) rotate(8deg);   opacity: 0.18; }
  100% { transform: translate(var(--dx, 10px), -400px)              scale(3.80) rotate(15deg);  opacity: 0;    }
}

/* GPU合成コスト削減: レイヤー昇格を抑え、フレーム補間を間引く */
.smoke-wisp {
  will-change: auto;
  animation-timing-function: steps(30);
}

/* ── ミニ香（年間カレンダーの1巻） ──────── */

.cal-row {
  display: flex;
  gap: 1px;
  margin-bottom: 1px;
}

.cal-cell {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.cal-spiral {
  width: 100%;
  height: 100%;
  display: block;
}

.mini-unburned {
  stroke: var(--coil-color, #ADB574);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: butt;
}

.mini-ash {
  stroke: #2A1A0A;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: butt;
}

.mini-ember {
  fill: #FF8C40;
}