/* ice-ambient.css */
/* Quiet light on the existing product palette. Only background layers move. */
.ice { position: relative; isolation: isolate; }
.ice.is-theme-switching, .ice.is-theme-switching * { transition: none !important; }
.ice-ambient {
  --ambient-light: rgb(255 255 255 / .58);
  --ambient-shade: color-mix(in srgb, var(--concept-accent) 13%, transparent);
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  contain: paint;
  pointer-events: none;
}
.ice-ambient > span {
  display: block;
  position: absolute;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 72%, transparent);
}
.ice-ambient-light {
  top: -80px;
  left: -22%;
  width: 144%;
  height: 960px;
  opacity: .68;
  background: linear-gradient(112deg, transparent 23%, var(--ambient-light) 40%, transparent 58%);
  animation: ice-light-drift 26s ease-in-out infinite alternate;
}
.ice-ambient-shade {
  top: 10%;
  left: -30%;
  width: 160%;
  height: 1100px;
  opacity: .7;
  background: linear-gradient(132deg, transparent 30%, var(--ambient-shade) 49%, transparent 66%);
  animation: ice-shade-drift 34s ease-in-out -11s infinite alternate;
}
html[data-theme="dark"] .ice-ambient {
  --ambient-light: color-mix(in srgb, var(--concept-accent) 16%, transparent);
  --ambient-shade: color-mix(in srgb, var(--concept-accent) 8%, transparent);
}
@keyframes ice-light-drift {
  from { transform: translate3d(-4%, -16px, 0) rotate(-7deg); }
  to { transform: translate3d(8%, 52px, 0) rotate(-3deg); }
}
@keyframes ice-shade-drift {
  from { transform: translate3d(7%, 28px, 0) rotate(4deg); }
  to { transform: translate3d(-5%, -30px, 0) rotate(-2deg); }
}
.ice[data-ambient-state="paused"] .ice-ambient > span,
.ice[data-ambient-state="hidden"] .ice-ambient > span,
.ice:has(input:focus, dialog[open]) .ice-ambient > span,
body:has(#about-dialog[open], #ice-page-dialog[open]) .ice-ambient > span { animation-play-state: paused; }
.ice[data-ambient-state="reduced"] .ice-ambient > span { animation: none; }
.ice-footer-copy { display: flex; align-items: center; gap: 24px; min-width: 0; }
.ice .ice-footer-copy p { padding: 0; }
.ice-footer-cta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--concept-ink);
  background: color-mix(in srgb, var(--concept-ink) 7%, transparent);
  transition: background-color .16s ease;
}
.ice-footer-cta:hover { background: color-mix(in srgb, var(--concept-ink) 12%, transparent); }
.ice-footer-legal { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ice-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  color: var(--concept-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ice-footer-legal a:hover { color: var(--concept-ink); }
.ice-ambient-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--concept-muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.ice-ambient-toggle:hover:not(:disabled) { background: color-mix(in srgb, var(--concept-ink) 6%, transparent); }
.ice-ambient-toggle:focus-visible { outline: 2px solid var(--concept-accent); outline-offset: 2px; }
.ice-ambient-toggle:disabled { cursor: default; }
.ice-motion-icon { display: block; width: 9px; height: 10px; border-inline: 3px solid currentColor; }
.ice-ambient-toggle[aria-pressed="false"] .ice-motion-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.ice-ambient-toggle:disabled .ice-motion-icon { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 2px; }
@media (max-width: 820px) {
  .ice-footer-copy { gap: 16px; }
}
@media (max-width: 520px) {
  .ice-footer-copy { flex-direction: column; align-items: center; gap: 8px; padding-left: 0; width: 100%; }
  .ice-footer-legal { gap: 14px; justify-content: center; }
  .ice-ambient-toggle { margin: 0; }
  .ice-ambient-light { top: 60px; height: 880px; }
  .ice-ambient-shade { top: 25%; }
}
@media (prefers-reduced-motion: reduce) {
  .ice .ice-ambient > span { animation: none !important; }
  .ice-ambient-toggle { transition: none; }
}