/* Glassmorphism surfaces + the clear↔frosted signature animation.
   CWV rule: the frost layer keeps a CONSTANT backdrop-filter and animates
   ONLY opacity (GPU-composited, zero layout shift). Never animate blur(). */

/* --- Glass card ------------------------------------------------------- */
.glass-card {
  background: var(--frost-2);
  border: 1px solid var(--pane-border-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-pane);
  padding: var(--space-3);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass-card {
    background: var(--pane);
    -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(1.4);
    backdrop-filter: blur(var(--pane-blur)) saturate(1.4);
  }
}

.glass-card--strong { background: var(--pane-strong); }

/* --- Switchable pane (the product, as UI) ------------------------------ */
.glass-pane {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  border: 1px solid var(--pane-border);
  box-shadow: var(--shadow-float);
  isolation: isolate;
}
.glass-pane > img, .glass-pane > picture img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Frost overlay: constant blur, opacity-only switch */
.frost-layer {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(255,255,255,.30) 0%, rgba(233,244,250,.42) 100%),
    var(--frost-milk);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  opacity: 1;
  transition: opacity var(--switch-ms) var(--ease-glass);
  pointer-events: none;
}
.glass-pane.is-clear .frost-layer { opacity: 0; }

/* No backdrop-filter support: milky solid fallback still demos the idea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .frost-layer { background: rgba(240, 247, 252, 0.93); }
}

/* Real photo pair mode: top image = frosted state photo, fades out when clear */
.pair-top {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity var(--switch-ms) var(--ease-glass);
  pointer-events: none;
}
.pair-top img, .pair-top picture, .pair-top picture img { width: 100%; height: 100%; object-fit: cover; }
.glass-pane.is-clear .pair-top { opacity: 0; }

/* Subtle glass edge highlight */
.glass-pane::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.18);
  pointer-events: none;
}

/* State chip shown on the pane */
.pane-state {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  font-size: var(--fs-200);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--deep-800);
  background: var(--pane-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pane-border);
  border-radius: 999px;
  padding: .35rem .8rem;
}
.pane-state::before {
  content: "FROSTED · PRIVATE";
}
.glass-pane.is-clear .pane-state::before {
  content: "CLEAR · OPEN VIEW";
}

/* --- The wall switch (toggle control) ---------------------------------- */
.glass-switch {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-weight: 700;
  font-size: var(--fs-300);
  color: var(--deep-800);
  background: var(--pane-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--pane-border);
  border-radius: 999px;
  padding: .5rem .65rem .5rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-pane);
  transition: box-shadow .25s var(--ease-glass);
}
.glass-switch:hover { box-shadow: var(--shadow-float); }
.glass-switch .track {
  position: relative;
  width: 58px; height: 30px;
  border-radius: 999px;
  background: var(--ice-300);
  transition: background var(--switch-ms) var(--ease-glass);
  flex: none;
}
.glass-switch .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(19, 36, 46, .25);
  transition: transform var(--switch-ms) var(--ease-glass);
}
.glass-switch[aria-pressed="true"] .track { background: var(--glass-500); }
.glass-switch[aria-pressed="true"] .knob { transform: translateX(28px); }

/* --- Scroll reveals ----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-glass), transform .7s var(--ease-glass);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

/* --- Frosted divider band ------------------------------------------------ */
.frost-band {
  background: linear-gradient(180deg, rgba(227,241,248,0) 0%, rgba(207,230,242,.55) 50%, rgba(227,241,248,0) 100%);
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .frost-layer, .glass-switch .knob, .glass-switch .track { transition-duration: 1ms; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}