/* Microanimaciones: sólo en hero activo. Respetan reduced-motion. */
#principal .hero-object--pantonera [id="pantonera_hoja_2_"] { transform-origin:75.7px 25.4px; }
#principal .hero-object--pantonera [id="pantonera_hoja_1_"] { transform-origin:75.7px 25.4px; }
#principal.is-active .hero-object--pantonera [id="pantonera_hoja_2_"],
#principal.play-intro .hero-object--pantonera [id="pantonera_hoja_2_"] { animation:bondi-fan-back 1s cubic-bezier(.18,.8,.2,1) .8s both; }
#principal.is-active .hero-object--pantonera [id="pantonera_hoja_1_"],
#principal.play-intro .hero-object--pantonera [id="pantonera_hoja_1_"] { animation:bondi-fan-middle .85s cubic-bezier(.18,.8,.2,1) .95s both; }
@keyframes bondi-fan-back { from {transform:rotate(-60deg)} to {transform:rotate(0deg)} }
@keyframes bondi-fan-middle { from {transform:rotate(-30deg)} to {transform:rotate(0deg)} }
#principal.is-active .hero-object--pluma [id="pluma_curva"],
#principal.play-intro .hero-object--pluma [id="pluma_curva"] { stroke-dasharray:120; stroke-dashoffset:0; animation:bondi-draw 1.4s ease-out 1.15s both; }
@keyframes bondi-draw { from {stroke-dashoffset:120} to {stroke-dashoffset:0} }
@media(prefers-reduced-motion:reduce){
 #principal .hero-object, #principal .hero-object *, #principal.is-active .hero-object, #principal.is-active .hero-object * {animation:none!important;transition:none!important;}
}

/* V2: cada objeto entra; el movimiento interno es independiente. */
/* Fallback visible: nunca dejar la escena invisible si el disparador JS falla. */
#principal .hero-object { opacity:1; }
#principal.is-active .hero-object,
#principal.play-intro .hero-object {
  animation: bondi-object-enter .75s cubic-bezier(.2,.8,.2,1) var(--enter-delay, .4s) both;
}
@keyframes bondi-object-enter {
  from { opacity:0; transform:translate(-50%,calc(-50% + 22px)) rotate(var(--r,0deg)) scale(.94); }
  to { opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1); }
}
#principal .hero-object--pantonera {--enter-delay:.55s}
#principal .hero-object--pluma {--enter-delay:.9s}
#principal .hero-object--cafe {--enter-delay:1.05s}
#principal .hero-object--popup {--enter-delay:1.5s}
#principal .hero-object--html {--enter-delay:1.1s}
#principal .hero-object--miniweb {--enter-delay:.65s}
#principal .hero-object--laptop {--enter-delay:.4s}
#principal .hero-object--camara {--enter-delay:1.2s}
#principal .hero-object--regla {--enter-delay:.75s}
#principal .hero-object--pad {--enter-delay:.5s}
#principal .hero-object--dibujo {--enter-delay:1.15s}
#principal .hero-object--lapizverde {--enter-delay:.85s}
#principal .hero-object--lapizcian {--enter-delay:1s}
#principal .hero-object--cutter {--enter-delay:.7s}
#principal .hero-object--puntero {--enter-delay:1.3s}
#principal .hero-object--anteojos {--enter-delay:.6s}
@media(prefers-reduced-motion:reduce) {
 #principal .hero-object {opacity:1!important;}
}

/* En modo edición se pausa la entrada para manipular los objetos con precisión. */
body.bondi-editing #principal .hero-object { animation:none!important; opacity:1!important; }

/* Editor: prioridad sobre cualquier estado de entrada. */
html body.bondi-editing #principal .hero-object,
html body.bondi-editing #principal .hero-object svg { opacity:1!important; visibility:visible!important; }

/* V10 — máquina de escribir SVG: los renglones y el cursor los controla JS.
   Ajustables: font-size en html.svg; paso vertical --code-line-step en JS. */
#principal .hero-object--html .html-code-cursor {
  animation:bondi-code-cursor .7s steps(1,end) infinite;
}
@keyframes bondi-code-cursor {0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  #principal .hero-object--html .html-code-cursor {animation:none!important;opacity:0!important;}
}

/* V13 — apertura inicial una sola vez; giros periódicos separados sin reinicio brusco. */
#principal .hero-object--pantonera [id^="pantonera_hoja"] {transform-box:view-box;transform-origin:75.7px 25.4px;}
@keyframes bondi-fan-open-back {from{transform:rotate(-60deg)}to{transform:rotate(0deg)}}
@keyframes bondi-fan-open-mid {from{transform:rotate(-30deg)}to{transform:rotate(0deg)}}
@keyframes bondi-fan-turn {0%,65%{transform:rotate(0deg)}90%,100%{transform:rotate(360deg)}}
#principal.is-active .hero-object--pantonera [id="pantonera_hoja_2_"],
#principal.play-intro .hero-object--pantonera [id="pantonera_hoja_2_"] {animation:bondi-fan-open-back 1s cubic-bezier(.18,.8,.2,1) .8s both, bondi-fan-turn 10s ease-in-out 2.3s infinite;}
#principal.is-active .hero-object--pantonera [id="pantonera_hoja_1_"],
#principal.play-intro .hero-object--pantonera [id="pantonera_hoja_1_"] {animation:bondi-fan-open-mid .85s cubic-bezier(.18,.8,.2,1) .95s both, bondi-fan-turn 10s ease-in-out 2.5s infinite;}
#principal.is-active .hero-object--pantonera [id="pantonera_hoja"],
#principal.play-intro .hero-object--pantonera [id="pantonera_hoja"] {animation:bondi-fan-turn 10s ease-in-out 2.7s infinite;}
/* El popup siempre por delante del pad, incluso durante la entrada. */
#principal .hero-object--pad { z-index:2; }
#principal .hero-object--popup { z-index:3; }
body.bondi-editing #principal .hero-object--popup {z-index:3;}
body.bondi-editing #principal .hero-object--pad {z-index:2;}
@media(prefers-reduced-motion:reduce){
  #principal .hero-object--pantonera [id^="pantonera_hoja"] {animation:none!important;transform:none!important;}
}


/* V11 — parallax de salida: sólo tras iniciar scroll, sin tocar transforms internos.
   Modificar estas distancias para regular profundidad (px). */
#principal.hero-intro { --hero-exit:0; --hero-depth-1:8px; --hero-depth-2:18px; --hero-depth-3:30px; --hero-depth-objects:45px; --hero-depth-title:65px; }
#principal .hero-scene__art--1 { translate:0 calc(var(--hero-exit) * var(--hero-depth-1) * -1); }
#principal .hero-scene__art--2 { translate:0 calc(var(--hero-exit) * var(--hero-depth-2) * -1); }
#principal .hero-scene__art--3 { translate:0 calc(var(--hero-exit) * var(--hero-depth-3) * -1); }
#principal .hero-objects { translate:0 calc(var(--hero-exit) * var(--hero-depth-objects) * -1); }
#principal.hero-intro .hero-intro__content { translate:0 calc(var(--hero-exit) * var(--hero-depth-title) * -1); }
/* Evitar alterar coordenadas durante la edición visual. */
body.bondi-editing #principal .hero-objects,
body.bondi-editing #principal .hero-intro__content {translate:none!important;}
@media(prefers-reduced-motion:reduce) {
  #principal .hero-scene__art, #principal .hero-objects,
  #principal.hero-intro .hero-intro__content {translate:none!important;}
}

/* V16 — Vapor: traslación vertical de curva periódica (23.2 unidades por ciclo), con máscara de extremos suaves. */
/* Loader se incluye en HTML inicial para ocultar el primer pintado sin estilo. */
#bondi-loader {position:fixed;inset:0;z-index:99999;background:#fff;display:grid;place-items:center;opacity:1;visibility:visible;transition:opacity .48s ease,visibility 0s linear .48s;}
#bondi-loader.is-gone {opacity:0;visibility:hidden;pointer-events:none;}
#bondi-loader svg {width:76px;height:116px;overflow:visible;animation:bondi-loader-rock 1.7s ease-in-out infinite alternate;}
@keyframes bondi-loader-rock {from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
html.bondi-loading #principal .title-glyph,html.bondi-loading #principal .title-glyph::after,
html.bondi-loading #principal .hero-object,html.bondi-loading #principal .hero-object * {animation-play-state:paused!important;}
@media(prefers-reduced-motion:reduce){#bondi-loader svg{animation:none}#bondi-loader{transition:none}}

#bondi-loader .fill-verde{fill:var(--verde)}#bondi-loader .fill-cian{fill:var(--cian)}#bondi-loader .fill-blanco{fill:#fff}#bondi-loader .fill-negro{fill:#000}#bondi-loader .fill-none{fill:none}#bondi-loader .stroke-negro{stroke:#000}#bondi-loader .stroke-3{stroke-width:3}#bondi-loader .stroke-2{stroke-width:2}#bondi-loader .stroke-1-5{stroke-width:1.5}

/* V13 — la curva de la pluma se controla con JS, sin dash ni manejadores. */
#principal.is-active .hero-object--pluma #pluma_curva,
#principal.play-intro .hero-object--pluma #pluma_curva {animation:none!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;}
#principal .bondi-popup-code {fill:#000;font: bold 13.3px/1 monospace;letter-spacing:-.15px;}

/* Respetar preferencia de movimiento reducido también en SMIL. */
@media(prefers-reduced-motion:reduce){#principal .hero-object--cafe animate{display:none}}

/* Loader: no permitir que screens.js revele el hero antes de la entrada.
   Los objetos quedan en estado inicial hasta que se dispare la animación. */
html.bondi-loading #principal .hero-object {opacity:0!important;animation:none!important;}
html.bondi-loading #principal .title-glyph,
html.bondi-loading #principal .title-glyph::after {opacity:0!important;transition:none!important;}
html.bondi-loading #principal .hero-intro__line::before,
html.bondi-loading #principal .hero-intro__line::after {transform:scaleX(0)!important;transition:none!important;}
html.bondi-loading #principal .hero-intro__plus::after {opacity:0!important;animation:none!important;}
@media(prefers-reduced-motion:reduce){
 html.bondi-loading #principal .title-glyph,html.bondi-loading #principal .title-glyph::after{opacity:1!important;}
}