/* =====================================================================
   Animation d'ouverture « Candy Pop » : le cadeau sucre d'orge
   ===================================================================== */
body.intro-lock { overflow: hidden; }
/* Masquée par défaut : affichée seulement quand le JavaScript du site est prêt (classe html.js). */
.intro { display: none; }
html.js .intro {
  --w: min(62vw, 250px);
  --ink: #2a1030;
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; overflow: hidden;
  background-color: #ff8cc0;
  transition: transform .9s cubic-bezier(.7, 0, .2, 1), border-radius .9s;
}
/* Pois animés avec transform (pas de repeinture de l'arrière-plan à chaque image). */
html.js .intro::before {
  content: ""; position: absolute; inset: -48px; z-index: 0; pointer-events: none;
  background-image: radial-gradient(#ffb8d9 18%, transparent 19%), radial-gradient(#ffb8d9 18%, transparent 19%);
  background-size: 48px 48px; background-position: 0 0, 24px 24px;
  animation: dots 4s linear infinite; will-change: transform;
}
html.js .intro.leaving { transform: translateY(-105%); border-radius: 0 0 50% 50% / 0 0 10% 10%; pointer-events: none; }
.intro-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.intro-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 16px 16px 24px; min-height: min(580px, 96vh); justify-content: center; }

.intro-kicker {
  margin: 0 0 30px; padding: 8px 20px; transform: rotate(-4deg);
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 6vw, 1.6rem); letter-spacing: .04em; color: var(--ink);
  background: #ffd23f; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink);
  animation: stickerIn .7s .2s cubic-bezier(.3, 1.6, .5, 1) both;
  transition: opacity .4s, transform .4s;
}
.intro.out .intro-kicker { opacity: 0; transform: rotate(-4deg) translateY(-20px) scale(.8); }
.intro-hint {
  margin: 34px 0 0; padding: 6px 14px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
  animation: stickerIn .6s 1.2s cubic-bezier(.3, 1.6, .5, 1) both, nudge 1.8s 2.2s ease-in-out infinite;
  transition: opacity .3s;
}
.intro.opening .intro-hint { opacity: 0; animation: none; }
.intro-enter {
  position: absolute; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px) scale(.8);
  white-space: nowrap; opacity: 0; pointer-events: none;
  font-size: 1.25rem !important; padding: 14px 30px !important;
  transition: opacity .5s, transform .6s cubic-bezier(.3, 1.6, .5, 1);
}
.intro.ready .intro-enter { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.intro-skip {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 3;
  font: 600 .85rem "Fredoka", sans-serif; color: var(--ink); background: #fff;
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 10px 18px; min-height: 44px; min-width: 44px; cursor: pointer;
  right: max(14px, env(safe-area-inset-right));
}

/* ---------- Le cadeau ---------- */
.env {
  position: relative; width: var(--w); height: calc(var(--w) * .95);
  cursor: pointer; outline: none;
  animation: boxIn 1s .4s cubic-bezier(.3, 1.5, .5, 1) both, jiggle 2.4s 1.8s ease-in-out infinite;
  transition: transform .9s cubic-bezier(.6, -0.3, .7, 1), opacity .7s;
}
.env:focus-visible { outline: 3px dashed var(--ink); outline-offset: 8px; border-radius: 14px; }
.env > * { position: absolute; }
.box-body {
  left: 6%; right: 6%; bottom: 0; height: 72%; z-index: 2;
  background: #ff2e7e; border: 3px solid var(--ink); border-radius: 0 0 16px 16px; box-shadow: 7px 7px 0 var(--ink);
}
.box-body::after { /* reflet */
  content: ""; position: absolute; left: 10%; top: 10%; width: 12%; height: 60%; border-radius: 999px; background: rgba(255, 255, 255, .25);
}
.box-ribbon { left: 50%; width: 16%; margin-left: -8%; bottom: 0; height: 72%; z-index: 3; background: #7be0c3; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.box-lid {
  left: 0; right: 0; top: 10%; height: 22%; z-index: 4;
  background: repeating-linear-gradient(-45deg, #fff 0 14px, #ff2e7e 14px 28px);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink);
  transform-origin: 50% 100%;
  transition: transform .8s cubic-bezier(.2, 1.4, .4, 1), opacity .6s .3s;
}
.box-lid::before { /* ruban du couvercle */
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 18%; margin-left: -9%;
  background: #7be0c3; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink);
}
.bow { position: absolute; top: -78%; width: 34%; height: 90%; background: #7be0c3; border: 3px solid var(--ink); }
.bow-l { left: 17%; border-radius: 50% 50% 10px 50%; transform: rotate(-18deg); }
.bow-r { right: 17%; border-radius: 50% 50% 50% 10px; transform: rotate(18deg); }
.bow-knot { position: absolute; top: -26%; left: 50%; width: 16%; height: 40%; margin-left: -8%; background: #ffd23f; border: 3px solid var(--ink); border-radius: 8px; }

/* La carte cachée dans le cadeau */
.box-card {
  left: 50%; top: 34%; z-index: 1; width: min(84vw, 320px);
  transform: translateX(-50%) scale(.45); transform-origin: 50% 0;
  background: #fff3f8; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden; text-align: center;
  transition: transform 1s cubic-bezier(.3, 1.35, .5, 1), top 1s cubic-bezier(.3, 1.35, .5, 1);
}
.card-stripe { height: 16px; border-bottom: 3px solid var(--ink); background: repeating-linear-gradient(-45deg, #fff 0 10px, #ff2e7e 10px 20px); }
.card-in { padding: 16px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.card-in p { margin: 0; }
.card-kicker { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 1rem; color: #c4105c; }
.card-title {
  font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 2.35rem; line-height: .95; color: #fff;
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
}
.card-by { font-family: "Fredoka", sans-serif; font-weight: 600; color: #5a3a5e; }
.card-date { font-family: "Nunito", sans-serif; font-weight: 800; font-size: .92rem; background: #ffd23f; border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 14px; transform: rotate(-2deg); }
.card-ss { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: .85rem; letter-spacing: .06em; background: #7be0c3; border: 2px solid var(--ink); border-radius: 999px; padding: 2px 12px; }

/* ---------- Séquence ---------- */
.box-body, .box-ribbon { transition: transform .7s cubic-bezier(.6, -0.3, .7, 1), opacity .5s .2s; }
.intro.opening .env { animation: none; }
.intro.opening .box-lid { animation: lidShake .3s ease-in-out 2; }
.intro.flap .box-lid { animation: none; transform: translate(-30%, -260%) rotate(-32deg); opacity: 0; }
.intro.rise .box-card { top: -95%; transform: translateX(-50%) scale(.8); }
.intro.out .box-body, .intro.out .box-ribbon { transform: translateY(120px); opacity: 0; }
.intro.out .box-card { top: -38%; transform: translateX(-50%) scale(1) rotate(-1.5deg); }

@keyframes dots { to { transform: translate(48px, 48px); } }
@keyframes stickerIn { from { opacity: 0; transform: rotate(-4deg) scale(.3); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes boxIn { from { opacity: 0; transform: translateY(80px) scale(.6) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes jiggle { 0%, 70%, 100% { transform: rotate(0) scale(1); } 75% { transform: rotate(-5deg) scale(1.03); } 80% { transform: rotate(5deg) scale(1.03); } 85% { transform: rotate(-3deg); } 90% { transform: rotate(2deg); } }
@keyframes lidShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) translateY(-6px); } 75% { transform: rotate(6deg) translateY(-6px); } }

/* Entrée en cascade de la page après l'intro */
.enter-up { animation: rise .8s cubic-bezier(.3, 1.4, .5, 1) both; }

@media (prefers-reduced-motion: reduce) { html.js .intro::before, .env, .intro-hint { animation: none !important; } }