/* ═══════════════════════════════════════════════════════════
   CSS SHOWCASE · style.css — Liquid Glass v3
   Sections : Verre / Liquide / Prisme / Bulle / Onde
   Fond blanc (light) + fond noir (dark) selon section
═══════════════════════════════════════════════════════════ */

/* ── @property ──────────────────────────────────────────── */
@property --ca { syntax: '<color>'; inherits: false; initial-value: #8b5cf6; }
@property --cb { syntax: '<color>'; inherits: false; initial-value: #3b82f6; }
@property --cc { syntax: '<color>'; inherits: false; initial-value: #06b6d4; }

/* ── Variables ─────────────────────────────────────────── */
:root {
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --nav-dur:   0.82s;
  --obj:       min(300px, 74vw);
  --liq-w:     min(260px, 62vw);
  --liq-h:     min(360px, 78vw);
  --liq-r:     min(36px, 8vw);
  --prism-h:   min(220px, 52vw);
  --prism-w:   min(180px, 42vw);
  --bubble-s:  min(280px, 72vw);
  --pond-s:    min(380px, 84vw);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  overflow:    hidden;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  cursor:      none;
}
@media (pointer: coarse) { body { cursor: auto; } }
svg { display: block; }
button { font-family: inherit; }


/* ═══════════════════════════════════════════════════════════
   SLIDES & SCENES
═══════════════════════════════════════════════════════════ */
.slides {
  position:    fixed;
  top: 0; left: 0;
  width:       100%;
  will-change: transform;
  transition:  transform var(--nav-dur) var(--ease);
}
.scene {
  position:        relative;
  width:           100%;
  height:          100svh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}

/* Fonds */
.s-light { background: #f8f8fb; color: #1a1028; }
.s-dark  { background: #060610; color: rgba(255,255,255,.9); }

/* Stage */
.stage {
  position: relative;
  z-index:  2;
  display:  flex;
  align-items: center;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   BLOBS (background, visibles à travers le verre)
═══════════════════════════════════════════════════════════ */
.blobs {
  position:       absolute;
  inset:          0;
  z-index:        0;
  pointer-events: none;
  overflow:       hidden;
}
.blob {
  position:  absolute;
  border-radius: 50%;
}
@keyframes bm1 { from { transform: translate(0,0) scale(1); }    to { transform: translate(4%,5%) scale(1.06); } }
@keyframes bm2 { from { transform: translate(0,0) scale(1.04); } to { transform: translate(-3%,4%) scale(.97); } }
@keyframes bm3 { from { transform: translate(0,0) scale(1); }    to { transform: translate(5%,-4%) scale(1.08); } }


/* ═══════════════════════════════════════════════════════════
   CURSEUR CUSTOM (desktop)
═══════════════════════════════════════════════════════════ */
#cursor { position:fixed;top:0;left:0;z-index:9999;pointer-events:none; }
.cur-dot {
  position:absolute;width:5px;height:5px;background:#555;
  border-radius:50%;transform:translate(-50%,-50%);
  transition:width .15s,height .15s,background .25s;
}
.cur-ring {
  position:absolute;width:30px;height:30px;
  border:1px solid rgba(80,80,100,.4);border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease),height .35s var(--ease),border-color .25s,background .25s;
}
.s-dark ~ * .cur-dot,
body.dark-cur .cur-dot  { background:#fff; }
body.dark-cur .cur-ring { border-color:rgba(255,255,255,.35); }
body.hov .cur-ring { width:50px;height:50px;background:rgba(139,92,246,.08);border-color:#8b5cf6; }
body.hov .cur-dot  { background:#8b5cf6;width:7px;height:7px; }


/* ═══════════════════════════════════════════════════════════
   BOUTON GYROSCOPE
═══════════════════════════════════════════════════════════ */
.gyro-btn {
  display:none;position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);
  z-index:200;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.12);
  color:rgba(0,0,0,.55);padding:.55rem 1.4rem;border-radius:50px;
  font-size:.78rem;letter-spacing:.08em;backdrop-filter:blur(14px);
  cursor:pointer;transition:background .2s;
}
.gyro-btn:hover { background:rgba(0,0,0,.1); }


/* ═══════════════════════════════════════════════════════════
   DOTS NAVIGATION
═══════════════════════════════════════════════════════════ */
.dots {
  position:fixed;right:clamp(1.2rem,3vw,2.2rem);top:50%;
  transform:translateY(-50%);z-index:100;
  display:flex;flex-direction:column;gap:12px;
}
.dot {
  width:6px;height:6px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:rgba(0,0,0,.2);
  transition:background .35s,transform .35s var(--ease);
}
.dot.active { background:rgba(0,0,0,.75);transform:scale(1.65); }
/* Dots blancs sur sections sombres */
.slide-dark .dot    { background:rgba(255,255,255,.25); }
.slide-dark .dot.active { background:rgba(255,255,255,.85); }


/* ═══════════════════════════════════════════════════════════
   LABEL SECTION
═══════════════════════════════════════════════════════════ */
.scene-label {
  position:absolute;
  bottom:clamp(2rem,6vh,4rem);left:clamp(2rem,6vw,5rem);
  z-index:3;display:flex;flex-direction:column;gap:.28rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease) .1s,transform .7s var(--ease) .1s;
}
.scene.active .scene-label { opacity:1;transform:none; }

.lbl-feat {
  font-size:clamp(.56rem,1.2vw,.68rem);letter-spacing:.34em;
  text-transform:uppercase;font-weight:400;
}
.s-light .lbl-feat { color:rgba(0,0,0,.35); }
.s-dark  .lbl-feat { color:rgba(255,255,255,.28); }

.lbl-name {
  font-size:clamp(1.4rem,3.8vw,2.2rem);font-weight:300;letter-spacing:-.03em;
}
.s-light .lbl-name { color:rgba(0,0,0,.82); }
.s-dark  .lbl-name { color:rgba(255,255,255,.9); }

/* Compteur coin haut droit */
.scene::before {
  content:attr(data-index);position:absolute;
  top:clamp(1.8rem,5vh,3rem);right:clamp(2rem,5vw,4rem);
  z-index:3;font-size:.64rem;letter-spacing:.28em;
  font-family:'Courier New',monospace;
  opacity:0;transition:opacity .5s ease .2s;
}
.scene.active::before { opacity:1; }
.s-light::before { color:rgba(0,0,0,.22); }
.s-dark::before  { color:rgba(255,255,255,.22); }


/* ═══════════════════════════════════════════════════════════
   S1 · VERRE — glass card sur fond blanc
═══════════════════════════════════════════════════════════ */
.glass-card {
  width:    min(260px,64vw);
  height:   min(380px,82vw);
  border-radius: min(32px,7vw);
  position: relative;
  overflow: hidden;
  cursor:   pointer;

  /* Substance du verre */
  background:      rgba(255,255,255,.42);
  backdrop-filter: blur(36px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(36px) saturate(180%) brightness(1.04);

  /* Bords */
  border: 1px solid rgba(255,255,255,.85);

  /* Ombres portées + reflet bord sup interne */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -0.5px 0 rgba(255,255,255,.35),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(255,255,255,.4),
    0 28px 80px rgba(0,0,0,.09),
    0 6px 24px rgba(0,0,0,.06);

  transition: transform .12s ease-out, box-shadow .3s ease;
  will-change: transform;
}
.glass-card:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.98),
    inset 0 -0.5px 0 rgba(255,255,255,.4),
    inset 1px 0 0 rgba(255,255,255,.55),
    inset -1px 0 0 rgba(255,255,255,.45),
    0 40px 100px rgba(0,0,0,.12),
    0 10px 30px rgba(0,0,0,.08);
}

/* Reflet spéculaire (suit curseur/gyro) */
.gc-spec {
  position:absolute;
  width:65%;height:40%;
  top:-5%;left:10%;
  background:radial-gradient(ellipse, rgba(255,255,255,.72) 0%, transparent 70%);
  border-radius:50%;
  filter:blur(14px);
  pointer-events:none;
  transition:transform .14s ease-out;
  will-change:transform;
}
/* Filet lumineux bord supérieur */
.gc-top-edge {
  position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.9) 30%,rgba(255,255,255,.9) 70%,transparent);
  pointer-events:none;
}
/* Aberration chromatique aux bords (subtile) */
.gc-chroma {
  position:absolute;inset:0;border-radius:inherit;
  background:
    linear-gradient(to right, rgba(255,60,100,.04) 0%, transparent 20%),
    linear-gradient(to left,  rgba(60,100,255,.04) 0%, transparent 20%);
  pointer-events:none;
  mix-blend-mode:color;
}
/* Encoche style visionOS */
.gc-notch {
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:2px;
  background:rgba(255,255,255,.55);
  pointer-events:none;
}

/* Glitch chromatic (classe JS) */
.glass-card.glitch {
  animation:chromaGlitch .42s steps(3) forwards;
}
@keyframes chromaGlitch {
  0%   { filter:none;transform:none; }
  20%  { filter:hue-rotate(45deg) saturate(220%);transform:translate(4px,0); }
  40%  { filter:hue-rotate(-40deg) saturate(200%);transform:translate(-3px,1px); }
  65%  { filter:hue-rotate(20deg) saturate(160%);transform:translate(2px,-1px); }
  85%  { filter:none;transform:translate(-1px,0); }
  100% { filter:none;transform:none; }
}


/* ═══════════════════════════════════════════════════════════
   S2 · LIQUIDE — physique SVG, fond noir
═══════════════════════════════════════════════════════════ */
.liquid-wrap { position:relative; }

.liquid-container {
  width:    var(--liq-w);
  height:   var(--liq-h);
  border-radius: var(--liq-r);
  position: relative;
  overflow: hidden;

  /* Parois du container (verre épais) */
  border: 1.5px solid rgba(255,255,255,.18);
  box-shadow:
    inset 2px 0 8px rgba(255,255,255,.04),
    inset -2px 0 8px rgba(255,255,255,.03),
    inset 0 2px 10px rgba(255,255,255,.08),
    inset 0 -1px 4px rgba(0,0,0,.4),
    0 40px 100px rgba(0,0,0,.55),
    0 12px 36px rgba(0,0,0,.4);
}

.liquid-svg {
  position:absolute;inset:0;width:100%;height:100%;
}

/* Surcouche verre sur le liquide */
.liq-glass {
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to right,
    rgba(255,255,255,.06) 0%, transparent 30%,
    transparent 70%, rgba(255,255,255,.04) 100%);
  backdrop-filter:blur(1px);
}
/* Reflet haut du container */
.liq-glass::before {
  content:'';position:absolute;top:0;left:10%;right:10%;height:1.5px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.5) 30%,rgba(255,255,255,.5) 70%,transparent);
}
/* Ombre portée */
.liq-shadow {
  position:absolute;bottom:-30px;left:10%;right:10%;height:30px;
  background:radial-gradient(ellipse,rgba(100,200,255,.18) 0%,transparent 70%);
  filter:blur(8px);pointer-events:none;
}


/* ═══════════════════════════════════════════════════════════
   S3 · PRISME — mix-blend screen sur fond noir
═══════════════════════════════════════════════════════════ */
.prism-scene {
  position:relative;
  width:min(500px,92vw);
  height:min(400px,80vw);
  display:flex;align-items:center;justify-content:center;
}

/* Rayons de lumière */
.p-ray {
  position:absolute;
  mix-blend-mode:screen;
  border-radius:50%;
  will-change:transform;
  transition:transform .12s ease-out;
}
.pr-r {
  width:min(200px,48vw);height:min(500px,110vw);
  background:radial-gradient(ellipse,rgba(255,60,80,.90) 0%,transparent 65%);
  top:50%;left:40%;transform-origin:top center;
  transform:rotate(-22deg) translateY(-8%);
  animation:pr-r-idle 12s ease-in-out infinite alternate;
}
.pr-g {
  width:min(200px,48vw);height:min(500px,110vw);
  background:radial-gradient(ellipse,rgba(60,255,160,.75) 0%,transparent 65%);
  top:50%;left:40%;transform-origin:top center;
  transform:rotate(-6deg) translateY(-8%);
  animation:pr-g-idle 14s ease-in-out infinite alternate;
  animation-delay:-5s;
}
.pr-b {
  width:min(200px,48vw);height:min(500px,110vw);
  background:radial-gradient(ellipse,rgba(60,120,255,.85) 0%,transparent 65%);
  top:50%;left:40%;transform-origin:top center;
  transform:rotate(10deg) translateY(-8%);
  animation:pr-b-idle 10s ease-in-out infinite alternate;
  animation-delay:-3s;
}
@keyframes pr-r-idle { from{transform:rotate(-22deg) translateY(-8%)} to{transform:rotate(-19deg) translateY(-11%)} }
@keyframes pr-g-idle { from{transform:rotate(-6deg)  translateY(-8%)} to{transform:rotate(-3deg)  translateY(-11%)} }
@keyframes pr-b-idle { from{transform:rotate(10deg)  translateY(-8%)} to{transform:rotate(13deg)  translateY(-11%)} }
.p-ray.live { animation:none; }

/* Corps du prisme (verre) */
.prism-body {
  position:relative;z-index:2;
  width:    var(--prism-w);
  height:   var(--prism-h);
  clip-path: polygon(50% 0%,100% 100%,0% 100%);

  background:linear-gradient(160deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 100%);
  backdrop-filter:blur(10px) saturate(150%);
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  overflow:hidden;

  filter:drop-shadow(0 0 30px rgba(100,180,255,.12));
  transition:transform .12s ease-out;
  will-change:transform;
}
/* Reflet spéculaire interne */
.prism-spec {
  position:absolute;top:15%;left:20%;width:35%;height:30%;
  background:radial-gradient(ellipse,rgba(255,255,255,.45) 0%,transparent 70%);
  border-radius:50%;filter:blur(8px);pointer-events:none;
}
/* Filets de bords */
.prism-edge-l {
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,.16) 0%,transparent 15%);
}
.prism-edge-r {
  position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(to left,rgba(255,255,255,.12) 0%,transparent 15%);
}


/* ═══════════════════════════════════════════════════════════
   S4 · BULLE — sphère glass réflective
═══════════════════════════════════════════════════════════ */
.bubble {
  width:     var(--bubble-s);
  height:    var(--bubble-s);
  border-radius:50%;
  position:  relative;
  overflow:  hidden;
  cursor:    pointer;

  background:      rgba(255,255,255,.22);
  backdrop-filter: blur(30px) saturate(200%) brightness(1.06);
  -webkit-backdrop-filter: blur(30px) saturate(200%) brightness(1.06);

  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 30px 90px rgba(0,0,0,.10),
    0 8px 24px rgba(0,0,0,.06);

  transition:transform .1s ease-out;
  will-change:transform;
}

/* Reflet principal (suit souris/gyro) */
.b-spec {
  position:absolute;
  width:55%;height:42%;
  top:7%;left:8%;
  background:radial-gradient(ellipse,rgba(255,255,255,.88) 0%,transparent 68%);
  border-radius:50%;filter:blur(12px);pointer-events:none;
  transition:transform .15s ease-out;
  will-change:transform;
}
/* Reflet secondaire (bas droite, fixe — lumière transmise) */
.b-spec2 {
  position:absolute;width:22%;height:18%;
  bottom:16%;right:14%;
  background:radial-gradient(ellipse,rgba(255,255,255,.52) 0%,transparent 70%);
  border-radius:50%;filter:blur(6px);pointer-events:none;
}
/* Micro-reflet (bord supérieur gauche) */
.b-spec3 {
  position:absolute;width:9%;height:7%;
  top:18%;left:22%;
  background:radial-gradient(ellipse,rgba(255,255,255,.85) 0%,transparent 70%);
  border-radius:50%;filter:blur(3px);pointer-events:none;
}
/* Caustic (lumière diffractée interne, colorée) */
.b-caustic {
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(
    from 200deg at 65% 70%,
    rgba(139,92,246,.08) 0deg,
    rgba(6,182,212,.08) 60deg,
    transparent 120deg,
    rgba(236,72,153,.06) 240deg,
    rgba(139,92,246,.08) 360deg
  );
  pointer-events:none;
  animation:causticSpin 18s linear infinite;
}
@keyframes causticSpin { to { transform:rotate(360deg); } }
/* Aberration chromatique (bord de la sphère) */
.b-chroma {
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 62%,rgba(255,60,80,.06) 75%,rgba(60,100,255,.08) 85%,transparent 95%);
  pointer-events:none;
  mix-blend-mode:color;
}

/* Glitch bulle au clic */
.bubble.glitch { animation:chromaGlitch .38s steps(3) forwards; }


/* ═══════════════════════════════════════════════════════════
   S5 · ONDE — grand disque verre, ripples au touch
═══════════════════════════════════════════════════════════ */
.pond {
  width:     var(--pond-s);
  height:    var(--pond-s);
  border-radius:50%;
  position:  relative;
  overflow:  hidden;
  cursor:    crosshair;
}
.pond-glass {
  position:absolute;inset:0;border-radius:50%;

  background:      rgba(255,255,255,.38);
  backdrop-filter: blur(34px) saturate(170%) brightness(1.03);
  -webkit-backdrop-filter: blur(34px) saturate(170%) brightness(1.03);

  border:1.5px solid rgba(255,255,255,.82);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 30px 80px rgba(0,0,0,.08),
    0 6px 20px rgba(0,0,0,.05);
  pointer-events:none;
}
/* Reflet statique (ellipse en haut) */
.pond-glass::before {
  content:'';position:absolute;
  top:6%;left:20%;width:60%;height:20%;
  background:radial-gradient(ellipse,rgba(255,255,255,.55) 0%,transparent 70%);
  border-radius:50%;filter:blur(10px);
}

/* Ripples (injectées par JS) */
@keyframes pondRipple {
  from { transform:translate(-50%,-50%) scale(0);opacity:.85;border-color:rgba(255,255,255,.8); }
  to   { transform:translate(-50%,-50%) scale(16);opacity:0;border-color:rgba(180,180,220,.1); }
}
.pond-ripple {
  position:absolute;
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.8);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  animation:pondRipple 1.8s ease-out forwards;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .scene-label { bottom:1.8rem;left:1.8rem; }
  .lbl-name    { font-size:1.3rem; }
  .dots        { right:1rem; }
  .gyro-btn    { font-size:.72rem;padding:.45rem 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER MENU
═══════════════════════════════════════════════════════════ */
.ham-btn {
  position:fixed;top:clamp(1.4rem,4vh,2.2rem);left:clamp(1.2rem,3vw,2.2rem);
  z-index:500;
  width:40px;height:40px;border-radius:12px;
  background:rgba(160,160,180,.12);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;padding:0;
  transition:background .2s,box-shadow .2s;
}
.ham-btn:hover { background:rgba(160,160,180,.2);box-shadow:0 6px 20px rgba(0,0,0,.1); }
.hl {
  width:16px;height:1.5px;border-radius:1px;
  background:rgba(0,0,0,.65);
  transition:transform .3s var(--ease),opacity .2s,width .3s;
}
body.dark-cur .hl { background:rgba(255,255,255,.75); }

/* Croix quand ouvert */
body.ham-open .hl:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
body.ham-open .hl:nth-child(2) { opacity:0;width:0; }
body.ham-open .hl:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Menu déroulant */
.ham-menu {
  position:fixed;top:0;left:0;z-index:490;
  width:min(240px,80vw);padding:5rem 1.2rem 1.5rem;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(36px) saturate(180%);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  border-right:1px solid rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.6);
  border-bottom-right-radius:24px;
  box-shadow:4px 0 40px rgba(0,0,0,.06),0 20px 60px rgba(0,0,0,.08);
  transform:translateX(-105%);
  transition:transform .5s var(--ease);
  pointer-events:none;
}
body.ham-open .ham-menu { transform:none;pointer-events:auto; }

/* Overlay (fermeture au clic dehors) */
.ham-overlay {
  position:fixed;inset:0;z-index:480;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
body.ham-open .ham-overlay { opacity:1;pointer-events:auto; }

/* Liens du menu */
.ham-link {
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem .9rem;border-radius:12px;
  font-size:.84rem;font-weight:500;letter-spacing:.02em;
  color:rgba(0,0,0,.75);
  text-decoration:none;
  transition:background .18s,color .18s;
}
.ham-link:hover { background:rgba(124,58,237,.08);color:#6d28d9; }
.ham-link-icon { font-size:1rem;opacity:.75; }

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITÉ */
@media (prefers-reduced-motion:reduce) {
  .slides { transition-duration:.01ms !important; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}