/* =========================================================
   NIRVANANAS — MODE 1994 (CLEAN FIXED VERSION)
   ========================================================= */


/* =========================
   BASE
   ========================= */

body.mode-1994{
  background:#e9e9e9;
  color:#111;
  font-family:"Courier New", monospace;
  transform:none !important;
}


/* =========================
   NAV
   ========================= */

body.mode-1994 nav{
  background:white;
}

body.mode-1994 nav a{
  color:black;
}


/* =========================
   HERO GLITCH TEXT
   ========================= */

body.mode-1994 .hero-left h1{
  text-shadow:3px 3px red;
  animation:glitch .8s infinite;
  font-family:"Courier New", monospace;
}

@keyframes glitch{
  0%{transform:translate(0)}
  25%{transform:translate(-2px,2px)}
  50%{transform:translate(2px,-2px)}
  75%{transform:translate(-1px,1px)}
  100%{transform:translate(0)}
}


/* =========================
   EPK / UI
   ========================= */

body.mode-1994 .epk a{
  background:red;
  color:white;
}

body.mode-1994 .overlay-text{
  color:red;
}


/* =========================
   GLOBAL CRT FEEL (SAFE)
   ========================= */

body.mode-1994::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;

  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.06) 1px,
    transparent 2px,
    transparent 4px
  );

  opacity:0.25;
  mix-blend-mode:multiply;
}


/* flicker global */
body.mode-1994{
  animation:crtFlicker 6s infinite;
}

@keyframes crtFlicker{
  0%{filter:brightness(1)}
  2%{filter:brightness(0.98)}
  4%{filter:brightness(1.01)}
  6%{filter:brightness(0.97)}
  100%{filter:brightness(1)}
}


/* =========================
   IMAGES — UNIQUE SOURCE OF TRUTH
   ========================= */

body.mode-1994 img{
  filter:
    saturate(0.6)
    contrast(1.25)
    brightness(0.9)
    sepia(0.2)
    hue-rotate(-10deg)
    blur(0.15px);

  display:block;
  width:100%;
}


/* léger mouvement CRT */
body.mode-1994 img{
  animation:imgDrift 6s infinite ease-in-out;
}

@keyframes imgDrift{
  0%{transform:translate(0,0)}
  25%{transform:translate(0.3px,0.2px)}
  50%{transform:translate(-0.3px,-0.2px)}
  75%{transform:translate(0.2px,-0.1px)}
  100%{transform:translate(0,0)}
}


/* hover */
body.mode-1994 img:hover{
  filter:
    saturate(0.8)
    contrast(1.3)
    brightness(1);
}


/* =========================
   GLITCH STATE (JS)
   ========================= */

body.mode-1994.glitch-on{
  transform:translateX(-2px);
  filter:contrast(1.4) brightness(1.15) saturate(1.2);
}


/* =========================
   CRT WRAPPER (IMPORTANT FIX)
   ========================= */

body.mode-1994 .crt-img{
  position:relative;
  overflow:hidden;
}

body.mode-1994 .crt-img img{
  width:100%;
  display:block;
}


/* SCANLINES SUR IMAGES (WORKING VERSION) */
body.mode-1994 .crt-img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.15) 2px,
    transparent 4px,
    transparent 7px
  );

  opacity:0.3;
  mix-blend-mode:multiply;
}

/* =========================
   FULL IMAGE SECTION
   ========================= */

.full-image {
  position: relative;
  height: 80vh;
  overflow: hidden;
}

.full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  bottom: 40px;
  left: 40px;
  font-size: 4rem;
  font-family: Oswald, sans-serif;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .full-image {
    height: auto; /* la hauteur suit l'image naturellement */
  }

  .full-image img {
    height: auto; /* plus de rognage */
    object-fit: contain; /* ou retire object-fit complètement */
  }

  .overlay-text {
    font-size: 2rem;
    bottom: 20px;
    left: 20px;
  }
}
/* =========================
   ABOUT SECTION
   ========================= */

.about {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.about img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  flex: 1 1 45%;
  min-width: 0;        /* empêche le débordement flex */
}

.about > div {
  flex: 1 1 45%;
  min-width: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .full-image {
    height: auto;
  }

  .full-image img {
    height: auto;
    object-fit: unset;
  }

  .overlay-text {
    font-size: 2rem;
    bottom: 20px;
    left: 20px;
  }
}

/* =====================================
   FOOTER
   ===================================== */

body.mode-1994 .footer-title{
    font-family:"Courier New", monospace;
    text-shadow:4px 4px red;
    color:#111;
}

body.mode-1994 .footer-label{
    color:#666;
}

body.mode-1994 .footer-block a{
    color:#111;
}

body.mode-1994 .footer-block a:hover{
    color:red;
}

body.mode-1994 .footer-social a{
    color:#fff;
    font-family:"Courier New", monospace;
}

body.mode-1994 .footer-social a:hover{
    color:red;
}

body.mode-1994 .footer-meta{
    color:#666;
}