/* Sheet modal — a rounded panel that springs up from the bottom over a whitened page.
   Markup: see README / demo. Everything is driven by two classes:
   html.sheet-open (dimmer + page push) and .sheet.is-open (panel). */

:root {
  /* Spring that slightly overshoots (peak ≈ +1.25 % at 60 %) then settles. */
  --sheet-ease: linear(0, .003894 1%, .014828 2%, .031757 3%, .053732 4%, .079896 5%, .109479 6%,
    .141786 7%, .176202 8%, .212175 9%, .249219 10%, .286907 11%, .324863 12%, .362763 13%,
    .400326 14%, .437313 15%, .473521 16%, .508781 17%, .542956 18%, .575932 19%, .607625 20%,
    .637968 21%, .666915 22%, .694437 23%, .720519 24%, .74516 25%, .76837 26%, .790168 27%,
    .810581 28%, .829644 29%, .847395 30%, .86388 31%, .879146 32%, .893244 33%, .906226 34%,
    .918147 35%, .92906 36%, .93902 37%, .948082 38%, .956301 39%, .963727 40%, .970415 41%,
    .976413 42%, .98177 43%, .986534 44%, .990748 45%, .994457 46%, .997701 47%, 1.000519 48%,
    1.002948 49%, 1.005022 50%, 1.006775 51%, 1.008237 52%, 1.009436 53%, 1.010399 54%,
    1.011152 55%, 1.011717 56%, 1.012115 57%, 1.012368 58%, 1.012491 59%, 1.012503 60%,
    1.012418 61%, 1.01225 62%, 1.012012 63%, 1.011716 64%, 1.011371 65%, 1.010986 66%,
    1.010571 67%, 1.010132 68%, 1.009676 69%, 1.009209 70%, 1.008735 71%, 1.00826 72%,
    1.007787 73%, 1.00732 74%, 1.006861 75%, 1.006412 76%, 1.005976 77%, 1.005554 78%,
    1.005148 79%, 1.004758 80%, 1.004385 81%, 1.00403 82%, 1.003693 83%, 1.003373 84%,
    1.003072 85%, 1.002789 86%, 1.002523 87%, 1.002274 88%, 1.002042 89%, 1.001826 90%,
    1.001626 91%, 1.001441 92%, 1.00127 93%, 1.001113 94%, 1.000969 95%, 1.000837 96%,
    1.000717 97%, 1.000608 98%, 1.000509 99%, 1);
  --sheet-speed: 900ms;         /* 650ms dans le skill : ralenti à la demande de Romain */
  --sheet-radius: 24px;
  --sheet-top: 20px;            /* gap above the open sheet */
  --sheet-width: min(79.6vw, 1200px);   /* 1145px at 1440px, 1200px max on large screens */
  --sheet-bg: #fff;
  --sheet-dim-color: #fff;      /* page veil on desktop */
  --sheet-dim: .9;
}

/* Page veil */
.sheet-dimmer {
  position: fixed; inset: 0; z-index: 900;
  background: var(--sheet-dim-color);
  opacity: 0; pointer-events: none;
  transition: opacity var(--sheet-speed) var(--sheet-ease);
  will-change: opacity;
}
html.sheet-open .sheet-dimmer { opacity: var(--sheet-dim); }

/* Invisible full-screen click target behind the sheet */
.sheet-closer {
  position: fixed; inset: 0; z-index: 901;
  border: 0; padding: 0; background: transparent; cursor: default;
  display: none;
}
html.sheet-open .sheet-closer { display: block; }

/* The sheet */
.sheet {
  position: fixed; inset: 0; z-index: 902;
  width: var(--sheet-width); height: 100vh; height: 100lvh;
  margin: 0 auto;
  background: var(--sheet-bg);
  border-radius: var(--sheet-radius);
  overflow: clip auto; overscroll-behavior: contain;
  scrollbar-width: none;
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.1));
  transform: translateY(calc(100lvh + 50px));
  transform-origin: center top;
  transition: transform var(--sheet-speed) var(--sheet-ease), visibility 0s linear var(--sheet-speed);
  visibility: hidden;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet.is-open {
  transform: translateY(var(--sheet-top));
  visibility: visible;
  transition: transform var(--sheet-speed) var(--sheet-ease), visibility 0s;
}
.sheet:focus { outline: none; }

/* Close button: sticky in the top-right corner while the sheet scrolls */
.sheet-close {
  /* style du bouton « agrandir » du showreel de romaindekyndt.com */
  position: sticky; top: 28px; float: right;
  margin: 28px 28px -68px 0; z-index: 4;
  width: 50px; height: 40px; border-radius: 5px; border: 0; padding: 0;
  display: grid; place-items: center;
  background: rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  color: #fff; cursor: pointer;
  transition: background-color .2s;
}
.sheet-close svg { width: 22px; height: 22px; transition: transform .75s cubic-bezier(.34, 1.8, .5, 1); }
@media (hover: hover) {
  /* le bouton ne bouge pas : seule la croix tourne d'un quart de tour, avec un léger rebond */
  .sheet-close:hover { background: rgba(0,0,0,.5); }
  .sheet-close:hover svg { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .sheet-close svg { transition: none; } }
.sheet-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Mobile pull handle (hidden on desktop) */
.sheet-handle {
  display: none; position: sticky; top: 0; z-index: 3;
  height: 30px; width: 100%; border: 0; padding: 0;
  background: var(--sheet-bg);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  align-items: center; justify-content: center; cursor: grab;
}
.sheet-handle::before {
  content: ""; width: 50px; height: 5px; border-radius: 3px; background: #000; opacity: .35;
}

/* Mobile: full-width sheet, dark 15 % veil, page pushed back */
@media (max-width: 751px) {
  :root { --sheet-width: 100%; --sheet-dim-color: #111; --sheet-dim: .15; --sheet-top: 44px; }
  .sheet { filter: none; }
  .sheet-close { display: none; }
  .sheet-handle { display: flex; }
  .sheet-page {
    transition: transform var(--sheet-speed) var(--sheet-ease), border-radius var(--sheet-speed) var(--sheet-ease);
    transform-origin: 50% var(--sheet-scroll-y, 0px);
  }
  html.sheet-open .sheet-page {
    transform: scale(.95) translateY(10px);
    border-radius: var(--sheet-radius); overflow: clip;
  }
}

html.sheet-open, html.sheet-open body { overflow: hidden; }

/* Text lines shown while the panel's content is still loading (rarely seen: it is prefetched). */
.sheet-skeleton { display: block; height: 14px; margin: 0 0 14px; border-radius: 7px; background: rgba(0,0,0,.06); }
.sheet-skeleton:first-child { width: 40%; height: 22px; margin-bottom: 28px; }
.sheet-skeleton.short { width: 70%; }
.sheet-close { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --sheet-ease: ease; --sheet-speed: 200ms; }
  .sheet { transform: none; opacity: 0; transition: opacity var(--sheet-speed) ease, visibility 0s linear var(--sheet-speed); }
  .sheet.is-open { transform: translateY(var(--sheet-top)); opacity: 1; transition: opacity var(--sheet-speed) ease, visibility 0s; }
}