/* src/styles/utilities.css */

/* ===== TYPOGRAPHIE GÉNÉRIQUE ===== */
.h2 {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  letter-spacing: 0.12em;
  font-size: 18px;
  margin: 0 0 12px;
}

.h3 {
  font-family: var(--font-display, 'Orbitron', sans-serif);
  letter-spacing: 0.12em;
  font-size: 13px;
  margin: 0 0 10px;
  color: rgba(255,255,255,0.72);
}

.soft {
  color: var(--muted);
  line-height: 1.7;
}

.color-note {
  margin-top: 16px;
  font-size: 14px;
  color: var(--accent);
  font-style: italic;
  text-align: right;
  opacity: 0.8;
}

/* ===== LAYOUT GLOBAL ===== */
.body-content {
  padding: 64px max(6vw, 28px) 110px;
  background: radial-gradient(900px 700px at 50% 0%, rgba(255,255,255,0.04), transparent 60%),
              radial-gradient(1000px 700px at 70% 110%, rgba(255,255,255,0.03), transparent 65%);
}

.universe {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  transition: background 0.5s ease;
  transform-style: preserve-3d;
}

/* ===== CARTE GÉNÉRIQUE ===== */
.card {
  background: var(--card-bg, rgba(10,14,24,0.55));
  border: 1px solid var(--stroke);
  border-radius: var(--card-border-radius, var(--r));
  box-shadow: var(--card-shadow, var(--shadow));
  backdrop-filter: blur(14px);
  padding: 22px;
  transition: background 0.3s, border-radius 0.3s, box-shadow 0.3s;
}

/* ===== ANIMATIONS GÉNÉRIQUES ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes twinkle {
  0%,100%{ transform: scale(0.9); opacity: 0.55; }
  50%{ transform: scale(1.15); opacity: 1; }
}

@keyframes floaty {
  0%,100%{ transform: translateY(0); opacity: 0.7; }
  50%{ transform: translateY(-10px); opacity: 1; }
}

@keyframes drift {
  0%,100%{ transform: translateY(0); opacity: 0.6; }
  50%{ transform: translateY(8px); opacity: 0.9; }
}

@keyframes speed {
  0%,100%{ transform: scale(0.9); filter: blur(0); }
  50%{ transform: scale(1.35); filter: blur(0.2px); }
}

@keyframes shutter {
  0%,100%{ transform: scale(0.95); }
  45%{ transform: scale(1.15); }
  50%{ transform: scale(0.85); }
  60%{ transform: scale(1.02); }
}

@keyframes haze {
  0%,100%{ transform: scale(1); opacity: 0.55; }
  50%{ transform: scale(1.35); opacity: 0.95; }
}

@keyframes rotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* ===== MICRO ANIMATIONS (utilisées dans les héros) ===== */
.hero__micro {
  position: absolute;
  inset: auto 0 calc(var(--footer-h) + 22px) 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  opacity: 0.9;
  z-index: var(--z-decor); /* 20 */
}

.micro {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 55%, transparent);
  position: relative;
  overflow: hidden;
  opacity: 0.95;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--accent) 55%, transparent));
}

/* Variantes par univers */
.micro--scan {
  background: rgba(255,255,255,0.22);
  box-shadow: 0 0 26px color-mix(in oklab, var(--cosmos) 70%, transparent);
  animation: spin 2.8s linear infinite;
}
.micro--star {
  background: rgba(255,255,255,0.28);
  box-shadow: 0 0 28px color-mix(in oklab, var(--cosmos) 80%, transparent);
  animation: twinkle 1.9s ease-in-out infinite;
}
.micro--ember {
  background: rgba(255,200,160,0.22);
  box-shadow: 0 0 30px color-mix(in oklab, var(--dragon) 78%, transparent);
  animation: floaty 2.4s ease-in-out infinite;
}
.micro--dust {
  background: rgba(255,220,160,0.18);
  box-shadow: 0 0 26px color-mix(in oklab, var(--ruines) 72%, transparent);
  animation: drift 2.7s ease-in-out infinite;
}
.micro--speed {
  background: rgba(220,255,250,0.18);
  box-shadow: 0 0 30px color-mix(in oklab, var(--vitesse) 85%, transparent);
  animation: speed 1.35s ease-in-out infinite;
}
.micro--photo {
  background: rgba(240,220,255,0.16);
  box-shadow: 0 0 30px color-mix(in oklab, var(--paysage) 80%, transparent);
  animation: shutter 2.6s ease-in-out infinite;
}
.micro--haze {
  background: rgba(255,240,220,0.14);
  box-shadow: 0 0 34px color-mix(in oklab, var(--horizon) 70%, transparent);
  animation: haze 3.1s ease-in-out infinite;
}

/* ===== VORTEX GAPS ===== */
.vortex-gap {
  height: 500vh;
  position: relative;
}

.vortex-gap::before,
.vortex-gap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 2; /* reste bas, au-dessus du fond mais sous le contenu */
}

.vortex-gap::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}

.vortex-gap::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

/* ===== ICÔNES PLATEFORMES (ruines) ===== */
.platform-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  transition: color 0.2s, text-shadow 0.2s;
}

.platform-link:hover {
  color: white;
  text-shadow: 0 0 10px currentColor;
}

.platform-link::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== MEDIA QUERIES GLOBALES ===== */
@media (max-width: var(--breakpoint-md)) {  /* 720px */
  .vortex-gap {
    height: 100vh;
  }
}

@media (max-width: 620px) {  /* 620px */
  .body-content {
    padding: 40px 4vw 60px;
  }
  .h2 {
    font-size: 16px;
  }
  .h3 {
    font-size: 12px;
  }
  .soft {
    font-size: 13px;
  }
  .card {
    padding: 16px;
    backdrop-filter: none !important;
  }
  .vortex-gap {
    height: 100vh;
  }
  body.in-transition .scroller {
    filter: none !important;
  }
}

@media (max-width: 480px) {
  .hero__micro {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    height: auto;
    min-height: 100vh;
  }
  .hero__content {
    padding: 20px 4vw;
  }
  .hero__title {
    font-size: clamp(24px, 6vh, 36px);
  }
  .hero__micro {
    display: none;
  }
}

/* ===== RÉDUCTION DE MOUVEMENT ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vortex-canvas,
  .hero__fx,
  .transition-overlay,
  .floating-particle,
  .speed-lines,
  .dragon-flames,
  .cosmos-stars,
  .ruines-code-bg,
  .spotlight,
  .message-cloud {
    display: none !important;
  }
}