/* =========================
   EFREI Vitrine – Effets premium
   (hover cards, bulles, backgrounds, micro-interactions)
========================= */

:root{
  --shadow-soft: 0 12px 30px rgba(0,0,0,0.12);
  --shadow-lift: 0 22px 55px rgba(0,0,0,0.20);
  --radius-xl: 18px;
}

/* Animated floating bubbles background */
.bubble-bg{
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bubble-bg span{
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(0,198,198,0.20), rgba(30,144,255,0.14), transparent 65%);
  filter: blur(0px);
  animation: floaty 11s ease-in-out infinite;
  opacity: 0.9;
}
.bubble-bg span:nth-child(1){ left: -70px; top: 18%; animation-duration: 13s; transform: scale(1.05); }
.bubble-bg span:nth-child(2){ right: -90px; top: 8%; width: 320px; height: 320px; animation-duration: 16s; }
.bubble-bg span:nth-child(3){ left: 18%; bottom: -110px; width: 360px; height: 360px; animation-duration: 18s; opacity:0.7; }
.bubble-bg span:nth-child(4){ right: 18%; bottom: -80px; width: 260px; height: 260px; animation-duration: 14s; opacity:0.65; }
@keyframes floaty{
  0%,100%{ transform: translateY(0) translateX(0) scale(1); }
  50%{ transform: translateY(-22px) translateX(14px) scale(1.06); }
}

/* Premium card */
.card-premium{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color var(--transition-default);
  position: relative;
  overflow: hidden;
}
.card-premium::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 320px at 10% 10%, rgba(0,198,198,0.20), transparent 60%),
    radial-gradient(800px 300px at 90% 20%, rgba(30,144,255,0.16), transparent 55%);
  opacity: 0.32;
  pointer-events:none;
}
.card-premium:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(30,144,255,0.35);
}

/* Button glow */
.btn-glow{
  position: relative;
}
.btn-glow::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(30,144,255,0.24), transparent 60%);
  opacity: 0;
  transition: opacity 180ms ease;
  z-index:-1;
}
.btn-glow:hover::after{ opacity: 1; }

/* Section background helpers */
.section-bg-grid{
  background-image: url("../img/backgrounds/grid.svg");
  background-size: cover;
  background-position: center;
}
.section-bg-dots{
  background-image: url("../img/backgrounds/dots.svg");
  background-size: cover;
  background-position: center;
}
.section-bg-waves{
  background-image: url("../img/backgrounds/waves.svg");
  background-size: cover;
  background-position: center;
}

/* Mode sombre : appliquer un voile foncé sur les sections à fond vague pour mieux contraster */
body:not(.theme-light) .section-bg-waves {
    position: relative;
    /* Empêcher l'overlay de dépasser le conteneur */
    overflow: hidden;
}
body:not(.theme-light) .section-bg-waves::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 0;
}
body:not(.theme-light) .section-bg-waves > * {
    position: relative;
    z-index: 1;
}

/* Ensure overlay content sits above bubble bg */
.section-rel{
  position: relative;
  z-index: 1;
}

/* Extra spacing when cards stack vertically */
.stack-gap > * + *{
  margin-top: 22px;
}