/* ÆŠA · The Wheel of the Year — page styles for the Sacred Calendar
   (loads after css/styles.css; uses its custom properties) */

/* ───────────────────────── layout ───────────────────────── */

.wheel-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  gap:2rem;
  align-items:center;
  margin:2.4rem auto 0;
  max-width:1080px;
  text-align:left;
}

.wheel-stage{
  position:relative;
  min-width:0;
}

.wheel-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  animation:wheel-breathe 11s ease-in-out infinite;
}

@keyframes wheel-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.01); }
}

/* ─────────────────────── the rings ─────────────────────── */

.wheel-ground{
  fill:none;
  stroke:var(--line-2);
  stroke-width:0.8;
}

.wheel-month{
  fill:rgba(216,175,90,0.05);
  stroke:rgba(216,175,90,0.4);
  stroke-width:0.9;
  cursor:pointer;
  outline:none;
  transition:fill .35s ease, stroke .35s ease, filter .35s ease;
}
.wheel-month.m-odd{ fill:rgba(216,175,90,0.1); }
.wheel-month:hover,
.wheel-month:focus-visible{
  fill:rgba(216,175,90,0.22);
  stroke:var(--ember-hi);
  filter:drop-shadow(0 0 7px rgba(216,175,90,0.55));
}
.wheel-month.sel{
  fill:rgba(212,118,42,0.24);
  stroke:var(--ember-hi);
}
.wheel-month.today{
  fill:rgba(212,118,42,0.18);
  stroke:var(--flame-hi);
}

.mlabel{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:0.16em;
  fill:var(--ember);
  pointer-events:none;
  user-select:none;
}
.mlabel.today{ fill:var(--flame-hi); }

/* the Gatha wedge */
.wheel-gatha{
  fill:rgba(91,15,15,0.4);
  stroke:rgba(216,175,90,0.5);
  stroke-width:0.9;
  cursor:pointer;
  outline:none;
  transition:fill .35s ease, stroke .35s ease, filter .35s ease;
}
.wheel-gatha:hover,
.wheel-gatha:focus-visible,
.wheel-gatha.sel{
  fill:rgba(122,31,6,0.55);
  stroke:var(--ember-hi);
  filter:drop-shadow(0 0 7px rgba(216,175,90,0.55));
}
.wheel-gatha.today{ stroke:var(--flame-hi); }
.gatha-tick{
  stroke:rgba(216,175,90,0.35);
  stroke-width:0.7;
  pointer-events:none;
}
.glabel{
  font-family:var(--serif);
  font-style:italic;
  font-size:11px;
  letter-spacing:0.08em;
  fill:var(--ember-hi);
  pointer-events:none;
  user-select:none;
}

/* the thirty day-cells */
.wheel-day{
  fill:rgba(216,175,90,0.04);
  stroke:rgba(216,175,90,0.26);
  stroke-width:0.8;
  cursor:pointer;
  outline:none;
  transition:fill .3s ease, stroke .3s ease, filter .3s ease;
}
.wheel-day:hover,
.wheel-day:focus-visible{
  fill:rgba(216,175,90,0.2);
  stroke:var(--ember-hi);
  filter:drop-shadow(0 0 6px rgba(216,175,90,0.5));
}
.wheel-day.sel{
  fill:rgba(212,118,42,0.26);
  stroke:var(--ember-hi);
}
.wheel-day.today{
  fill:url(#emberGrad);
  stroke:var(--flame-hi);
  stroke-width:1.1;
  animation:ember-pulse 2.8s ease-in-out infinite;
}

@keyframes ember-pulse{
  0%,100%{ fill-opacity:0.55; filter:drop-shadow(0 0 4px rgba(212,118,42,0.5)); }
  50%    { fill-opacity:1;    filter:drop-shadow(0 0 12px rgba(255,179,71,0.8)); }
}

.dnum{
  font-family:var(--serif);
  font-size:13px;
  fill:var(--ash);
  pointer-events:none;
  user-select:none;
}
.dnum.today{ fill:var(--flame-hi); font-weight:600; }

/* Gāhānbār notches + Nowruz on the rim */
.gb-notch{
  fill:rgba(216,175,90,0.65);
  stroke:var(--ember-lo);
  stroke-width:0.5;
}
.nowruz-mark{
  fill:var(--flame-hi);
  stroke:var(--ember-lo);
  stroke-width:0.6;
  filter:drop-shadow(0 0 5px rgba(255,179,71,0.7));
}

/* ─────────────────────── the centre ─────────────────────── */

.cflame-outer{
  fill:rgba(216,175,90,0.14);
  stroke:var(--ember);
  stroke-width:1.1;
  filter:drop-shadow(0 0 9px rgba(216,175,90,0.45));
}
.cflame-inner{
  fill:rgba(212,118,42,0.5);
  stroke:var(--flame-hi);
  stroke-width:0.8;
  animation:flame-flicker 4.5s ease-in-out infinite;
}
@keyframes flame-flicker{
  0%,100%{ fill-opacity:0.5; }
  40%    { fill-opacity:0.85; }
  70%    { fill-opacity:0.6; }
}

.ckicker{
  font-family:var(--display);
  font-size:10px;
  letter-spacing:0.45em;
  fill:var(--flame);
}
.cname{
  font-family:var(--display);
  font-size:26px;
  letter-spacing:0.06em;
  fill:var(--ember-hi);
}
.cline{
  font-family:var(--serif);
  font-style:italic;
  font-size:16px;
  fill:var(--ash);
}
.czre{
  font-family:var(--display);
  font-size:17px;
  letter-spacing:0.14em;
  fill:var(--ember);
}
.cgreg{
  font-family:var(--serif);
  font-size:13px;
  fill:var(--smoke);
}

/* ─────────────────────── the panel ─────────────────────── */

.wheel-panel{
  border:1px solid var(--line);
  border-radius:4px;
  background:linear-gradient(160deg, rgba(27,19,12,0.85), rgba(18,13,9,0.95));
  box-shadow:0 30px 70px -45px rgba(0,0,0,0.9), inset 0 0 0 1px rgba(216,175,90,0.07);
  padding:1.5rem 1.6rem;
  min-height:21rem;
  align-self:start;
}
.wheel-panel .wp-kicker{
  font-family:var(--display);
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-size:0.66rem;
  color:var(--flame);
  margin-bottom:0.5rem;
}
.wheel-panel h3{
  font-family:var(--display);
  color:var(--ember-hi);
  font-size:1.5rem;
  margin:0 0 0.4rem;
  letter-spacing:0.04em;
}
.wheel-panel p{ margin:0.55rem 0; font-size:1.05rem; line-height:1.55; }
.wheel-panel .wp-div{
  font-style:italic;
  color:var(--ember);
}
.wheel-panel .wp-meaning{ color:var(--parch); }
.wheel-panel .wp-rule{ color:var(--smoke); font-size:0.98rem; }
.wheel-panel .wp-rule kbd{
  font-family:var(--display);
  font-size:0.72em;
  border:1px solid var(--line);
  border-radius:3px;
  padding:0 0.35em;
  color:var(--ash);
}
.wheel-panel .wp-feast{
  color:var(--parch);
  border-left:2px solid var(--flame);
  padding-left:0.8rem;
}
.wheel-panel .wp-feast b{ color:var(--flame-hi); font-family:var(--display); font-size:0.92em; letter-spacing:0.04em; }
.wheel-panel .wp-gb{
  color:var(--ash);
  border-left:2px solid var(--ember-lo);
  padding-left:0.8rem;
}
.wheel-panel .wp-gb b{ color:var(--ember); font-family:var(--display); font-size:0.92em; }
.wheel-panel .wp-today{
  color:var(--flame-hi);
  font-style:italic;
}

/* ─────────────────────── the legend ─────────────────────── */

.wheel-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem 1.6rem;
  margin:2rem auto 0.8rem;
  max-width:980px;
}
.wheel-legend .gb-lede{
  flex-basis:100%;
  font-family:var(--display);
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-size:0.66rem;
  color:var(--flame);
  margin-bottom:0.3rem;
}
.wheel-legend .gb{
  font-size:0.95rem;
  color:var(--ash);
  white-space:nowrap;
}
.wheel-legend .gb i{
  display:inline-block;
  width:14px;
  height:5px;
  margin-right:0.45em;
  background:rgba(216,175,90,0.65);
  border:1px solid var(--ember-lo);
  border-radius:2px;
  vertical-align:middle;
}
.wheel-legend .gb.nz i{
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:var(--flame-hi);
  border-radius:1px;
}
.wheel-legend .gb b{
  font-family:var(--display);
  font-weight:600;
  font-size:0.82em;
  letter-spacing:0.06em;
  color:var(--ember);
}
.wheel-legend .gb em{ color:var(--smoke); font-size:0.92em; }

/* ───────────────────── motion & mobile ───────────────────── */

@media (prefers-reduced-motion:reduce){
  .wheel-svg{ animation:none; }
  .wheel-day.today{ animation:none; fill-opacity:0.9; }
  .cflame-inner{ animation:none; }
}

@media (max-width:900px){
  .wheel-layout{
    grid-template-columns:1fr;
    gap:1.4rem;
    text-align:center;
  }
  .wheel-stage{ max-width:560px; margin:0 auto; }
  .wheel-panel{ min-height:0; text-align:left; }
  .wheel-legend .gb{ white-space:normal; }
}