/* =========================================================
   ALEXTOLL · Escena del escritorio (fondo animado)
   El escritorio de la referencia de diseño, animado por capas:
   zoom muy lento, luz del flexo que respira, brillo y barrido
   en la pantalla, tira de luz, luz de la ventana, polvo flotando
   (canvas, js/modules/escritorio.js) y un reflejo que cruza.
   Se usa en la portada (#sobre-mi) y en la cabecera de sobre-mi.html.

   Estructura:
   <div class="desk" aria-hidden="true"><div class="desk-scene">
     <img class="desk-photo" ...> <span class="fx fx-lamp"></span> ... <canvas class="fx fx-dust"></canvas>
   </div></div>
   Las posiciones de las luces están en % de la foto (1466 x 492).
   ========================================================= */
.desk{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;container-type:size}
/* La escena cubre su caja como una foto recortada (sin deformarse), anclada a la izquierda:
   así el flexo y el monitor quedan siempre a la vista y las luces en su sitio */
.desk-scene{position:absolute;left:0;top:50%;translate:0 -50%;width:max(100cqw, calc(100cqh * 1466 / 492));height:max(100cqh, calc(100cqw * 492 / 1466));transform-origin:30% 55%;animation:desk-drift 26s ease-in-out infinite alternate}
.desk-photo{display:block;width:100%;height:100%}
.desk .fx{position:absolute;pointer-events:none}

/* Flexo: bombilla y charco de luz en la mesa */
.fx-lamp{left:9.6%;top:34%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side, rgba(255,246,230,.6), rgba(255,238,210,.18) 45%, transparent);mix-blend-mode:screen;animation:desk-lamp 7s ease-in-out infinite}
.fx-pool{left:10%;top:73%;width:30%;height:24%;transform:translate(-50%,-50%);background:radial-gradient(closest-side, rgba(255,242,222,.24), transparent);mix-blend-mode:screen;animation:desk-lamp 7s ease-in-out infinite}
/* Pantalla del monitor: brillo suave y una línea de luz que baja */
.fx-screen{left:12.4%;top:25.6%;width:15.4%;height:37%;overflow:hidden;border-radius:2px;background:linear-gradient(180deg, rgba(205,214,228,.12), rgba(205,214,228,.03));mix-blend-mode:screen;animation:desk-screen 9s ease-in-out infinite}
.fx-screen::after{content:"";position:absolute;left:0;right:0;height:38%;top:-45%;background:linear-gradient(180deg, transparent, rgba(232,238,248,.16), transparent);animation:desk-scan 8s cubic-bezier(.5,0,.5,1) infinite}
/* Tira de luz del techo y luz de la ventana */
.fx-strip{left:39%;top:5%;width:22%;height:8%;transform:translateX(-50%);background:radial-gradient(closest-side, rgba(255,250,240,.4), transparent);mix-blend-mode:screen;animation:desk-lamp 9s ease-in-out infinite reverse}
.fx-window{left:52%;top:0;width:4.5%;height:50%;background:linear-gradient(180deg, rgba(220,228,240,.18), transparent);mix-blend-mode:screen;filter:blur(6px);animation:desk-screen 11s ease-in-out infinite reverse}
.fx-dust{inset:0;width:100%;height:100%}
/* Reflejo que cruza la escena de vez en cuando */
.fx-sheen{inset:0;background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.05) 50%, transparent 58%);transform:translateX(-100%);animation:desk-sheen 15s ease-in-out infinite}

@keyframes desk-drift{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1.2%, -.8%)}}
@keyframes desk-lamp{0%,100%{opacity:.72}44%{opacity:1}48%{opacity:.84}52%{opacity:1}}
@keyframes desk-screen{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes desk-scan{0%{top:-45%}65%,100%{top:110%}}
@keyframes desk-sheen{0%,62%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Fundidos para que la foto se integre en el negro (izquierda, arriba y abajo) */
.desk::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 78%, #000 100%),
  linear-gradient(90deg, #000 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 86%, rgba(0,0,0,.6) 100%)}

/* Cabecera de sobre-mi.html: el escritorio ocupa toda la cabecera, por debajo del menú.
   Velo más fuerte para que el chip y sus etiquetas se lean bien. */
.hero--desk{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(560px, 92vh, 860px);display:grid;align-items:center;padding-top:calc(var(--nav-h) + var(--nav-top))}
.hero--desk .desk::after{background:
  linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 70%, #000 100%),
  linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 34%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.55) 100%)}
.hero--desk .chip-wrap{filter:drop-shadow(0 30px 60px rgba(0,0,0,.9))}

@media (prefers-reduced-motion: reduce){
  .desk-scene,.desk .fx,.fx-screen::after{animation:none!important}
  .fx-sheen{display:none}
}