/* ─────────────────────────────────────────────────────────────
   contact.css
   Contact page. Extends style.css — never duplicates it.

   Compositional intent:
   The page is a single editorial gesture. The email address
   IS the page — not a row in a list, but the entire focal point.
   Everything else exists only to give the email context.

   Hierarchy: email (massive) → badge + caption (small) → footer
   ───────────────────────────────────────────────────────────── */

/* ─── IRAN Kharazmi — Persian Display Font ──────────────── */
@font-face {
  font-family: 'IRAN Kharazmi';
  src: url('fonts/IRAN Kharazmi.eot');
  src: url('fonts/IRAN Kharazmi.eot?#iefix') format('embedded-opentype'),
       url('fonts/IRAN Kharazmi.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --font-fa-display: 'IRAN Kharazmi', 'Vazirmatn', Tahoma, sans-serif;
}

/* ─── Page-level layout ──────────────────────────────────── */
body.contact-page {
  overflow-y: auto;
  overflow-x: hidden;
}

/* page-frame becomes a flex column so footer pins to bottom */
body.contact-page .page-frame {
  height: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* main stretches to fill space above the footer */
body.contact-page #main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* corners and nav fixed while page might scroll on mobile */
body.contact-page .corner,
body.contact-page .nav {
  position: fixed;
}

body.contact-page .nav {
  top: calc(var(--pad) + 28px);
  inset-inline-end: var(--pad);
  z-index: 20;
}

/* ─── Keyframes ──────────────────────────────────────────── */

/* Email lines: dramatic reveal from left → right */
@keyframes email-line-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0%   0 0); }
}

/* Underline grows from left on the second email line */
@keyframes email-underline-grow {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Status dot pulse */
@keyframes contact-status-pulse {
  0%   { transform: scale(1);   opacity: 0.65; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ─── Mini divider (used in badge) ──────────────────────── */
.hero-divider--mini {
  width: clamp(30px, 4vw, 56px);
}

/* ─── Contact Stage ──────────────────────────────────────── */
/*
  The entire page is one composition inside this container.
  Flex column, vertically centered, left-aligned by default.
*/
.contact-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--pad) * 4.5) calc(var(--pad) * 2);
  padding-inline: var(--pad);
  position: relative;
  z-index: 10;
  /* No gap — spacing controlled by margin on each element
     for precise editorial control */
}

/* ─── Badge ──────────────────────────────────────────────── */
.contact-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(36px, 5.5vh, 64px);
  opacity: 0;
  animation: fade-up 0.55s ease 0.1s forwards;
}

.contact-badge__num {
  font-family: var(--font);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

.contact-badge__label {
  font-family: var(--font);
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  color: var(--text-mid);
}

/* ─── Email — the focal point ────────────────────────────── */
/*
  The email address is the largest element on the page.
  It dominates the composition at 9vw — roughly 4-8× larger
  than any supporting text. Scale contrast creates hierarchy.

  The two lines ("HELLO@" / "MISAGHJAFARI.ME") form a unit:
  "HELLO@" acts as a greeting; "MISAGHJAFARI.ME" completes it.
  Together they ARE the invitation.
*/
.contact-email {
  display: flex;
  flex-direction: column;
  /*
    Explicit gap between the two lines. Line-height alone produces
    an inconsistent gap at display scale; this gives precise control.
    Using clamp (not em) so the value is independent of the inherited
    body font-size on the flex container.
  */
  gap: clamp(4px, 1vh, 14px);
  text-decoration: none;
  line-height: 0.86;
  margin-bottom: clamp(24px, 4vh, 44px);
  position: relative;
}

.contact-email__line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 8.5rem);
  color: var(--text-bright);
  transition: color 0.35s ease;
  position: relative;
  clip-path: inset(0 100% 0 0);
}

/*
  Two distinct letter-spacing values create typographic contrast
  between the greeting and the address — making the composition feel
  considered, not simply wrapped.

  Line 1 "HELLO": wide tracking (0.14em) — open, inviting, a human word.
  Line 2 "@MISAGHJAFARI.ME": tight tracking (0.02em) — compact, precise,
  a single unit you read in one glance.
*/
.contact-email__line:nth-child(1) {
  letter-spacing: 0.14em;
}

.contact-email__line:nth-child(2) {
  letter-spacing: 0.02em;
}

.contact-email__line:nth-child(1) {
  animation: email-line-reveal 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.25s both;
}

.contact-email__line:nth-child(2) {
  animation: email-line-reveal 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.45s both;
}

/* Hover: both lines shift to accent */
.contact-email:hover .contact-email__line {
  color: var(--accent);
}

/*
  Underline on the second line grows on hover.
  Only the domain line gets the underline — it's the completing
  gesture that confirms the email as a link.
*/
.contact-email__line:nth-child(2)::after {
  content: '';
  position: absolute;
  bottom: 0.05em;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: start;
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.contact-email:hover .contact-email__line:nth-child(2)::after {
  transform: scaleX(1);
}

/* ─── Rule — punctuation between email and context ──────── */
/*
  Full-width divider. Not decorative — it separates
  the primary information (email) from the supporting context.
  Breathing room is as important as the elements themselves.
*/
.contact-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: clamp(20px, 3vh, 36px);
  opacity: 0;
  animation: fade-up 0.55s ease 0.7s forwards;
}

.contact-rule__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-mid), transparent);
  opacity: 0.35;
}

.contact-rule__diamond {
  font-size: 0.38rem;
  color: var(--text-dim);
  opacity: 0.6;
  line-height: 1;
  flex-shrink: 0;
}

/* ─── Meta — caption + secondary info ───────────────────── */
.contact-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 20px);
  opacity: 0;
  animation: fade-up 0.55s ease 0.8s forwards;
}

/*
  Caption: one or two sentences of editorial context.
  Written in Space Mono at reading scale — visually whisper-quiet
  against the email. This intentional scale contrast reinforces
  the hierarchy: the email is 10-14× larger in font size.
*/
.contact-meta__caption {
  font-family: var(--font);
  font-size: clamp(0.62rem, 1vw, 0.74rem);
  letter-spacing: 0.05em;
  line-height: 2;
  color: var(--text-mid);
  max-width: 540px;
}

/* Secondary row: phone · status */
.contact-meta__secondary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 24px);
}

.contact-meta__sep {
  font-size: 0.5rem;
  color: var(--text-dim);
  opacity: 0.5;
  user-select: none;
}

/* ─── Phone link ─────────────────────────────────────────── */
.contact-phone {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  transition: color 0.22s ease;
}

.contact-phone__label {
  font-family: var(--font);
  font-size: 0.44rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  transition: color 0.22s ease;
}

.contact-phone__value {
  font-family: var(--font);
  font-size: clamp(0.58rem, 0.9vw, 0.7rem);
  letter-spacing: 0.1em;
  color: var(--text-mid);
  transition: color 0.22s ease;
}

.contact-phone:hover .contact-phone__label { color: var(--text-mid); }
.contact-phone:hover .contact-phone__value { color: var(--text-bright); }

.contact-phone:focus-visible {
  outline: 1px solid rgba(255,255,255,0.3);
  outline-offset: 3px;
}

/* ─── Status ─────────────────────────────────────────────── */
.contact-status {
  display: flex;
  align-items: center;
  gap: 7px;
}

.contact-status__dot {
  position: relative;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
}

.contact-status__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #4caf50;
  opacity: 0.85;
}

.contact-status__pulse {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(76, 175, 80, 0.35);
  animation: contact-status-pulse 2.2s ease-out infinite;
}

.contact-status__label {
  font-family: var(--font);
  font-size: 0.44rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
}

.contact-status__value {
  font-family: var(--font);
  font-size: clamp(0.52rem, 0.78vw, 0.62rem);
  letter-spacing: 0.12em;
  color: var(--text-mid);
}

/* ─── Footer ─────────────────────────────────────────────── */
.contact-page .footer {
  z-index: 10;
  position: relative;
}

/* ─── Persian headline — FA mode only ───────────────────── */
/*
  EN: hidden (email IS the hero — English visitors go straight to the address)
  FA: large IRAN Kharazmi display, right-aligned, appears before the email.

  Compositional logic for FA:
  - Persian visitors need their language to speak first.
  - The Persian phrase sets the emotional context.
  - The email then appears as the natural conclusion of the thought —
    slightly smaller than in EN because it shares the visual stage.
  - Two equally intentional designs, not one mirrored into RTL.
*/
.contact-fa-headline {
  display: none; /* hidden in EN */
}

[lang="fa"] .contact-fa-headline {
  display: block;
  font-family: var(--font-fa-display);
  font-size: clamp(2rem, 5.5vw, 5.5rem);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-bright);
  text-align: right;
  direction: rtl;
  margin-bottom: clamp(20px, 3.5vh, 40px);
  /* staggered reveal from right to left — matches Persian reading axis */
  clip-path: inset(0 0% 0 100%);
  animation: fa-headline-reveal 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}

@keyframes fa-headline-reveal {
  0%   { clip-path: inset(0 0% 0 100%); }
  100% { clip-path: inset(0 0% 0 0%); }
}

/* ─── RTL / FA Mode ──────────────────────────────────────────
   The email and phone are always LTR (dir="ltr" in HTML).
   All other elements flip naturally with the page direction.

   The FA layout is NOT a mirrored English layout. It is its own
   composition: Persian phrase leads → email follows → context below.
   ─────────────────────────────────────────────────────────── */

[lang="fa"] .contact-badge__num,
[lang="fa"] .contact-badge__label {
  font-family: var(--font-fa);
  letter-spacing: 0.04em;
}

/*
  In FA mode the email is secondary to the Persian headline.
  It is still large and dominant — but it shares the visual stage.
  Reduced to ~55% of EN size. Right-aligned to match reading axis.
*/
[lang="fa"] .contact-email {
  text-align: right;
}

[lang="fa"] .contact-email__line {
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  color: var(--accent); /* warm accent in FA — frames it as the contact detail, not the hero */
  /*
    Override EN initial clip-path (hidden from right) with FA initial state
    (hidden from left) so there's no jump when the RTL reveal animation starts.
    fill-mode: both on the animation handles the delay period correctly.
  */
  clip-path: inset(0 0% 0 100%);
}

/* In FA mode the email reveals right → left (matches RTL reading direction).
   `both` fill-mode: the 0% keyframe applies during the delay, preventing
   any visual mismatch with the base clip-path. */
[lang="fa"] .contact-email__line:nth-child(1) {
  animation: email-line-reveal-rtl 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.55s both;
}

[lang="fa"] .contact-email__line:nth-child(2) {
  animation: email-line-reveal-rtl 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.72s both;
}

@keyframes email-line-reveal-rtl {
  0%   { clip-path: inset(0 0% 0 100%); }
  100% { clip-path: inset(0 0% 0 0%); }
}

/* Hover: both email lines go to text-bright in FA (accent is default) */
[lang="fa"] .contact-email:hover .contact-email__line {
  color: var(--text-bright);
}

/* Underline origin flips to the right (inline-end) */
[lang="fa"] .contact-email__line:nth-child(2)::after {
  transform-origin: end;
  background: var(--text-bright); /* underline shifts to white on hover */
}

[lang="fa"] .contact-meta__caption {
  font-family: var(--font-fa);
  letter-spacing: 0;
  line-height: 2.4;
  max-width: 100%; /* Persian line breaks differently — don't cap width */
}

[lang="fa"] .contact-phone__label,
[lang="fa"] .contact-phone__value {
  font-family: var(--font-fa);
  letter-spacing: 0;
}

[lang="fa"] .contact-status__label,
[lang="fa"] .contact-status__value {
  font-family: var(--font-fa);
  letter-spacing: 0;
}

/* Reduced motion: disable FA headline animation too */

/* ─── Responsive ─────────────────────────────────────────── */

/* At narrower viewport, let the email breathe a bit less */
@media (max-width: 900px) {
  .contact-stage {
    padding-block: calc(var(--pad) * 4) calc(var(--pad) * 1.5);
  }
}

/* Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body.contact-page .nav {
    top: calc(var(--pad) + 22px);
  }

  .contact-stage {
    padding-block: calc(var(--pad) * 5) calc(var(--pad) * 1.5);
    justify-content: flex-end;
  }

  /*
    "MISAGHJAFARI.ME" is 15 characters. At 8vw on a 375px screen
    (= 30px), Bebas Neue character advance ≈ 0.6 × 30 = 18px per char.
    15 × 18 = 270px — fits comfortably in ~311px usable width.
    Using 8vw (not 12vw) prevents horizontal overflow.
  */
  .contact-email__line {
    font-size: clamp(1.8rem, 8vw, 3rem);
    line-height: 0.9;
  }

  .contact-badge {
    margin-bottom: clamp(28px, 4vh, 48px);
  }

  .contact-meta__secondary {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .contact-meta__sep {
    display: none;
  }

  /* FA mobile: Persian headline also needs to scale safely */
  [lang="fa"] .contact-fa-headline {
    font-size: clamp(1.6rem, 7vw, 2.5rem);
    line-height: 1.8;
  }

  [lang="fa"] .contact-email__line {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
  }
}

/* Portrait tablets: comfortable reading between mobile and desktop */
@media (min-width: 601px) and (max-width: 900px) {
  .contact-email__line {
    font-size: clamp(3rem, 9vw, 6rem);
  }
}

/* ─── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-email__line,
  .contact-fa-headline {
    clip-path: none;
    animation: none;
  }

  .contact-badge,
  .contact-rule,
  .contact-meta {
    animation: none;
    opacity: 1;
  }

  .contact-status__pulse {
    animation: none;
  }

  .contact-email__line,
  .contact-email__line:nth-child(2)::after,
  .contact-phone__label,
  .contact-phone__value {
    transition: none;
  }

  /* FA headline: show immediately, no clip reveal */
  [lang="fa"] .contact-fa-headline {
    animation: none;
    clip-path: none;
    opacity: 1;
  }
}