/* Modeka — anotaciones dibujadas a mano.
 *
 * Indican dónde poner el cursor y qué hacer, y de paso empujan a seguir
 * bajando. Manuscrita (Caveat) sobre el sistema de siempre: Anton para el
 * titular, Archivo para el texto, Space Mono para las etiquetas.
 *
 * Las flechas son SVG dibujado, no glifos: trazo desigual y punta abierta,
 * como si estuvieran hechas encima de la foto con un rotulador.
 * Desaparecen en cuanto el visitante hace lo que le pedían. */

.mk-note{
  position:absolute;z-index:6;display:flex;align-items:center;gap:10px;
  pointer-events:none;color:var(--bone);
  font-family:"Caveat","Segoe Script",cursive;
  font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.1;
  text-shadow:0 2px 14px rgba(10,10,11,.9);
  opacity:0;transition:opacity .6s var(--ease)}
.mk-note.in{opacity:1}
.mk-note.gone{opacity:0 !important}

/* La que va en el flujo ocupa su sitio, así que no puede pisar a nadie.
   Es la manera por defecto: solo flotan las que anotan una foto. */
.mk-note--flow{position:static;display:flex;padding:10px var(--pad) 0;width:100%}
.mk-note--flow.mk-note--down,.mk-note--flow.mk-note--up{align-items:flex-start}
.mk-note--end{justify-content:flex-end;text-align:right}
.mk-note--end.mk-note--down,.mk-note--end.mk-note--up{align-items:flex-end;text-align:right}
.mk-note em{font-style:normal;color:var(--red-ink)}
.mk-note svg{width:clamp(46px,5vw,74px);height:auto;overflow:visible;flex:0 0 auto}
.mk-note svg path{fill:none;stroke:var(--red-ink);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset 1.1s var(--ease) .15s}
.mk-note.in svg path{stroke-dashoffset:0}

/* dirección del par texto+flecha */
.mk-note--right{flex-direction:row}
.mk-note--left{flex-direction:row-reverse}
.mk-note--down{flex-direction:column;align-items:flex-start;gap:2px}
.mk-note--up{flex-direction:column-reverse;align-items:flex-start;gap:2px}

/* el latido llama la atención sin gritar */
@keyframes mkpulse{0%,100%{transform:none}50%{transform:translateX(4px)}}
.mk-note.in svg{animation:mkpulse 2.6s var(--ease) infinite}
.mk-note--down.in svg,.mk-note--up.in svg{animation-name:mkpulseY}
@keyframes mkpulseY{0%,100%{transform:none}50%{transform:translateY(4px)}}

/* aviso de seguir bajando, centrado entre dos bloques */
.mk-scroll{position:relative;display:flex;justify-content:center;
  padding:clamp(18px,3vh,34px) 0 clamp(24px,4vh,52px)}
.mk-scroll .mk-note{opacity:1;padding:0;width:auto;
  flex-direction:column;align-items:center;gap:4px;text-align:center}
.mk-scroll .mk-note svg{width:34px}

@media (max-width:900px){
  .mk-note{font-size:1.08rem}
  .mk-note svg{width:40px}
  /* En el móvil la foto es estrecha: la nota se queda abajo, sobre el degradado,
     nunca a media altura donde tapa la prenda. */
  .mk-note:not(.mk-note--flow){left:var(--pad) !important;right:var(--pad) !important;
    bottom:12px !important;top:auto !important;transform:none !important;
    max-width:none !important;justify-content:flex-start !important;text-align:left !important}
}
@media (prefers-reduced-motion:reduce){
  .mk-note.in svg{animation:none}
  .mk-note svg path{transition:none;stroke-dashoffset:0}
}