/* SpotRedeem liquid glass: shared layer.
 * Tokens live in :root in styles.css. Load this file AFTER styles.css (and
 * after auth.css) on every page so it can restyle the legacy surfaces. */

:root {
  /* Layer stacks: specular highlight over translucent fill over a dark tint.
   * The tint keeps text contrast stable wherever the ambient glow is brightest. */
  --glass-surface: var(--glass-highlight), linear-gradient(var(--glass-bg), var(--glass-bg)), linear-gradient(var(--glass-tint), var(--glass-tint));
  --glass-surface-strong: var(--glass-highlight), linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)), linear-gradient(var(--glass-tint), var(--glass-tint));
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -14px 20px -16px rgba(0, 0, 0, 0.55);
  --glass-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Cheaper blur on small screens. */
@media (max-width: 639.98px) {
  :root { --glass-blur: 12px; }
}

/* ===================== Ambient background ===================== */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
  will-change: transform;
}
.blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blob) 0%, transparent 100%);
  will-change: transform;
  animation: glass-drift 78s ease-in-out infinite alternate;
}
.blob--green  { --blob: var(--ambient-green);  --dx: -9vmax;  --dy: -7vmax; right: -22vmax; bottom: -26vmax; }
.blob--teal   { --blob: var(--ambient-teal);   --dx: 10vmax;  --dy: 8vmax;  left: -24vmax; top: -24vmax; animation-duration: 66s; animation-delay: -20s; }
.blob--violet { --blob: var(--ambient-violet); --dx: 8vmax;   --dy: -9vmax; left: 14vw; bottom: -38vmax; width: 60vmax; height: 60vmax; animation-duration: 92s; animation-delay: -35s; }
@keyframes glass-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(var(--dx), var(--dy), 0) scale(1.12); }
}
/* Static grain: never animated. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--glass-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ===================== Blurred glass surfaces ===================== */
:is(.glass, .site-header, .redeem-card, .auth-card, .toast) {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--glass-radius-lg);
  background: var(--glass-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-shadow), var(--glass-edge);
}
:is(.glass--strong, .site-header, .redeem-card, .auth-card, .toast) {
  background: var(--glass-surface-strong);
}

/* 1px gradient border (bright top-left, fading bottom-right). */
:is(.glass, .site-header, .redeem-card, .auth-card, .toast)::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(135deg, var(--glass-border-hi) 0%, var(--glass-border) 38%, var(--glass-border-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Soft specular sheen near the top edge. */
:is(.glass, .site-header, .redeem-card, .auth-card, .toast)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(55% 70% at 38% 0%, var(--glass-sheen) 0%, transparent 58%);
  transition: transform 0.35s var(--glass-ease), opacity 0.35s var(--glass-ease);
}

/* Interactive variant: transform and opacity only. */
.glass--interactive {
  cursor: pointer;
  transition: transform 0.22s var(--glass-ease);
}
.glass--interactive:hover,
.glass--interactive:focus-visible { transform: translate3d(0, -2px, 0); }
.glass--interactive:hover::after,
.glass--interactive:focus-visible::after { transform: translate3d(8%, 0, 0); }
.glass--interactive:active { transform: scale(0.98); }
.glass--interactive:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sticky floating header */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 40;
  width: min(calc(100% - 2 * var(--pad)), var(--maxw));
  margin: 12px auto 0;
}
.site-header .header-inner { max-width: none; min-height: 58px; padding-inline: clamp(14px, 3vw, 22px); }

.toast { border-radius: var(--glass-radius-md); }

/* ===================== Flat glass (no blur) =====================
 * Small and repeated surfaces use the same look without a backdrop-filter,
 * so the number of simultaneous blur layers stays low. */
:is(.card, .dash-card, .skeleton, .empty, details, .glass--flat) {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.glass--flat { -webkit-backdrop-filter: none; backdrop-filter: none; }
.empty { border-style: dashed; }
details[open] { border-color: var(--glass-border-hi); }
.eyebrow, .badge {
  background: var(--glass-surface-strong);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.site-footer {
  background: var(--glass-surface);
  border-top: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Nested glass never stacks blurs: inner items get a plain translucent fill. */
:is(.glass, .site-header, .redeem-card, .auth-card, .toast) :is(.glass, .glass--flat, .card, .skeleton, .empty, details, .result) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--glass-bg-inner);
  box-shadow: none;
}
.result { background: var(--glass-bg-inner); border-color: var(--glass-border); border-radius: var(--glass-radius-md); }
.cred   { background: var(--glass-input-bg); border-color: var(--glass-border); border-radius: var(--glass-radius-sm); }

/* ===================== Dashboard components ===================== */
.dash-input { background: var(--glass-input-bg); border-color: var(--glass-border); transition: none; }
.dash-input::placeholder { color: var(--text-muted); opacity: 1; }
.dash-reveal { background: var(--glass-input-bg); border-color: var(--glass-border); border-radius: var(--glass-radius-sm); }
.dash-signout,
.dash-btn-quiet,
.dash-anchors a,
.dash-badge { background: var(--glass-bg-strong); border-color: var(--glass-border); transition: none; }
.dash-detail { border-radius: var(--glass-radius-lg); }

/* ===================== Hero, inputs, buttons ===================== */
.hero { overflow: visible; }
.hero::before { display: none; }

.key-input { background: var(--glass-input-bg); border-color: var(--glass-border); transition: none; }
.key-input::placeholder { color: var(--text-muted); opacity: 1; }

/* Only transform and opacity may animate. */
.btn { transition: transform 0.2s var(--glass-ease), opacity 0.2s ease; }
.btn-ghost { background: var(--glass-bg-strong); border-color: var(--glass-border); }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
summary { transition: none; }
.skip-link { transition: none; }

/* Skeleton shimmer moves a pseudo-element with transform instead of background-position. */
.skeleton-bar { position: relative; overflow: hidden; background: var(--glass-bg-strong); animation: none; }
.skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--glass-sheen), transparent);
  transform: translate3d(-100%, 0, 0);
  animation: glass-shimmer 1.5s ease-in-out infinite;
}
@keyframes glass-shimmer { to { transform: translate3d(100%, 0, 0); } }

/* ===================== Optional lensing (large panels only) =====================
 * Needs: Chromium (glass.js sets .has-lens), a wide fine-pointer device, and
 * url() support in backdrop-filter. Never applied to scrolling elements. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  @supports ((-webkit-backdrop-filter: url(#glass-refraction)) or (backdrop-filter: url(#glass-refraction))) {
    .has-lens :is(.redeem-card, .auth-card, .glass--lens) {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) url(#glass-refraction);
      backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) url(#glass-refraction);
    }
  }
}

/* ===================== Fallbacks and accessibility ===================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.glass, .site-header, .redeem-card, .auth-card, .toast) {
    background: var(--glass-highlight), linear-gradient(var(--glass-fallback), var(--glass-fallback));
  }
}

@media (prefers-reduced-motion: reduce) {
  .blob, .skeleton-bar::after, .toast { animation: none; }
  .glass--interactive,
  .glass--interactive::after { transition: none; }
  .glass--interactive:hover,
  .glass--interactive:focus-visible,
  .glass--interactive:active,
  .glass--interactive:hover::after,
  .glass--interactive:focus-visible::after { transform: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root :is(.glass, .site-header, .redeem-card, .auth-card, .toast) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--surface-2);
    border-color: var(--text-muted);
    box-shadow: none;
  }
  :root :is(.glass, .site-header, .redeem-card, .auth-card, .toast)::before,
  :root :is(.glass, .site-header, .redeem-card, .auth-card, .toast)::after { display: none; }
  :is(.card, .dash-card, .skeleton, .empty, details, .glass--flat, .eyebrow, .badge, .site-footer) {
    background: var(--surface-2);
    border-color: var(--text-muted);
    box-shadow: none;
  }
  .ambient { display: none; }
}