/* ═══════════════════════════════════════════════════════════
   EduCan · Capa de lujo — motion, cursor, transiciones
   Todo se desactiva con prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */

/* ── Preloader ──────────────────────────────────────────── */
#lux-pre{position:fixed;inset:0;z-index:9999;background:var(--ink,#0c0b0a);
  display:grid;place-items:center;transition:opacity .6s ease}
#lux-pre .pl-word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(2rem,7vw,4.5rem);letter-spacing:-.02em;color:#faf8f4;overflow:hidden;line-height:1}
#lux-pre .pl-word span{display:inline-block;transform:translateY(110%);
  animation:plUp .9s cubic-bezier(.19,1,.22,1) forwards}
#lux-pre .pl-word span:nth-child(2){animation-delay:.08s;color:var(--gold,#d4af37)}
@keyframes plUp{to{transform:none}}
#lux-pre .pl-bar{position:absolute;bottom:0;left:0;height:2px;width:0;
  background:var(--gold,#d4af37);transition:width .3s ease}
#lux-pre .pl-num{position:absolute;bottom:2rem;right:6%;font-family:ui-monospace,monospace;
  font-size:.8rem;color:rgba(244,239,230,.5);font-variant-numeric:tabular-nums}
html.lux-loading{overflow:hidden}
#lux-pre.done{opacity:0;pointer-events:none}

/* Cortina de transición entre páginas */
#lux-curtain{position:fixed;inset:0;z-index:9998;background:var(--ink,#0c0b0a);
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
  transition:transform .6s cubic-bezier(.76,0,.24,1)}
#lux-curtain.in{transform:scaleY(1);transform-origin:bottom}

/* ── Cursor personalizado — DESACTIVADO (se usa el del sistema) ── */
@media (hover:hover) and (pointer:fine){
  /* html.lux-cursor,html.lux-cursor *{cursor:none !important} */
  #lux-dot,#lux-ring{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;
    border-radius:50%;mix-blend-mode:difference}
  #lux-dot{width:6px;height:6px;background:#fff;margin:-3px 0 0 -3px;
    transition:transform .18s ease,opacity .2s}
  #lux-ring{width:38px;height:38px;border:1px solid rgba(255,255,255,.55);margin:-19px 0 0 -19px;
    transition:width .28s cubic-bezier(.19,1,.22,1),height .28s cubic-bezier(.19,1,.22,1),
               margin .28s cubic-bezier(.19,1,.22,1),border-color .28s,opacity .2s}
  html.lux-hot #lux-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:rgba(255,255,255,.9)}
  html.lux-hot #lux-dot{transform:scale(.3)}
}

/* ── Revelado de texto por líneas (máscara) ─────────────── */
.lux-line{display:block;overflow:hidden}
.lux-line > span{display:block;transform:translateY(105%);opacity:0;
  transition:transform 1s cubic-bezier(.19,1,.22,1),opacity 1s cubic-bezier(.19,1,.22,1)}
.lux-line.on > span{transform:none;opacity:1}

/* Revelado de bloques */
.lux-up{opacity:0;transform:translateY(38px);
  transition:opacity .95s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1)}
.lux-up.on{opacity:1;transform:none}

/* Revelado de imagen con máscara + zoom */
.lux-img{overflow:hidden;position:relative}
.lux-img > img,.lux-img > .lux-inner{
  clip-path:inset(0 0 100% 0);transform:scale(1.14);
  transition:clip-path 1.25s cubic-bezier(.76,0,.24,1),transform 1.6s cubic-bezier(.19,1,.22,1)}
.lux-img.on > img,.lux-img.on > .lux-inner{clip-path:inset(0 0 0 0);transform:scale(1)}

/* ── Marquee infinito ───────────────────────────────────── */
.lux-marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line,rgba(212,175,55,.18));
  border-bottom:1px solid var(--line,rgba(212,175,55,.18));padding:1.6rem 0;background:var(--ink,#0c0b0a)}
.lux-marquee .track{display:inline-flex;gap:3rem;animation:mq 32s linear infinite;will-change:transform}
.lux-marquee:hover .track{animation-play-state:paused}
.lux-marquee b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.4rem,3.4vw,2.6rem);letter-spacing:-.01em;color:#faf8f4;display:inline-flex;align-items:center;gap:3rem}
.lux-marquee b i{color:var(--gold,#d4af37);font-style:normal;font-size:.7em}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Barra de progreso de scroll ────────────────────────── */
#lux-prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:1001;
  background:linear-gradient(90deg,var(--gold,#d4af37),var(--gold-bright,#e6c76a));
  transition:width .1s linear}

/* ── Botón magnético ────────────────────────────────────── */
.lux-mag{will-change:transform;transition:transform .35s cubic-bezier(.19,1,.22,1)}

/* ── Accesibilidad ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .lux-line > span,.lux-up{transform:none !important;opacity:1 !important;transition:none !important}
  .lux-img > img,.lux-img > .lux-inner{clip-path:none !important;transform:none !important;transition:none !important}
  .lux-marquee .track{animation:none}
  #lux-pre{display:none}
  #lux-dot,#lux-ring{display:none}
  html.lux-cursor,html.lux-cursor *{cursor:auto !important}
}