/*
 * morph.css — standalone morph module styles
 *
 * Customize via CSS variables:
 *
 *   --morph-overlay-bg        overlay tint          (default: rgba(0,0,0,.40))
 *   --morph-overlay-blur      overlay blur          (default: 6px)
 *   --morph-shadow-popup      expanded popup shadow (default: layered dark shadow)
 *   --morph-duration          transition duration   (default: 420ms)  ← also set in morph.js
 *
 * The module adds NO opinions about your card or popup's visual design.
 * It only handles:
 *   - the overlay
 *   - hiding the card while the popup is open (.morph-card--open)
 *   - the popup's position / transition / content-fade behaviour
 */

/* ── Overlay ───────────────────────────────────────────────────────────────── */

.morph-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  display: none;
  z-index: 900;
}

.morph-overlay--active {
  opacity: 1;
  pointer-events: auto;
  display: block;
}

/* ── Card: hidden while its popup is open ──────────────────────────────────── */

.morph-card--open {
  visibility: hidden;
}

/* ── Popup ─────────────────────────────────────────────────────────────────── */

/*
 * .morph-popup is position:fixed and sized/placed entirely by JS.
 * You only need to add your own background, border-radius default,
 * and any overflow behaviour you want.
 *
 * Minimum required on your popup element:
 *
 *   <div id="my-popup" class="morph-popup"> … </div>
 *
 * The module sets display:flex when open; keep your inner layout
 * inside a child element (morph-popup doesn't constrain it).
 */

.morph-popup {
  position: fixed;
  z-index: 1000;
  display: none;
  /* JS switches to flex on open */
  flex-direction: column;
  overflow: hidden;

  /* transition is set dynamically by JS; listed here for reference:
     top, left, width, height, border-radius, box-shadow            */
  will-change: top, left, width, height;
}

/* ── Popup inner content: fade in after morph completes ────────────────────── */

/*
 * Wrap your popup's actual content in an element with class .morph-popup__inner
 * and it will fade in only after the card-to-popup animation finishes.
 *
 * This is optional — if you don't use it, content is visible immediately.
 */

.morph-popup__inner {
  opacity: 0;
  transition: opacity 0.18s ease;
  flex: 1;
  overflow-y: auto;

  z-index: 1;
}

.morph-popup--open .morph-popup__inner {
  opacity: 1;
  transition-delay: 0.28s;
}