/* Home page */

/* ---------- Top bar ---------- */
.top-bar {
  height: var(--top-bar-height);
  padding: 0 var(--side-padding);
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* push "Download CV" to the right */
}

.cv-link {
  color: var(--white);
  font-size: var(--size-small);
}

.cv-link:hover {
  text-decoration: underline;
}

/* ---------- Greeting strip ---------- */
/* Shows either the short line or the full intro. The height change between
   the two is animated in main.js; CSS only swaps the text and fades it in. */
.greeting {
  padding: 0 var(--side-padding);
  background: var(--white);
  border-bottom: var(--divider);   /* line between the strip and the columns */
  font-size: var(--size-greeting);
  overflow: hidden;            /* hide content while the strip is resizing */
}

.greeting-short {
  line-height: var(--greeting-height);   /* one line, vertically centered */
  animation: fade-in 0.4s ease both;
}

/* "Amna. ↓": bold name with a blue arrow that hints the strip opens;
   on hover the name turns blue and the arrow nudges down */
.name-button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.name-text {
  font-weight: 600;
}

.name-button:hover,
.name-button:focus-visible {
  color: var(--blue);
}

.name-arrow,
.intro-close {
  display: inline-block;
  margin-left: 0.35em;
  color: var(--blue);
  transition: transform 0.3s ease;
}

.name-button:hover .name-arrow,
.name-button:focus-visible .name-arrow {
  transform: translateY(3px);
}

/* "← Home": hidden on the home view */
.back-button {
  display: none;
  font: inherit;
  line-height: var(--greeting-height);
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.3s ease;
}

.back-button:hover,
.back-button:focus-visible {
  color: var(--blue);
}

/* While a column is open (class added by main.js): swap greeting for "← Home" */
.greeting.shows-back .greeting-short {
  display: none;
}

.greeting.shows-back .back-button {
  display: block;
  animation: fade-in 0.4s ease both;
}

/* Full intro: hidden until the strip is open */
.intro {
  display: none;
  padding: 28px 0;
  line-height: 1.15;
}

.intro-link {
  color: var(--blue);
  font-weight: 600;
}

.intro-link:hover {
  text-decoration: underline;
}

/* Open state (class added by main.js). The whole strip is clickable to close. */
.greeting.is-open {
  cursor: pointer;
}

.greeting.is-open .greeting-short {
  display: none;
}

.greeting.is-open .intro {
  display: block;
  animation: fade-in 0.4s ease 0.2s both;   /* fade in as the strip opens */
}

/* "↑" at the end of the intro: nudges up on hover, as clicking closes the strip */
.greeting.is-open:hover .intro-close {
  transform: translateY(-3px);
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Three columns ---------- */
.columns {
  flex: 1;                     /* fill whatever height is left below the bars */
  min-height: 0;               /* let it shrink when the intro opens */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  transition: grid-template-columns var(--expand-time) var(--ease);
}

/* One column open: it takes 4 parts of the width, the others 1 part each */
.columns[data-expanded="ui"]   { grid-template-columns: 4fr 1fr 1fr; }
.columns[data-expanded="tech"] { grid-template-columns: 1fr 4fr 1fr; }
.columns[data-expanded="ux"]   { grid-template-columns: 1fr 1fr 4fr; }

/* A project page is open: that column takes almost all the width. The narrow ones
   only hold a vertical title: an outer one (at the window's edge) gets 6.5 parts of
   100, an inner one 4.5 (about 125px and 85px on a 1920px screen, like the design).
   The page itself keeps its own width (project-page.css), so it never moves. */
.columns[data-expanded="ui"][data-view="page"]   { grid-template-columns: 89fr 4.5fr 6.5fr; }
.columns[data-expanded="tech"][data-view="page"] { grid-template-columns: 6.5fr 87fr 6.5fr; }
.columns[data-expanded="ux"][data-view="page"]   { grid-template-columns: 6.5fr 4.5fr 89fr; }

.column {
  overflow: hidden;            /* content moves inside; main.js slides it */
}

/* Columns with projects can be clicked to open;
   when one is open, the narrow ones can be clicked to go back */
.column:has(.column-projects),
.columns[data-expanded] .column:not(.is-expanded) {
  cursor: pointer;
}

/* The part that actually moves when scrolling.
   Summary, projects and project page sit on top of each other in the same spot. */
.column-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* always exactly the column's width */
  padding: 30px var(--side-padding) 60px;
  will-change: transform;      /* hint the browser to keep movement smooth */
  transition: padding var(--expand-time) var(--ease);
}

.column-summary,
.column-projects,
.column-page {
  grid-area: 1 / 1;
}

/* Divider lines between columns */
.column + .column {
  border-left: var(--divider);
}

.column-title {
  font-size: var(--size-title);
  font-weight: 400;
  color: var(--blue);
  margin-bottom: 0.7em;
  transition: font-size var(--expand-time) var(--ease);
}

.column-text {
  font-size: var(--size-body);
  line-height: 1.24;
  transition:
    font-size var(--expand-time) var(--ease),
    color 0.3s ease;
}

/* Hover: text in the hovered column turns blue (not in the open column) */
.column:not(.is-expanded):hover .column-text {
  color: var(--blue);
}

/* ---------- Narrow columns (while another column is open) ---------- */
/* Text shrinks smoothly thanks to the font-size transitions above */
.columns[data-expanded] .column:not(.is-expanded) .column-inner {
  padding: 30px var(--side-padding-narrow) 60px;
}

.columns[data-expanded] .column:not(.is-expanded) .column-title {
  font-size: var(--size-title-small);
}

.columns[data-expanded] .column:not(.is-expanded) .column-text {
  font-size: var(--size-body-small);
}

/* While a project page is open, the narrow columns show only their title, written
   vertically (reading bottom to top), so the case study gets all the attention.
   Its top lines up with the top of the page. Clicking one still opens that
   column's project list (see main.js). */
.columns[data-view="page"] .column:not(.is-expanded) .column-inner {
  padding: 24px 0 60px;   /* level with the case study's "← back" label (project-page.css) */
}

.columns[data-view="page"] .column:not(.is-expanded) .column-text {
  display: none;
}

.columns[data-view="page"] .column:not(.is-expanded) .column-title {
  width: fit-content;            /* as wide as one line of text */
  margin: 0 auto;                /* centred in a column between two others... */
  font-size: var(--size-title-tiny);
  line-height: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);     /* turn it so it reads upwards */
  white-space: nowrap;
  animation: fade-in 0.3s ease 0.1s both;   /* softly replaces the horizontal title */
}

/* ...but at the window's edges it lines up with "← Home" (left) and
   "Download CV" (right), which stay at the normal side padding */
.columns[data-view="page"] > .column:first-of-type:not(.is-expanded) .column-inner {
  padding-left: var(--side-padding);
}

.columns[data-view="page"] > .column:first-of-type:not(.is-expanded) .column-title {
  margin-left: 0;
}

.columns[data-view="page"] > .column:last-of-type:not(.is-expanded) .column-inner {
  padding-right: var(--side-padding);
}

.columns[data-view="page"] > .column:last-of-type:not(.is-expanded) .column-title {
  margin-right: 0;
}

/* A column that turns narrow fades its text in right away (no delay) */
.columns[data-expanded] .column:not(.is-expanded) .column-summary {
  transition: opacity 0.3s ease;
}

/* Back from a project page (class set by main.js while the columns resize): the
   narrow columns' text is laid out at its final width from the first frame, so the
   widening strips reveal it like a page sliding open, instead of squeezing and
   re-wrapping it. 1px is the divider line on the left of the 2nd and 3rd columns. */
.columns.is-resizing[data-expanded]:not([data-view="page"]) .column:not(.is-expanded) .column-summary {
  width: calc(100vw / 6 - 2 * var(--side-padding-narrow) - 1px);
}

.columns.is-resizing[data-expanded]:not([data-view="page"]) .column:first-of-type:not(.is-expanded) .column-summary {
  width: calc(100vw / 6 - 2 * var(--side-padding-narrow));
}

/* ...takes its final size at once, so the column that was open doesn't shrink
   its text (and re-wrap it) step by step, and fades in (the vertical titles
   don't snap to horizontal ones) */
.columns.is-resizing[data-expanded]:not([data-view="page"]) .column:not(.is-expanded) :is(.column-title, .column-text) {
  transition: none;
  animation: fade-in 0.4s ease both;
}

/* Back home from a project page: the same, at the home view's column width */
.columns.is-resizing:not([data-expanded]) .column-summary {
  width: calc(100vw / 3 - 2 * var(--side-padding) - 1px);
}

.columns.is-resizing:not([data-expanded]) .column:first-of-type .column-summary {
  width: calc(100vw / 3 - 2 * var(--side-padding));
}

.columns.is-resizing:not([data-expanded]) :is(.column-title, .column-text) {
  transition: none;
  animation: fade-in 0.4s ease both;
}

/* From a project page straight to another column: the column that opens hides
   its vertical title at once, instead of fading it out while it grows back to a
   big horizontal title */
.columns.is-resizing .column.is-expanded .column-summary {
  transition: none;
}

/* Space Mono titles are wide: in the narrow columns (1/6 of the window with a column
   open) they shrink only as far as needed for "Technology", 10 letters, about 6.2
   times the font size, to fit. Vertical titles (page open) don't need this. */
.columns[data-expanded]:not([data-view="page"]) .column:not(.is-expanded) .column-title.mono {
  font-size: min(var(--size-title-small), (100vw / 6 - 2 * var(--side-padding-narrow)) / 6.2);
}

/* "← Home" and "Download CV" stay in line with the text of the first and
   last columns, moving in as those columns' side padding shrinks (and back out
   to the normal padding while a project page is open, see above) */
.greeting,
.top-bar {
  transition: padding var(--expand-time) var(--ease);
}

body:has(.columns[data-expanded] > .column:first-of-type:not(.is-expanded)) .greeting {
  padding-left: var(--side-padding-narrow);
}

body:has(.columns[data-view="page"] > .column:first-of-type:not(.is-expanded)) .greeting {
  padding-left: var(--side-padding);
}

body:has(.columns[data-expanded] > .column:last-of-type:not(.is-expanded)) .top-bar {
  padding-right: var(--side-padding-narrow);
}

body:has(.columns[data-view="page"] > .column:last-of-type:not(.is-expanded)) .top-bar {
  padding-right: var(--side-padding);
}

/* ---------- Open column: summary out, projects in ---------- */
.column-summary {
  transition: opacity 0.3s ease 0.4s;   /* closing: fade back in once narrowing */
}

.column.is-expanded .column-summary {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;       /* opening: fade out right away */
}

/* Projects are hidden until their column opens */
.column-projects {
  display: none;
  /* Laid out at the final open width from the start, so the text
     doesn't jump between lines while the column is widening */
  width: calc(100vw * 4 / 6 - 2 * var(--side-padding));
}

.column.is-expanded .column-projects {
  display: block;
  animation: projects-in 0.7s ease-out 0.3s both;
}

@keyframes projects-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Technology opens from the center instead:
   its projects stay centered on screen while the column grows outward,
   and are revealed from the middle to both sides like opening curtains. */
.column[data-name="tech"] .column-projects {
  justify-self: unsafe center;   /* "unsafe" = keep centered even while wider than the column */
}

.column[data-name="tech"].is-expanded .column-projects {
  animation: projects-from-center var(--expand-time) var(--ease) 0.1s both;
}

@keyframes projects-from-center {
  from { opacity: 0; clip-path: inset(0 50%); }
  to   { opacity: 1; clip-path: inset(0 0); }
}

/* Back from a project page, the list starts fading in as soon as the page is gone */
.columns.is-resizing .column.is-expanded .column-projects {
  animation-delay: 0s;
}

.projects-intro {
  font-size: var(--size-projects);
  line-height: 1.18;
  margin-bottom: 1.5em;
}

/* Project list: arrow + name, line under each row */
.project-list {
  list-style: none;
}

.project-link {
  position: relative;          /* so the preview image is placed inside the row */
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 0;
  font-size: var(--size-projects);
  border-bottom: var(--divider);
  transition: color 0.3s ease;
}

/* Blue "→" arrow in Work Sans before each project name */
.project-link::before {
  content: "→";
  color: var(--blue);
  transition: transform 0.3s ease;
}

/* Hover: name turns blue and the arrow nudges right */
.project-link:hover {
  color: var(--blue);
}

.project-link:hover::before {
  transform: translateX(6px);
}

/* Project preview image: sits at the right end of the row, hidden until hover */
.project-preview {
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(150px, 11vw, 220px);
  aspect-ratio: 3 / 2;         /* every preview gets the same size... */
  object-fit: cover;           /* ...the image fills it and is trimmed, never stretched */
  opacity: 0;
  transform: translateY(-50%) scale(0.85);
  pointer-events: none;        /* never blocks clicking the row */
  transition:
    opacity 0.35s ease,
    transform 0.5s var(--ease);
}

/* Hover: fade in and grow to full size */
.project-link:hover .project-preview {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* ---------- Phones (up to 767px wide) ---------- */
/* The three sections stack and the page scrolls normally. Tapping a section opens
   its project list below its text (the other sections fold down to their titles),
   with a small slideshow of its projects. Tapping a project shows a placeholder
   page until the case studies have a phone layout. Behaviour: see main.js. */

/* Slideshows and the placeholder page only exist on phones */
.project-reel,
.mobile-placeholder {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --side-padding: 20px;
    --side-padding-narrow: 20px;
    --top-bar-height: 48px;
    --greeting-height: 48px;
    --size-small: 14px;
    --size-greeting: 15px;
    --size-title: 24px;
    --size-title-small: 24px;
    --size-body: 17px;
    --size-body-small: 17px;
    --size-projects: 17px;
  }

  /* The page scrolls normally (on desktop only the columns scroll, see main.js) */
  html,
  body {
    height: auto;
    overflow: visible;
  }

  /* Sections stacked, with a line between them */
  .columns {
    display: block;
  }

  .column {
    overflow: visible;
  }

  .column + .column {
    border-left: none;
    border-top: var(--divider);
  }

  .column-inner {
    display: block;
    padding: 16px var(--side-padding) 18px !important;
    transform: none !important;                          /* ignore the desktop scrolling */
  }

  .column-title {
    margin-bottom: 0.5em;
  }

  /* An open section keeps its text, with its projects below it */
  .column.is-expanded .column-summary {
    opacity: 1;
    pointer-events: auto;
  }

  .column[data-name] .column-projects {
    width: auto;
    justify-self: auto;
  }

  .column[data-name].is-expanded .column-projects {
    margin-top: 12px;
    animation: projects-in 0.5s ease-out both;
  }

  /* The list's own title and intro are for the wide desktop column only */
  .column-projects > .column-title,
  .projects-intro {
    display: none;
  }

  /* The other sections fold down to just their titles */
  .columns[data-expanded] .column:not(.is-expanded) .column-text {
    display: none;
  }

  .columns[data-expanded] .column:not(.is-expanded) .column-title,
  .columns[data-expanded]:not([data-view="page"]) .column:not(.is-expanded) .column-title.mono {
    font-size: var(--size-title-small);
    line-height: 1.2;
    margin-bottom: 0;
  }

  /* ...in slim rows */
  .columns[data-expanded] .column:not(.is-expanded) .column-inner {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  /* No hover effects on phones: a tap would leave text blue or arrows nudged */
  .column:not(.is-expanded):hover .column-text,
  .project-link:hover,
  .name-button:hover,
  .back-button:hover {
    color: inherit;
  }

  .project-link:hover::before,
  .name-button:hover .name-arrow,
  .greeting.is-open:hover .intro-close {
    transform: none;
  }

  .cv-link:hover,
  .intro-link:hover {
    text-decoration: none;
  }

  /* Project rows keep their line underneath (as on desktop), but no hover
     previews (phones can't hover) */
  .project-link {
    padding: 0.6em 0;
  }

  .project-preview {
    display: none;
  }

  /* Slideshow of the section's projects, in the bottom-right corner:
     the images sit on top of each other and fade into one another */
  .project-reel {
    display: block;
    position: relative;
    width: 100px;
    aspect-ratio: 1;
    margin: 20px 0 0 auto;
    overflow: hidden;
  }

  /* The images are squares (assets/Photo/reel/, 300×300 = 3x the box), so each fills it exactly */
  .project-reel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.1s ease;   /* near-instant swap (timing in main.js) */
  }

  .project-reel img.is-shown {
    opacity: 1;
  }

  /* The greeting stays while a section is open; "← Home" only appears on the
     placeholder page */
  .greeting.shows-back:not(.is-open) .greeting-short {
    display: block;
  }

  .greeting.shows-back .back-button {
    display: none;
  }

  body.shows-placeholder .greeting.shows-back .greeting-short {
    display: none;
  }

  body.shows-placeholder .greeting .back-button {
    display: block;
    animation: fade-in 0.4s ease both;
  }

  /* Placeholder page: message at the top, slideshow of every project at the bottom */
  body.shows-placeholder .columns {
    display: none;
  }

  body.shows-placeholder .mobile-placeholder {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--top-bar-height) - var(--greeting-height) - 1px);   /* 1px: the strip's divider line */
    min-height: calc(100svh - var(--top-bar-height) - var(--greeting-height) - 1px);
    padding: 32px var(--side-padding) 20px;
    animation: fade-in 0.4s ease both;
  }

  .placeholder-text {
    font-size: 20px;
    line-height: 1.2;
  }

  /* "laptop or desktop": sends the site's address on (see main.js) */
  .share-link {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
  }

  .share-link span {
    color: var(--blue);
  }

  .share-note {
    min-height: 1.2em;           /* room for the note, so nothing jumps when it appears */
    margin: 0.6em 0 32px;
    font-size: 15px;
    color: var(--blue);
  }

  .mobile-placeholder .project-reel {
    margin: auto 0 0 auto;       /* bottom-right corner of the page, same size as above */
  }
}