:root{
  --primary-color:#0c0c0c;
  --secondary-color:#1a1a1a;
  --accent-color:#f39c12;
  --text-color:#fff;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:"Montserrat",sans-serif}
html,body,*{cursor:none!important}

body{
  background:var(--primary-color);
  color:var(--text-color);
  line-height:1.6;
}

/* =========================
   HERO + CAROUSEL
========================= */
.hero{
  position:relative;
  height:100vh;
  width:100%;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
}

.carousel{position:relative;width:100%;height:100%}
.carousel-images{display:flex;transition:transform .5s ease}
.carousel-slide{flex-shrink:0;width:100%;height:100%}
.carousel-image{width:100%;height:100vh;object-fit:cover}

.carousel-title{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}

.carousel-title h1,.carousel-title p{transition:all .5s ease-in-out}

.carousel-title h1{
  font-size:clamp(60px,8vw,120px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:5px;
  color:#fff;
}

.carousel-title h1:hover{
  transform:scale(1.2);
  opacity:.6;
  font-weight:900;
}

.carousel-title p{
  font-size:clamp(16px,2vw,30px);
  margin-top:-2.2vw;
  opacity:.7;
  color:#fff;
}

/* neutralise l’inversion globale (sinon ça écrase l’inversion fine) */
.carousel-title h1.inverted,
.carousel-title p.inverted{filter:none!important}

.carousel-title .ks,
.carousel-title .acid-second{transition:filter .4s ease}

.artwork-3-active .carousel-title .ks{filter:invert(1)}
.artwork-3-active .carousel-title .cid-second{filter:invert(1)}

/* (option) inversion globale si tu l’utilises ailleurs */
.artwork-3-active .carousel-title h1{filter:invert(1)}
.artwork-3-active .carousel-title p{filter:invert(1)}

/* =========================
   PRESENTATION
========================= */
.presentation{
  background:#1a1a1a;
  padding:60px 20px;
  text-align:center;
}

.presentation h2{font-size:36px;margin-bottom:20px}
.presentation p{font-size:18px;width:70%;margin:0 auto}

/* entrée au scroll */
.present{
  opacity:0;
  transform:translateY(50px);
  transition:opacity .5s ease,transform .5s ease;
}
.present.visible{opacity:1;transform:translateY(0)}

.fondsite{height:80px}

/* Variable Proximity */
.presentation .variable-proximity{
  margin-left:auto;
  margin-right:auto;
  width:100%;
  max-width:1300px;
  padding-inline:clamp(20px, 2vw, 80px);
  white-space:pre-wrap;
  text-align:center;
}

.presentation .variable-proximity .vp-word{
  display:inline-flex;
  white-space:nowrap;
  flex-wrap:nowrap;
}

.presentation .variable-proximity .vp-letter{
  display:inline-block;
  line-height:1.2;
  font-variation-settings:"wght" 400, "opsz" 9;
  font-kerning:none;
  font-feature-settings:"kern" 0;
  will-change:font-variation-settings;
  flex:0 0 auto;
}

.presentation .variable-proximity br{
  display:block;
  content:"";
  margin-top:0.8em;
}

/* =========================
   PORTFOLIO
========================= */
.portfolio{background:#121212;padding:60px 20px}
.portfolio h2{text-align:center;font-size:36px;margin-bottom:40px}

.portfolio-items{display:flex;justify-content:space-around;flex-wrap:wrap}
.portfolio-item{width:30%;margin-bottom:20px;text-align:center;transition:transform .3s ease}
.portfolio-item:hover{transform:scale(1.05)}

.portfolio-item img{
  width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 4px 6px rgba(0,0,0,.2);
}

.portfolio-item p{
  font-family:system-ui,sans-serif;
  text-transform:uppercase;
  margin-top:5px;
  font-size:20px;
  font-weight:600;
  letter-spacing:1px;
  color:#fff;
}

/* =========================
   FOOTER
========================= */
footer{background:#0c0c0c;padding:20px;text-align:center}
footer p{font-size:16px;margin-bottom:10px}

.social-media a{
  color:#fff;
  text-decoration:none;
  margin:0 10px;
  font-size:18px;
  transition:color .3s;
}
.social-media a:hover{color:var(--accent-color)}

/* =========================
   NAV BAS (social-mediaac)
========================= */
.social-mediaac{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:clamp(6px,1.8vw,24px);
  padding-inline:clamp(6px,2vw,24px);
  max-width:100vw;
  overflow:hidden;
  transition:opacity .3s ease,transform .3s ease;
}

.social-mediaac a{
  font-size:clamp(.6rem,1.2vw,1.2rem);
  padding:clamp(4px,.8vw,10px);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  transition:color .3s ease,transform .3s ease;
}
.social-mediaac a:hover{color:var(--accent-color);transform:scale(1.1)}
.social-mediaac.hidden{
  opacity:0;
  transform:translateX(-50%) translateY(100px);
  pointer-events:none;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  position:fixed;
  right:-250px;
  top:0;
  height:100%;
  width:250px;
  padding:20px;
  background:rgba(0,0,0,.6);
  transition:right .3s ease-in-out;
  z-index:1000;
}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin:20px 0}
.sidebar a{
  color:#fff;
  text-decoration:none;
  font-size:1.2rem;
  font-weight:700;
  text-transform:uppercase;
  transition:color .3s ease;
}
.sidebar a:hover{color:#ff6347;font-size:1.5rem}

/* =========================
   LOGO GAUCHE (Viruks)
========================= */
.logoviruks{
  position:fixed;
  top:-75px;
  left:-40px;
  z-index:1000;
  transform:none;
  transition:top .3s ease, left .3s ease;
}

.logoviruks img{
  width:420px;
  height:auto;
  display:block;
  animation:none !important;
  transition:none !important;
}

/* =========================
   SMILEY DROITE
========================= */
.logo-container{position:fixed;top:30px;right:30px;z-index:1100}
.logo{
  width:50px;
  height:50px;
  filter:invert(1);
  animation:scaleAnimation 2s infinite alternate;
  transition:transform .5s ease,filter .5s ease;
}
@keyframes scaleAnimation{0%{transform:scale(1)}100%{transform:scale(1.2)}}
.logo:hover{transform:rotateY(180deg) scale(1.2);animation:none}

/* =========================
   RELEASES
========================= */
.releases{background:#1a1a1a;padding:60px 20px;text-align:center;overflow:hidden}
.releases h2{font-size:36px;margin-bottom:35px;color:#fff}

.carousel-releases{
  display:flex;
  flex-wrap:nowrap;
  perspective:1500px;
  animation:scrollReleases var(--releasesDur,5s) linear infinite;
}
.carousel-container{display:flex;transform-style:preserve-3d;transition:transform 1s ease-in-out}
.carousel-item{position:relative;margin-right:20px;transition:transform .5s ease}
.carousel-item:hover{transform:scale(1.2)}

.carousel-item iframe{
  width:300px;
  height:352px;
  border:none;
  box-shadow:0 0 15px rgba(0,0,0,.3);
  position:relative;
  z-index:1;
}

@keyframes scrollReleases{
  from{transform:translateX(0)}
  to{transform:translateX(var(--scrollX,0px))}
}

.iframe-guard{position:absolute;inset:0;z-index:5;background:transparent}

/* =========================
   CURSOR
========================= */
#cursorz{
  position:fixed;
  left:0;
  top:0;
  z-index:9999999;
  pointer-events:none;
  width:5rem;
  height:5rem;
  background:#f1f1f1;
  border-radius:50%;
  mix-blend-mode:difference;
  transition:width .2s ease,height .2s ease;
}
#cursorz.enlarged{width:10rem;height:10rem}

/* =========================
   SCROLLBARS
========================= */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.1)}
::-webkit-scrollbar-thumb{background:rgba(80,80,80,.6);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(120,120,120,.8)}
html{scrollbar-width:thin;scrollbar-color:#333 #1a1a1a}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1200px){
  .logoviruks img{width:420px;}
}

@media (max-width:768px){
  .portfolio-items{flex-direction:column;align-items:center}
  .portfolio-item{width:80%}
  .sidebar{width:200px}
  .sidebar a{font-size:1rem}
  .sidebar a:hover{font-size:1.2rem}

  .logoviruks{
    top:-55px;
    left:-35px;
  }
  .logoviruks img{width:300px;}
  .logoviruks img:hover{filter:none}
  footer{
    padding-bottom: 0px; /* 20px → 10px */
  }
}

@media (max-width:480px){
  .sidebar{width:120px;height:120%;margin:50px 0}
  .sidebar a{font-size:.7rem}
  .sidebar a:hover{font-size:1rem}

  .logoviruks{
    top:-45px;
    left:-30px;
  }
  .logoviruks img{width:250px;}
  .logoviruks img:hover{filter:none}
  footer{
    padding-bottom: 0px; /* 20px → 10px */
  }
  
}

/* ============================================================
   ANIMATIONS D’APPARITION (Titre + Nav + Logos)
============================================================ */

/* ---- TITRE (3s) ---- */
.carousel-title.title-hidden h1,
.carousel-title.title-hidden p{
  opacity:0;
  transform:translateY(18px);
}

.carousel-title.title-appear h1{
  animation:viruksAppear 3s cubic-bezier(.22,1,.36,1) both;
}

.carousel-title.title-appear p{
  animation:acidAppear 3s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.12s;
}

@keyframes viruksAppear{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes acidAppear{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:.7;transform:translateY(0)}
}

/* verrouillage final */
.carousel-title.title-done h1{
  opacity:1 !important;
  transform:none !important;
}
.carousel-title.title-done p{
  opacity:.7 !important;
  transform:none !important;
}
.carousel-title.title-done.title-hidden h1,
.carousel-title.title-done.title-hidden p{
  opacity:1 !important;
  transform:none !important;
}

/* coupe la transition .5s pendant l’apparition */
.carousel-title.title-anim-off h1,
.carousel-title.title-anim-off p{
  transition:none !important;
}

/* ---- NAV / LOGOS (3s) ---- */
.nav-hidden{
  opacity:0;
  transform:translateY(-25px);
}
.nav-anim-off{transition:none !important;}
.nav-appear{
  animation:navAppearCenter 3s cubic-bezier(.22,1,.36,1) both;
}

/* Nav bar centrée : on conserve translateX(-50%) pendant l’anim */
@keyframes navAppearCenter{
  from{opacity:0;transform:translateX(-50%) translateY(-25px) scale(0.95)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}

/* Logo gauche : fade only (pas de transform) */
.logoviruks.nav-appear{
  animation:logoFade 3s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes logoFade{
  from{opacity:0}
  to{opacity:1}
}
/* Empêche .nav-hidden de lui injecter un transform */
.logoviruks.nav-hidden{transform:none !important;}
.logoviruks.nav-anim-off{transition:none !important;}

/* Smiley (#logo) : anim dédiée SANS translateX(-50%) */
#logo.nav-appear{
  animation:smileyAppear 3s cubic-bezier(.22,1,.36,1) both;
}
#logo.nav-hidden{
  opacity:0;
  transform:translateY(-25px) scale(0.95);
}
@keyframes smileyAppear{
  from{opacity:0;transform:translateY(-25px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Nav bar : utilise l’anim centrée */
.social-mediaac.nav-appear{
  animation:navAppearCenter 3s cubic-bezier(.22,1,.36,1) both;
}
.social-mediaac.nav-hidden{
  opacity:0;
  transform:translateX(-50%) translateY(-25px) scale(0.95);
}

/* =========================
   PRELOADER (3 dots circular)
========================= */

/* On cache le contenu tant que la page n'est pas "ready" */
body.is-loading{
  overflow: hidden;
}
body.is-loading > :not(#preloader){
  opacity: 0;
  pointer-events: none;
}

/* Overlay */
#preloader{
  position: fixed;
  inset: 0;
  z-index: 99999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* ou var(--primary-color) */
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility .35s ease;
}

/* Quand on termine */
#preloader.hidden{
  opacity: 0;
  visibility: hidden;
}

/* 3 points en cercle */
#preloader .dots{
  position: relative;
  width: 56px;
  height: 56px;
  animation: dotsSpin 1.1s linear infinite;
}

#preloader .dots span{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Placement des 3 dots sur un cercle */
#preloader .dots span:nth-child(1){ transform: translate(-50%, -50%) translate(0, -18px); }
#preloader .dots span:nth-child(2){ transform: translate(-50%, -50%) translate(15.6px, 9px); }
#preloader .dots span:nth-child(3){ transform: translate(-50%, -50%) translate(-15.6px, 9px); }

@keyframes dotsSpin{
  to { transform: rotate(360deg); }
}


/* =========================
   MERCH PAGE
========================= */
.merch-hero{
  min-height: 40vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 80px 20px 40px;

  position: relative;
  overflow: hidden;
}

/* Image de fond */
.merch-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("images/Sweat/visu1face.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Voile UNIQUEMENT sur l’image */
.merch-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55); /* ajuste si besoin */
  z-index: 1;
}
.merch-hero > *{
  position: relative;
  z-index: 2;
}





.merch-back{
  position: fixed;
  top: 20px;
  left: 20px;
  color: #fff; /* intérieur blanc */
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .9;
  z-index: 100;

  /* contour noir */
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

.merch-back:hover{opacity:1}

.merch-title{
  font-size: clamp(48px, 6vw, 96px);
  text-transform: uppercase;
  letter-spacing: 5px;
}

.merch-sub{
  opacity:.7;
  margin-top: -10px;
}

.merch-wrap{
  padding: 40px 20px 80px;
  background: #0c0c0c;
}

.merch-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 45px;
}

.merch-tab{
  border:1px solid rgba(255,255,255,.25);
  background: transparent;
  color:#fff;
  padding: 10px 14px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:1px;
  cursor:pointer;
}
.merch-tab.is-active{
  border-color:#fff;
  background: rgba(255,255,255,.08);
}

.merch-grid{
  max-width: 1200px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.merch-card{
  background:#121212;
  border-radius: 14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.merch-card:hover{transform: scale(1.02);}

.merch-card img{
  width:100%;
  height: 380px;
  object-fit: cover;
  display:block;
}

.merch-meta{
  padding: 14px;
}
.merch-meta h3{
  font-size: 16px;
  margin-bottom: 6px;
}
.merch-meta p{
  font-size: 13px;
  opacity:.7;
}

@media (max-width: 900px){
  .merch-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .merch-card img{height: 340px;}
}
@media (max-width: 520px){
  .merch-grid{grid-template-columns: 1fr;}
  .merch-card img{height: 360px;}
}

/* =========================
   MERCH INFO — BULLE
========================= */

.merch-info{
  max-width: 1000px;
  margin: 0 auto 60px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
}

.merch-info h2{
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 18px;
}

.merch-info p{
  line-height: 1.6;
  opacity: .85;
}

.merch-info-note{
  margin-top: 10px;
  opacity: .65;
  font-size: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .merch-info{
    margin-bottom: 40px;
    padding: 18px;
  }
}

/* =========================
   GRAPHIC SHOWCASE — CLEAN (REWRITE)
   (sans box, stable mobile, hover desktop)
========================= */

.graphic-showcase{
  max-width: 1400px;
  margin: 80px auto 0;
  padding: 0 90px 120px;
}

.graphic-showcase h2{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 60px;
}

/* ===== Desktop ===== */
.graphic-grid{
  display: grid;
  grid-template-columns: 0.9fr 1fr;      /* visuel 1 un peu plus fin */
  grid-template-rows: 360px 360px;       /* 2 carrés à droite */
  gap: 40px;
  align-items: start;
}

/* Placement desktop */
.graphic-main{
  grid-column: 1;
  grid-row: 1 / span 2;
}
.graphic-side-1{
  grid-column: 2;
  grid-row: 1;
}
.graphic-side-2{
  grid-column: 2;
  grid-row: 2;
}

/* Images desktop */
.graphic-grid img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Centrage visuel du visuel 1 */
.graphic-main img{
  max-width: 92%;
  margin: 0 auto;
}

/* ===== Tablette ===== */
@media (max-width: 1100px){
  .graphic-showcase{
    padding: 0 48px 110px;
  }

  .graphic-grid{
    grid-template-rows: 320px 320px;
    gap: 32px;
  }

  .graphic-main img{
    max-width: 95%;
  }
}

/* ===== Mobile (<= 900px) — compact & sans gros vides ===== */
@media (max-width: 900px){
  .graphic-showcase{
    padding: 0 28px 100px;
  }

  .graphic-grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    column-gap: 0;
    row-gap: clamp(16px, 2.2vw + 10px, 22px);
 /* ✅ plus serré sur mobile */
  }

  /* reset placements desktop */
  .graphic-main,
  .graphic-side-1,
  .graphic-side-2{
    grid-column: auto;
    grid-row: auto;
  }

  /* ✅ réduire les hauteurs (le vrai problème sur mobile) */
  .graphic-main{
    min-height: clamp(280px, 70vw, 420px);
  }

  .graphic-side-1,
  .graphic-side-2{
    min-height: clamp(170px, 46vw, 260px);
  }

  /* images en mobile : pas de height:100% */
  .graphic-grid img{
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }

  .graphic-main img{
    max-width: 100%;
    margin: 0 auto;
  }

  /* petit resserrage 2->3 uniquement */
  .graphic-side-2{
    margin-top: clamp(-12px, -3vw, -20px);
  }
  .graphic-side-1{
    margin-top: 10px; /* +10px UNIQUEMENT entre visu 1 et 2 */
  }
}

/* ===== Petit mobile (<= 600px) ===== */
@media (max-width: 600px){
  .graphic-showcase{
    padding: 0 22px 90px;
  }

  .graphic-main img{
    max-width: 95%;
    margin: 0 auto;
  }

  .graphic-side-2{
    margin-top: clamp(-16px, -4vw, -28px);
  }
}

/* =========================
   GRAPHIC SHOWCASE — HOVER DESKTOP
   (débordement au-dessus des autres)
========================= */
@media (min-width: 901px){
  .graphic-grid{
    overflow: visible;
  }

  .graphic-main,
  .graphic-side-1,
  .graphic-side-2{
    position: relative;
    z-index: 1;
  }

  .graphic-grid img{
    transition: transform .35s ease;
    cursor: zoom-in;
  }

  .graphic-main:hover,
  .graphic-side-1:hover,
  .graphic-side-2:hover{
    z-index: 10;
  }

  .graphic-main:hover img,
  .graphic-side-1:hover img,
  .graphic-side-2:hover img{
    transform: scale(1.15);
  }
}


/* =========================
   MERCH — HOVER DESKTOP
========================= */
@media (min-width: 901px){

  /* autorise le débordement */
  .merch-grid{
    overflow: visible;
  }

  /* base */
  .merch-card{
    position: relative;
    z-index: 1;
  }

  /* image au repos */
  .merch-card img{
    transition: transform .35s ease;
    cursor: zoom-in;
  }

  /* au hover : passe devant */
  .merch-card:hover{
    z-index: 10;
  }

  .merch-card:hover img{
    transform: scale(1.15); /* ajuste 1.1 → 1.2 */
  }
}

/* ============================================================
   GLOBAL APPEAR ANIMATION (reusable on any element)
   Used by: title-hidden / title-appear / title-anim-off
============================================================ */

.title-hidden{
  opacity: 0;
  transform: translateY(28px);
}

.title-appear{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s ease, transform 1.1s ease;
}

/* prevent transition glitch on initial frame */
.title-anim-off{
  transition: none !important;
}

/* État normal des titres (évite tout snap post-animation) */
/* GLOBAL APPEAR ANIMATION (ne casse pas les transforms existants) */
/* ============================================================
   GLOBAL APPEAR ANIMATION — SLOW & SUBTLE
============================================================ */
/* MERCH ONLY */
.merch-hero .title-hidden{
  opacity: 0;
  translate: 0 14px;
}

.merch-hero .title-appear{
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 3s cubic-bezier(.22,1,.36,1),
    translate 1.8s cubic-bezier(.22,1,.36,1);
}

.title-anim-off{
  transition: none !important;
}


/* INDEX ONLY (Viruks title) */
.carousel-title .title-hidden{
  opacity: 0;
  translate: 0 14px;
}

.carousel-title .title-appear{
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 3s cubic-bezier(.22,1,.36,1),
    translate 1.8s cubic-bezier(.22,1,.36,1);
}

.reveal-graphic-title{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.reveal-graphic-title.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   MERCH PAGE — FOOTER FIX
========================= */
.page-merch{
  min-height: calc(100vh - var(--footer-height, 120px));
  display: flex;
  flex-direction: column;
}