/* =========================================================
   BASE.CSS
   ---------------------------------------------------------
   Structure générale de la page :
   - variables globales
   - nouveau preloader
   - nouveaux rideaux
   - html / body
   - fond
   - canvas WebGL
   - états loading / ready
   - bandes haut / bas
   - branding central
   - copyright
   ========================================================= */


/* =========================================================
   VARIABLES GLOBALES
   ---------------------------------------------------------
   Variables réutilisées dans tout le site
   ========================================================= */
:root{
  --bars-h:10vh;
  --bg-top:#06121b;
  --bg-mid:#071a26;
  --bg-bot:#071e2c;
  --text:rgba(235,248,255,.92);
  --text-dim:rgba(220,235,245,.35);
  --ui-dim:#3d5257;
}


/* =========================================================
   BASE HTML / BODY
   ---------------------------------------------------------
   Mise à zéro et base générale de la page
   ========================================================= */
html,
body{
  height:100%;
  margin:0;
  background:#000;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}


/* =========================================================
   NOUVEAU PRELOADER
   ---------------------------------------------------------
   Barre ultra fine au centre :
   - pas de rail visible derrière
   - progression du centre vers l'extérieur
   - légère opacité
   ========================================================= */
.preloader-track{
  position:fixed;
  top:50%;
  left:50%;
  width:80vw;
  height:0.5px;
  transform:translate(-50%,-50%);
  background:transparent;
  opacity:0;
  transition:opacity .3s ease;
  z-index:10001;
  pointer-events:none;
}

.preloader-track.show{
  opacity:0.7;
}


/* =========================================================
   DEMI-BARRES DU PRELOADER
   ---------------------------------------------------------
   Deux moitiés qui partent du centre :
   - une vers la gauche
   - une vers la droite
   ========================================================= */
.preloader-fill{
  position:absolute;
  top:0;
  height:100%;
  background:#FFF;
  opacity:70%;
  will-change:transform, opacity;
}

.preloader-track.show .preloader-fill{
  opacity:0.7;
}


/* =========================================================
   MOITIE GAUCHE
   ---------------------------------------------------------
   Grandit depuis le centre vers la gauche
   ========================================================= */
.preloader-fill--left{
  left:50%;
  width:50%;
  transform-origin:left center;
  transform:scaleX(0);
}


/* =========================================================
   MOITIE DROITE
   ---------------------------------------------------------
   Grandit depuis le centre vers la droite
   ========================================================= */
.preloader-fill--right{
  right:50%;
  width:50%;
  transform-origin:right center;
  transform:scaleX(0);
}


/* =========================================================
   TEXTE LOADING
   ---------------------------------------------------------
   Label discret sous la barre
   ========================================================= */
.preloader-label{
  position:fixed;
  top:calc(50% + 14px);
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:10001;
  pointer-events:none;
  white-space:nowrap;
}

.preloader-label.show{
  opacity:1;
  visibility:visible;
}

/* =========================================================
   NOUVEAUX RIDEAUX
   ---------------------------------------------------------
   Deux panneaux noirs couvrent tout l’écran.
   Etat initial explicite :
   - visibles
   - en place
   - prêts à s’animer
   ========================================================= */
.preloader-top-bar,
.preloader-bottom-bar{
  position:fixed;
  left:0;
  width:100vw;
  height:50vh;
  background:#000;
  z-index:1000;
  pointer-events:none;
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease,
    visibility 0s linear .35s;
}


/* =========================================================
   POSITION DES RIDEAUX
   ---------------------------------------------------------
   Partie haute et partie basse
   ========================================================= */
.preloader-top-bar{
  top:0;
}

.preloader-bottom-bar{
  bottom:0;
}


/* =========================================================
   OUVERTURE DES RIDEAUX
   ---------------------------------------------------------
   Quand la classe .is-opening est ajoutée :
   - le rideau du haut monte complètement hors écran
   - le rideau du bas descend complètement hors écran
   ========================================================= */
.preloader-top-bar.is-opening{
  transform:translateY(-100%);
}

.preloader-bottom-bar.is-opening{
  transform:translateY(100%);
}


/* =========================================================
   DISPARITION FINALE DES RIDEAUX
   ---------------------------------------------------------
   Après l’ouverture, on efface visuellement les rideaux
   ========================================================= */
.preloader-top-bar.hide,
.preloader-bottom-bar.hide{
  opacity:0;
  visibility:hidden;
}


/* =========================================================
   FOND GLOBAL
   ---------------------------------------------------------
   Dégradés de fond derrière le canvas 3D
   ========================================================= */
#bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 700px at 50% 45%, rgba(30,140,190,.25), transparent 55%),
    radial-gradient(900px 500px at 50% 55%, rgba(0,120,180,.18), transparent 60%),
    linear-gradient(180deg,var(--bg-top),var(--bg-mid) 45%,var(--bg-bot));
  filter:saturate(1.05) contrast(1.05);
}


/* =========================================================
   CANVAS WEBGL
   ---------------------------------------------------------
   Surface de rendu Three.js
   ========================================================= */
#stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
}


/* =========================================================
   ETAT LOADING
   ---------------------------------------------------------
   Tant que la page charge :
   - le fond
   - le canvas
   - l’UI
   - le copyright
   - le bouton musique
   restent masqués
   Les rideaux et le preloader restent visibles
   ========================================================= */
body.is-loading #bg,
body.is-loading #stage,
body.is-loading #ui,
body.is-loading .copyright,
body.is-loading .music-btn{
  opacity:0;
  visibility:hidden;
  transition:opacity 220ms ease;
}


/* =========================================================
   ETAT READY
   ---------------------------------------------------------
   Quand la page est prête :
   - le contenu principal devient visible
   - les rideaux peuvent encore être au-dessus
   le temps de leur ouverture
   ========================================================= */
body.is-ready #bg,
body.is-ready #stage,
body.is-ready #ui,
body.is-ready .copyright,
body.is-ready .music-btn{
  opacity:1;
  visibility:visible;
  transition:opacity 420ms ease;
}


/* =========================================================
   BANDES HAUT / BAS
   ---------------------------------------------------------
   Zones noires décoratives fixes du site
   IMPORTANT :
   On ne réutilise plus .bar pour éviter tout conflit
   avec l’animation des rideaux.
   ========================================================= */
.site-bar{
  position:fixed;
  left:0;
  right:0;
  height:var(--bars-h);
  background:#000;
  z-index:5;
}


/* =========================================================
   BANDE DU HAUT
   ========================================================= */
.site-bar.top{
  top:0;
}


/* =========================================================
   BANDE DU BAS
   ========================================================= */
.site-bar.bot{
  bottom:0;
}


/* =========================================================
   UI CENTRALE
   ---------------------------------------------------------
   Zone qui contient le branding central
   ========================================================= */
#ui{
  position:fixed;
  inset:0;
  z-index:10;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-inline:24px;
  box-sizing:border-box;
}


/* =========================================================
   CONTENEUR DU BRANDING
   ---------------------------------------------------------
   Bloc central contenant :
   - le titre
   - le sous-titre
   ========================================================= */
.brand-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  pointer-events:none;
}


/* =========================================================
   TITRE PRINCIPAL AVIXO
   ---------------------------------------------------------
   Grand titre central
   ========================================================= */
.brand{
  margin:0;
  font-weight:350;
  text-transform:uppercase;
  white-space:nowrap;
  font-size:clamp(4rem,7.8vw,8.75rem);
  letter-spacing:.99em;
  text-indent:.99em;
  line-height:.9;
  color:rgba(255,255,255,.95);
  text-align:center;
  text-shadow:
    0 4px 12px rgba(0,0,0,.75),
    0 0 25px rgba(0,170,255,.35),
    0 0 60px rgba(0,120,255,.15);
}


/* =========================================================
   SOUS-TITRE
   ---------------------------------------------------------
   Ligne descriptive sous AVIXO
   ========================================================= */
.subtitle{
  margin-left:0.5em;
  font-size:clamp(1.125rem,1.2vw,1.375rem);
  text-transform:uppercase;
  letter-spacing:.84em;
  white-space:nowrap;
  text-align:center;
  color:#e8f6ff;
  text-shadow:
    0 3px 14px rgba(0,0,0,.9),
    0 0 18px rgba(0,170,255,.35),
    0 0 40px rgba(0,120,255,.20);
}


/* =========================================================
   COPYRIGHT
   ---------------------------------------------------------
   Texte fixe en bas de page
   ========================================================= */
.copyright{
  position:fixed;
  left:0;
  right:0;
  bottom:calc(var(--bars-h) + 14px);
  z-index:10;
  text-align:center;
  color:rgba(220,235,245,.28);
  letter-spacing:.35em;
  font-size:12px;
}

@media screen and (min-height:1439px) and (orientation:landscape){
  .brand{margin-left:0.05em;font-size:11rem;letter-spacing:.72em !important;text-indent:.72em !important;}
  .subtitle{font-size:2.35rem !important;letter-spacing:.49em !important;}
}

@media screen and (max-height:1080px) and (orientation:landscape){
  .brand{margin-left:0.05em;font-size:7.5rem !important;letter-spacing:.99em !important;}
  .subtitle{margin-left:0.8em;font-size:1.35rem !important;letter-spacing:.91em !important;}
}

@media screen and (max-height:864px) and (orientation:landscape){
  .brand{margin-left:0em;font-size:6rem !important;letter-spacing:.99em !important;}
  .subtitle{font-size:1.125rem !important;letter-spacing:.84em !important;margin-left:0.5em;}
}

@media screen and (max-height:360px) and (orientation:landscape){
  .brand{margin-left:-0.2em;font-size:3.2rem !important;letter-spacing:.65em !important;}
  .subtitle{margin-left:0.9em;font-size:.75rem !important;letter-spacing:.35em !important;}
}

/* ===== PORTRAIT ===== */

@media screen and (max-width:1023px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(7.05rem, 7.8vmin, 7.56rem);
    letter-spacing:1.25em;
    text-indent:1.25em;
  }

  .subtitle{
    font-size:clamp(1.32rem, 2.26vmin, 1.51rem);
    letter-spacing:1.08em;
  }
}

@media screen and (max-width:899px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(6.22rem, 6.88vmin, 6.66rem);
    letter-spacing:1.10em;
    text-indent:1.10em;
  }

  .subtitle{
    font-size:clamp(1.16rem, 2.00vmin, 1.33rem);
    letter-spacing:.95em;
  }
}

@media screen and (max-width:810px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(5.6rem, 6.2vmin, 6rem);
    letter-spacing:.99em;
    text-indent:.99em;
  }

  .subtitle{
    font-size:clamp(1.05rem, 1.8vmin, 1.2rem);
    letter-spacing:.86em;
  }
}

@media screen and (max-width:767px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(5.30rem, 5.88vmin, 5.68rem);
    letter-spacing:.94em;
    text-indent:.94em;
  }

  .subtitle{
    font-size:clamp(.99rem, 1.71vmin, 1.14rem);
    letter-spacing:.82em;
  }
}

@media screen and (max-width:599px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(4.14rem, 4.58vmin, 4.44rem);
    letter-spacing:.73em;
    text-indent:.73em;
  }

  .subtitle{
    font-size:clamp(.78rem, 1.33vmin, .89rem);
    letter-spacing:.64em;
  }
}

@media screen and (max-width:479px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(3.32rem, 3.68vmin, 3.56rem);
    letter-spacing:.59em;
    text-indent:.59em;
  }

  .subtitle{
    font-size:clamp(.62rem, 1.06vmin, .71rem);
    letter-spacing:.50em;
  }
}

@media screen and (max-width:359px) and (orientation:portrait){
  .brand{
    margin-left:0em;
    font-size:clamp(2.46rem, 2.73vmin, 2.64rem);
    letter-spacing:.43em;
    text-indent:.43em;
  }

  .subtitle{
    font-size:clamp(.46rem, .79vmin, .53rem);
    letter-spacing:.38em;
  }
}

/* ===== EFFET DIFFUS PORTRAIT ===== */

@media screen and (orientation:portrait){

  .brand{
    text-shadow:
      0 8px 24px rgba(0,0,0,.45),
      0 0 40px rgba(0,170,255,.12);
  }

  .subtitle{
    text-shadow:
      0 6px 16px rgba(0,0,0,.40);
  }

  .site-bar.top,
  .site-bar.bot{
    display:none;
  }

  .copyright{
    bottom:14px;
  }
}