/* ==========================================================================
   Contact — "Curtain Call" (page-contact.php)
   The final scene: the invitation, then the email address set large on an
   orange stage line (the front edge of the stage, drawn across as the page
   opens), the studio and website as quiet credits, a choice of subjects that
   each open a pre-addressed email, and a way back to the work.
   ========================================================================== */

.ct-stop { color: var(--cm-orange); }

/* ---------- Hero ---------- */
.ct-hero {
  position: relative; isolation: isolate;
  min-block-size: 100svh; display: grid; align-content: center;
  padding-block: calc(var(--header-h) + var(--space-8)) var(--space-9);
}
.ct-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--gradient-stage-light); }
.ct-hero__inner { display: grid; gap: var(--space-6); }
.ct-title { margin: 0; font-size: clamp(2.6rem, 0.5rem + 7.6vw, 9.5rem); line-height: 0.95; letter-spacing: var(--tracking-display); }
:lang(ar) .ct-title { font-size: clamp(2.5rem, 0.6rem + 6.2vw, 7.5rem); line-height: 1.3; }
.ct-line { display: block; overflow: hidden; padding-block-end: 0.14em; margin-block-end: -0.14em; }
:lang(ar) .ct-line { padding-block-end: 0.2em; margin-block-end: -0.2em; }
.ct-line__in { display: block; }
.ct-line + .ct-line .ct-line__in { padding-inline-start: calc(100% / 12 + var(--grid-gap)); }

/* The stage line and the address on it */
.ct-stage { position: relative; margin-block-start: var(--space-8); padding-block-end: var(--space-5); }
.ct-stage__label {
  margin: 0 0 var(--space-3); font-size: var(--text-label); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cm-ink-300);
}
:lang(ar) .ct-stage__label { text-transform: none; font-size: 15px; font-weight: var(--weight-semibold); }
.ct-mail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); }
.ct-mail__link {
  display: inline-flex; align-items: baseline; max-inline-size: 100%;
  font-family: var(--font-latin); font-size: clamp(1.6rem, 0.6rem + 5.4vw, 6.5rem); line-height: 1.05; letter-spacing: -0.04em;
  color: var(--cm-white); text-decoration: none; overflow-wrap: anywhere;
}
.ct-mail__user { font-weight: var(--weight-bold); transition: color var(--dur-ui) var(--ease-standard); }
.ct-mail__domain { font-weight: var(--weight-thin); color: var(--cm-ink-200); transition: color var(--dur-ui) var(--ease-standard); }
.ct-mail__go { display: inline-flex; align-self: center; margin-inline-start: 0.25em; opacity: 0; transform: translateX(calc(var(--dir) * -0.3em)); transition: opacity var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-out); }
.ct-mail__go .btn__icon { inline-size: 0.5em; block-size: 0.5em; color: var(--cm-orange); }
.ct-mail__link:hover .ct-mail__user, .ct-mail__link:focus-visible .ct-mail__user { color: var(--cm-orange); }
.ct-mail__link:hover .ct-mail__domain, .ct-mail__link:focus-visible .ct-mail__domain { color: var(--cm-white); }
.ct-mail__link:hover .ct-mail__go, .ct-mail__link:focus-visible .ct-mail__go { opacity: 1; transform: none; }
.ct-mail__link:focus-visible { outline-offset: 8px; }

.ct-copy {
  min-block-size: 44px; padding-inline: var(--space-5); border-radius: var(--radius-pill);
  background: transparent; color: var(--cm-white); border: 1px solid var(--color-line-strong);
  font-size: var(--text-small); font-weight: var(--weight-semibold);
  transition: background-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard), border-color var(--dur-micro) var(--ease-standard);
}
.ct-copy:hover { background: var(--cm-white); color: var(--cm-black); border-color: var(--cm-white); }
.ct-copy[hidden] { display: none; }
.ct-copy__status { margin: 0; min-block-size: 1.5em; font-size: var(--text-small); color: var(--cm-ink-300); }

.ct-stage__line { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--color-line); }
.ct-stage__line::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: -0.5px; block-size: 2px; inline-size: 100%;
  background: var(--cm-orange); transform-origin: 0 50%;
}
[dir="rtl"] .ct-stage__line::after { transform-origin: 100% 50%; }

.ct-credits { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9); margin: var(--space-2) 0 0; }
.ct-credits > div { display: grid; gap: var(--space-1); }
.ct-credits dt { font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cm-ink-300); }
:lang(ar) .ct-credits dt { text-transform: none; font-size: 14px; }
.ct-credits dd { margin: 0; font-size: var(--text-lead); font-weight: var(--weight-light); color: var(--cm-ink-100); }
.ct-credits a { color: inherit; }
.ct-credits__socials { display: flex; flex-wrap: wrap; gap: 0 1em; }

/* Curtain call: the lines rise, the stage line draws across, then the address arrives. Motion only. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-reduce) .ct-line__in { animation: ct-rise var(--dur-cinematic) var(--ease-curtain) 120ms both; }
  .js:not(.motion-reduce) .ct-line + .ct-line .ct-line__in { animation-delay: 260ms; }
  .js:not(.motion-reduce) .ct-stage__line::after { animation: ct-draw 1.6s var(--ease-curtain) 520ms both; }
  .js:not(.motion-reduce) .ct-stage__label,
  .js:not(.motion-reduce) .ct-mail { animation: ct-fade var(--dur-cinematic) var(--ease-out) 900ms both; }
  .js:not(.motion-reduce) .ct-credits { animation: ct-fade var(--dur-cinematic) var(--ease-out) 1100ms both; }
}
@keyframes ct-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ct-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ct-fade { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }

/* ---------- Subjects ---------- */
.ct-about { padding-block: var(--space-section); border-block-start: var(--border-hair); }
.ct-about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-7); }
.ct-about__head { grid-column: 1 / 5; align-self: start; position: sticky; inset-block-start: calc(var(--header-h) + var(--space-6)); display: grid; gap: var(--space-4); }
.ct-about__title { margin: 0; font-size: var(--text-h1); font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.ct-about__hint { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--cm-ink-300); max-inline-size: 30ch; }
.ct-subjects { grid-column: 6 / -1; border-block-start: var(--border-hair); }
.ct-subjects li { border-block-end: var(--border-hair); }
.ct-subject {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4);
  min-block-size: 44px; padding-block: var(--space-4); text-decoration: none; color: var(--cm-ink-200);
}
.ct-subject__n { font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.1em; color: var(--cm-ink-400); transition: color var(--dur-micro) var(--ease-standard); }
.ct-subject__name {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: var(--weight-light); line-height: 1.2; letter-spacing: -0.02em;
  transition: color var(--dur-micro) var(--ease-standard), transform var(--dur-ui) var(--ease-out);
}
:lang(ar) .ct-subject__name { letter-spacing: 0; line-height: 1.5; }
.ct-subject__go { display: inline-flex; color: var(--cm-orange); opacity: 0; transition: opacity var(--dur-ui) var(--ease-standard); }
.ct-subject__go .btn__icon { inline-size: 22px; block-size: 22px; }
.ct-subject:hover .ct-subject__name, .ct-subject:focus-visible .ct-subject__name { color: var(--cm-white); transform: translateX(calc(var(--dir) * 0.5rem)); }
.ct-subject:hover .ct-subject__n, .ct-subject:focus-visible .ct-subject__n { color: var(--cm-orange); }
.ct-subject:hover .ct-subject__go, .ct-subject:focus-visible .ct-subject__go { opacity: 1; }
.ct-subject:focus-visible { outline-offset: -2px; }

/* ---------- Not ready yet ---------- */
.ct-next { padding-block: var(--space-section); border-block-start: var(--border-hair); }
.ct-next__inner { display: grid; gap: var(--space-7); justify-items: start; }
.ct-next__title { margin: 0; font-size: var(--text-display-l); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.ct-next__title > span { display: block; }
.ct-next__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1023px) {
  .ct-about__head { grid-column: 1 / -1; position: static; }
  .ct-subjects { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .ct-hero { min-block-size: auto; padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8); }
  .ct-line + .ct-line .ct-line__in { padding-inline-start: 0; }
  .ct-stage { margin-block-start: var(--space-7); }
  .ct-mail { gap: var(--space-3); }
  .ct-mail__go { display: none; }
  .ct-credits { gap: var(--space-5) var(--space-7); }
  .ct-subject { grid-template-columns: 2.25rem minmax(0, 1fr) auto; }
  .ct-next__actions .btn { flex: 1 1 100%; justify-content: center; }
}