/* ============================================================
   MODAL.CSS — Glass Card Component
   ============================================================
   The modal is a floating glass panel that appears when a
   discipline word is clicked. It uses backdrop-filter to blur
   whatever is behind it, a grey multiply layer to make it feel
   like tinted glass, and a specular border that mimics how
   light catches the edge of a real glass panel.

   IMPORTANT RULE: backdrop-filter MUST live on .modal itself.
   Never move it to a child element. Any ancestor with opacity,
   will-change, or isolation will break the blur effect.
   ============================================================ */


/* ------------------------------------------------------------
   MODAL ROOT — Full-screen invisible overlay
   Hidden by default (visibility:hidden). When .open is added,
   it becomes interactive. Using visibility instead of display
   allows CSS transitions to still play on the child .modal.
   ------------------------------------------------------------ */
.modal-root {
  position: fixed; inset: 0;
  z-index: 800;
  pointer-events: none;
  visibility: hidden;
  transition: visibility var(--transition-visibility-out);
}

/* Open state — becomes interactive and visible */
.modal-root.open {
  pointer-events: auto;
  visibility: visible;
  transition: visibility var(--transition-visibility-in);
}


/* ------------------------------------------------------------
   MODAL — The glass card itself
   backdrop-filter creates the frosted glass blur.
   The background uses two layers:
     1. rgba tint (padding-box) — fills the interior
     2. specular gradient (border-box) — visible only in the border zone
   This is the same technique Google uses for their Gemini button.
   ------------------------------------------------------------ */
.modal {
  position: absolute;
  width: var(--modal-width);
  height: var(--modal-height);
  max-width: 92vw;
  max-height: 70vh;
  border-radius: var(--modal-radius);

  /* THE blur — must stay on this element, never on a child */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);

  background: var(--glass-tint);

  /* Depth shadow — three layers for a realistic lift */
  box-shadow:
    0 30px 80px rgba(0,0,0,0.18),
    0 8px 24px  rgba(0,0,0,0.12),
    0 2px 6px   rgba(0,0,0,0.08);

  /* Entry state — slightly scaled down and shifted up, fully transparent */
  transform: scale(0.94) translateY(10px);
  opacity: 0;
  transition: transform var(--transition-modal-out), opacity var(--transition-modal-out);
}

/* Open state — full size, fully visible, smooth spring-like entrance */
.modal-root.open .modal {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: transform var(--transition-modal-in), opacity var(--transition-modal-in);
}


/* ------------------------------------------------------------
   MODAL SPECULAR BORDER — Glass edge light catch
   A ::before pseudo-element carries the gradient border.
   It sits on top of everything (z-index:10) so the multiply
   layer below doesn't mute the white highlights.

   The gradient: bright white at top-left (where light hits),
   mid grey across the middle, bright white again at bottom-right.
   This mimics how a glass edge catches ambient light.
   ------------------------------------------------------------ */
.modal::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;

  /* The actual gradient border */
  border: var(--modal-border-width) solid transparent;
  background: var(--glass-border-gradient) border-box;

  /* Mask trick: punch out the interior so only the border zone shows.
     This is equivalent to "only show the background inside the border." */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}


/* ------------------------------------------------------------
   DOME HIGHLIGHT — Soft inner glow at the top of the glass
   A blurred radial gradient that sits at the top of the modal,
   like the reflection of a ceiling light on curved glass.
   ------------------------------------------------------------ */
.modal::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%;
  top: 4%; height: 38%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.22) 35%,
    transparent 70%
  );
  filter: blur(6px);
}


/* ------------------------------------------------------------
   MULTIPLY LAYER — Colour saturation through glass
   A cool grey div with mix-blend-mode:multiply. This darkens
   and saturates the colours visible through the blur, making
   it feel like actual tinted glass rather than frosted plastic.
   ------------------------------------------------------------ */
.modal .multiply {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--glass-multiply-color);
  mix-blend-mode: multiply;
  opacity: var(--glass-multiply-opacity);
}


/* ------------------------------------------------------------
   MODAL CONTENT — Text area inside the glass card
   Sits above the multiply and dome layers via z-index.
   ------------------------------------------------------------ */
.modal .content {
  position: absolute; inset: 0;
  padding: var(--modal-padding-v) var(--modal-padding-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  font-variation-settings: var(--font-fvar-modal-body);
  z-index: 5;
  color: var(--color-ink);
}

/* Modal title — discipline name e.g. "Photographer" */
.modal .content h2 {
  margin: 0;
  font-size: var(--font-size-modal-title);
  letter-spacing: var(--letter-spacing-modal);
  font-variation-settings: var(--font-fvar-modal-title);
}

/* Modal body — tag line and description */
.modal .content p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--font-size-modal-body);
  line-height: var(--line-height-body);
  max-width: 36ch;   /* ~36 characters wide — comfortable reading line length */
}


/* ------------------------------------------------------------
   CLOSE BUTTON — The × in the top-right corner
   A small circular button. Styled to feel like a physical
   button on the glass surface — slight white fill, thin border.
   ------------------------------------------------------------ */
.modal .close {
  position: absolute;
  top: 14px; right: 16px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 12, 0.25);
  background: rgba(255, 255, 255, 0.30);
  color: var(--color-ink);
  font: var(--font-weight-light) 18px/1 var(--font-family);
  cursor: pointer;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: auto;
}