/* =============================================================================
   demo.css — la demo del invitado: la cámara de Brinddi adentro del celular dibujado y el muro
   en vivo donde cae cada foto. Va con js/demo.js (BrinddiDemo.montar) y la usan la portada
   (index.html, en el héroe) y demo.html. Una sola fuente: no se copia en cada página.

   CARGA, en el <head> y después de css/publico.css (usa sus tokens --p-curva-* y el .tel):
     css/marca.css → css/publico.css → css/demo.css → css/app.css → css/cascara.css

   QUÉ TRAE ESTE ARCHIVO
     · La pantalla del invitado ([data-ui].tel-app adentro de un .tel): el evento arriba, el
       visor con los momentos, el aviso "Subiendo tus recuerdos…" y abajo la miniatura, el
       obturador y el modo. Todo en puntos del .tel (calc(n * var(--pt))).
     · El muro en vivo ([data-ui].muro): la barra con el contador split-flap y el QR, las
       polaroids (.pol) y la caja del logo (.logo-box, la usa el jingle de la portada).
     · El vuelo de la foto (.fly) y el personaje posado (.perch), con su salto (.body.pop).
     · Los movimientos: el visor que se abre como obturador (.shutter), el latido del
       obturador hasta el primer toque y el contador que da la vuelta.
   QUÉ PONE CADA PÁGINA: el tamaño y el lugar del muro, del .tel y del .perch, el escenario
   (el coral) y las entradas. El muro mide 16:9 salvo que la página diga otra cosa.
   ============================================================================= */

/* ---------- el personaje posado: recibe cada foto con un guiño y suelta el confeti ---------- */
.perch{position:relative;display:block;flex:none;line-height:0;border-radius:12px;-webkit-tap-highlight-color:transparent;cursor:pointer}
.perch .body{display:block;transform-origin:50% 100%;transition:translate 220ms var(--p-curva-sale)}
@media (hover:hover){.perch:hover .body{translate:0 -4px}}
.perch .body.pop{animation:demoPop .6s var(--p-curva-sale)}
@keyframes demoPop{0%{transform:scale(1)}25%{transform:scale(1.08,.88)}60%{transform:scale(.96,1.06)}100%{transform:scale(1)}}

/* ---------- la pantalla del invitado: la cámara de Brinddi, adentro del celular (.tel, css/publico.css).
   Todo en puntos de un iPhone de 393 (calc(n * var(--pt))), así se ve igual en el celular grande del
   escritorio y en el chico del celular. Arriba el evento, en el medio el visor con los momentos y
   abajo la miniatura, el obturador y el modo, como la cámara de un teléfono ---------- */
[data-ui].tel-app{display:flex;flex-direction:column}
[data-ui] .cam-top{flex:none;display:flex;align-items:center;gap:calc(12 * var(--pt));padding:calc(10 * var(--pt)) calc(20 * var(--pt)) calc(14 * var(--pt))}
[data-ui] .cam-mono{flex:none;display:grid;place-items:center;width:calc(44 * var(--pt));height:calc(44 * var(--pt));border-radius:50%;box-shadow:inset 0 0 0 calc(2 * var(--pt)) var(--coral);
  font-size:calc(16 * var(--pt));font-weight:600;letter-spacing:.02em}
[data-ui] .cam-ttl{font-weight:600;font-size:calc(21 * var(--pt));line-height:1.15}
[data-ui] .cam-ttl small{display:block;font-weight:400;font-size:calc(15 * var(--pt));color:var(--texto-2)}
/* el fondo del visor, antes de que cargue la foto, es la tinta profunda */
[data-ui] .view{position:relative;flex:1 1 auto;min-height:0;margin:0 calc(10 * var(--pt));border-radius:calc(26 * var(--pt));overflow:hidden;background:var(--tinta-profunda)}
[data-ui] .view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-ui] .view .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
[data-ui] .chips{position:absolute;left:calc(12 * var(--pt));top:calc(12 * var(--pt));display:flex;gap:calc(7 * var(--pt));z-index:2}
[data-ui] .chip{font-size:calc(15 * var(--pt));font-weight:500;line-height:1;padding:calc(9 * var(--pt)) calc(13 * var(--pt));border-radius:999px;background:var(--tinta-profunda);color:var(--blanco-tibio);
  border:0;white-space:nowrap;transition:background-color 180ms ease,color 180ms ease}
[data-ui] .chip[aria-pressed="true"]{background:var(--coral);color:var(--tinta-profunda)}
/* los chips del visor se ven chicos, pero se tocan en 44 px de alto (DESIGN.md §8). El blanco arranca
   en el borde de arriba del visor y baja: centrado en el chip, el visor (overflow:hidden) le cortaba la
   parte de arriba y en el celular chico quedaba en 37 px */
[data-ui] .chips .chip{position:relative}
[data-ui] .chips .chip::after{content:"";position:absolute;left:0;right:0;top:calc(-12 * var(--pt));height:max(44px,calc(100% + 12 * var(--pt)))}
[data-ui] .view .toast{position:absolute;left:calc(10 * var(--pt));right:calc(10 * var(--pt));bottom:calc(10 * var(--pt));background:var(--tinta-profunda);border-radius:calc(14 * var(--pt));
  padding:calc(11 * var(--pt)) calc(14 * var(--pt));font-size:calc(15 * var(--pt));line-height:1.3;display:flex;flex-direction:column;gap:calc(8 * var(--pt));opacity:0;transform:translateY(8px);z-index:2;
  transition:opacity 240ms ease,transform 240ms var(--p-curva-sale)}
[data-ui] .view .toast.on{opacity:1;transform:none}
[data-ui] .view .bar{height:calc(5 * var(--pt));border-radius:4px;background:var(--superficie);overflow:hidden}
[data-ui] .view .bar i{display:block;height:100%;width:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)}
[data-ui] .ctrl{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(20 * var(--pt)) calc(34 * var(--pt)) calc(34 * var(--pt))}
[data-ui] .thumb{width:calc(52 * var(--pt));height:calc(52 * var(--pt));border-radius:calc(12 * var(--pt));overflow:hidden;background:var(--superficie);box-shadow:0 0 0 calc(2 * var(--pt)) var(--blanco-tibio)}
[data-ui] .thumb img{width:100%;height:100%;object-fit:cover}
[data-ui] .shoot{position:relative;width:calc(82 * var(--pt));height:calc(82 * var(--pt));border-radius:50%;box-shadow:inset 0 0 0 calc(4 * var(--pt)) var(--blanco-tibio);display:grid;place-items:center;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
[data-ui] .shoot span{width:calc(66 * var(--pt));height:calc(66 * var(--pt));border-radius:50%;background:var(--blanco-tibio);transition:transform 140ms var(--p-curva-sale),background-color 180ms ease}
/* el obturador se dibuja a escala, pero se toca en 44 px como mínimo (el celular chico lo deja en 42) */
[data-ui] .shoot::after{content:"";position:absolute;inset:min(0px,calc(41 * var(--pt) - 22px));border-radius:50%}
[data-ui] .shoot:active span{transform:scale(.86)}
@media (hover:hover){
  [data-ui] .shoot:not([aria-disabled="true"]):hover span{transform:scale(.93)}
  [data-ui] .chip[aria-pressed="false"]:hover{background:var(--superficie-2)}
}
[data-ui] .shoot[aria-disabled="true"] span{transform:scale(.86);background:var(--texto-2)}
/* la pista para probar la demo es visual (DESIGN.md §8b): un anillo coral late alrededor del
   obturador hasta el primer toque. Con "reducir movimiento" queda quieto. */
[data-ui] .shoot::before{content:"";position:absolute;inset:calc(-7 * var(--pt));border-radius:50%;box-shadow:0 0 0 calc(2.5 * var(--pt)) var(--coral);pointer-events:none}
[data-ui] .shoot.ya::before{display:none}
/* el modo de al lado, como en la cámara del teléfono: se lee, no se toca */
[data-ui] .cap{width:calc(52 * var(--pt));font-size:calc(14 * var(--pt));font-weight:600;line-height:1.2;text-align:center;color:var(--texto-2)}

/* ---------- el muro en vivo (siempre de noche): así se proyecta en el salón. 16:9 como una pantalla;
   el ancho lo pone la página ---------- */
[data-ui].muro{position:relative;aspect-ratio:16/9;background:var(--tinta);border-radius:14px;color:var(--blanco-tibio);z-index:2}
[data-ui] .muro-in{position:absolute;inset:0;border-radius:14px;overflow:hidden}
[data-ui] .muro-bar{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px;padding:0 8px 0 18px;z-index:6}
[data-ui] .muro-ev{font-size:15px;font-weight:600;display:flex;align-items:center;gap:9px;white-space:nowrap}
[data-ui] .muro-ev > i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral)}
[data-ui] .muro-r{display:flex;align-items:center;gap:14px}
[data-ui] .flap{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--texto-2)}
[data-ui] .flap .dg{display:flex;gap:2px;perspective:300px}
[data-ui] .flap .dg span{position:relative;display:grid;place-items:center;width:20px;height:28px;border-radius:4px;background:var(--tinta-profunda);
  color:var(--blanco-tibio);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;backface-visibility:hidden}
[data-ui] .flap .dg span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--tinta)}
[data-ui] .flap .dg span.flip{animation:demoFlip 420ms var(--p-curva-sale)}
@keyframes demoFlip{0%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
[data-ui] .qr-corner{display:flex;align-items:center;gap:8px}
[data-ui] .qr-corner p{font-size:13px;line-height:1.25;text-align:right;color:var(--blanco-tibio)}
[data-ui] .qr-tile{position:relative;display:block;width:48px;height:48px;background:#fff;border-radius:8px;padding:2px}
[data-ui] .qr-tile svg{display:block;width:100%;height:100%}
[data-ui] .qr-tile b-personaje{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
[data-ui] .wall{position:absolute;inset:64px 0 0 0;transform-origin:60% 40%;z-index:1}
[data-ui] .pol{position:absolute;left:0;top:0;width:30%;background:var(--porcelana);padding:6px 6px 0;border-radius:3px;
  box-shadow:0 1px 1px rgba(12,28,57,.5),0 14px 30px -12px rgba(5,12,28,.75);
  transform-origin:50% 50%;transition:transform 900ms var(--p-curva-sale),opacity 600ms ease}
[data-ui] .pol img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:1px;background:var(--tinta-profunda)}
[data-ui] .pol b{display:block;font-weight:500;font-size:13px;line-height:1;color:var(--tinta);text-align:center;padding:7px 2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sin JS las cuatro polaroids del HTML quedan repartidas como las pone el script */
html:not(.js) [data-ui] .pol:nth-child(1){left:36%;top:3%;rotate:-2deg}
html:not(.js) [data-ui] .pol:nth-child(2){left:66%;top:7%;rotate:6deg;width:23%}
html:not(.js) [data-ui] .pol:nth-child(3){left:10%;top:6%;rotate:-6deg;width:22%}
/* "El vals", la más vieja, va detrás de las otras y asoma abajo, entre "La pista" y "Mesa 4", como la
   pone el script: anclada al borde de abajo (su esquina, ya girada, queda 8 px adentro) y sin tapar el
   pie de ninguna. Con top en % pisaba el pie de "Mesa 4" y en 1440 se salía por abajo */
html:not(.js) [data-ui] .pol{z-index:2}
html:not(.js) [data-ui] .pol:nth-child(4){left:58%;top:auto;bottom:14px;rotate:4deg;width:20%;z-index:1}
[data-ui] .pol.new{box-shadow:0 0 0 3px var(--damasco),0 18px 36px -14px rgba(5,12,28,.85)}
/* el cierre del jingle de la portada: el logo se arma sobre el muro */
[data-ui] .logo-box{position:absolute;inset:0;z-index:8;display:flex;align-items:flex-start;justify-content:flex-end;padding:22% 7% 0 0;background:var(--tinta);opacity:0;pointer-events:none;transition:opacity 300ms ease}
[data-ui] .logo-box.on{opacity:1}
[data-ui] .logo-box > span{display:block;width:50%}
/* vuelo de la foto: de la cámara al muro */
.fly{position:fixed;left:0;top:0;z-index:40;pointer-events:none;border-radius:12px;overflow:hidden;background:var(--tinta-profunda);transform-origin:0 0}
.fly img{width:100%;height:100%;object-fit:cover}

/* ---------- pantallas angostas: la barra del muro se compacta ---------- */
@media (max-width:699px){
  [data-ui] .muro-bar{height:62px;padding:0 8px 0 12px}
  [data-ui] .wall{inset:62px 0 0 0}
  [data-ui] .muro-ev{font-size:14px}
  [data-ui] .flap{gap:6px}
  [data-ui] .flap .dg span{width:16px;height:22px;font-size:14px}
  [data-ui] .flap > span:last-child{display:none}
  [data-ui] .qr-corner p{display:none}
  [data-ui] .qr-tile{width:46px;height:46px;padding:2px;border-radius:7px}
}

/* ---------- movimiento ---------- */
@media (prefers-reduced-motion:no-preference){
  /* la firma de la demo: el visor de la cámara se abre como un obturador */
  .js .shutter{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--p-curva-va)}
  .js .shutter img{transform:scale(1.12);transition:transform 1500ms var(--p-curva-suave)}
  .js .shutter.is-in{clip-path:inset(0)}
  .js .shutter.is-in img{transform:none}
  /* la foto del visor respira un rato (cuatro vaivenes de 14 s) y se queda: nada se mueve solo sin
     fin (WCAG 2.2.2) */
  .js .shutter.is-in img.live{animation:demoDeriva 14s ease-in-out 1.6s 4 alternate}
  @keyframes demoDeriva{from{transform:scale(1) translate(0,0)}to{transform:scale(1.1) translate(-3%,-2%)}}
  .perch .float{display:block;animation:demoFlota 6s ease-in-out 8}
  @keyframes demoFlota{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  /* el obturador late (la pista visual de la demo) cuando la cámara ya entró: cuatro veces y queda
     el anillo quieto hasta el primer toque. Nada late sin fin (WCAG 2.2.2: lo que se mueve solo
     más de 5 s junto a otro contenido tiene que poder pararse) */
  [data-ui] .shoot:not(.ya)::before{animation:demoLatido 2s var(--p-curva-sale) 1.8s 4 backwards}
  @keyframes demoLatido{0%{transform:scale(.92);opacity:0}22%{opacity:1}100%{transform:scale(1.3);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  [data-ui] .pol,.perch .body{transition:none}
  .perch:hover .body{translate:none}
}