:root{
  --bg:#0a0a0b;
  --fg:#e9eef4;
  --muted:#a8b3c7;
  --brand:#00aaff;
  --brand2:#ff00ff;
  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.12);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 10% -10%, #032926 0%, transparent 40%),
              radial-gradient(1000px 500px at 110% 10%, #0b2e46 0%, transparent 45%),
              var(--bg);
  overflow-x:hidden;
  
}

/* Loader overlay — full screen, centered card */
.loader-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: radial-gradient(1000px 500px at 50% -20%, rgba(0,170,255,.2), transparent 40%), #0a0a0b;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .45s ease;
}
body.is-ready .loader-overlay{ opacity:0; pointer-events:none; }

.loader-card{
  width:min(520px, 90vw);
  padding:24px;
  border-radius:20px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--glass) 85%, transparent);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px) saturate(140%);
  text-align:center;
}
.loader-logo{
  width:76px; height:76px;
  border-radius:50%;
  display:block;
  margin: 0 auto 12px auto;
  box-shadow: var(--shadow);
}
.loader-title{
  font-family: Rajdhani, Manrope, sans-serif;
  font-weight:800;
  letter-spacing:.5px;
  margin-bottom:14px;
  font-size: clamp(20px, 2.4vw, 28px);
}
.loader-bar{
  height:12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--border);
  overflow:hidden;
}
.loader-fill{
  height:100%;
  width:100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 24px rgba(255,0,255,.35);
  transition: transform .25s ease;
}
.loader-label{
  margin-top:10px;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size:12px; color:var(--muted);
}

/* Background Spline behind */
#spline-container{
  position:fixed;
  inset:0;
  z-index:-2;
}
#spline-container spline-viewer{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important; height:100vh !important;
  z-index:-2 !important;
  pointer-events:none !important;
}

/* Particles under UI */
#fx-particles{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  transition: opacity .25s ease;
}

/* Dock with stylish switch */
.control-dock{
  position:fixed;
  left:12px; bottom:12px;
  z-index:60;
  display:flex; gap:8px; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  background: color-mix(in oklab, var(--glass) 70%, transparent);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.switch{
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none;
}
.switch input{ display:none; }
.switch .track{
  position:relative; width:64px; height:34px;
  border-radius:999px;
  background: rgba(255,255,255,.1);
  border:1px solid var(--border);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.35);
  transition: background .25s ease, border-color .25s ease;
}
.switch .knob{
  position:absolute; top:3px; left:3px;
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 20px rgba(255,0,255,.25);
  transition: transform .25s ease;
}
.switch input:checked + .track{ background: rgba(0,0,0,.35); border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); }
.switch input:checked + .track .knob{ transform: translateX(30px); }

.switch .switch-text{
  font-weight:800; letter-spacing:.2px;
  display:inline-flex; gap:8px;
}

/* Header */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:12px 20px;
  z-index:80; /* ensure above everything */
  backdrop-filter:saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(10,10,11,0.65), rgba(10,10,11,0.15) 70%, transparent);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg); }
.brand-logo{ width:44px; height:44px; border-radius:50%; box-shadow: var(--shadow); display:block; }
.brand-title{ font-weight:800; letter-spacing:.2px; font-size:18px; }
.brand-title .thin{ font-weight:600; color:var(--muted); }

/* Quick links layout: row of buttons + FPS below, centered */
.quick-links{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  position:relative; z-index:81;
}
.quick-links .ql-row{ display:flex; flex-direction:row; align-items:center; gap:8px; }
.site-header .quick-links .chip{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 12px;
  font-weight:600; text-decoration:none; color:var(--fg);
  background:color-mix(in oklab, var(--glass) 60%, transparent);
  border:1px solid var(--border);
  border-radius:999px;
  transition: transform .2s ease, background .2s ease;
  pointer-events:auto;
}
.site-header .quick-links .chip:hover{ transform:translateY(-1px); }

/* FPS directly under the row, centered */
.quick-links .ql-fps{ display:flex; justify-content:center; width:100%; }
.hud-fps-inline{
  display:inline-block;
  font-family: JetBrains Mono, ui-monospace, monospace;
  font-size:12px;
  color:var(--muted);
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:8px;
  background: color-mix(in oklab, var(--glass) 65%, transparent);
  pointer-events:none;
}

/* Main shell */
.shell{
  position:relative;
  z-index:45;
  padding-left:clamp(16px, 5vw, 48px);
  padding-right:clamp(16px, 5vw, 48px);
  padding-bottom:64px;
  max-width:1200px;
  margin:0 auto;
}

/* Reveal animation after loader */
.reveal-root{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
body.is-ready .reveal-root{
  opacity: 1;
  transform: none;
}

/* Glass block */
.glass{
  background: color-mix(in oklab, var(--glass) 70%, transparent);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow: var(--shadow);
}

/* Buttons */
.btn{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 18px; border-radius:12px;
  font-weight:800; letter-spacing:.2px;
  text-decoration:none; color:var(--fg);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
}
.btn.primary{ background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.btn.ghost{ background:transparent; border:1px solid var(--border); }
.btn:hover{ transform: translateY(-1px); }

/* Pointer glow */
.pointer-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  background: radial-gradient(350px 350px at var(--x,50%) var(--y,50%), rgba(0,170,255,0.18), transparent 60%);
  transition: opacity .25s ease;
}

/* Hero */
.hero{ padding:28px clamp(16px, 3vw, 32px); }
.hero-title{
  font-family: Rajdhani, Manrope, sans-serif;
  font-size: clamp(28px, 3.5vw, 56px);
  line-height:1.05;
  letter-spacing:.5px;
  margin:6px 0 10px;
  text-shadow:0 1px 0 rgba(0,0,0,0.3);
}
.hero-sub{ color:var(--muted); margin:0 0 18px; font-size: clamp(14px, 1.3vw, 18px); }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.badges{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.badge{
  font-family: Rajdhani, Manrope, sans-serif;
  font-weight:800; letter-spacing:.5px; font-size:14px;
  padding:8px 12px; border-radius:12px;
  border:1px solid var(--border);
  background: radial-gradient(120px 60px at 30% 0%, rgba(0,170,255,.25), transparent 60%), color-mix(in oklab, var(--glass) 70%, transparent);
  box-shadow: 0 0 30px rgba(255,0,255,.15), inset 0 0 12px rgba(0,170,255,.2);
  animation: throb 2.2s ease-in-out infinite;
}
@keyframes throb{
  0%,100%{ transform: translateY(0); box-shadow: 0 0 30px rgba(255,0,255,.15), inset 0 0 12px rgba(0,170,255,.2); }
  50%{ transform: translateY(-1px); box-shadow: 0 0 40px rgba(255,0,255,.24), inset 0 0 18px rgba(0,170,255,.28); }
}

/* Cards */
.cards{
  margin-top:24px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.card{
  position:relative;
  padding:18px;
  border-radius:20px;
  text-decoration:none; color:var(--fg);
  border:1px solid var(--border);
  min-height:140px;
  transform-style: preserve-3d;
  transition: transform .15s ease;
  background:
    radial-gradient(600px 200px at -10% -10%, rgba(0,170,255,0.28), transparent 40%),
    radial-gradient(600px 200px at 110% 110%, rgba(255,0,255,0.18), transparent 35%),
    color-mix(in oklab, #0f1113 80%, transparent);
  overflow:hidden;
}
.card-badge{
  position:absolute; top:12px; right:12px;
  font-family: Rajdhani, Manrope, sans-serif;
  font-weight:800; letter-spacing:.5px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--glass) 70%, transparent);
}
.card-title{ margin-top:10px; font-size:22px; font-weight:800; }
.card-sub{ color:var(--muted); margin-top:6px; font-weight:600; }
.card:hover{ outline:1px solid color-mix(in oklab, var(--brand) 60%, transparent); }
.card-bg{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; }

/* Terminal */
.terminal{ margin-top:18px; padding:0; overflow:hidden; }
.term-header{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.3), transparent);
}
.term-title{ color:var(--muted); font-weight:700; font-family: JetBrains Mono, ui-monospace, monospace; }
.dot{ width:10px; height:10px; border-radius:50%; }
.red{ background:#ff5f56; } .yellow{ background:#ffbd2e; } .green{ background:#27c93f; }
.term-body{
  font-family: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height:1.6; padding:16px; min-height:160px; white-space:pre-wrap;
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(0,170,255,.18), transparent 40%),
    radial-gradient(800px 200px at 100% 100%, rgba(255,0,255,.14), transparent 40%);
  text-shadow: 0 0 1px rgba(0,0,0,.3);
}

/* Footer */
.site-footer{ position:fixed; bottom: 0; width: 100%; z-index:45; padding:24px; text-align:center; color:var(--muted); margin-top: auto; /* Pousse le footer en bas */ }

/* Focus */
:focus-visible{ outline: 2px solid var(--brand2); outline-offset: 2px; border-radius: 8px; }

/* Responsive */
@media (max-width: 900px){
  .quick-links .ql-row{ gap:6px; }
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .site-header{ gap:10px; }
  .brand-title{ display:none; }
  .hero{ padding:16px; }
  .cards{ grid-template-columns: 1fr; }
  .control-dock{ left:50%; transform:translateX(-50%); bottom:10px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pointer-glow{ display:none }
  .tilt{ transform:none !important }
  .badge{ animation:none }
}

/* === Animated Text (brand + hero) === */
/* Brand title: gradient text with soft shimmer + occasional micro glitch */
.brand-title{
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}
.brand-title::after{
  content: "";
  position: absolute; inset: 0 0 -2px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  mix-blend-mode: screen;
  transform: translateX(-100%);
  animation: shimmer 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); opacity: 0.0; }
  20%{ opacity: .9; }
  50%{ transform: translateX(120%); opacity: .0; }
  100%{ transform: translateX(120%); opacity: 0; }
}
/* micro glitch (very subtle, avoids layout shift) */
@keyframes microglitch {
  0%,97%,100% { filter: none; transform: none; }
  98% { transform: translateY(.3px); filter: hue-rotate(6deg) saturate(1.1); }
  99% { transform: translateY(-.3px); filter: hue-rotate(-6deg) saturate(1.1); }
}
.brand-title{ animation: microglitch 6s steps(1,end) infinite; }

/* Hero title: type-reveal mask bar + glow */
.hero-title{
  position: relative;
  overflow: hidden;
}
.hero-title .reveal-mask{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0) 12%,
    rgba(10,10,11,1) 13%, rgba(10,10,11,1) 87%,
    rgba(10,10,11,0) 88%, rgba(10,10,11,0) 100%);
  mix-blend-mode: multiply;
  pointer-events:none;
  transform: translateX(-110%);
  animation: typebar 1.6s cubic-bezier(.22,.61,.36,1) 0.2s both;
}
@keyframes typebar{
  0%{ transform: translateX(-110%); }
  100%{ transform: translateX(110%); }
}
.hero-title .shine{
  position:absolute; inset:0;
  background: radial-gradient(600px 60px at 0% 50%, rgba(255,255,255,0.35), transparent 70%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: titleshine 2.2s ease 0.15s both;
}
@keyframes titleshine{
  0%{ transform: translateX(-120%); opacity: .0; }
  20%{ opacity: 1; }
  100%{ transform: translateX(120%); opacity:.0; }
}

/* Reduced motion: keep static */
@media (prefers-reduced-motion: reduce){
  .brand-title::after, .brand-title,
  .hero-title .reveal-mask, .hero-title .shine{ animation: none !important; }
}

/* === Next Spline chevron button === */
.next-spline-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-left:8px;
  border-radius:10px;
  border:1px solid var(--border);
  background:
    radial-gradient(120px 60px at 30% 0%, rgba(0,170,255,.20), transparent 60%),
    color-mix(in oklab, var(--glass) 75%, transparent);
  color: var(--fg);
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.next-spline-btn:hover{
  transform: translateY(-1px) scale(1.05);
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 16px rgba(255,0,255,.18);
}
.next-spline-btn:active{
  transform: translateY(0) scale(0.98);
}

/* SVG size inside next-spline button */
.next-spline-btn .chev{
  width:18px; height:18px;
  display:block;
}
.next-spline-btn:hover .chev{
  filter: drop-shadow(0 0 6px rgba(255,0,255,.35));
}


/* === Protection: désactiver la sélection de texte partout === */
body{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Donne de la profondeur aux cartes du bloc cycles */
#cycles{
  perspective: 1000px;
  perspective-origin: center 40%;
}

/* Transition propre (et garde le tilt JS hors-hover) */
#cycles .card{
  transition: transform .25s ease;
  transform-style: preserve-3d;
}

/* Effet flip léger qui PREND LE DESSUS pendant le hover */
#cycles .card:hover{
  transform: rotateY(10deg) rotateX(1deg) scale(1.02) !important;
}

/* Terminal input */
.term-input{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.term-input .prompt{ color:#9ad1ff; white-space:nowrap; }
.term-input input{
  flex:1; border:none; outline:none; background:transparent; color:#e6f0ff;
  font: inherit; padding:6px 0;
}
.term-input input::placeholder{ color:rgba(230,240,255,.35); }


.btn-spline.is-cooling {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.btn-spline.is-cooling::after {
  content: "Attendez...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8em;
  color: #fff;
}


/* Cooldown countdown styling */
.next-spline-btn.is-cooling{
  position:relative;
  font-weight:800;
}