/* Hero ripple explorations — scaffolding for tests/ripple.html.
   Stages share one dark field so the only variable is the technique.
   Does not ship with the live page. */

.rip {
  position: relative;
  height: min(360px, 56vh);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #130F0C;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
  touch-action: none;
  cursor: crosshair;
}
.rip canvas, .rip__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 01 · CSS radial */
.rip--css {
  background:
    radial-gradient(140px 140px at var(--rx, 50%) var(--ry, 50%),
      rgba(255, 255, 255, 0.055),
      transparent 70%),
    #130F0C;
}

/* 02 · DOM orb */
.rip__orb {
  position: absolute;
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 68%);
  opacity: 0;
  transition: opacity .6s var(--ease), left .7s var(--ease), top .7s var(--ease);
  pointer-events: none;
}
.rip--dom.is-live .rip__orb { opacity: 1; }

/* 05 · pulse rings spawned in JS */
.rip__ring {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
  animation: ripPulse 1.8s var(--ease) forwards;
}
@keyframes ripPulse {
  to { transform: scale(18); opacity: 0; border-color: rgba(255,255,255,0); }
}

/* 06 · conic */
.rip--conic {
  background:
    conic-gradient(from var(--rang, 0deg) at var(--rx, 50%) var(--ry, 50%),
      rgba(255,255,255,0.05),
      transparent 18%,
      transparent 82%,
      rgba(255,255,255,0.04)),
    #130F0C;
}

/* 07 · grid */
.rip--grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 3px;
  padding: 8px;
  background: #100d0a;
}
.rip--grid i {
  display: block;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.03);
  transition: background-color .35s var(--ease);
}
.rip--grid i.is-near { background: rgba(255, 255, 255, 0.11); }

/* 08 · lagged washes */
.rip--lag { background: #130F0C; }
.rip--lag span {
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 120px at var(--rx, 50%) var(--ry, 50%),
    rgba(255, 255, 255, 0.05), transparent 70%);
  transition: background-position .0s; /* position via custom props below */
  pointer-events: none;
}
.rip--lag span:nth-child(1) { transition: opacity .4s var(--ease); opacity: .9; }
.rip--lag span:nth-child(2) {
  transition: left 0s, top 0s;
  /* left/top set in JS with delay feel via CSS vars on each span */
  background: radial-gradient(160px 160px at var(--rx, 50%) var(--ry, 50%),
    rgba(255, 255, 255, 0.035), transparent 72%);
  transition: --rx .55s var(--ease), --ry .55s var(--ease);
  opacity: .75;
}
.rip--lag span:nth-child(3) {
  background: radial-gradient(200px 200px at var(--rx, 50%) var(--ry, 50%),
    rgba(255, 255, 255, 0.025), transparent 74%);
  opacity: .55;
}

/* 10 · noise — SVG data URI, opacity masked by a radial that follows the hand */
.rip--noise {
  background: #130F0C;
}
.rip--noise::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  -webkit-mask-image: radial-gradient(130px 130px at var(--rx, 50%) var(--ry, 50%), #000 0%, transparent 72%);
  mask-image: radial-gradient(130px 130px at var(--rx, 50%) var(--ry, 50%), #000 0%, transparent 72%);
  pointer-events: none;
}

/* 11–12 · premium stages — canvas fills the field; mark the pick */
.rip--viscous,
.rip--fluid {
  background: #130F0C;
}
.rip-badge {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.12em 0.45em;
  font-style: normal;
  font-size: 0.62em;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  color: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid color-mix(in srgb, #fff 18%, transparent);
  border-radius: 999px;
}
.tsec--pick .tsec__name { color: #fff; }

/* v12 settings — live tweaks for the height-field sim */
.rip-panel {
  margin-top: var(--s-8);
  padding: var(--s-6);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, #fff 3%, transparent);
}
.rip-panel__grid {
  display: grid;
  gap: var(--s-3) var(--s-8);
}
@media (min-width: 800px) {
  .rip-panel__grid { grid-template-columns: 1fr 1fr; }
}
.rip-panel__row {
  display: grid;
  grid-template-columns: 9.5em 1fr 3.2em;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-60);
  cursor: pointer;
}
.rip-panel__row--check {
  grid-template-columns: 9.5em auto 3.2em;
}
.rip-panel__lab { color: var(--fg-50); }
.rip-panel__val {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: color-mix(in srgb, #fff 70%, transparent);
}
.rip-panel__row input[type="range"] {
  width: 100%;
  accent-color: color-mix(in srgb, #fff 55%, transparent);
}
.rip-panel__row input[type="checkbox"] {
  width: 1.05em;
  height: 1.05em;
  accent-color: color-mix(in srgb, #fff 55%, transparent);
}
.rip-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid color-mix(in srgb, #fff 8%, transparent);
}
.rip-panel__meta {
  margin-left: auto;
  font-size: var(--t-caption);
  line-height: 19.5px;
  color: var(--fg-50);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .rip__orb, .rip__ring, .rip--grid i { transition: none !important; animation: none !important; }
  .rip--css, .rip--conic, .rip--noise::after, .rip--lag span {
    background: #130F0C !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .rip--viscous canvas,
  .rip--fluid canvas { visibility: hidden; }
  .rip-panel { display: none; }
}