/* style.css */

/* ============================================
   PRELOAD STATE - Prevents animations on load
   ============================================ */
.preload * {
  -webkit-transition: none !important;
  transition: none !important;
  -webkit-animation: none !important;
  animation: none !important;
  opacity: 0;
}

/* ============================================
   BASE STYLES
   ============================================ */
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow: hidden;
}

body { -webkit-tap-highlight-color: transparent; }

/* Remove focus outlines and borders */
::-moz-focus-inner { border: 0; }
:focus { outline: none; }

/* Disable text/image selection */
html div, html img, body div, body img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Default div behavior for backgrounds */
div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: opacity;
  -webkit-transition: opacity 1.4s ease-in-out;
  transition: opacity 1.4s ease-in-out;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.alphanull { opacity: 0; }

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
  /* Background reference: 3840x2160px */
  --bg-width: 3840px;
  --bg-height: 2160px;
  
  --safezone-height: 70%;
}

/* ============================================
   CONTAINER
   ============================================ */
.container {
  position: relative;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  background-image: url("../img/bg.webp");
  background-position: center;
  background-size: cover;
  cursor: pointer;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
  opacity: 0;
}

/* ============================================
   SIDE CONTENT (Left & Right)
   ============================================ */
.sbl, .sbr {
  position: absolute;
  width: calc(50% - 500px);
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  z-index: 210;
}

.sbl { left: 0; }
.sbr { right: 0; }

.scrolled .sbr, .scrolled .sbl { opacity: 1; }

/* ============================================
   SIDEBAR BACKGROUNDS (600x1290px)
   ============================================ */
.sbl-bg, .sbr-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  z-index: 200;
}

.sbl-bg { background-image: url("../img/sbl-bg.webp"); }
.sbr-bg { background-image: url("../img/sbr-bg.webp"); }

.scrolled .sbl-bg,
.scrolled .sbr-bg {
  transition-delay: 0.5s;
  opacity: 1 !important;
}


/* ============================================
   SIDEBAR TOP AND BOTTOM PANELS
   ============================================ */
.sbl-top, .sbl-bottom, .sbr-top, .sbr-bottom {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: bottom;
  opacity: 0;
  pointer-events: none;
  z-index: 210;
}

.sbl-top, .sbr-top { background-position: top; }

.sbl-bottom { background-image: url("../img/sbl-bottom.webp"); }
.sbr-bottom { background-image: url("../img/sbr-bottom.webp"); }
.sbl-top    { background-image: url("../img/sbl-top.webp"); }
.sbr-top    { background-image: url("../img/sbr-top.webp"); }

.scrolled .sbl-top,
.scrolled .sbl-bottom,
.scrolled .sbr-top,
.scrolled .sbr-bottom {
  transition-delay: 0.5s;
  opacity: 1 !important;
}


/* ============================================
   SBL-PILOT-START (1744x2191px) - Visible au démarrage uniquement
   Position: x:-520px y:232px (calculé depuis sidebar 923px)
   ============================================ */
.sbl-pilot-start {
  position: fixed;
 left: -16.15vw; /* -620/3840 = -16.15% */
  top: 10.74vh; /* 232/2160 = 10.74% */
  width: 45.42vw; /* 1744/3840 = 45.42% */
  max-width: 1744px;
  height: auto;
  aspect-ratio: 1744 / 2191;
  background-image: url("../img/sbl-pilot.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: 208;
  animation: fadeIn 1s ease forwards, floatingLeft 6s ease-in-out infinite;
  animation-delay: 0.6s, 1.6s;
  transition: opacity 0.6s ease;
}

.scrolled .sbl-pilot-start {
  opacity: 0 !important;
  pointer-events: none;
}

/* ============================================
   SBL-PILOT-FUEL-START (1744x2191px) - EN DESSOUS de sbl-pilot
   ============================================ */
.sbl-pilot-fuel-start {
  position: fixed;
  left: -16.15vw; /* -620/3840 = -16.15% */
  top: 10.74vh; /* 232/2160 = 10.74% */
  width: 45.42vw; /* 1744/3840 = 45.42% */
  max-width: 1744px;
  height: auto;
  aspect-ratio: 1744 / 2191;
  background-image: url("../img/sbl-pilot-fuel.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 207;
  animation: fadeIn 1s ease forwards, floatingLeft 6s ease-in-out infinite;
  animation-delay: 0.7s, 1.7s;
  transition: opacity 0.6s ease;
}

.scrolled .sbl-pilot-fuel-start {
  opacity: 0 !important;
  pointer-events: none;
}

/* ============================================
   SBL-PILOT (dans sidebar scrollé) - 1744x2191px natives
   Affichées en 1379x1733px à position x:-615px y:734px
   Taille et position calculées par JS
   ============================================ */
.sbl-pilot {
  position: absolute;
  /* width/height/left/top définis par JS */
  background-image: url("../img/sbl-pilot.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: 206;
  transition: opacity 0.6s ease;
  animation: floatingLeft 6s ease-in-out infinite;
}

.scrolled .sbl-pilot {
  opacity: 1;
}

/* ============================================
   SBL-PILOT-FUEL (dans sidebar scrollé) - 1744x2191px natives
   Affichées en 1379x1733px
   ============================================ */
.sbl-pilot-fuel {
  position: fixed;  /* ✅ Position fixed pour accéder à bg.webp */
  /* width/height/left/top définis par JS */
  background-image: url("../img/sbl-pilot-fuel.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 205;  /* ✅ Sous sbl-pilot (206) mais au-dessus de bg */
  transition: opacity 0.6s ease;
  animation: floatingLeft 6s ease-in-out infinite;
}

/* affichage après scroll */
.scrolled .sbl-pilot-fuel {
  opacity: 1;
}


/* ============================================
   SBR-SKYDIVE-START (1119x1061px) - Visible au démarrage uniquement
   ============================================ */
.sbr-skydive-start {
  position: fixed;
  right: 70px;
  top: 150px;
  width: 29.14vw; /* 1119/3840 */
  max-width: 1119px;
  height: auto;
  aspect-ratio: 1119 / 1061;
  background-image: url("../img/sbr-skydive.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: 205;
  animation: fadeIn 1s ease forwards, floatingSkyDive 5s ease-in-out infinite;
  animation-delay: 0.6s, 1.6s;
  transition: opacity 0.6s ease;
}

/* Disparaît au scroll */
.scrolled .sbr-skydive-start {
  opacity: 0 !important;
  pointer-events: none;
}

/* ============================================
   SBR LEGAL START - visible au démarrage
   ============================================ */
.sbr-legal-start {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(50% - 500px);
  height: 100%;
  background-image: url("../img/sbr-legal.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 1;
  pointer-events: none;
  z-index: 204;
  transition: opacity 0.6s ease-in-out;
}


/* ============================================
   SBR-SKYDIVE-SCROLLED (1119x1061px) - Visible uniquement en mode scrollé
   ============================================ */
#sbr-skydive {
  position: absolute;
  width: 1119px;
  height: auto;
  aspect-ratio: 1119 / 1061;
  background-image: url("../img/sbr-skydive.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  z-index: 206;
  transition: opacity 0.6s ease 0.3s;
  animation: floatingSkyDive 6s ease-in-out infinite;
}

.scrolled #sbr-skydive {
  opacity: 1;
}



/* ============================================
   FLOATING ANIMATION - Effet d'apesanteur
   ============================================ */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Pour sbl-pilot et sbl-pilot-fuel */
@keyframes floatingLeft {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -20px);
  }
}

/* Pour sbr-skydive - N'utilise PAS var(--sbr-skydive-x) dans transform */
@keyframes floatingSkyDive {
  0%, 100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -20px);
  }
}

/* Application des animations */
.sbl-pilot,
.sbl-pilot-fuel {
  animation: floatingLeft 6s ease-in-out infinite;
}

/* ============================================
   SAFEZONE
   ============================================ */
.safezone {
  position: absolute;
  width: 100%;
  height: var(--safezone-height);
  opacity: 0;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 100;
}

#action { 
  width: 100%; 
  height: 100%;
  pointer-events: none; /* ← AJOUTE */
}

/* ============================================
   BB LOGO TOP (1994x405px) - Positioned at top (same system as bb-jackpot)
   ============================================ */
.bb-logo-top {
  position: absolute;
  left: 50%;
  top: 0;
  width: 51.93vw !important; /* ← Force la règle */
  max-width: 1994px;
  height: auto;
  aspect-ratio: 1994 / 405;
  transform: translateX(-50%);
  background-image: url("../img/bb-logo-top.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
  contain: layout;
}

/* Sécurité supplémentaire */
@media (max-width: 727px) {
  .bb-logo-top {
    max-width: 51.93vw !important; /* Double verrouillage */
  }
}

/* ============================================
   BB HL STOERER (2314x794px) - Positioned at x:998px y:165px
   ============================================ */
.bb-hl-stoerer {
  position: absolute;
  left: 25.99vw;
  top: 9.10vh;
  width: 60.26vw;
  max-width: 2314px;
  height: auto;
  aspect-ratio: 2314 / 794;
  /* max-height sera géré dynamiquement par JS */
  background-image: url("../img/bb-hl-stoerer.webp");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* ============================================
   FIX : Empêcher le resize pendant le scroll
   ============================================ */
.bb-logo-top,
.bb-hl-stoerer {
  will-change: opacity;
  contain: layout size; /* ← Empêche le recalcul de taille */
}

/* Transition plus rapide pour masquer le saut */
.scrolled .bb-logo-top,
.scrolled .bb-hl-stoerer {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important; /* ← Plus rapide */
}



/* ============================================
   BB-JACKPOT - Positioned above site footer (1994x389px)
   ============================================ */
.bb-jackpot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 51.93vw;
  max-width: 1994px;
  height: auto;
  aspect-ratio: 1994 / 389;
  transform: translateX(-50%);
  background-image: url("../img/bb-jackpot.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease-in-out;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  z-index: 101;
}

.bb-jackpot.animate {
  opacity: 1;
}

/* ============================================
   BB-CTA-SPIEL - Same dimensions and position as bb-jackpot (1994x389px)
   Clickable zone: 480x93px at position x:885px y:196px
   ============================================ */
.bb-cta-spiel {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 51.93vw;
  max-width: 1994px;
  aspect-ratio: 1994 / 389;
  transform: translateX(-50%);
  background: url("../img/bb-cta-spiel.webp") no-repeat center bottom / contain;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, filter 0.3s ease;
  pointer-events: none;            /* ✅ parent passif */
  z-index: 102;
}

.bb-cta-spiel.animate {
  opacity: 1;
}

/* Hover visuel (piloté par JS) */
.bb-cta-spiel.hover-active {
  filter: brightness(1.2);
}

/* ✅ désactivé quand la vidéo est active */
.active .bb-cta-spiel {
  pointer-events: none;
  filter: none;
}

/* ✅ SEULE ZONE CLIQUABLE */
.bb-cta-spiel::after {
  content: "";
  position: absolute;
  left: 44.38%;
  top: 50.39%;
  width: 24.07%;
  height: 23.91%;
  pointer-events: auto;
  cursor: pointer;
  /* debug :
  background: rgba(0, 255, 0, 0.3);
  */
}

/* ============================================
   BB-CTA-VIDEO - Same dimensions and position as bb-jackpot (1994x389px)
   Clickable zone: 480x93px at position x:1395px y:196px
   ============================================ */
.bb-cta-video {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 51.93vw;
  max-width: 1994px;
  aspect-ratio: 1994 / 389;
  transform: translateX(-50%);
  background: url("../img/bb-cta-video.webp") no-repeat center bottom / contain;
  opacity: 0;
  transition: opacity 0.6s ease-in-out, filter 0.3s ease;
  pointer-events: none;           /* ✅ parent passif */
  z-index: 103;
}

.bb-cta-video.animate {
  opacity: 1;
}

/* Hover visuel (piloté par JS) */
.bb-cta-video.hover-active {
  filter: brightness(1.2);
}

/* ✅ SEULE ZONE CLIQUABLE */
.bb-cta-video::after {
  content: "";
  position: absolute;
  left: 69.96%;
  top: 50.39%;
  width: 24.07%;
  height: 23.91%;
  pointer-events: auto;
  cursor: pointer;
  /* debug :
  background: rgba(255, 0, 0, 0.3);
  */
}



/* Hide elements when scrolled */
.scrolled .bb-logo-top,
.scrolled .bb-hl-stoerer,
.scrolled .bb-jackpot,
.scrolled .bb-cta-spiel,
.scrolled .bb-cta-video,
.scrolled .close,
.scrolled .cta {
  opacity: 0 !important;
}

/* ============================================
   VIDEO TRAILER - Hidden by default, shown on click
   ============================================ */


/* --------------------------------------------------------------------- Aenderungen hier: Position und Größe hier definiert > */

.trailer {
  position: absolute;
  transform: translate(-50%, -50%) !important;
  top: 35%;
  left: 50%;
  min-width: 0;
  min-height: 0;
  max-width: 56.1vw;  /* 66vw - 15% = 56.1vw */
  max-height: 59.5vh; /* 70vh - 15% = 59.5vh */
  opacity: 0;
  visibility: hidden;
  z-index: 300;
  object-fit: contain;
  pointer-events: none;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.trailer:hover {
  cursor: pointer;
}

/* ----------------------------------------------------------------------- Aenderungen hier: keine Positions- oder Größenänderung hier > */

.active .trailer {
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: all 0.6s ease-out !important;
}


@media (max-height: 500px) {
  .active .trailer {
    max-height: 90vh !important;  /* limits the video height */
    width: auto !important;       /* recalculates width to preserve aspect ratio */
  }
}

/* ============================================
   DARKEN OVERLAY
   ============================================ */
.darken {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  opacity: 0;
  background: #000;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  pointer-events: none;
  z-index: 250;
}

.active .darken { 
  opacity: 0.8;
  pointer-events: auto;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */
.close {
  position: absolute !important;
  top: 20px !important;
  right: 10px !important;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
  pointer-events: auto;
}

.close.animate {
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 1.6s;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.close:hover { 
  opacity: 1 !important;
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}

.close.dark {
  background: url("../img/close-dark.svg") no-repeat center/73%;
  background-color: rgba(255, 255, 255, 0.5);
}

.close.light {
  background: url("../img/close-btn.png") no-repeat center/73%;
  background-color: rgba(0, 0, 0, 0);
}

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

/* --------------------------------------------------- Aenderungen hier > Site zum Testen eingeblendet, final wieder ausblenden */

/*
#site {
  position: absolute;
  width: 74.74vw;
  max-width: 2870px;
  height: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: #bbb;
}
*/



/* ============================================
   AD LABELS (ANZEIGE)
   ============================================ */
#al, #ar {
  position: fixed;
  font-family: Arial, sans-serif;
  font-size: 10px;
  color: #797979;
  letter-spacing: 0.5px;
  text-align: center;
  z-index: 10000;
  -webkit-transition: color 0.6s ease-in-out;
  transition: color 0.6s ease-in-out;
}

#al { left: 10px; top: 10px; }
#ar { right: 10px; top: 10px; }

.scrolled #al,
.scrolled #ar {
  color: #797979;
}

/* ============================================
   CTA layering fix (DO NOT MOVE ABOVE)
   ============================================ */

.bb-cta-spiel {
  z-index: 102;
}

.bb-cta-video {
  z-index: 101;
}

.bb-cta-video.hover-active {
  z-index: 103;
}


/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */


/* Masquer les sidebars scrollées sur écrans moyens */
@media (max-width: 1250px) {
  .sbl, 
  .sbr,
  .sbl-pilot,
  .sbl-pilot-fuel { 
    opacity: 0 !important; 
    pointer-events: none !important;
  }
}

@media (max-width: 768px) {
  .bb-logo-top {
    width: 90vw;
  }
  
}