/* ============================================================
   ARBORTIC
   SEASONAL OVERLAY · FIESTAS PATRIAS
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root {

  /* ----------------------------------------------------------
     CHILE

     Estos colores se utilizan principalmente en:
     - microdetalles;
     - bandera;
     - banderines;
     - volantín.

     Las partículas globales serán gestionadas por app.js.
  ---------------------------------------------------------- */

  --seasonal-chile-blue:
    #0039a6;

  --seasonal-chile-red:
    #d52b1e;

  --seasonal-chile-white:
    #ffffff;


  /* ----------------------------------------------------------
     COMPLEMENTARIOS
  ---------------------------------------------------------- */

  --seasonal-sand:
    #d9b37b;

  --seasonal-charcoal:
    #28384d;

  --seasonal-offwhite:
    #f7f4ee;


  /* ----------------------------------------------------------
     TRANSICIÓN
  ---------------------------------------------------------- */

  --seasonal-transition:
    280ms cubic-bezier(.2, .7, .2, 1);

}


/* ============================================================
   ROOT GLOBAL

   - no participa del flujo;
   - no genera altura;
   - no modifica header/main/footer;
   - no intercepta eventos.
============================================================ */

.seasonal-overlay {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    0;

  height:
    0;

  overflow:
    visible;

  pointer-events:
    none;

}


/* ============================================================
   CANVAS GLOBAL BASE
============================================================ */

.seasonal-overlay__canvas {

  display:
    block;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity var(--seasonal-transition),
    visibility var(--seasonal-transition);

}


/* ============================================================
   BACKGROUND GLOBAL LEGACY

   Se mantiene únicamente por compatibilidad estructural.

   Ya NO contiene:
   - partículas;
   - comidas;
   - objetos;
   - decoraciones.
============================================================ */

.seasonal-overlay__canvas--background {

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    1px;

  height:
    1px;

  z-index:
    0;

}


/* ============================================================
   FOREGROUND GLOBAL

   Contiene:
   - bandera;
   - banderines;
   - volantín.
============================================================ */

.seasonal-overlay__canvas--foreground {

  position:
    fixed;

  inset:
    0;

  width:
    100vw;

  height:
    100vh;

  z-index:
    45;

}


/* ============================================================
   VISIBILIDAD GLOBAL
============================================================ */

body.seasonal-active
.seasonal-overlay__canvas {

  opacity:
    1;

  visibility:
    visible;

}


body:not(.seasonal-active)
.seasonal-overlay__canvas {

  opacity:
    0;

  visibility:
    hidden;

}


/* ============================================================
   SECCIONES

   Cada sección utiliza su propio canvas decorativo.
============================================================ */

.particle-section {

  position:
    relative;

  isolation:
    isolate;

}


/* ============================================================
   CANVAS DECORATIVO POR SECCIÓN

   Estructura visual:

   BACKGROUND ORIGINAL
           ↓
   seasonal-section-canvas
           ↓
   CONTENIDO ARBORTIC
============================================================ */

.seasonal-section-canvas {

  position:
    absolute;

  inset:
    0;

  display:
    block;

  width:
    100%;

  height:
    100%;

  z-index:
    1;

  overflow:
    hidden;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  opacity:
    0;

  visibility:
    hidden;

  transition:
    opacity var(--seasonal-transition),
    visibility var(--seasonal-transition);

}


/* ============================================================
   CONTENIDO POR ENCIMA

   Wrapper principal utilizado en las secciones ArborTIC.
============================================================ */

.particle-section > .container {

  position:
    relative;

  z-index:
    2;

}


/* ============================================================
   ACTIVACIÓN DE BACKGROUND FESTIVO
============================================================ */

body.seasonal-active
.seasonal-section-canvas {

  opacity:
    1;

  visibility:
    visible;

}


body:not(.seasonal-active)
.seasonal-section-canvas {

  opacity:
    0;

  visibility:
    hidden;

}


/* ============================================================
   PARTÍCULAS GLOBALES ARBORTIC

   CORRECCIÓN IMPORTANTE

   YA NO SE OCULTAN.

   El próximo ajuste de app.js hará:

   NORMAL
   -> partículas ArborTIC violetas.

   FESTIVO
   -> las mismas partículas,
      pero azul / rojo / blanco.

   Por eso aquí NO debe existir:

   body.seasonal-active .site-particles-canvas {
     opacity: 0;
   }
============================================================ */

.site-particles-canvas {

  transition:
    opacity 280ms ease;

}


/* ============================================================
   BOTÓN FESTIVO
============================================================ */

#theme-celebration {

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;

}


#theme-celebration[aria-pressed="true"] {

  opacity:
    1;

}


/* ============================================================
   FESTIVO NO DISPONIBLE EN DARK
============================================================ */

#theme-celebration:disabled,
#theme-celebration[aria-disabled="true"] {

  opacity:
    .38;

  cursor:
    not-allowed;

}


#theme-celebration:disabled:hover,
#theme-celebration[aria-disabled="true"]:hover {

  transform:
    none;

}


/* ============================================================
   TABLET
============================================================ */

@media
(min-width: 768px)
and
(max-width: 1023px) {

  body.seasonal-active
  .seasonal-section-canvas {

    opacity:
      .95;

  }


  body.seasonal-active
  .seasonal-overlay__canvas--foreground {

    opacity:
      .95;

  }

}


/* ============================================================
   MOBILE
============================================================ */

@media
(max-width: 767px) {

  body.seasonal-active
  .seasonal-section-canvas {

    opacity:
      .91;

  }


  body.seasonal-active
  .seasonal-overlay__canvas--foreground {

    opacity:
      .92;

  }

}


/* ============================================================
   MOBILE PEQUEÑO
============================================================ */

@media
(max-width: 479px) {

  body.seasonal-active
  .seasonal-section-canvas {

    opacity:
      .87;

  }


  body.seasonal-active
  .seasonal-overlay__canvas--foreground {

    opacity:
      .88;

  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media
(prefers-reduced-motion: reduce) {

  .seasonal-overlay__canvas,
  .seasonal-section-canvas {

    transition:
      opacity 160ms ease,
      visibility 160ms ease;

  }

}