/* ============================================================
   Page-specific layouts — Kareem Elkhatib portfolio
   Hero · discipline index · splits · timeline · stats ·
   business cards · pic-time gallery · contact
   Depends on tokens.css + styles.css.
   ============================================================ */

/* ---------- Generic page header (interior pages) ---------- */
.page-head { padding-block: clamp(var(--space-xl), 16vh, var(--space-2xl)) var(--space-lg); }
.page-head__title { font-size: var(--step-4); margin-top: var(--space-2xs); }
.page-head .lead { margin-top: var(--space-md); }

/* ============================================================
   HOME — HERO (focused: photo · name · sub-headline, above the fold)
   ============================================================ */
.hero--home {
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-xl) var(--space-md);
  text-align: center;
}
.hero--home .container { width: 100%; }
.hero__intro-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 56ch;
  margin-inline: auto;
}
.hero__photo {
  width: clamp(140px, 24vw, 220px);
  aspect-ratio: 1;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.1s forwards;
}
.hero__photo .frame { width: 100%; height: 100%; }
.frame--round { border-radius: 50%; box-shadow: 0 0 0 1px var(--line), 0 18px 50px -22px rgba(33,27,22,0.4); }
.frame--round.frame--placeholder::after { letter-spacing: 0.2em; }

.hero--home .hero__meta { margin-bottom: var(--space-xs); opacity: 0; animation: fadeUp 0.9s var(--ease-out) 0.25s forwards; }
.hero--home .hero__title { font-size: var(--step-5); letter-spacing: -0.03em; line-height: 0.95; }
.hero__sub {
  margin-top: var(--space-md);
  max-width: 42ch;
  font-size: var(--step-1);
  color: var(--ink-soft);
  font-weight: 350;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.55s forwards;
}

/* Scroll cue into the timeline */
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  align-self: center;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.8s forwards;
}
.hero__scroll-line { width: 1px; height: 56px; background: var(--sand); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
  background: var(--bronze);
  animation: scrollCue 2.2s var(--ease-soft) infinite;
}
.hero__scroll:hover { color: var(--bronze); }
@keyframes scrollCue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(250%); } }

@media (prefers-reduced-motion: reduce) {
  .hero__photo, .hero--home .hero__meta, .hero__sub, .hero__scroll { animation: none !important; opacity: 1; }
  .hero__scroll-line::after { animation: none; }
}

/* ============================================================
   HOME — HERO (legacy two-column variant, kept for other uses)
   ============================================================ */
.hero { position: relative; z-index: 2; padding-top: var(--space-lg); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, var(--space-xl));
  align-items: end;
  min-height: min(82vh, 760px);
  padding-block: var(--space-lg) var(--space-xl);
}
.hero__meta {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-faint);
  margin-bottom: var(--space-md);
}
.hero__title {
  font-size: var(--step-5);
  letter-spacing: -0.03em;
  line-height: 0.92;
}
.hero__title .line { display: block; overflow: hidden; }
/* staggered clip-reveal — the signature load moment */
.hero__title .line > span {
  display: block;
  transform: translateY(110%);
  animation: lineRise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.30s; }
.hero__title em { font-style: italic; color: var(--bronze); font-variation-settings: "SOFT" 40; }

.hero__roles {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em 1.1em;
  font-size: var(--step-1);
  color: var(--ink-soft);
  font-weight: 350;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.7s forwards;
}
.hero__roles .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sand); }

.hero__aside {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 0.55s forwards;
}
.hero__intro { max-width: 36ch; color: var(--ink-soft); margin-bottom: var(--space-md); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Full-bleed hero image band with slow ken-burns */
.hero__visual {
  position: relative;
  z-index: 2;
  height: clamp(280px, 46vh, 520px);
  margin-top: var(--space-lg);
}
.hero__visual .frame { width: 100%; height: 100%; }
.hero__visual .frame img,
.hero__visual .frame.frame--placeholder {
  width: 100%; height: 100%;
  animation: kenburns 22s var(--ease-soft) infinite alternate;
}

@keyframes lineRise { to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-md); min-height: 0; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title .line > span,
  .hero__roles, .hero__aside { animation: none !important; opacity: 1; transform: none; }
  .hero__visual .frame img, .hero__visual .frame--placeholder { animation: none; }
}

/* ============================================================
   HOME — THREE-DISCIPLINE INDEX (signature interaction)
   ============================================================ */
.disciplines { border-top: 1px solid var(--line); }
.discipline {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(var(--space-md), 4vw, var(--space-lg)) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: color var(--dur-med) var(--ease-soft);
}
.discipline__num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--sand);
  transition: color var(--dur-med) var(--ease-soft);
}
.discipline__body { display: block; }
.discipline__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1;
}
.discipline__desc { display: block; color: var(--ink-soft); max-width: 46ch; margin-top: 0.4em; font-size: var(--step-0); }
.discipline__go {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--step--1); letter-spacing: 0.06em;
  color: var(--ink-faint);
  transition: color var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-out);
}
.discipline__go .arrow { transition: transform var(--dur-med) var(--ease-out); }
/* hover: bronze numeral, title nudges, arrow advances, soft sand wash */
.discipline::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--sand-wash), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.discipline:hover::after { opacity: 1; }
.discipline:hover .discipline__num { color: var(--bronze); }
.discipline:hover .discipline__title { color: var(--ink); }
.discipline:hover .discipline__go { color: var(--bronze); }
.discipline:hover .discipline__go .arrow { transform: translateX(6px); }
.discipline:hover { padding-left: var(--space-sm); }

@media (max-width: 720px) {
  .discipline { grid-template-columns: 3rem 1fr; gap: var(--space-sm); }
  .discipline__go { grid-column: 2; margin-top: var(--space-2xs); }
  .discipline__title { font-size: var(--step-2); }
}

/* ============================================================
   SPLIT — two-column text/visual (about, business)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, var(--space-xl));
  align-items: center;
}
.split--reverse .split__visual { order: -1; }
.split__visual .frame { aspect-ratio: 4 / 5; }
.split__title { font-size: var(--step-3); margin-bottom: var(--space-sm); }
.split p { color: var(--ink-soft); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--space-md); }
  .split--reverse .split__visual { order: 0; }
  .split__visual .frame { aspect-ratio: 16 / 10; }
}

/* ============================================================
   EDUCATION — credential block + project cards
   ============================================================ */
.credential {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-md);
  align-items: baseline;
  padding-block: var(--space-md);
  border-top: 1px solid var(--line);
}
.credential__school { font-family: var(--font-display); font-size: var(--step-2); }
.credential__degree { color: var(--ink-soft); }
.credential__meta { text-align: right; color: var(--ink-faint); font-size: var(--step--1); letter-spacing: 0.06em; white-space: nowrap; }
.credential__gpa { color: var(--bronze); font-weight: 600; }
@media (max-width: 640px) {
  .credential { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .credential__meta { text-align: left; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.card__kicker { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); margin-bottom: var(--space-xs); }
.card__title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.card__date { color: var(--ink-faint); font-size: var(--step--1); }
.card p { color: var(--ink-soft); font-size: var(--step-0); margin-top: var(--space-xs); margin-bottom: 0; }

/* Skills chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.6em; list-style: none; padding: 0; margin: 0; }
.chips li {
  font-size: var(--step--1);
  letter-spacing: 0.03em;
  padding: 0.5em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-soft);
  background: var(--panel);
}

/* ============================================================
   STATS — quantified track record
   ============================================================ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--line);
  padding-top: var(--space-lg);
}
.stat__num { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.stat__num .accent { color: var(--bronze); }
.stat__label { color: var(--ink-soft); margin-top: var(--space-xs); font-size: var(--step-0); max-width: 24ch; }

/* Experience list (business page) */
.xp { border-top: 1px solid var(--line); }
.xp__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs) var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
}
.xp__role { font-family: var(--font-display); font-size: var(--step-1); }
.xp__org { color: var(--ink-soft); }
.xp__when { color: var(--ink-faint); font-size: var(--step--1); letter-spacing: 0.05em; text-align: right; white-space: nowrap; }
.xp__points { grid-column: 1 / -1; margin: var(--space-2xs) 0 0; padding-left: 1.1em; color: var(--ink-soft); }
.xp__points li { margin-bottom: 0.35em; }
.xp__points strong { color: var(--ink); }
@media (max-width: 640px) { .xp__when { text-align: left; grid-row: 2; } }

/* ============================================================
   FEATURE — big statement panel
   ============================================================ */
.statement {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: clamp(var(--space-lg), 7vw, var(--space-2xl)) var(--gutter);
  text-align: center;
}
.statement__text {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.18;
  max-width: 22ch;
  margin-inline: auto;
  letter-spacing: -0.01em;
}
.statement__text em { color: var(--sand); font-style: italic; }

/* ============================================================
   HOME — LIFE TIMELINE
   Sticky rail (giant crossfading year + drawing progress line)
   beside a spine of milestone cards that reveal + activate on scroll.
   ============================================================ */
.timeline__head { max-width: var(--measure); margin-bottom: var(--space-xl); }
.timeline__heading { font-size: var(--step-4); margin: var(--space-2xs) 0 var(--space-md); }

.timeline__layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) 1fr;
  gap: clamp(1.5rem, 5vw, var(--space-xl));
  align-items: start;
}

/* ---- Sticky rail ---- */
.timeline__rail-inner {
  position: sticky;
  top: clamp(96px, 18vh, 160px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.timeline__bigyear {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.timeline__bigyear.is-swap { animation: yearSwap 0.6s var(--ease-out); }
@keyframes yearSwap {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  100% { opacity: 1; transform: none; filter: none; }
}
.timeline__progress {
  position: relative;
  width: 2px;
  height: clamp(120px, 26vh, 240px);
  background: var(--line);
  overflow: hidden;
}
.timeline__progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--bronze), var(--bronze-deep));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.12s linear;
}

/* ---- Track + spine ---- */
.timeline__track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline__track::before {
  content: "";
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}

.tl-item {
  position: relative;
  padding-left: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(var(--space-lg), 7vh, var(--space-2xl));
}
.tl-item:last-child { padding-bottom: 0; }

/* dot on the spine */
.tl-item__marker { position: absolute; left: 0; top: 6px; }
.tl-item__dot {
  display: block;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--sand);
  transition: background var(--dur-med) var(--ease-soft),
              border-color var(--dur-med) var(--ease-soft),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-soft);
}
.tl-item.is-active .tl-item__dot {
  background: var(--bronze);
  border-color: var(--bronze);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bronze) 16%, transparent);
}

/* card content */
.tl-item__card { transform-origin: left top; }
.tl-item__year {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--sand);
  margin: 0 0 0.15em;
  transition: color var(--dur-med) var(--ease-soft);
}
.tl-item.is-active .tl-item__year { color: var(--bronze); }
.tl-item__tag {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2xs);
}
.tl-item__title { font-size: var(--step-2); letter-spacing: -0.015em; margin: 0 0 var(--space-2xs); }
.tl-item__text { color: var(--ink-soft); max-width: 52ch; margin: 0; }
.tl-item__media { margin-top: var(--space-sm); max-width: 460px; }
.tl-item__media .frame { aspect-ratio: 16 / 10; }

/* reveal: slide up + in from the spine */
.tl-item {
  opacity: 0;
  transform: translate3d(-12px, 28px, 0);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.tl-item.is-visible { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .timeline__layout { grid-template-columns: 1fr; gap: var(--space-md); }
  /* rail becomes a compact sticky bar under the nav */
  .timeline__rail {
    position: sticky;
    top: 76px;
    z-index: 5;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    margin-inline: calc(var(--gutter) * -1);
    padding: var(--space-2xs) var(--gutter);
    border-bottom: 1px solid var(--line);
  }
  .timeline__rail-inner { position: static; flex-direction: row; align-items: center; gap: var(--space-sm); }
  .timeline__bigyear { font-size: var(--step-3); }
  .timeline__progress { width: 100%; height: 2px; flex: 1; }
  .timeline__progress-fill { transform-origin: left; }
  .timeline__progress-fill[style] { /* JS scaleY → use scaleX on mobile via override below */ }
}

@media (prefers-reduced-motion: reduce) {
  .tl-item { opacity: 1; transform: none; transition: none; }
  .timeline__bigyear.is-swap { animation: none; }
}

/* ============================================================
   PHOTOGRAPHY — pic-time gallery wrapper
   ============================================================ */
.gallery-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 88vh;
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gallery-wrap #pictimeIntegration { display: block; width: 100%; height: 88vh; min-height: 620px; border: 0; }
.gallery-note { color: var(--ink-faint); font-size: var(--step--1); margin-top: var(--space-sm); }

/* Full-bleed variant — gallery fills the viewport below the sticky nav */
.gallery-wrap--full { min-height: calc(100vh - 76px); border-top: 0; }
.gallery-wrap--full #pictimeIntegration { height: calc(100vh - 76px); min-height: 520px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 5vw, var(--space-xl));
  align-items: start;
}
.contact__big { font-size: var(--step-4); letter-spacing: -0.02em; }
/* Contact page — buttons only, vertically centered below the nav */
.contact-page {
  min-height: calc(100vh - 76px);
  display: flex;
  align-items: center;
  padding-block: var(--space-xl);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.contact-list--solo { max-width: 640px; }
.contact-list li { border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  transition: padding var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-soft);
}
.contact-list a:hover { padding-left: var(--space-sm); color: var(--bronze); }
.contact-list .c-label { font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.contact-list .c-value { font-family: var(--font-display); font-size: var(--step-1); }
.contact-list a:hover .c-label { color: var(--bronze); }
/* Let long values (e.g. the email) wrap instead of overflowing the row,
   and keep the arrow from being crushed on narrow phones. */
.contact-list .c-block { min-width: 0; }
.contact-list .c-value { overflow-wrap: anywhere; }
.contact-list a .arrow { flex: none; }
@media (max-width: 820px) { .contact__grid { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .contact-list .c-value { font-size: var(--step-0); } }