/* FX / game feel (todo decorativo) + movimiento reducido */
/* ==================== FX / GAME FEEL ==================== */
/* capas de partículas (canvas) + capa DOM para elementos fx (estela, combo, trayectoria) */
.fxCanvas { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.fxCanvasFixed { position: fixed; inset: 0; pointer-events: none; z-index: 80; }
#fxLayer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: visible; }

/* sombra de suelo bajo las pelotas (pseudo-elemento, no fuerza layout) */
.piece.pball::before {
  content: ''; position: absolute; left: 16%; right: 16%; bottom: 3px; height: 9px;
  border-radius: 50%; background: rgba(46,66,38,.28); filter: blur(2.5px);
  transition: transform .15s, opacity .15s;
}
.piece.air::before { transform: scale(.6); opacity: .5; }

/* squash & stretch al arrancar/frenar cada paso */
.piece.glide .cardOnCell { animation: glideWob .28s ease-out; }
@keyframes glideWob {
  0%   { transform: scale(1.14,.84); }
  55%  { transform: scale(.94,1.07); }
  100% { transform: scale(1); }
}
.piece .cardOnCell { filter: drop-shadow(0 2px 2px rgba(60,80,40,.16)); }

/* semi-hundida en el búnker (estado persistente) */
.piece.sunk .cardOnCell { transform: translateY(10%) scale(.88); filter: saturate(.85) drop-shadow(0 1px 1px rgba(60,80,40,.12)); }
.piece.sunk::after {
  content: ''; position: absolute; left: 7%; right: 7%; bottom: 2%; height: 30%;
  background: var(--cell-sand); border-radius: 45% 45% 38% 38%;
  box-shadow: inset 0 3px 4px rgba(120,90,30,.4), 0 -1px 2px rgba(255,240,200,.6);
}
.piece.sunk::before { opacity: 0; }

/* portal: succión / expulsión con glow */
.piece.warp .cardOnCell { filter: drop-shadow(0 0 9px rgba(158,132,255,.95)) brightness(1.18); }
.piece.warpOut .cardOnCell { animation: warpOut .24s ease-in forwards; }
@keyframes warpOut { to { transform: scale(.08) rotate(210deg); } }
.piece.warpIn .cardOnCell { animation: warpIn .28s cubic-bezier(.3,1.5,.5,1); }
@keyframes warpIn { from { transform: scale(.08) rotate(-190deg); } to { transform: scale(1) rotate(0); } }

/* caída del tablero: rueda hacia fuera */
.piece.falling .cardOnCell { animation: fallRoll .34s ease-in forwards; }
@keyframes fallRoll { to { transform: rotate(215deg) scale(.72); } }

/* reaparición con drop-in y rebote */
.piece.dropping .cardOnCell { animation: dropIn .46s cubic-bezier(.3,1.4,.5,1); }
@keyframes dropIn {
  0%   { transform: translateY(-58%) scale(.72); }
  55%  { transform: translateY(3%)  scale(1.05,.9); }
  80%  { transform: translateY(-2%) scale(.97,1.04); }
  100% { transform: translateY(0)   scale(1); }
}

/* embocar: espiral de succión hacia el centro */
.piece.sinking .cardOnCell { animation: sinkSpin .42s cubic-bezier(.55,.1,.75,.4) forwards; }
@keyframes sinkSpin {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(.78) rotate(120deg); }
  100% { transform: scale(.04) rotate(320deg); }
}

/* golpe seco: sacudida del tablero (2-3 px) */
#boardArea.shake { animation: shakeX .3s linear; }
@keyframes shakeX {
  0%, 100% { transform: translate(0,0); }
  18% { transform: translate(-3px,1px); } 36% { transform: translate(3px,-1px); }
  54% { transform: translate(-2px,-1px); } 72% { transform: translate(2px,1px); }
  88% { transform: translate(-1px,0); }
}

/* flash del tablero (NO / rebobinado) */
#boardFlash { position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: rgba(235,245,255,.92); /* plano */
  opacity: 0; border-radius: 12px; }
#boardFlash.go { animation: flashGo .48s ease-out; }
@keyframes flashGo { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.piece.rewind .cardOnCell { animation: rewindWob .42s ease-in-out; }
@keyframes rewindWob {
  0%, 100% { transform: rotate(0) scale(1); filter: hue-rotate(0); }
  30% { transform: rotate(-7deg) scale(1.08); filter: hue-rotate(160deg) brightness(1.3); }
  65% { transform: rotate(5deg) scale(.96); filter: hue-rotate(160deg) brightness(1.15); }
}

/* escena del menú: animación ambiental (colores planos, sin barrido de luz) */
.mClouds { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-22px); } to { transform: translateX(30px); } }
.mFlag { transform-box: fill-box; transform-origin: left center; animation: wave 2s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(7deg) scaleX(.93); } }
.mShine { animation: shimmer 3.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { opacity: .3; transform: translateX(0); } 50% { opacity: .75; transform: translateX(26px); } }
.mTree { transform-box: fill-box; transform-origin: bottom center; animation: sway 5s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.4deg); } }
.mBallMenu { animation: ballBob 2.6s ease-in-out infinite; }
@keyframes ballBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* (la transición entre pantallas la pone showScreen en src/ui/screens.js) */

/* editor: flash al colocar/borrar */
.cell.edFlash { animation: edFlash .38s ease-out; z-index: 2; }
@keyframes edFlash {
  0% { outline: 3px solid var(--hl); box-shadow: 0 0 16px rgba(255,171,46,.9); }
  100% { outline: 3px solid transparent; box-shadow: 0 0 0 rgba(255,171,46,0); }
}

/* zoom sutil del tablero al embocar */
#boardArea.zoomPulse { animation: zoomPulse .6s cubic-bezier(.3,1.3,.5,1); }
@keyframes zoomPulse { 0% { transform: scale(1); } 40% { transform: scale(1.045); } 100% { transform: scale(1); } }
/* zoom + sacudida breve en el slam de JAQUE */
#boardArea.zoomShake { animation: zoomShake .42s cubic-bezier(.3,1.2,.5,1); }
@keyframes zoomShake {
  0% { transform: scale(1) translate(0,0); }
  30% { transform: scale(1.03) translate(-2px,1px); }
  55% { transform: scale(1.035) translate(2px,-1px); }
  100% { transform: scale(1) translate(0,0); }
}

/* estela: aparece detrás de la pieza según avanza y se quita uno a uno al acabar */
.trailDot {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  margin: -5px 0 0 -5px; opacity: .55; box-shadow: 0 1px 3px rgba(46,74,78,.25);
  animation: trailIn .22s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes trailIn { from { opacity: 0; transform: scale(.2); } }
.trailDot.out { animation: trailOut .22s ease-in forwards; }
@keyframes trailOut { to { opacity: 0; transform: scale(.2); } }

/* texto flotante de combo en colisiones encadenadas */
.comboText {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 20px; font-weight: 900; color: var(--mustard);
  -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 3px 0 var(--ink);
  animation: comboRise .85s cubic-bezier(.3,1.3,.5,1) forwards; white-space: nowrap;
}
@keyframes comboRise {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%,-80%) scale(1.15) rotate(2deg); }
  70% { opacity: 1; transform: translate(-50%,-140%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-190%) scale(.85); }
}

/* vista previa de la jugada: styles/features.css (#previewSvg) */

/* animaciones de reposo (idle): pelotas respiran, hoyo hace de baliza */
#pieces.idle .piece.pball:not(.sunk) .cardOnCell { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
#pieces.idle .piece.sunk .cardOnCell { animation: breatheF 2.6s ease-in-out infinite; }
@keyframes breatheF { 0%,100% { filter: saturate(.85) brightness(1); } 50% { filter: saturate(.9) brightness(1.12); } }
#pieces.idle .piece.phole:not(.sunk) .cardOnCell { animation: holeBeacon 2.8s ease-in-out infinite; }
@keyframes holeBeacon {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,208,107,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(255,208,107,.95)); }
}

/* etiqueta ⏪ del rebobinado */
#rewindTag {
  position: absolute; top: 8px; left: 8px; z-index: 9; pointer-events: none;
  background: rgba(39,68,75,.92); color: #fff; font-size: 13px; font-weight: 900;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .5px; opacity: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
#rewindTag.go { animation: rewindTag .7s ease-out; }
@keyframes rewindTag { 0% { opacity: 0; transform: translateY(-8px); } 20% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; } 100% { opacity: 0; } }
.piece.rewindFx .cardOnCell { animation: rewindHue .34s linear; }
@keyframes rewindHue {
  0% { filter: hue-rotate(0) blur(1px); }
  50% { filter: hue-rotate(140deg) saturate(1.6) blur(1px); }
  100% { filter: hue-rotate(0) blur(0); }
}

/* movimiento reducido: elimina lo decorativo, conserva lo funcional */
@media (prefers-reduced-motion: reduce) {
  .mClouds, .mFlag, .mShine, .mTree, .mBallMenu, .mTitle,
  .cell.selectable, .cell.selectable-out,
  #jaque.visible, #winOverlay.visible .box, .piece.glide .cardOnCell,
  .turnPulse, #boardArea.zoomPulse, #boardArea.zoomShake,
  .card.ctaJaque, .jaqueCtaTag, #endTurnBtn.ctaEndTurn,
  #pieces.idle .piece .cardOnCell, .piece.rewindFx .cardOnCell { animation: none !important; }
  #gameScreen, #editorScreen, #storyScreen, .lvlBtn, .card.dealIn { animation-duration: .01s !important; }
}

/* ==================== ajustes de la dirección de arte "club de golf aéreo" ====================
   (sobrescriben los de arriba; las animaciones de movimiento se mantienen) */
.piece.pball::before { display: none; }                 /* la bola ya lleva su sombra plana diagonal */
.piece .cardOnCell { filter: none; }
.piece.warp .cardOnCell { filter: drop-shadow(0 0 8px rgba(45,79,124,.9)) brightness(1.1); }
.piece.sunk .cardOnCell { filter: saturate(.9); }
.piece.sunk::after { background: var(--sand); box-shadow: inset 0 2px 0 var(--sand-hi); border-radius: 50% 50% 40% 40%; }
#boardFlash { background: rgba(241,241,220,.85); }
.cell.edFlash { animation: edFlashSoft .35s var(--ease-out); }
@keyframes edFlashSoft { from { box-shadow: inset 0 0 0 3px var(--accent); } to { box-shadow: inset 0 0 0 0 transparent; } }
.trailDot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 1.2px 3.6px var(--shadow); }
.comboText {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  -webkit-text-stroke: 0; text-shadow: none;
  background: var(--cream); padding: 4px 12px; border-radius: 999px; box-shadow: 0 2.4px 7.2px var(--shadow);
  animation: comboSoft .85s var(--ease-out) forwards;
}
@keyframes comboSoft {
  0% { opacity: 0; transform: translate(-50%, -30%); }
  20% { opacity: 1; transform: translate(-50%, -90%); }
  75% { opacity: 1; transform: translate(-50%, -120%); }
  100% { opacity: 0; transform: translate(-50%, -150%); }
}
#rewindTag {
  display: flex; align-items: center; gap: 6px;
  background: rgba(36,36,36,.86); color: var(--cream); font-size: 12px; font-weight: 500; letter-spacing: .12em;
  box-shadow: 0 2.4px 7.2px var(--shadow);
}
#pieces.idle .piece.phole:not(.sunk) .cardOnCell { animation: none; }

/* caída del tablero: el tramo del borde por el que sale la pieza destella y una onda sale hacia fuera */
.edgeFall { position: absolute; width: var(--len); height: 6px; margin: -3px 0 0 calc(var(--len) / -2); border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ec) 30%, #fff) 30%, color-mix(in srgb, var(--ec) 30%, #fff) 70%, transparent);
  box-shadow: 0 0 10px 3px var(--ec), 0 0 22px 6px color-mix(in srgb, var(--ec) 55%, transparent);
  animation: edgeFall .75s cubic-bezier(.2,.8,.3,1) both; }
.edgeFall[data-dir="left"], .edgeFall[data-dir="right"] { width: 6px; height: var(--len); margin: calc(var(--len) / -2) 0 0 -3px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ec) 30%, #fff) 30%, color-mix(in srgb, var(--ec) 30%, #fff) 70%, transparent); }
@keyframes edgeFall { 0% { opacity: 0; scale: .2 1; } 22% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: 1.35 .5; } }
.edgeFall[data-dir="left"], .edgeFall[data-dir="right"] { animation-name: edgeFallV; }
@keyframes edgeFallV { 0% { opacity: 0; scale: 1 .2; } 22% { opacity: 1; scale: 1 1; } 100% { opacity: 0; scale: .5 1.35; } }
/* onda: media luna que se abre hacia dentro del tablero desde el punto de caída */
.edgeRipple { position: absolute; width: var(--len); height: var(--len); margin: calc(var(--len) / -2) 0 0 calc(var(--len) / -2);
  border-radius: 50%; border: 2.5px solid var(--ec); pointer-events: none; opacity: 0;
  animation: edgeRipple .8s .05s ease-out both; }
.edgeRipple[data-dir="up"] { clip-path: inset(50% 0 0 0); }
.edgeRipple[data-dir="down"] { clip-path: inset(0 0 50% 0); }
.edgeRipple[data-dir="left"] { clip-path: inset(0 0 0 50%); }
.edgeRipple[data-dir="right"] { clip-path: inset(0 50% 0 0); }
@keyframes edgeRipple { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.25); } }
.edgeFall.still { animation: edgeFallStill .6s ease-out both; }
@keyframes edgeFallStill { 0% { opacity: 1; } 100% { opacity: 0; } }
/* resplandor del color de la pieza que entra desde el borde de la caída */
.edgeGlow { position: absolute; pointer-events: none; mix-blend-mode: screen; animation: edgeGlow .8s ease-out both; }
.edgeGlow[data-dir="up"] { left: 0; top: 0; width: var(--bw); height: var(--depth);
  background: radial-gradient(ellipse calc(var(--depth) * 1.3) var(--depth) at var(--fx) 0, color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="down"] { left: 0; top: calc(var(--bh) - var(--depth)); width: var(--bw); height: var(--depth);
  background: radial-gradient(ellipse calc(var(--depth) * 1.3) var(--depth) at var(--fx) 100%, color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="left"] { left: 0; top: 0; width: var(--depth); height: var(--bh);
  background: radial-gradient(ellipse var(--depth) calc(var(--depth) * 1.3) at 0 var(--fx), color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
.edgeGlow[data-dir="right"] { left: calc(var(--bw) - var(--depth)); top: 0; width: var(--depth); height: var(--bh);
  background: radial-gradient(ellipse var(--depth) calc(var(--depth) * 1.3) at 100% var(--fx), color-mix(in srgb, var(--ec) 75%, transparent), transparent 100%); }
@keyframes edgeGlow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.edgeGlow.still { animation-duration: .6s; }

/* ---------- agua ---------- */
/* flotando en el río: se hunde un poco, se mece y deja un aro de agua alrededor */
.piece.swimming .cardOnCell { animation: swimBob .9s ease-in-out infinite; filter: saturate(.85) brightness(1.05) drop-shadow(0 0 0 transparent); }
.piece.swimming::after { content: ''; position: absolute; left: 50%; top: 56%; width: 70%; aspect-ratio: 2.2; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(160,220,240,.28); z-index: 0; animation: swimRing .9s ease-in-out infinite; pointer-events: none; }
@keyframes swimBob { 0%, 100% { transform: translateY(6%) scale(.86) rotate(-6deg); } 50% { transform: translateY(10%) scale(.84) rotate(6deg); } }
@keyframes swimRing { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .7; } }
.piece.climbOut .cardOnCell { animation: climbOut .36s cubic-bezier(.3,1.5,.5,1); }
@keyframes climbOut { from { transform: translateY(10%) scale(.84); } }
/* chapuzón en el lago: se hunde girando */
.piece.splashing .cardOnCell { animation: splashIn .42s ease-in forwards; }
@keyframes splashIn { 30% { transform: translateY(-8%) scale(1.04); } 100% { transform: translateY(18%) scale(.2) rotate(40deg); opacity: 0; } }
.splashRing { position: absolute; width: 20px; height: 10px; margin: -5px 0 0 -10px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.9);
  pointer-events: none; animation: splashRing .75s ease-out both; }
@keyframes splashRing { from { transform: scale(.5); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
html.reduceMotion .piece.swimming .cardOnCell, html.reduceMotion .piece.swimming::after { animation: none; }
/* casillas de agua como destino: se quedan de agua, con un aro */
.cell.water.selectable { animation: none; box-shadow: inset 0 0 0 2.5px rgba(241,241,220,.9); }
.cell.river.selectable { background-color: #6FC3E0; } .cell.lake.selectable { background-color: #3A93A2; }
.piece.swimming .cardOnCell { z-index: 1; }
/* chapuzón más sutil: se hunde sin girar y el aro no se sale de la casilla */
.piece.splashing .cardOnCell { animation: splashIn .38s ease-in forwards; }
/* al tocar el agua se aplasta un poco, se tiñe del agua del lago y se hunde girando apenas */
@keyframes splashIn {
  0% { transform: none; filter: none; }
  18% { transform: translateY(2%) scale(1.08, .9); filter: none; }
  55% { transform: translateY(7%) scale(.72) rotate(6deg); filter: saturate(.5) brightness(.85) hue-rotate(-20deg); opacity: .85; }
  100% { transform: translateY(14%) scale(.3) rotate(10deg); filter: saturate(.2) brightness(.7); opacity: 0; }
}
.piece.splashing .cardOnCell { animation-duration: .44s; animation-timing-function: cubic-bezier(.4,0,.7,.6); }
.splashRing { width: 16px; height: 8px; margin: -4px 0 0 -8px; border-width: 1.5px; border-color: rgba(255,255,255,.7); animation-duration: .6s; }
@keyframes splashRing { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }

/* ---------- minigolf ---------- */
.cell.woodHit .woodPic { animation: woodHit .26s ease-out; }
@keyframes woodHit { 30% { transform: translate(1.5px, -1px) rotate(1.5deg); } 60% { transform: translate(-1px, 1px) rotate(-1deg); } }
.piece.flying { z-index: 30; }
.piece.flying .cardOnCell { filter: drop-shadow(0 3px 2px rgba(20,40,20,.25)); } /* la sombra real va por el suelo (.flyShadow) */
.tunnelFx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 8; }
.tfArrow { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .25; transition: opacity .06s, transform .12s; }
.tfArrow[data-dir="up"] { left: -9px; top: -44px; border-bottom: 12px solid #F6E2BE; border-top: 0; }
.tfArrow[data-dir="down"] { left: -9px; top: 32px; border-top: 12px solid #F6E2BE; border-bottom: 0; }
.tfArrow[data-dir="left"] { left: -40px; top: -9px; border-right: 12px solid #F6E2BE; border-left: 0; }
.tfArrow[data-dir="right"] { left: 28px; top: -9px; border-left: 12px solid #F6E2BE; border-right: 0; }
.tfArrow.on { opacity: 1; }
.tfArrow.pick { transform: scale(1.5); filter: drop-shadow(0 0 6px #E8873A); }
.tfArrow.pick[data-dir="up"] { border-bottom-color: #E8873A; } .tfArrow.pick[data-dir="down"] { border-top-color: #E8873A; }
.tfArrow.pick[data-dir="left"] { border-right-color: #E8873A; } .tfArrow.pick[data-dir="right"] { border-left-color: #E8873A; }
.tunnelFx.out { opacity: 0; transition: opacity .3s; }
/* palo iridiscente: estela y brillo de colores que cambian */
.trailDot.iri { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 8px 2px rgba(200,170,255,.6);
  background: conic-gradient(#FF8FC4, #FFE38A, #7EE8C8, #8FB6FF, #C39BFF, #FF8FC4); opacity: .95;
  animation: trailIn .22s cubic-bezier(.3,1.6,.5,1) both, iriDot 1.6s linear infinite; }
.trailDot.iri.out { animation: trailOut .22s ease-in forwards, iriDot 1.6s linear infinite; }
@keyframes iriDot { to { filter: hue-rotate(360deg); } }
.piece.iriRun .cardOnCell { filter: drop-shadow(0 0 6px #FF8FC4) drop-shadow(0 0 10px #8FB6FF); animation: iriGlow .5s linear infinite; }
@keyframes iriGlow { to { filter: drop-shadow(0 0 6px #7EE8C8) drop-shadow(0 0 10px #C39BFF); } }
/* lanzadera: la madera se comprime al lanzar, sombra en el suelo durante el vuelo y aro al aterrizar */
.cell.lPop .woodPic { animation: lPop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes lPop { 30% { transform: scale(.86); } }
/* lanzadera desactivada hasta el final del turno: apagada y algo hundida */
.cell.lOff .woodPic { filter: grayscale(.85) brightness(.82); opacity: .6; transform: scale(.9); transition: filter .4s, opacity .4s, transform .4s; }
.cell.wood .woodPic { transition: filter .4s, opacity .4s, transform .4s; }
.flyShadow { position: absolute; width: calc(var(--cell-w) * .5); height: calc(var(--cell-w) * .22); margin: calc(var(--cell-w) * -.11 + 6px) 0 0 calc(var(--cell-w) * -.25);
  border-radius: 50%; background: rgba(14,32,14,.75); filter: blur(1.5px); pointer-events: none; z-index: 1; }
.splashRing.land { border-color: rgba(241,241,220,.8); animation-duration: .5s; }
.splashRing.wide { border-width: 1px; border-color: rgba(255,255,255,.5); animation-duration: .8s; animation-name: splashWide; }
@keyframes splashWide { from { transform: scale(.8); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.splashRing.calm { border-width: 1px; border-color: rgba(220,245,250,.45); animation-duration: 1.3s; animation-name: splashCalm; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
@keyframes splashCalm { from { transform: scale(.4); opacity: .7; } to { transform: scale(2.8); opacity: 0; } }