/* Raww & Co. · Intro: cuarto oscuro, encendido del tubo, notebook que se abre con el scroll
   y zoom a la pantalla que entra a la web. Sin JS o con "reducir movimiento" queda una
   imagen fija iluminada de una pantalla de alto. */
.intro{position:relative;height:100vh;height:100svh;background:#000;color:#EDEDEA}
html.intro-js .intro{height:260vh}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.intro-cv,.intro-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-poster{object-fit:cover}
html.intro-js .intro-poster{display:none}
.intro-cv{display:none}
html.intro-js .intro-cv{display:block}
.intro-dark{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
html.intro-js .intro-dark{opacity:1}
.intro-light{position:absolute;inset:0;background:#F3F3F1;opacity:0;pointer-events:none}

.intro-start{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity 260ms var(--ease),visibility 0s linear 0s}
html.intro-js .intro-start{display:flex}
.intro.is-starting .intro-start,.intro.is-lit .intro-start{opacity:0;visibility:hidden;pointer-events:none;transition:opacity 260ms var(--ease),visibility 0s linear 260ms}
.intro-on{font-size:17px}
.intro-quiet{font:500 13px/1 var(--f-mono);color:#8F8F8B;background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:10px}
.intro-quiet:hover{color:#C9C9C5}

.intro-hint{position:absolute;left:0;right:0;bottom:max(28px,calc(env(safe-area-inset-bottom,0px) + 20px));margin:0;text-align:center;font:500 13px/1 var(--f-mono);letter-spacing:.02em;color:#D9D8D4;text-shadow:0 1px 10px #000;opacity:0;transition:opacity 300ms var(--ease);pointer-events:none}
.intro.is-lit .intro-hint{opacity:1}
.intro.is-moving .intro-hint{opacity:0}
html:not(.intro-js) .intro-hint{display:none}

.intro-skip{position:absolute;top:max(14px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));font:500 13px/1 var(--f-mono);color:#A9A9A5;text-decoration:underline;text-underline-offset:3px;padding:10px;z-index:2}
.intro-skip:hover{color:#EDEDEA}
.intro.is-done .intro-skip{opacity:0;pointer-events:none}

.intro :focus-visible{outline:2px solid #fff;outline-offset:3px}

/* el asistente flotante no aparece mientras se ve la intro */
html.intro-run .rjc-fab,html.intro-run .rjc-panel{opacity:0!important;pointer-events:none!important}

@media (prefers-reduced-motion:reduce){
  .intro-start,.intro-hint{transition:none}
}

/* fogonazo del tubo: luz fria sobreexpuesta solo durante los destellos */
.intro-flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(120% 90% at 50% 38%,rgba(236,242,255,.95) 0%,rgba(226,234,250,.55) 38%,rgba(210,220,240,.12) 70%,transparent 100%)}
html:not(.intro-js) .intro-flash{display:none}
.intro.is-waiting .intro-on .kbtn-top{opacity:.7}