:root {
  --blue-900: #061c64;
  --blue-800: #0a2f86;
  --blue-600: #1f6fe5;
  --blue-300: #8cc4ff;
  --white: #f3f8ff;
  --ink: #0b2a6b;
  --ease-spring: cubic-bezier(.2, 1.45, .4, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --rx: 0deg;
  --ry: 0deg;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--blue-800);
  color: var(--white);
  font-family: "Outfit", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Décor ---------- */
.bg { position: fixed; pointer-events: none; }

/* Rayures bleu/blanc nettes */
.bg-stripes {
  inset: -4%;
  background: repeating-linear-gradient(90deg, var(--white) 0 72px, var(--blue-600) 72px 144px);
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  animation: stripesIn 1.4s var(--ease-out) both;
}
@keyframes stripesIn {
  from { opacity: 0; transform: scale(1.04); }
}

/* Ciel : bleu profond en haut, très clair et aéré vers le bas */
.bg-tint {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 28, 100, .82) 0%, rgba(20, 80, 200, .5) 38%, rgba(120, 180, 255, .25) 70%, rgba(235, 244, 255, .55) 100%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 255, 255, 0) 40%, rgba(6, 28, 100, .35) 100%);
}

/* Lumière douce derrière le crâne */
.heaven {
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 72%, rgba(255, 255, 255, .75) 0, rgba(215, 235, 255, .35) 40%, transparent 72%);
  transition: opacity .8s, transform 1.2s var(--ease-out);
}
body.is-open .heaven { transform: scale(1.12); }

/* Grain très fin */
.grain {
  inset: 0;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scène ---------- */
.scene {
  position: relative;
  z-index: 2;
  height: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  padding: clamp(18px, 4vh, 44px) 16px clamp(18px, 4vh, 40px);
}

.brand { text-align: center; }
.title {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.045em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(6, 28, 100, .35);
}
.title span {
  display: inline-block;
  animation: letterIn .9s var(--ease-out) both;
  animation-delay: calc(.6s + var(--i) * 35ms);
}
.title .it { font-weight: 300; letter-spacing: -.03em; color: rgba(255, 255, 255, .78); }
.title .dot { color: rgba(255, 255, 255, .78); }
.socials {
  display: flex;
  justify-content: center;
  gap: .6rem;
}
.social {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .95rem .5rem .8rem;
  border-radius: 999px;
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  background: rgba(11, 42, 107, .55);
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 8px 24px rgba(4, 22, 80, .18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s, color .25s, transform .25s var(--ease-out);
}
.social:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.social:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes letterIn {
  from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
}

/* ---------- Le crâne ---------- */
.stage {
  --w: min(150vw, 107vh, 1100px);
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * -0.065);
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.drop { animation: rise 1.6s var(--ease-spring) .25s both; }
@keyframes rise {
  0% { transform: translateY(80%); }
}

.skull {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.skull:focus-visible { outline: 2px solid #fff; outline-offset: -12px; }

.float { animation: float 6s ease-in-out infinite; }
@keyframes float {
  50% { transform: translateY(-10px); }
}

#head {
  display: block;
  width: 100%;
  aspect-ratio: 800 / 560;
  overflow: visible;
  filter: drop-shadow(0 -10px 40px rgba(6, 28, 100, .25));
  transform-origin: 50% 100%;
  transition: transform .5s var(--ease-spring);
}
.skull:hover #head { transform: translateY(-8px) scale(1.01); }
.skull:active #head { transform: scale(.985, .97); transition-duration: .1s; }
.stage.thud #head { animation: thud .55s var(--ease-spring); }
@keyframes thud {
  30% { transform: scale(1.02, .95); }
  60% { transform: scale(.995, 1.015); }
}

/* morceaux SVG animés */
#head .inside, #head .beam, #head .aura, #head .wrinkle, #head .brow {
  transform-box: fill-box;
  transform-origin: center;
}

.brow { transition: transform .45s var(--ease-out); }
.skull:hover .brow { transform: translateY(-4px); }
.stage.is-opening .brow { transform: translateY(-14px); }

.aura { animation: auraPulse 5s ease-in-out infinite; }
@keyframes auraPulse { 50% { opacity: .55; transform: scale(1.04); } }
.stage.is-open .aura { opacity: .7; }

.wrinkle { transition: transform .4s var(--ease-spring); }
.skull:hover .wrinkle { transform: translateY(-4px) scaleX(1.03); }
.stage.is-opening .wrinkle { transform: translateY(-10px) scaleX(1.06); }

.sweep { transform: translateX(0); }
.skull:hover .sweep { animation: sweep 1.2s var(--ease-out); }
@keyframes sweep { to { transform: translateX(1100px); } }

.inside { opacity: 0; transition: opacity .2s; }
.stage.is-opening .inside { opacity: 1; }

.leak { opacity: 0; transition: opacity .4s ease; }
.stage.is-opening .leak { opacity: .95; }
.stage.is-open .leak { opacity: .55; }

.beam {
  opacity: 0;
  transform-origin: 50% 100% !important;
  transform: scaleY(.25);
  transition: opacity .5s ease, transform .5s ease;
}
.stage.is-open .beam {
  opacity: 1;
  transform: scaleY(1);
  transition: opacity 1s ease .1s, transform 1.4s var(--ease-out) .1s;
}

/* ---------- Bouton ---------- */
/* Zone qui s'arrête pile à la jointure : le bouton sort de l'intérieur du crâne */
.cta-clip {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -60%;
  bottom: calc(100% * 240 / 560);
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.reveal {
  position: absolute;
  left: 50%;
  top: calc(100% + 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: top .3s cubic-bezier(.5, 0, .75, 0);
}
.stage.is-open .reveal {
  top: calc(100% * 86 / 117.14);
  pointer-events: auto;
  transition: top 1.1s var(--ease-out) .35s;
}
.cta { display: block; text-decoration: none; }

.cta-body {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem .7rem .7rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(11, 42, 107, .08);
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(4, 22, 80, .12), 0 12px 32px rgba(4, 22, 80, .18);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}

.cta-text { display: grid; line-height: 1.15; }
.cta-label {
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.1rem);
  letter-spacing: -.01em;
}
.cta-url { font-size: .76rem; color: #5b6f94; }

.cta-arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  transition: transform .3s var(--ease-out), background .3s;
}
.cta:hover .cta-body { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(4, 22, 80, .12), 0 18px 40px rgba(4, 22, 80, .24); }
.cta:hover .cta-arrow { transform: translateX(3px); background: var(--blue-600); }
.cta:active .cta-body { transform: translateY(0) scale(.98); }
.cta:focus-visible { outline: none; }
.cta:focus-visible .cta-body { outline: 2px solid #fff; outline-offset: 4px; }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .cta-body { gap: .7rem; padding: .6rem .6rem .6rem 1.2rem; }
  .cta-arrow { width: 2.3rem; height: 2.3rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .15s !important;
  }
}