/* Motion is an optional layer over the readable, working signup page. */
.winter-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(340px circle at var(--light-x, 72%) var(--light-y, 32%), #ffd89c55, transparent 72%),
    radial-gradient(260px circle at 12% 88%, #e15a8440, transparent 75%);
  mix-blend-mode: screen;
}

.night-ribbon {
  overflow: hidden;
  background: #a9442e;
  color: #fff1df;
  border-block: 1px solid #d47754;
  padding: 12px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .23em;
  white-space: nowrap;
}
.night-ribbon-track { display: flex; width: max-content; }
.night-ribbon-track span { flex: none; padding-right: 2.5rem; }

.slot-card {
  position: relative;
  isolation: isolate;
  background: radial-gradient(360px circle at var(--spot-x, 50%) var(--spot-y, 0%), #f3b48d38, transparent 65%), var(--paper);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
@media (hover: hover) and (pointer: fine) {
  .slot-card:hover { transform: translateY(-5px); border-color: #d77e60; box-shadow: 0 20px 38px #4c202625; }
  .hero-inset:hover { animation-play-state: paused; transform: rotate(-2deg) translateY(-8px) scale(1.025); }
}

.primary-button { position: relative; overflow: hidden; isolation: isolate; }
.primary-button::before {
  content: "";
  position: absolute;
  inset: -50% auto -50% -45%;
  width: 30%;
  background: linear-gradient(90deg, transparent, #ffffff55, transparent);
  transform: translateX(-200%) skewX(-23deg);
  transition: transform .65s ease;
  pointer-events: none;
}
.primary-button:hover::before { transform: translateX(600%) skewX(-23deg); }

.tabs button { position: relative; border-bottom-color: transparent !important; }
.tabs button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: #c96141;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }
#panel-roles, #panel-food { view-transition-name: signup-panel; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(signup-panel) { animation: panel-out .22s ease both; }
::view-transition-new(signup-panel) { animation: panel-in .38s cubic-bezier(.2,.8,.2,1) both; }

.fx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms);
}
.fx-reveal.is-visible { opacity: 1; transform: translateY(0); }

.toast:not([hidden]) { border-left: 3px solid #f4b486; animation: toast-in .35s cubic-bezier(.2,.8,.2,1) both; }
dialog[open] { animation: dialog-in .32s cubic-bezier(.2,.8,.2,1) both; }

.celebration { position: fixed; left: 50%; top: 50%; z-index: 1000; pointer-events: none; }
.celebration i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--spark-color);
  box-shadow: 0 0 12px var(--spark-color);
  animation: spark-out .85s cubic-bezier(.15,.7,.3,1) forwards;
}
.celebration i:nth-child(3n) { border-radius: 50%; }

@keyframes photo-breathe { from { transform: scale(1); } to { transform: scale(1.055); } }
@keyframes polaroid-float { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(-3.5deg) translateY(-7px); } }
@keyframes ribbon-run { to { transform: translateX(-50%); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(13px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes spark-out { to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-r)); } }

@media (prefers-reduced-motion: no-preference) {
  .no-view-transitions [role="tabpanel"]:not([hidden]) { animation: panel-in .38s cubic-bezier(.2,.8,.2,1) both; }
  .winter-art .hero-photo { animation: photo-breathe 13s ease-in-out infinite alternate; }
  .hero-inset { animation: polaroid-float 5s ease-in-out infinite alternate; transition: transform .35s ease; }
  .night-ribbon-track { animation: ribbon-run 30s linear infinite; }
  .intro-copy > .eyebrow, .intro-copy > h1, .intro-copy > p, .intro-actions { animation: panel-in .7s cubic-bezier(.2,.8,.2,1) both; }
  .intro-copy > h1 { animation-delay: .1s; }
  .intro-copy > p { animation-delay: .2s; }
  .intro-actions { animation-delay: .3s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .night-ribbon-track, .winter-art .hero-photo, .hero-inset, .intro-copy > *, .toast, dialog { animation: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .primary-button::before, .tabs button::after, .slot-card { transition: none !important; }
  .celebration { display: none; }
}

@media (max-width: 600px) {
  .night-ribbon { font-size: 9px; padding: 10px 0; }
  .winter-art::after { background: radial-gradient(250px circle at 75% 30%, #ffd89c44, transparent 72%); }
}