/* ============================================================
   D.ROD icon - the mark, with a waiting state.

   Replaces the Sunrise spinner and the thinking avatar. The sun holds still and
   changes TEMPERATURE instead of turning: Signal-white at rest, Sunrise Gold
   while an answer is in flight, one flare when it lands. Nothing rotates.

   Rest is the production drawing exactly. The colours below were sampled out of
   the live app icon rather than taken from the package, which shipped a blue sun
   (#4BA3DC) where production has a white one.

   Load AFTER theme.css. Pair with drod-icon.js for the <drod-icon> element.
   ============================================================ */

.drod-icon {
  /* geometry */
  --size: 240px;
  --ring-w: 2px;
  --ray-w: 3px;
  --sun-y: 41%;          /* sun centre, from the top */
  --sun-d: 22%;          /* sun diameter */
  --ray-box: 64%;        /* ray field, centred on the sun */
  /* ray length 38% of the field; the inner 58% of that is empty, so the ray
     starts clear of the sun's edge. Change the gap by editing
     .drod-icon__ray > i { height } — 42.1% == a 22% gap. */
  --sea-rest: 33.33%;    /* waterline at rest — matches drod-icon.svg (y=160/240) */
  --sea-low: 31%;        /* tide trough */
  --sea-high: 39%;       /* tide crest */

  /* palette - tokens first, production hexes as fallbacks */
  --field: var(--deep-water, #1d2d3d);   /* the disc ground */
  --ring: var(--paper, #f2f2f3);         /* hairline ring: white, not steel */
  --sun: var(--paper, #f2f2f3);          /* sun + rays at rest */
  --sea: var(--signal, #1b9dd8);         /* the one blue in the mark */
  --sea-crest: color-mix(in srgb, var(--signal, #1b9dd8) 72%, white);
  /* Sunrise Gold - a STATE colour, never a brand colour. It exists so a member
     can see D.ROD is working, and it is gone the instant the answer lands. Named
     --work, not --gold: Inner Circle owns --gold as a palette token, and
     `--gold: var(--gold)` there is a self-reference cycle that silently
     resolves the whole icon to transparent. */
  --work: #f2a93b;       /* == theme.css --warn. Deliberate: same gold. */
  --work-ray: #f7c777;
  --flare: #FFD27A;      /* Flare — the 900ms arrival only */
  --flare-soft: #FFDCA8;

  /* timing */
  --shoot: 2.4s;
  --tide: 3.6s;
  --halo: 2.4s;
  --answer: 900ms;

  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background: var(--field);
  border: var(--ring-w) solid var(--ring);
}

/* ---------- sea ---------- */
.drod-icon__sea {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--sea-rest);
  background: var(--sea);
}
.drod-icon__wave {
  position: absolute;
  left: 0;
  width: 200%;
  display: block;
}
/* FIX: was top:-11px/height:20px — fixed px meant a 20px wave on a 24px icon.
   Scaled off --size so the crest stays 4% of the disc at every size. */
.drod-icon__wave--back {
  top: calc(var(--size) * -0.0458); height: calc(var(--size) * 0.0833); opacity: .5;
}
.drod-icon__wave--front {
  top: calc(var(--size) * -0.0333); height: calc(var(--size) * 0.075);
}
.drod-icon__reflection {
  position: absolute;
  left: 50%; top: 0;
  width: 9%; height: 100%;
  margin-left: -4.5%;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, var(--work-ray), transparent);
  opacity: 0;
}
.drod-icon__ripple {
  position: absolute;
  left: 50%; top: calc(var(--size) * -0.0167);
  width: 100%; height: calc(var(--size) * 0.0583);   /* FIX: was 14px flat */
  margin-left: -50%;
  border-top: max(1px, calc(var(--size) * 0.00625)) solid var(--flare-soft);
  border-radius: 50%;
  opacity: 0;
}

/* ---------- sun ---------- */
.drod-icon__halo {
  position: absolute;
  left: 50%; top: var(--sun-y);
  width: 38%; height: 38%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--work) 0%, transparent 68%);
  opacity: 0;
}
.drod-icon__sun {
  position: absolute;
  left: 50%; top: var(--sun-y);
  width: var(--sun-d); height: var(--sun-d);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sun);
}

/* ---------- rays: eight, uniform, flat-tipped, detached ---------- */
.drod-icon__rays {
  position: absolute;
  left: 50%; top: var(--sun-y);
  width: var(--ray-box); height: var(--ray-box);
  margin: calc(var(--ray-box) / -2) 0 0 calc(var(--ray-box) / -2);
  display: block;
}
.drod-icon__ray {
  position: absolute;
  left: 50%; bottom: 50%;
  width: var(--ray-w);
  margin-left: calc(var(--ray-w) / -2);
  height: 38%;
  transform-origin: 50% 100%;
}
.drod-icon__ray > i {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 42.1%;       /* leaves a clear gap between disc and ray */
  transform-origin: 50% 100%;
  background: var(--sun);
}

/* ---------- state: rest (production drawing, motionless) ---------- */
.drod-icon[data-state="rest"] .drod-icon__ray > i { background: var(--sun); }
/* FIX: the wave layers rendered at rest too, so "rest" had crests while
   drod-icon.svg ships a flat rect. Rest is now flat, matching the asset. */
.drod-icon[data-state="rest"] .drod-icon__wave { display: none; }

/* ---------- state: thinking ---------- */
.drod-icon[data-state="thinking"] .drod-icon__sun { background: var(--work); }
.drod-icon[data-state="thinking"] .drod-icon__halo {
  animation: drod-halo var(--halo) ease-in-out infinite;
}
.drod-icon[data-state="thinking"] .drod-icon__ray > i {
  background: var(--work-ray);
  animation: drod-ray-shoot var(--shoot) ease-out infinite backwards;
  animation-delay: var(--ray-delay, 0s);   /* FIX: was an inline style on <i> */
}
.drod-icon[data-state="thinking"] .drod-icon__sea {
  animation: drod-tide var(--tide) ease-in-out infinite;
}
.drod-icon[data-state="thinking"] .drod-icon__wave--front {
  animation: drod-wave 6s linear infinite;
}
.drod-icon[data-state="thinking"] .drod-icon__wave--back {
  animation: drod-wave 8.5s linear infinite;
}
.drod-icon[data-state="thinking"] .drod-icon__reflection {
  animation: drod-reflect var(--tide) ease-in-out infinite;
}

/* ---------- state: answering (once, 900ms, then cool to rest) ---------- */
.drod-icon[data-state="answering"] .drod-icon__sun {
  background: var(--flare);
  animation: drod-sun-flash var(--answer) ease-out both;
}
.drod-icon[data-state="answering"] .drod-icon__halo {
  background: radial-gradient(circle, var(--flare) 0%, transparent 66%);
  opacity: .55;
  width: 44%; height: 44%;
}
/* FIX: the per-ray stagger used to be an inline style, which no stylesheet rule
   could beat. Four of the eight rays carried a delay of 1.25-1.55s against a
   900ms burst, so they never fired at all. The delay is a custom property now,
   and the burst zeroes it — which is what the JS comment always claimed. */
.drod-icon[data-state="answering"] .drod-icon__ray > i {
  background: var(--flare-soft);
  animation: drod-ray-burst var(--answer) ease-out both;
  animation-delay: 0s;                                     /* all eight in sync */
}
.drod-icon[data-state="answering"] .drod-icon__ripple {
  animation: drod-ripple var(--answer) ease-out both;
}

/* ---------- keyframes ---------- */
@keyframes drod-ray-shoot {
  0%   { transform: scaleY(.32); opacity: .3 }
  18%  { opacity: 1 }
  100% { transform: scaleY(1); opacity: 0 }
}
@keyframes drod-ray-burst {
  0%   { transform: scaleY(.32); opacity: .25 }
  6%   { opacity: 1 }
  100% { transform: scaleY(1); opacity: 0 }
}
@keyframes drod-tide {
  0%, 100% { height: var(--sea-low) }
  50%      { height: var(--sea-high) }
}
@keyframes drod-wave {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }   /* exactly one period — seamless */
}
@keyframes drod-halo {
  0%, 100% { opacity: .22; transform: translate(-50%, -50%) scale(1) }
  50%      { opacity: .60; transform: translate(-50%, -50%) scale(1.3) }
}
@keyframes drod-reflect {
  0%, 100% { opacity: .16; transform: scaleY(.88) }
  50%      { opacity: .42; transform: scaleY(1.1) }
}
@keyframes drod-ripple {
  0%   { transform: scaleX(.18); opacity: .95 }
  100% { transform: scaleX(1); opacity: 0 }
}
@keyframes drod-sun-flash {
  0%   { transform: translate(-50%, -50%) scale(1) }
  34%  { transform: translate(-50%, -50%) scale(1.16) }
  100% { transform: translate(-50%, -50%) scale(1) }
}

/* ---------- reduced motion: lit, not moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .drod-icon *,
  .drod-icon *::before,
  .drod-icon *::after { animation: none !important; }
  .drod-icon[data-state="thinking"] .drod-icon__ray > i,
  .drod-icon[data-state="answering"] .drod-icon__ray > i { opacity: 1; transform: none }
  .drod-icon[data-state="thinking"] .drod-icon__halo { opacity: .4 }
  .drod-icon[data-state="thinking"] .drod-icon__reflection { opacity: .3 }
  .drod-icon[data-state="answering"] .drod-icon__ripple { opacity: 0 }
}


/* ============================================================
   SMALL SIZES
   Below ~46px the mark is fighting the pixel grid: a 2px Paper ring on a small
   circle, and 2px Paper bars rotated off-axis, are the two worst antialiasing
   cases in the drawing. Full-strength Paper is what makes the staircase
   legible, so the ring goes translucent -- same shape, far less visible edge.
   ============================================================ */
.drod-icon--sm { --ring-w: 1.5px; --ray-w: 2px; --ring: rgba(242, 242, 243, .58); }
.drod-icon--xs { --ring-w: 1px; --ray-w: 1.5px; --ring: rgba(242, 242, 243, .5); }

/* A resting mark beside a message is a DOT ON THE WATER -- no rays, smaller sun.
   Eight spokes at 34px is not eight spokes, it is a smudge, and brand.css
   already drops them below 32px (.drod-mark--sm). The rays return the moment the
   mark starts thinking, so their appearing IS the signal rather than decoration
   that happens to be moving. Scoped to [data-state="rest"] on purpose: never
   hide the rays in the state whose whole job is emitting them. */
.drod-icon--dot[data-state="rest"] { --sun-d: 16%; }
.drod-icon--dot[data-state="rest"] .drod-icon__rays { display: none; }