/* 
 * Golden Ratio System for Baskerly Coming Soon
 * Mathematical foundation: φ = 1.618 (Golden Ratio)
 * Implementation: Variables CSS avec scaling adaptatif
 */

:root {
  /* === GOLDEN RATIO CONSTANTS === */
  --golden-ratio: 1.618;
  --inverse-golden: 0.618;
  --total-parts: 2.618;
  --min-image-height: 50vh; /* IMAGE DOMINANTE */
  --max-image-height: 65vh; /* Limite haute */
  --golden-squared: 2.618;
  --golden-cubed: 4.236;
  
  /* === BASE UNITS PAR DEVICE === */
  --base-unit-mobile: 1rem;
  --base-unit-tablet: 1.2rem;
  --base-unit-desktop: 1.4rem;
  
  /* Default base unit (mobile first) */
  --base-unit: var(--base-unit-mobile);
  
  /* === TYPOGRAPHY SCALE GOLDEN RATIO === */
  /* Calculs: base × φⁿ pour progression harmonieuse */
  --text-xs: calc(var(--base-unit) / var(--golden-squared));      /* ÷ φ² = 0.382rem */
  --text-sm: calc(var(--base-unit) / var(--golden-ratio));        /* ÷ φ = 0.618rem */
  --text-base: var(--base-unit);                                  /* 1rem */
  --text-lg: calc(var(--base-unit) * var(--golden-ratio));        /* × φ = 1.618rem */
  --text-xl: calc(var(--base-unit) * var(--golden-squared));      /* × φ² = 2.618rem */
  --text-2xl: calc(var(--base-unit) * var(--golden-cubed));       /* × φ³ = 4.236rem */
  
  /* === SPACING SCALE GOLDEN RATIO === */
  /* Distribution optimale selon le principe 60-30-10 adapté au golden ratio */
  --space-xs: calc(var(--base-unit) * var(--inverse-golden) * var(--inverse-golden)); /* 0.382rem */
  --space-sm: calc(var(--base-unit) * var(--inverse-golden));     /* 0.618rem */
  --space-base: var(--base-unit);                                 /* 1rem */
  --space-lg: calc(var(--base-unit) * var(--golden-ratio));       /* 1.618rem */
  --space-xl: calc(var(--base-unit) * var(--golden-squared));     /* 2.618rem */
  --space-2xl: calc(var(--base-unit) * var(--golden-cubed));      /* 4.236rem */
  
  /* Whitespace distribution ratios pour harmonie visuelle */
  --whitespace-primary: 61.8%;    /* Proportion dominante */
  --whitespace-secondary: 23.6%;  /* 38.2% × 0.618 */
  --whitespace-accent: 14.6%;     /* 38.2% × 0.382 */
  
  /* === BREAKPOINTS GOLDEN RATIO === */
  --bp-fold-closed: 280px;    /* Galaxy Fold fermé */
  --bp-mobile: 375px;         /* iPhone SE/13 mini */
  --bp-fold-open: 512px;      /* Galaxy Fold ouvert landscape */
  --bp-tablet: 768px;         /* iPad portrait */
  --bp-desktop: 1024px;       /* iPad landscape */
  --bp-desktop-lg: 1920px;    /* Full HD */
  
  /* === IMAGE PROPORTIONS GOLDEN RATIO === */
  --image-height-ratio: 61.8vh;    /* 100vh ÷ φ = 61.8vh */
  --image-width-ratio: 65vw;       /* Harmonie optimale */
  --image-aspect-ratio: 3/2;       /* Proche du golden ratio */
  
  /* === CONTRAST & ACCESSIBILITY === */
  --text-shadow-wcag: 
    0 0 4px rgba(0,0,0,1),
    0 2px 12px rgba(0,0,0,0.9),
    0 4px 24px rgba(0,0,0,0.8);
  --background-contrast: 
    linear-gradient(transparent 15%, rgba(4,2,6,0.95) 85%),
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
}

/* === RESPONSIVE BASE UNITS === */

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --base-unit: var(--base-unit-tablet);
  }
}

/* Desktop: ≥1024px */
@media (min-width: 1024px) {
  :root {
    --base-unit: var(--base-unit-desktop);
  }
}

/* === FOLDABLES SUPPORT === */

/* Galaxy Fold Closed: 280×653 */
@media (max-width: 280px) {
  :root {
    --base-unit: 0.8rem;
    --space-base: 0.5rem;
  }
}

/* Galaxy Fold Open Landscape: 717×512 */
@media (min-width: 717px) and (max-height: 512px) and (orientation: landscape) {
  :root {
    --base-unit: 1.1rem;
    --image-height-ratio: 45vh;
  }
}

/* Surface Duo: 720×540 dual screen */
@media (min-width: 720px) and (max-height: 540px) {
  :root {
    --layout-mode: dual-pane;
    --base-unit: 1.05rem;
  }
}

/* === UTILITY CLASSES GOLDEN RATIO === */

/* Typography Classes */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }

/* Spacing Classes */
.space-xs { gap: var(--space-xs); }
.space-sm { gap: var(--space-sm); }
.space-base { gap: var(--space-base); }
.space-lg { gap: var(--space-lg); }
.space-xl { gap: var(--space-xl); }
.space-2xl { gap: var(--space-2xl); }

/* Margin Classes */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-base { margin: var(--space-base); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

/* Padding Classes */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-base { padding: var(--space-base); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* === GOLDEN RATIO IMAGE SYSTEM === */
.golden-image {
  height: clamp(
    calc(40vh * var(--golden-ratio)),
    var(--image-height-ratio),
    70vh
  );
  max-width: clamp(
    calc(50vw * var(--golden-ratio)),
    var(--image-width-ratio),
    80vw
  );
  aspect-ratio: var(--image-aspect-ratio);
  object-fit: cover;
  object-position: center bottom;
}

/* === WCAG ACCESSIBILITY === */
.wcag-contrast {
  text-shadow: var(--text-shadow-wcag);
  background: var(--background-contrast);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* === DEBUG: GOLDEN RATIO GRID === */
.debug-golden-grid {
  position: relative;
}

.debug-golden-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--image-height-ratio);
  border: 2px dashed rgba(255, 215, 0, 0.3);
  pointer-events: none;
  z-index: 9999;
}

/* === PERFORMANCE OPTIMIZATIONS === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === NOUVELLE STRUCTURE EXACTE SELON INSTRUCTIONS === */

/* Reset et Structure de Base */
html, body {
  height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container principal avec flexbox column ET centrage vertical global */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* CENTRAGE VERTICAL de toute la création */
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Section texte - 0.618 parts (MOINS d'espace) */
.text-section {
  flex: var(--inverse-golden);
  display: flex;
  flex-direction: column;
  justify-content: center; /* CENTRAGE VERTICAL OBLIGATOIRE */
  align-items: center;
  text-align: center;
  gap: calc(0.5rem * var(--inverse-golden)); /* Espacement interne minimal */
  min-height: calc(100vh - var(--max-image-height));
  padding: 0;
  margin: 0;
}

/* Règles de proximité sémantique stricte */
.brand {
  line-height: 1.2;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  margin: 0; /* Pas de margin individuel */
  font-size: clamp(1.2rem, 3vw, 2.5rem); /* Plus bold */
  letter-spacing: calc(0.08em * var(--golden-ratio));
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.coming-soon {
  line-height: 1.1; /* Lignes serrées si multi-lignes */
  font-weight: 900;
  color: white;
  margin: 0; /* Pas de margin individuel */
  font-size: clamp(2.2rem, calc(5vw * var(--golden-ratio)), 6rem); /* Plus bold et grand */
  text-shadow: 0 3px 6px rgba(0,0,0,0.4);
  letter-spacing: -0.02em;
}

/* Section image - 1.618 parts (PLUS d'espace - dominant) */
.image-section {
  flex: var(--golden-ratio);
  height: clamp(var(--min-image-height), 
                calc(100vh * var(--golden-ratio) / var(--total-parts)), 
                var(--max-image-height));
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: flex-end; /* Colle au bas */
  width: 100%;
}

/* Image - Contraintes absolues */
.image-section img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
  padding: 0;
}

/* Critical CSS: Above-the-fold Golden Ratio Foundation */
@media screen {
  .coming-soon-title {
    font-size: var(--text-2xl);
    line-height: calc(var(--text-2xl) * var(--golden-ratio));
    margin-bottom: var(--space-lg);
  }
  
  .coming-soon-logo {
    font-size: var(--text-xl);
    margin-bottom: var(--space-xl);
  }
}