/* RÜM Stories 06 · Tropical ecléctico — animaciones propias.
   Stickers recortados que se pegan, triángulos de madera que caen, ramas a lápiz,
   número de paso encerrado a lápiz, vapor de la taza y una cuenta que se toca.
   Todo arranca cuando la página queda a la vista (.pg.is-live). */

/* Stickers de imagen (los del reel) y de texto */
.stk img { display: block; width: 100%; height: auto; opacity: 0; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(calc(var(--u) * .5) 0 0 #fff) drop-shadow(calc(var(--u) * -.5) 0 0 #fff) drop-shadow(0 calc(var(--u) * .5) 0 #fff) drop-shadow(0 calc(var(--u) * -.5) 0 #fff) drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1.2) rgba(15, 29, 46, .4)); }
.pg.is-live .stk img { animation: slap .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: var(--d, .5s); }
.pg.is-live .stk--bob img { animation: slap .55s cubic-bezier(.3, 1.6, .5, 1) var(--d, .5s) forwards, bob 3.4s ease-in-out calc(var(--d, .5s) + .7s) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(calc(var(--u) * -1.2)) rotate(-2deg); } }
.stk-tag { position: absolute; left: 50%; bottom: calc(var(--u) * -2.6); transform: translateX(-50%) rotate(-3deg); white-space: nowrap; padding: calc(var(--u) * .8) calc(var(--u) * 2.2); border-radius: 99px; background: #fff; color: var(--ink);
  font: italic 400 calc(var(--u) * 3.4)/1 var(--serif); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 1) rgba(15, 29, 46, .3); opacity: 0; }
.pg.is-live .stk-tag { animation: fadeUp .4s ease calc(var(--d, .5s) + .35s) forwards; }
.stk-pill { display: inline-block; padding: calc(var(--u) * 1.2) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 2); background: #fff; color: var(--ink); white-space: nowrap;
  font: 800 calc(var(--u) * 6)/1 var(--display); letter-spacing: -.03em; text-transform: uppercase; box-shadow: 0 calc(var(--u) * .9) calc(var(--u) * 1.4) rgba(15, 29, 46, .38); opacity: 0; }
.stk-pill--terra { background: var(--terra); color: #fff; }
.stk-pill--serif { font: italic 400 calc(var(--u) * 7.4)/1 var(--serif); text-transform: none; letter-spacing: 0; }
.pg.is-live .stk-pill { animation: slap .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: var(--d, .5s); }

/* Triángulos de madera pintada que se desprenden */
.tris { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.tris i { position: absolute; top: -5%; left: var(--x); width: var(--s); height: calc(var(--s) * .88); background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0; }
.pg.is-live .tris i { animation: fall var(--t) linear var(--dl) infinite; }
.tris--burst i { top: 56%; animation: none !important; }
.pg.is-win .tris--burst i { animation: fall var(--t) ease-out var(--dl) 1 !important; }

/* Ramas a lápiz de «¿De dónde sale?» */
.ramas svg .tx2 { fill: var(--peach); stroke: none; font: 800 7px var(--display); letter-spacing: .04em; text-transform: uppercase; text-anchor: middle; opacity: 0; }
.pg.is-live .ramas svg .tx2 { animation: fadeUp .5s ease calc(1.2s + var(--k, 0) * .25s) forwards; }
.ramas svg .fr { stroke: var(--peach); stroke-width: 1.8; }
.ramas svg .fr2 { stroke: #cfe0d2; stroke-width: 1.1; }
.pg.is-live .ramas svg .fr, .pg.is-live .ramas svg .fr2 { animation-delay: calc(.9s + var(--k, 0) * .25s) !important; }

/* Número de paso, encerrado a lápiz */
.paso { position: absolute; left: var(--px); top: var(--pt); z-index: 3; margin: 0; color: var(--paper); }
.paso b { position: relative; z-index: 1; display: block; width: calc(var(--u) * 24); height: calc(var(--u) * 24); text-align: center; font: 800 calc(var(--u) * 17)/calc(var(--u) * 24) var(--display); color: var(--peach); text-shadow: 0 2px 10px rgba(0, 0, 0, .55); transform: scale(.4) rotate(-14deg); opacity: 0; }
.pg.is-live .paso b { animation: stamp2 .6s cubic-bezier(.3, 1.5, .5, 1) .1s forwards; }
@keyframes stamp2 { to { transform: none; opacity: 1; } }
.paso-ring { position: absolute; left: calc(var(--u) * -2); top: calc(var(--u) * -2); width: calc(var(--u) * 28); height: calc(var(--u) * 28); overflow: visible; z-index: 2; }
.paso-ring path { fill: none; stroke: var(--paper); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.pg.is-live .paso-ring path { animation: draw .9s var(--ease) .25s forwards; }
.paso span { display: block; max-width: 17ch; margin-top: calc(var(--u) * 1.5); font: 800 calc(var(--u) * 6.6)/1.05 var(--display); letter-spacing: -.03em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(calc(var(--u) * 2)); }
.pg.is-live .paso span { animation: pasoIn .6s var(--ease) .7s forwards; }
@keyframes pasoIn { to { opacity: 1; transform: none; } }

/* Vapor de la taza */
.steam { position: absolute; z-index: 2; left: calc(var(--u) * var(--x, 70)); top: calc(var(--u) * var(--t, 6)); width: calc(var(--u) * var(--w, 20)); height: calc(var(--u) * 16); transform: translateX(-50%); pointer-events: none; }
.steam svg { width: 100%; height: 100%; overflow: visible; }
.steam path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.pg.is-live .steam path { animation: steamUp 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -1.05s + 1.2s); }
@keyframes steamUp { 0% { stroke-dashoffset: 1; opacity: 0; transform: translateY(8px); } 25% { opacity: .8; } 70% { stroke-dashoffset: 0; opacity: .6; } 100% { stroke-dashoffset: 0; opacity: 0; transform: translateY(-14px); } }

/* Cuenta que se toca: «¿cuántos pasos ya tienes?» */
.cuenta-intro { margin: 0 0 1em; font: italic 400 1.15em/1.3 var(--serif); color: var(--terra); }
.cuenta { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 1.6); }
.cuenta button { width: 100%; display: grid; grid-template-columns: calc(var(--u) * 8) 1fr; gap: calc(var(--u) * 3); align-items: center; text-align: left; padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border: 1.5px solid rgba(15, 29, 46, .35); border-radius: calc(var(--u) * 3); background: rgba(255, 255, 255, .45); color: var(--ink); font: 400 .95em/1.3 var(--sans); transition: background .25s, transform .25s var(--ease), border-color .25s; }
.cuenta button b { font-weight: 700; }
.cuenta button:active { transform: scale(.98); }
.cuenta .tick { position: relative; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.cuenta .tick::after { content: ""; position: absolute; left: 30%; top: 12%; width: 26%; height: 50%; border: solid var(--terra); border-width: 0 3px 3px 0; transform: rotate(40deg) scale(0); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.cuenta button[aria-pressed="true"] { background: #fff; border-color: var(--terra); }
.cuenta button[aria-pressed="true"] .tick { border-color: var(--terra); }
.cuenta button[aria-pressed="true"] .tick::after { transform: rotate(40deg) scale(1); }
.cuenta-n { margin: calc(var(--u) * 4) 0 0; font: 800 calc(var(--u) * 7)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.cuenta-n small { display: block; margin-top: calc(var(--u) * 1.4); font: italic 400 calc(var(--u) * 4.6)/1.2 var(--serif); letter-spacing: 0; color: var(--terra); min-height: 1.2em; }
.pg.is-win .cuenta-n { color: var(--terra); }

@media (prefers-reduced-motion: reduce) {
  .stk img, .stk-pill, .stk-tag, .paso b, .paso span { opacity: 1 !important; animation: none !important; transform: none; }
  .paso-ring path, .steam path { animation: none !important; stroke-dashoffset: 0; opacity: 1; }
  .tris { display: none; }
}