/* ============ RATING — polish layer over styles.css ============ */

/* ---- The box: living border, 3D entrance, aurora, tilt, reactions ---- */
@property --rx-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.rx .rating-shell {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  isolation: isolate;
  background: #FBEEF1;
  border-color: transparent;
  perspective: 1200px;
}
/* rotating conic ring, 2px wide, under the shell */
.rx .rating-shell::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: calc(var(--radius-xl) + 2px);
  background: conic-gradient(from var(--rx-a), var(--rose) 0%, var(--peach) 28%, rgba(217, 108, 138, 0.15) 48%, var(--rose-soft) 70%, var(--rose) 100%);
  opacity: 0.85;
}
.rx .rating-shell.is-live::before { animation: rx-spin 9s linear infinite; }
@keyframes rx-spin { to { --rx-a: 360deg; } }
/* soft halo that breathes behind it */
.rx .rating-shell::after {
  content: '';
  position: absolute;
  inset: -1.2rem;
  z-index: -2;
  border-radius: calc(var(--radius-xl) + 1.2rem);
  background: radial-gradient(60% 55% at 50% 40%, rgba(217, 108, 138, 0.28), transparent 70%);
  filter: blur(14px);
  opacity: 0.7;
}
.rx .rating-shell.is-live::after { animation: rx-halo 5.5s ease-in-out infinite alternate; }
@keyframes rx-halo {
  from { opacity: 0.45; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.05); }
}

/* entrance */
.rx .rating-shell {
  opacity: 0;
  transform: translate3d(0, 70px, 0) rotateX(16deg) scale(0.94);
  transform-origin: 50% 100%;
}
.rx .rating-shell.is-in {
  opacity: 1;
  transform: none;
  transition: transform 1.15s var(--ease-out-strong), opacity 0.6s ease;
}
.rx .rating-shell.is-in .star-btn { animation: rx-star-in 0.7s var(--ease-spring) both; }
.rx .rating-shell.is-in .star-btn:nth-child(1) { animation-delay: 0.45s; }
.rx .rating-shell.is-in .star-btn:nth-child(2) { animation-delay: 0.53s; }
.rx .rating-shell.is-in .star-btn:nth-child(3) { animation-delay: 0.61s; }
.rx .rating-shell.is-in .star-btn:nth-child(4) { animation-delay: 0.69s; }
.rx .rating-shell.is-in .star-btn:nth-child(5) { animation-delay: 0.77s; }
@keyframes rx-star-in {
  from { opacity: 0; transform: scale(0.4) rotate(-40deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* the card tilts toward the touched star */
.rx .rating-card {
  position: relative;
  overflow: hidden;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.55s var(--ease-out-strong);
  will-change: transform;
}
.rx .rating-card > * { position: relative; z-index: 1; }

/* aurora: three blurred blobs drifting inside the card */
.rx-aurora {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.rx-aurora i {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.55;
}
.rx-aurora i:nth-child(1) { left: -20%; top: -30%; background: rgba(232, 160, 176, 0.75); }
.rx-aurora i:nth-child(2) { right: -25%; top: 10%; background: rgba(242, 196, 179, 0.8); }
.rx-aurora i:nth-child(3) { left: 20%; bottom: -35%; background: rgba(246, 220, 227, 0.95); }
.rx .rating-shell.is-live .rx-aurora i:nth-child(1) { animation: rx-drift-a 13s ease-in-out infinite alternate; }
.rx .rating-shell.is-live .rx-aurora i:nth-child(2) { animation: rx-drift-b 17s ease-in-out infinite alternate; }
.rx .rating-shell.is-live .rx-aurora i:nth-child(3) { animation: rx-drift-c 15s ease-in-out infinite alternate; }
@keyframes rx-drift-a { to { transform: translate3d(40%, 30%, 0) scale(1.15); } }
@keyframes rx-drift-b { to { transform: translate3d(-35%, 45%, 0) scale(0.9); } }
@keyframes rx-drift-c { to { transform: translate3d(30%, -40%, 0) scale(1.2); } }

/* reactions colour the ring and halo for a moment */
.rx .rating-shell.is-glad::before { opacity: 1; filter: saturate(1.4) brightness(1.08); transition: filter 0.3s ease; }
.rx .rating-shell.is-glad::after { opacity: 1; background: radial-gradient(60% 55% at 50% 40%, rgba(217, 108, 138, 0.6), transparent 70%); }
.rx .rating-shell.is-sad::before { filter: saturate(0.25) brightness(0.9); transition: filter 0.5s ease; }
.rx .rating-shell.is-sad::after { opacity: 0.2; }
.rx .rating-shell.is-sad .rating-card { filter: saturate(0.7); transition: filter 0.6s ease; }

/* ribbon once she has rated */
.rx-ribbon {
  position: absolute;
  top: 1.35rem;
  right: -2.6rem;
  z-index: 3;
  padding: 0.28rem 3rem;
  background: linear-gradient(145deg, var(--rose), var(--maroon-soft));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgba(110, 36, 54, 0.6);
  transform: rotate(45deg) translate3d(0, -140%, 0);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-strong), opacity 0.3s ease;
  pointer-events: none;
}
.rx .rating-shell.is-rated .rx-ribbon { transform: rotate(45deg); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rx .rating-shell::before, .rx .rating-shell::after, .rx-aurora i { animation: none !important; }
  .rx .rating-shell.is-in .star-btn { animation: none; }
  .rx .rating-card { transform: none; transition: none; }
}

/* bigger stars, a fill that runs left → right, a glow under lit ones */
.stars { gap: 0.55rem; padding: 0.4rem 0; }
.star-shape { width: 2.85rem; height: 2.85rem; }
.star-btn { transition: transform 0.35s var(--ease-spring); }
.star-btn:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .stars:not(.locked) .star-btn:hover { transform: scale(1.14); }
}
.star-btn svg { stroke-width: 1.35; }
.star-fill { transition: clip-path 0.28s var(--ease-out-strong); }
.star-btn:nth-child(2).on .star-fill, .star-btn:nth-child(2).half .star-fill { transition-delay: 45ms; }
.star-btn:nth-child(3).on .star-fill, .star-btn:nth-child(3).half .star-fill { transition-delay: 90ms; }
.star-btn:nth-child(4).on .star-fill, .star-btn:nth-child(4).half .star-fill { transition-delay: 135ms; }
.star-btn:nth-child(5).on .star-fill, .star-btn:nth-child(5).half .star-fill { transition-delay: 180ms; }
.star-shape::before {
  content: '';
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 108, 138, 0.38), transparent 62%);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out-strong);
  pointer-events: none;
}
.star-btn.on .star-shape::before,
.star-btn.half .star-shape::before { opacity: 1; transform: scale(1); }
.stars.locked .star-btn.on .star-shape::before,
.stars.locked .star-btn.half .star-shape::before {
  animation: star-glow 3s ease-in-out infinite alternate;
}
@keyframes star-glow {
  from { opacity: 0.55; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.12); }
}

/* loading shimmer instead of "Loading…" */
.rating-state.is-loading {
  color: transparent;
  position: relative;
  overflow: hidden;
  width: 11rem;
  height: 1.1rem;
  margin: 1.2rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 108, 138, 0.1) 25%, rgba(217, 108, 138, 0.22) 50%, rgba(217, 108, 138, 0.1) 75%);
  background-size: 200% 100%;
  animation: rate-shimmer 1.4s linear infinite;
}
@keyframes rate-shimmer { to { background-position: -200% 0; } }

/* today's score, once she has rated */
.rate-today {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
}
.rate-today[hidden] { display: none; }
.rate-today-num {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--ink) 20%, var(--rose) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.rate-today-num small {
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0;
}
.rate-today-lbl {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.rate-today.is-in .rate-today-num { animation: rate-num-in 0.7s var(--ease-out-strong) both; }
@keyframes rate-num-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

/* countdown ring */
.reset-ring {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border-radius: 999px;
  background: rgba(217, 108, 138, 0.07);
  border: 1px solid rgba(217, 108, 138, 0.16);
}
.reset-ring[hidden] { display: none; }
.reset-ring svg {
  --p: 0;
  width: 2.1rem;
  height: 2.1rem;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.rr-track { fill: none; stroke: rgba(217, 108, 138, 0.16); stroke-width: 3; }
.rr-fill {
  fill: none;
  stroke: var(--rose);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p));
  transition: stroke-dashoffset 1s linear;
}
.rr-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}
.rr-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rr-text strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}

/* confirm: the number gets big, with a mood word */
.rate-big {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.rate-big strong {
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--rose);
  font-variant-numeric: tabular-nums;
}
.rate-mood {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.rate-confirm.show .rate-big strong { animation: rate-num-in 0.5s var(--ease-out-strong) both; }
.rate-confirm-text { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
.rate-confirm-yes:hover { transform: none; }
.rate-confirm-no:hover { transform: none; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .rate-confirm-yes:hover { transform: translateY(-2px); }
  .rate-confirm-no:hover { background: var(--rose-mist); }
}

/* the "rated" popup: check draws itself, ring expands */
.rated-badge::after {
  content: '';
  position: absolute;
  inset: -0.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--rose-soft);
  opacity: 0;
}
.modal.show .rated-badge::after { animation: rated-ring 1.1s var(--ease-out-strong) 0.2s; }
@keyframes rated-ring {
  from { opacity: 0.8; transform: scale(0.7); }
  to { opacity: 0; transform: scale(1.5); }
}
.rated-check { stroke-dasharray: 26; stroke-dashoffset: 26; }
.modal.show .rated-check { animation: rated-draw 0.5s var(--ease-out-strong) 0.3s forwards; }
@keyframes rated-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rating-state.is-loading { animation: none; }
  .stars.locked .star-btn.on .star-shape::before { animation: none; }
  .rate-today.is-in .rate-today-num,
  .rate-confirm.show .rate-big strong { animation: none; }
  .rated-check { stroke-dashoffset: 0; }
}