/* ============================================================
   modal-effects.css — 20 opening effects for <dialog>
   Optional companion to css.css. Pure CSS, no JavaScript.

   Port of "20 New Modal Effects" by ol-ivier on CodePen:
     https://codepen.io/editor/ol-ivier/pen/01a0c541-29b5-777d-bbed-804b95171a23

   Ported changes: the original's stacked class pairs
   (.overlay-swing .modal + .overlay-swing.open .modal) become a
   single attribute on the dialog, driven by the native [open]
   attribute. Keyframes, easing curves and durations are faithful
   to the original; the backdrop stays Weblin's (--bg-overlay).

   Usage (load after css.css):
     <link rel="stylesheet" href="modal-effects.css">
     <button commandfor="dlg" command="show-modal">Open</button>
     <dialog id="dlg" swing closedby="any">…</dialog>

   Effects — one attribute each:
     swing        rubber         roll-left      roll-right
     skew         slide-rotate   heartbeat      jello
     flip         zoom-corner    swing-bottom   bounce-down
     bounce-up    rotate-left    rotate-right   light-speed
     fade-rotate  blur           unfold-vertical  unfold-horizontal

   Each effect replaces the default dialog-in fade while opening;
   closing stays instant (native dialog, like the rest of Weblin).
   Under prefers-reduced-motion the whole file is inert — dialogs
   keep the default fade. An effect also overrides drawer/sheet
   open animations, since they share the [open] trigger.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* Shared 0 → 1 fade, paired with transform-only keyframes so each
     effect keeps the original's separate opacity duration. */
  @keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* 1. Swing In — pendulum drops from the top, elastic bounce */
  @keyframes modal-swing {
    from { transform: rotateX(-100deg); }
    to   { transform: rotateX(0deg); }
  }
  dialog[swing][open] {
    transform-origin: top center;
    animation:
      modal-fade-in 0.5s ease both,
      modal-swing 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }

  /* 2. Rubber Band — stretches and compresses like rubber */
  @keyframes modal-rubber {
    0%   { transform: scale(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    40%  { transform: scaleX(0.75) scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(0.85); }
    65%  { transform: scaleX(0.95) scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scale(1); }
  }
  dialog[rubber][open] {
    animation:
      modal-fade-in 0.3s ease both,
      modal-rubber 0.9s ease both;
  }

  /* 3. Roll In Left — rolls in from the left, −720° */
  @keyframes modal-roll-left {
    from { transform: translateX(-120%) rotate(-720deg); }
    to   { transform: translateX(0) rotate(0deg); }
  }
  dialog[roll-left][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-roll-left 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  /* 4. Roll In Right — rolls in from the right, +720° */
  @keyframes modal-roll-right {
    from { transform: translateX(120%) rotate(720deg); }
    to   { transform: translateX(0) rotate(0deg); }
  }
  dialog[roll-right][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-roll-right 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  /* 5. Skew Fade — skewX(40deg) straightens out */
  @keyframes modal-skew {
    from { transform: skewX(40deg) scale(0.5); }
    to   { transform: skewX(0deg) scale(1); }
  }
  dialog[skew][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-skew 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 6. Slide + Rotate — rises from the bottom rotating 15° */
  @keyframes modal-slide-rotate {
    from { transform: translateY(100%) rotate(15deg); }
    to   { transform: translateY(0) rotate(0deg); }
  }
  dialog[slide-rotate][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-slide-rotate 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 7. Heartbeat — two pulses like a heart before settling */
  @keyframes modal-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.15); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.15); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
  }
  dialog[heartbeat][open] {
    animation:
      modal-fade-in 0.3s ease both,
      modal-heartbeat 1s ease both;
  }

  /* 8. Jello — damped skew wobble */
  @keyframes modal-jello {
    0%, 100% { transform: skewX(0deg) skewY(0deg); }
    15% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    30% { transform: skewX(6.25deg) skewY(6.25deg); }
    45% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    60% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    75% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  }
  dialog[jello][open] {
    animation:
      modal-fade-in 0.3s ease both,
      modal-jello 1s ease both;
  }

  /* 9. Flip X + Y — flips on both axes with perspective */
  @keyframes modal-flip {
    from { transform: perspective(800px) rotateX(90deg) rotateY(90deg); }
    to   { transform: perspective(800px) rotateX(0deg) rotateY(0deg); }
  }
  dialog[flip][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-flip 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 10. Zoom Corner — bursts out of the top-left corner */
  @keyframes modal-zoom-corner {
    from { transform: scale(0) translate(-100%, -100%); }
    to   { transform: scale(1) translate(0, 0); }
  }
  dialog[zoom-corner][open] {
    transform-origin: top left;
    animation:
      modal-fade-in 0.5s ease both,
      modal-zoom-corner 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 11. Swing Bottom — pendulum swings up from the bottom */
  @keyframes modal-swing-bottom {
    from { transform: rotateX(100deg); }
    to   { transform: rotateX(0deg); }
  }
  dialog[swing-bottom][open] {
    transform-origin: bottom center;
    animation:
      modal-fade-in 0.5s ease both,
      modal-swing-bottom 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  }

  /* 12. Bounce In Down — falls from the top with a bounce
     (keyframes carry opacity, as in the original) */
  @keyframes modal-bounce-down {
    0%   { transform: translateY(-300px); opacity: 0; }
    60%  { transform: translateY(25px);   opacity: 1; }
    75%  { transform: translateY(-10px);  opacity: 1; }
    90%  { transform: translateY(5px);    opacity: 1; }
    100% { transform: translateY(0);      opacity: 1; }
  }
  dialog[bounce-down][open] {
    animation: modal-bounce-down 0.9s ease both;
  }

  /* 13. Bounce In Up — rises from the bottom with a bounce */
  @keyframes modal-bounce-up {
    0%   { transform: translateY(300px);  opacity: 0; }
    60%  { transform: translateY(-25px);  opacity: 1; }
    75%  { transform: translateY(10px);   opacity: 1; }
    90%  { transform: translateY(-5px);   opacity: 1; }
    100% { transform: translateY(0);      opacity: 1; }
  }
  dialog[bounce-up][open] {
    animation: modal-bounce-up 0.9s ease both;
  }

  /* 14. Rotate In Down Left — rotates in from the bottom-left */
  @keyframes modal-rotate-left {
    from { transform: rotate(-90deg) translateY(100%); }
    to   { transform: rotate(0deg) translateY(0); }
  }
  dialog[rotate-left][open] {
    transform-origin: left bottom;
    animation:
      modal-fade-in 0.6s ease both,
      modal-rotate-left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 15. Rotate In Down Right — rotates in from the bottom-right */
  @keyframes modal-rotate-right {
    from { transform: rotate(90deg) translateY(100%); }
    to   { transform: rotate(0deg) translateY(0); }
  }
  dialog[rotate-right][open] {
    transform-origin: right bottom;
    animation:
      modal-fade-in 0.6s ease both,
      modal-rotate-right 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 16. Light Speed In — shoots in from the right with a skew */
  @keyframes modal-light-speed {
    from { transform: translateX(100%) skewX(-30deg); }
    to   { transform: translateX(0) skewX(0deg); }
  }
  dialog[light-speed][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-light-speed 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  /* 17. Fade + Scale + Rotate — appears while spinning 180° */
  @keyframes modal-fade-rotate {
    from { transform: scale(0.3) rotate(-180deg); }
    to   { transform: scale(1) rotate(0deg); }
  }
  dialog[fade-rotate][open] {
    animation:
      modal-fade-in 0.8s ease both,
      modal-fade-rotate 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 18. Blur In — emerges from blur(20px) */
  @keyframes modal-blur {
    from { filter: blur(20px); transform: scale(1.2); }
    to   { filter: blur(0px);  transform: scale(1); }
  }
  dialog[blur][open] {
    animation:
      modal-fade-in 0.6s ease both,
      modal-blur 0.8s ease both;
  }

  /* 19. Unfold Vertical — scaleY(0) → scaleY(1) from the top */
  @keyframes modal-unfold-vertical {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
  dialog[unfold-vertical][open] {
    transform-origin: top center;
    animation:
      modal-fade-in 0.5s ease both,
      modal-unfold-vertical 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  /* 20. Unfold Horizontal — scaleX(0) → scaleX(1) from the left */
  @keyframes modal-unfold-horizontal {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  dialog[unfold-horizontal][open] {
    transform-origin: left center;
    animation:
      modal-fade-in 0.5s ease both,
      modal-unfold-horizontal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

}