/* Motion: staged entrances. Magic UI: border beam and shimmer button.
   Original CSS implementation; references are documented in docs/animation.md. */
@property --kira-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

html { color-scheme: dark; }
[hidden] { display: none !important; }
body {
  position: relative;
  isolation: isolate;
  padding-top: clamp(16px, 5vh, 48px);
  background: radial-gradient(ellipse at 50% 14%, #29164066, transparent 48%), #090a11;
}
body::before {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 32% 23%, #6544b41f, transparent 32%),
    radial-gradient(ellipse at 67% 49%, #237aae12, transparent 30%);
  animation: ambient-drift 22s ease-in-out infinite alternate;
}
.app-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #17121f, #10131d 80%);
  border-color: #9470d04a;
  box-shadow: 0 25px 75px #0006, 0 0 55px #8656dd10;
  transform-style: preserve-3d;
  transition: transform 450ms ease, box-shadow 450ms ease;
}
.card-trace {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--kira-beam-angle), transparent 0deg 245deg,
    #8c63d780 280deg, #e4ccff 308deg, #70c7ff80 327deg, transparent 353deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-journey 12s linear infinite;
}
.header {
  position: relative;
  overflow: hidden;
  padding-top: 28px;
  padding-bottom: 24px;
  background: linear-gradient(150deg, #251039, #171126 75%);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, #c99cff1c, transparent 57%);
  animation: portrait-light 8s ease-in-out infinite alternate;
}
.avatar-wrap { margin-bottom: 18px; }
.avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid #ad85e64f;
  border-top-color: #e6d2ff;
  border-bottom-color: #7dbbdb66;
  border-radius: 50%;
  animation: portrait-orbit 20s linear infinite;
  pointer-events: none;
}
.avatar { border-width: 2px; box-shadow: 0 0 28px #c290ee22; }
.avatar-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 9px;
  right: -10px;
  background: #e4cdff;
  box-shadow: 0 0 10px #bb8fff80;
  transform: rotate(45deg);
  animation: gem-breathe 5s ease-in-out infinite;
  pointer-events: none;
}
.avatar-sparkle.second { top: auto; right: auto; bottom: 8px; left: -10px; width: 4px; height: 4px; animation-delay: -2.5s; }
.live-badge { animation: status-breathe 3.6s ease-in-out infinite; font-size: 8px; }
.name {
  position: relative;
  background-image: linear-gradient(100deg, #be8ff7 12%, #f1dbff 46%, #a97ae7 70%, #be8ff7 100%);
  background-size: 240% 100%;
  animation: name-light 18s ease-in-out infinite;
}
.tagline { position: relative; color: #bda2df; font-size: 10px; letter-spacing: 2.7px; }
.countdown-label { color: #cab2ec; font-size: 10px; letter-spacing: 2px; }
.timer-cell { min-width: 0; }
.timer-digit {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #20182e, #10121d 75%);
  border-color: #9260d253;
  box-shadow: inset 0 1px 0 #e4cdff0c;
  font-variant-numeric: tabular-nums;
  perspective: 400px;
}
.timer-digit::after {
  content: '';
  position: absolute;
  left: 15%; right: 15%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a17ada88, transparent);
}
.digit-value { display: inline-block; min-width: 2ch; backface-visibility: hidden; }
.timer-label { color: #9b96ad; font-size: 9px; }
.date-row { border: 1px solid #cba9ff0a; color: #b5afc5; }
.status-row { background: #182a243a; color: #82d4b6; }
.dot { animation: status-breathe 3.6s ease-in-out infinite; }
.btn {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 250ms ease, filter 250ms ease;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, #ffffff38 49%, transparent 68%);
  transform: translateX(-140%);
  animation: button-shine 8s ease-in-out infinite;
}
.btn > span { position: relative; z-index: 1; }
.btn > span:first-child { transition: transform 250ms ease; }
.btn:hover { filter: brightness(1.09); transform: translateY(-2px); }
.btn:hover > span:first-child { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible, .motion-toggle:focus-visible { outline: 2px solid #e8d6ff; outline-offset: 4px; }
.motion-toggle {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 12px auto -8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  color: #a39aae;
  background: transparent;
  font: 10px/1.5 'Inter', system-ui, sans-serif;
  cursor: pointer;
}
.motion-toggle:hover { color: #e4d7f4; background: #ffffff05; }
.motion-toggle::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #b08cd7; }
.motion-toggle[aria-pressed='true']::before { background: #78727f; }
.live-mode { background: linear-gradient(145deg, #ef444418, #aa51f011); border-color: #ef999955; }
.live-mode .live-text { color: #f1a6b2; }
.live-mode .live-title { color: #fff0f7; }

@keyframes border-journey { to { --kira-beam-angle: 360deg; } }
@keyframes portrait-orbit { to { transform: rotate(360deg); } }
@keyframes ambient-drift { to { transform: translate3d(3%, 2%, 0) scale(1.04); } }
@keyframes portrait-light { to { opacity: .45; transform: scale(1.12); } }
@keyframes gem-breathe { 50% { opacity: .45; transform: rotate(45deg) scale(.65); } }
@keyframes status-breathe { 50% { opacity: .7; } }
@keyframes name-light { 50% { background-position: 100% 50%; } }
@keyframes button-shine { 0%, 62% { transform: translateX(-140%); } 86%, 100% { transform: translateX(140%); } }

html[data-kira-motion='off'] *, html[data-kira-motion='off'] *::before, html[data-kira-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-kira-paused='true'] *, html[data-kira-paused='true'] *::before, html[data-kira-paused='true'] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 360px) {
  .body { padding: 17px; }
  .timer-grid { gap: 6px; }
  .timer-digit { font-size: 26px; padding-inline: 2px; }
  .btn { font-size: 13px; letter-spacing: .7px; padding-inline: 12px; }
  .tagline { letter-spacing: 2px; }
}