/* Mouvement du site. États cachés seulement sous html.js-motion (posée par motion.js). */
html.js-motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
html.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Cartes : lift + liseré (Brume côté survivant, Sang côté tueur) */
.card, .build, .killers a { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .card:hover, .build:hover { border-color: var(--survivor); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
  .card.kill:hover, .build.kill:hover { border-color: var(--killer); }
  html.js-motion .card[data-reveal].is-in:hover, html.js-motion .build[data-reveal].is-in:hover,
  .card:hover, .build:hover { transform: translateY(-4px); }
  .killers a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
}

/* device-float : captures = fenêtres d'appareil (flottement via la propriété translate, reveal/tilt via transform) */
.shots figure { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); animation: mdbd-float 7s ease-in-out infinite; }
.shots figure:nth-child(even) { animation-duration: 8.5s; animation-delay: -3s; }
.shots figure::before { content: ""; display: block; height: 28px; border-bottom: 1px solid var(--border);
  background: radial-gradient(circle at 14px 50%, #5a5f6b 0 4px, transparent 4.5px), radial-gradient(circle at 32px 50%, #5a5f6b 0 4px, transparent 4.5px), radial-gradient(circle at 50px 50%, #5a5f6b 0 4px, transparent 4.5px), var(--surface-2); }
.shots figure img { border: 0; border-radius: 0; transform: translateY(var(--py, 0px)) scale(1.05); will-change: transform; }
.shots figure { transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), box-shadow .3s ease, border-color .3s ease; }
.shots figcaption { position: relative; margin: 0; padding: 8px 14px; border-top: 1px solid var(--border); background: var(--surface); }
@media (hover: hover) {
  .shots figure:hover { border-color: var(--survivor); box-shadow: 0 24px 54px rgba(0, 0, 0, .6); }
  .shots figure:nth-child(even):hover { border-color: var(--killer); }
  .shots figure:hover, html.js-motion .shots figure[data-reveal].is-in:hover { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }
}
@keyframes mdbd-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

[data-parallax] { transform: translateY(var(--py, 0px)); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .shots figure { animation: none; }
  .shots figure img { transform: none; }
  [data-parallax] { transform: none; }
  .card, .build, .killers a, .shots figure { transition: none; }
  .card:hover, .build:hover, .killers a:hover, .shots figure:hover { transform: none !important; }
}

/* Chapitres : la capture entre en scène (stage-in), le texte arrive de côté, parallax sur l'image */
.window img { transform: translateY(var(--py, 0px)) scale(1.06); will-change: transform; }
html.js-motion .shot[data-reveal] { transform: translateY(48px) scale(.95); transition: opacity .7s ease calc(var(--d, 0ms) + 120ms), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) + 120ms); }
html.js-motion .shot[data-reveal].is-in { transform: none; }
html.js-motion .feature-text[data-reveal] { transform: translateX(-26px); }
html.js-motion .feature.flip .feature-text[data-reveal] { transform: translateX(26px); }
html.js-motion .feature-text[data-reveal].is-in { transform: none; }
html.js-motion .faq-list details[data-reveal] { transform: translateY(14px); }
html.js-motion .faq-list details[data-reveal].is-in { transform: none; }
html.js-motion .notify-box[data-reveal] { transform: translateY(26px); }
html.js-motion .notify-box[data-reveal].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .window img { transform: none; }
  .btn-discord, .faq-list summary::after { transition: none; }
}
.chapter { overflow-x: clip; }