/* MODO DOJO — intro cinemática + fondo de dojo con paneles translúcidos.
   Experimento local (claude-fable-5, 2026-07-12, sesión a9dab4cf, dirección de Juan).
   Se activa solo donde el template lo incluye (library.html). Dos estados:
   1) #dojo-intro arriba de todo: video del jardín (static/dojo/jardin.mp4) con título.
   2) html.dojo-activo: el video queda congelado en su último cuadro COMO FONDO
      y los paneles del sitio real se vuelven translúcidos encima. */

#dojo-intro{position:fixed;inset:0;z-index:999;background:#0d1016;}
#dojo-intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
#dojo-intro .dojo-velo{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,12,16,.35) 0%,rgba(10,12,16,.06) 35%,rgba(10,12,16,.12) 70%,rgba(10,12,16,.5) 100%);
  transition:opacity .9s ease;}
#dojo-intro .dojo-titulo{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:8vh 0 9vh;text-align:center;
  color:#f6f1e6;transition:opacity .9s ease;}
#dojo-intro .dojo-marca{font-family:var(--sumie-sans);font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;opacity:.85;margin-bottom:14px;text-indent:.42em;}
#dojo-intro h1{font-family:var(--sumie-serif);font-weight:500;font-size:clamp(42px,5.5vw,68px);
  margin:0;letter-spacing:.04em;text-shadow:0 2px 28px rgba(0,0,0,.6);}
#dojo-intro .dojo-sub{font-family:var(--sumie-serif);font-size:20px;margin:0 0 28px;opacity:.9;
  text-shadow:0 1px 14px rgba(0,0,0,.55);}
#dojo-intro .dojo-btn{background:rgba(13,16,22,.42);color:#f6f1e6;
  border:1px solid rgba(246,241,230,.55);font-family:var(--sumie-sans);font-size:17px;
  letter-spacing:.12em;padding:15px 42px;cursor:pointer;border-radius:6px;
  backdrop-filter:blur(5px);transition:background .3s,border-color .3s;}
#dojo-intro .dojo-btn:hover{background:rgba(246,241,230,.16);border-color:#f6f1e6;}
#dojo-intro .dojo-saltar{position:absolute;top:16px;right:18px;background:rgba(13,16,22,.42);
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);font-family:var(--sumie-sans);
  font-size:13px;letter-spacing:.04em;padding:7px 13px;cursor:pointer;border-radius:6px;
  backdrop-filter:blur(5px);}
#dojo-intro .dojo-saltar:hover{color:#fff;border-color:rgba(255,255,255,.5);}

/* estado 2: el video pasa a ser el fondo del sitio real */
html.dojo-activo #dojo-intro{z-index:0;pointer-events:none;background:transparent;}
html.dojo-activo #dojo-intro .dojo-titulo,
html.dojo-activo #dojo-intro .dojo-velo,
html.dojo-activo #dojo-intro .dojo-saltar{opacity:0;pointer-events:none;}
html.dojo-activo body,
html.dojo-activo .sumie-page{background:transparent !important;}
/* todo el contenido de la página se eleva sobre la capa del video,
   sin importar el envoltorio que use cada template */
html.dojo-activo body > *:not(#dojo-intro){position:relative;z-index:1;}
html.dojo-activo .shell-header{background:rgba(166,138,86,.93) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
html.dojo-activo .sumie-panel,
html.dojo-activo .sumie-card,
html.dojo-activo .sumie-surface-card,
html.dojo-activo .sumie-note-card,
html.dojo-activo .sumie-stat-card,
html.dojo-activo .sumie-auth-card,
html.dojo-activo .sumie-feedback,
html.dojo-activo .course-card,
html.dojo-activo .catalog-card,
html.dojo-activo .comm-rail-card,
html.dojo-activo .comm-post,
html.dojo-activo .comm-composer,
html.dojo-activo .cd-main,
html.dojo-activo .cd-sidebar{
  background:rgba(255,253,248,.86) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
/* texto suelto (encabezados de sección sin tarjeta): respaldo suave para leer sobre el video */
html.dojo-activo .sumie-section-head,
html.dojo-activo .catalog-container > .catalog-section-title,
html.dojo-activo .catalog-container > .catalog-intro,
html.dojo-activo .catalog-container > .catalog-quote{
  background:rgba(255,253,248,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:14px;padding:14px 24px;}
html.dojo-activo .catalog-featured-card{
  background:rgba(255,253,248,.9) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
/* clase (lesson): encabezado y barra de contexto legibles sobre el video */
html.dojo-activo .les-hero{
  background:rgba(255,253,248,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:14px;padding:16px 24px;}
html.dojo-activo .sumie-context-bar{
  background:rgba(255,253,248,.8) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
/* novedades */
html.dojo-activo .notif-panel,
html.dojo-activo .notif-context-bar,
html.dojo-activo .notif-page-head{
  background:rgba(255,253,248,.86) !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
html.dojo-activo .notif-page-head{border-radius:14px;padding:14px 24px;}

@media (prefers-reduced-motion:reduce){
  #dojo-intro .dojo-velo,#dojo-intro .dojo-titulo{transition:none;}
}