/* ==========================================================
   Elizaveta Ismagilova — portfolio
   Rebuilt to match the original Readymag layout.

   HOW SIZING WORKS
   Like Readymag, the page is designed on a 1024-unit-wide canvas
   that scales with the browser window. 1 unit = var(--u).
   So "calc(8 * var(--u))" means "8 units on the canvas".

   Canvas columns (left edges):
     20  = label column      (numbers, titles, section names)
     162 = text column       (intro, descriptions, your name)
     294 = image column      (sliders / images, 568 wide, ends at 862)
   ========================================================== */

:root {
  /* ---- Colours ---- */
  --ink: #000;             /* text */
  --link: #0080ff;         /* blue links, same as Readymag */
  --paper: #fff;           /* page background */
  --slide-bg: #000;        /* slider background */

  /* ---- Font ----
     Original: Helvetica Neue LT Pro 65 Medium (Adobe Fonts).
     Macs have Helvetica Neue built in, so it looks the same there.
     See README to load the exact Adobe font on every computer. */
  --font: "helvetica-neue-lt-pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --weight: 500;

  /* ---- Scale: 1 canvas unit ---- */
  --u: calc(100vw / 1024);

  /* ---- Type sizes (canvas units) ---- */
  --small: calc(8 * var(--u));      /* labels, nav, descriptions */
  --small-lh: calc(10 * var(--u));
  --body: calc(10 * var(--u));      /* CV text */
  --body-lh: calc(10.5 * var(--u));

  /* ---- Columns (canvas units) ---- */
  --col-a: calc(142 * var(--u));    /* 20 → 162 */
  --col-b: calc(132 * var(--u));    /* 162 → 294 */
  --col-c: calc(568 * var(--u));    /* 294 → 862 */
  --edge: calc(20 * var(--u));      /* left page margin */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }  /* scrolling is animated in site.js */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: var(--weight);
  font-size: var(--small);
  line-height: var(--small-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
/* Readymag link style: no visual change on hover */
p { margin: 0 0 var(--small-lh); }
h1, h2, h3 { margin: 0; font: inherit; }

/* ---------- Header: same positions as the original, plus a white bar ---------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  height: calc(26 * var(--u));      /* white bar behind the header — slimmer */
  background: var(--paper);
  text-transform: uppercase;
}
.hdr a { position: absolute; top: calc(14 * var(--u)); white-space: nowrap; }
.hdr .nav-name    { left: calc(162 * var(--u)); }
.hdr .nav-cv      { left: calc(365 * var(--u)); }
.hdr .nav-cases   { left: calc(499 * var(--u)); }
.hdr .nav-behance { left: calc(638 * var(--u)); text-transform: none; }
.hdr .nav-email   { right: calc(162 * var(--u)); color: var(--ink); text-transform: none; }

/* Hover "swing" pulse on CV and email: 100% → 105% → 100%, 1.2 s loop */
.pulse { display: inline-block; }
.pulse:hover { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------- Magnet: page labels CASES / CV fly into their header words ---------- */
/* The label being pulled (site.js moves it; these just make it feel springy) */
.magnet { display: inline-block; transform-origin: left bottom; will-change: transform; }
/* flight up into the header: slight wind-up, fast travel, fades as it lands */
.magnet.flying { opacity: 0; transition: transform 0.55s cubic-bezier(0.6, -0.25, 0.25, 1), opacity 0.2s ease 0.38s; }
/* falling back out when you scroll down again: springy */
.magnet.returning { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; }
/* The header word when it "catches" the label */
.hdr a.catch { animation: catch 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes catch {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22, 0.86); }
  60%  { transform: scale(0.94, 1.08); }
  100% { transform: scale(1); }
}
/* Underline that draws in under the header word of the section you're in */
.hdr a.here::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform-origin: left; animation: draw 0.4s ease-out both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

main { padding-top: calc(45 * var(--u)); }

/* ---------- The 3-column row used on every page ---------- */
.row {
  display: grid;
  grid-template-columns: var(--col-a) var(--col-b) var(--col-c);
  padding-left: var(--edge);
  align-items: start;
}
.a { grid-column: 1; padding-right: calc(10 * var(--u)); }
.b { grid-column: 2; padding-right: calc(12 * var(--u)); }
.c { grid-column: 3; }

/* ---------- Home ---------- */
.intro { margin-bottom: calc(45 * var(--u)); }
.intro p { margin: 0; }
.intro p + p { margin-top: var(--small-lh); }

.section-label { margin: calc(80 * var(--u)) 0 calc(10 * var(--u)); padding-left: calc(499 * var(--u)); }  /* under CASES in the header */
.section-label span { text-transform: uppercase; }

.project { margin-bottom: calc(120 * var(--u)); scroll-margin-top: calc(60 * var(--u)); }
.project .a > * { display: block; }
.project h3 { text-transform: uppercase; }
.reveal { all: unset; cursor: pointer; color: var(--link); text-transform: uppercase; }
.reveal:focus-visible { outline: 1px solid var(--link); }

/* Description: hidden until its trigger is clicked, then fades in (0.5 s) */
.desc { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; }
.desc.open { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in-out, visibility 0s; }
.desc h4 { margin: 0; font: inherit; text-transform: uppercase; }
.project .desc { height: 0; overflow: visible; position: relative; z-index: 2; }  /* like Readymag: doesn't push the layout down */
.desc p { margin: 0 0 var(--small-lh); }

/* "View full case" link: phones only (on computers, clicking the photo opens the case) */
.case-link { display: none; }

/* ---------- Slider ---------- */
.slider {
  position: relative;
  touch-action: pan-y;
  aspect-ratio: 568 / 340;
  background: var(--slide-bg);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: translateX(100%);   /* waiting off to the right */
  pointer-events: none;
}
.slider img:first-of-type { transform: none; }
.slider button {
  all: unset; cursor: pointer;
  position: absolute; top: 50%; z-index: 2;
  width: calc(26 * var(--u)); height: calc(15.6 * var(--u));
  transform: translateY(-50%);
  background: center / contain no-repeat;
}
.slider[data-href] { cursor: pointer; }          /* case sliders open the full case */
.slider img { backface-visibility: hidden; will-change: transform, opacity; }
/* arrows: tiny nudge on hover */
.slider button { transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.slider .next:hover { transform: translate(3px, -50%); }
.slider .prev:hover { transform: translate(-3px, -50%); }
.slider .prev { left: calc(16 * var(--u)); background-image: url(images/ui/prev-white.svg); }
.slider .next { right: calc(16 * var(--u)); background-image: url(images/ui/next-white.svg); }
/* arrows invert against the photo behind them, so they're readable on light and dark photos */
.slider button { mix-blend-mode: difference; }
/* hover-play sliders (cases): arrows only show while hovering */
.slider[data-play="hover"] button { opacity: 0; }
.slider[data-play="hover"]:hover button,
.slider[data-play="hover"]:focus-within button,
.slider.touch button { opacity: 1; }
.slider button:focus-visible { outline: 1px solid var(--link); outline-offset: 2px; }

/* ---------- Reveal on entry (only when JS added .anim to <html>) ---------- */
.anim .reveal-up .a, .anim .reveal-up .b:not(.desc) { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease 0.12s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s; }
.anim .reveal-up .c { clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
/* case pages: a white cover slides off the photo. The photo itself is never masked —
   a masked image counts as "invisible" and the browser would never load it. */
.shot { position: relative; }
.anim .shot.reveal-up::after {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  transform-origin: bottom; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.anim .shot.reveal-up.in::after { transform: scaleY(0); }
.anim .reveal-up.in .a, .anim .reveal-up.in .b:not(.desc) { opacity: 1; transform: none; }
.anim .reveal-up.in .c { clip-path: inset(0 0 0 0); }

/* ---------- Custom cursor: circle → triangle pointing to 11 o'clock over clickable things ---------- */
/* Both shapes are made of the same 24 points, so the browser can morph one into the other. */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor {                                        /* empty, invisible frame that follows the pointer */
  position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;   /* the pointer sits at the centre */
  mix-blend-mode: difference;                            /* black on white, inverted on photos */
  user-select: none; -webkit-user-select: none;
  transition: opacity 0.2s ease;
}
.cursor-shape {                                  /* the visible shape inside it */
  width: 100%; height: 100%; background: #fff;
  clip-path: polygon(19.5px 16.2px, 21.7px 15.3px, 24.0px 15.0px, 26.3px 15.3px, 28.5px 16.2px, 30.4px 17.6px, 31.8px 19.5px, 32.7px 21.7px, 33.0px 24.0px, 32.7px 26.3px, 31.8px 28.5px, 30.4px 30.4px, 28.5px 31.8px, 26.3px 32.7px, 24.0px 33.0px, 21.7px 32.7px, 19.5px 31.8px, 17.6px 30.4px, 16.2px 28.5px, 15.3px 26.3px, 15.0px 24.0px, 15.3px 21.7px, 16.2px 19.5px, 17.6px 17.6px);
  transition: clip-path 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.18s ease;
}
.cursor.point .cursor-shape { clip-path: polygon(24.0px 24.0px, 25.6px 25.4px, 27.3px 26.8px, 28.9px 28.1px, 30.5px 29.5px, 32.2px 30.9px, 33.8px 32.3px, 35.4px 33.6px, 37.1px 35.0px, 38.6px 36.4px, 36.7px 37.5px, 34.9px 38.5px, 33.0px 39.6px, 31.1px 40.7px, 29.3px 41.7px, 27.4px 42.8px, 27.0px 40.8px, 26.6px 38.7px, 26.3px 36.6px, 25.9px 34.5px, 25.5px 32.4px, 25.1px 30.3px, 24.8px 28.2px, 24.4px 26.1px); }
.cursor.pressed .cursor-shape { scale: 0.8; }   /* little squish on click, around the pointer */
.cursor.hidden { opacity: 0; }

/* ---------- Soft page transitions ---------- */
/* opacity only: moving <body> would unpin the fixed header */
.anim body { animation: page-in 0.6s ease both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body.leaving { opacity: 0; transition: opacity 0.35s ease; }

/* ---------- Case page ---------- */
.case { padding-top: calc(25 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.case .a > * { display: block; }
.case h1 { text-transform: uppercase; }
.case .a { position: sticky; top: calc(50 * var(--u)); }
.case .b h2 { text-transform: uppercase; }
.case .images { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.case-nav { padding-bottom: calc(60 * var(--u)); text-transform: uppercase; }
.case-nav .c { display: flex; justify-content: space-between; }

/* ---------- Homepage + CV "slide-in" (CV is uncovered from underneath) ---------- */
.home-page { position: relative; z-index: 1; background: var(--paper); padding-bottom: calc(1 * var(--u)); }
.cv-page { position: relative; z-index: 0; background: var(--paper); }
.cv-page.reveal-on { position: sticky; bottom: 0; }   /* uncover effect; site.js fine-tunes 'bottom' */
#cv { scroll-margin-top: calc(26 * var(--u)); }       /* stop below the fixed header */
#cases { scroll-margin-top: calc(60 * var(--u)); }
.cv-page::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #000; opacity: var(--dim, 0);
}
.cv-page:not(.reveal-on)::after { display: none; }

/* ---------- CV ---------- */
.cv-title { padding-left: calc(365 * var(--u)); text-transform: uppercase; padding-top: calc(59 * var(--u)); }  /* under CV in the header; top space clears the header */
.cv {
  position: relative;
  padding: calc(20 * var(--u)) 0 0 var(--edge);
  font-size: var(--body);
  line-height: var(--body-lh);
}
.cv .label { font-size: var(--small); line-height: var(--small-lh); text-transform: uppercase; padding-top: calc(1 * var(--u)); }

/* left half: label | role | description (right-aligned) | dates */
.cv-left { width: calc(600 * var(--u)); }
.cv-sec { display: grid; grid-template-columns: calc(142 * var(--u)) 1fr; margin-bottom: calc(28 * var(--u)); }
.cv-item {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) calc(127 * var(--u)) calc(150 * var(--u));
  column-gap: calc(7 * var(--u));
}
.cv-item + .cv-item { margin-top: calc(16 * var(--u)); }
.cv-item .what { text-align: right; }
.cv-langs { display: grid; grid-template-columns: calc(150 * var(--u)) calc(127 * var(--u)); }
.cv-langs span:nth-child(even) { text-align: right; }

/* right half: label (right-aligned) | list (right-aligned, ends at 862) */
.cv-right {
  position: absolute; top: calc(20 * var(--u));
  left: calc(640 * var(--u)); width: calc(222 * var(--u));
}
.cv-rsec { display: grid; grid-template-columns: calc(80 * var(--u)) 1fr; text-align: right; margin-bottom: calc(28 * var(--u)); }
.cv-rsec ul { list-style: none; margin: 0; padding: 0; }

.cv-download { text-align: center; text-transform: uppercase; padding: calc(50 * var(--u)) 0 calc(80 * var(--u)); }

/* ==========================================================
   PHONE (narrower than 700px): one column, readable sizes
   ========================================================== */
@media (max-width: 700px) {
  :root { --u: 1.5px; --edge: 16px; --body-lh: calc(13 * var(--u)); --small-lh: calc(11 * var(--u)); }

  /* header: name + CV + CASES + Behance on one line */
  .hdr { position: sticky; height: auto; padding: 12px 16px; display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
  .hdr a, .hdr .nav-name, .hdr .nav-cv, .hdr .nav-cases, .hdr .nav-behance { position: relative; left: auto; right: auto; top: auto; }   /* drop the desktop positions */
  .hdr .nav-name { margin-right: auto; }                               /* name left, links pushed right */
  .hdr .nav-email { display: none; }

  main { padding-top: 24px; }
  .row { display: block; padding: 0 16px; }
  .a, .b { padding-right: 0; margin-bottom: 10px; }
  .intro { margin-bottom: 48px; }
  .section-label { margin: 40px 0 12px; padding-left: 16px; }
  .section-label span { display: block; text-align: left; }
  .project { margin-bottom: 56px; }
  .slider .prev { left: 8px; }
  .slider .next { right: 8px; }

  .case { padding-top: 24px; }
  .case .a { position: static; }
  .case .b { margin-bottom: 20px; }
  /* texts: each section (Objective / Background / Concept) reads as one block */
  .desc p, .case .b p { margin: 0; }
  .desc h4, .case .b h2 { margin-top: 14px; }
  .desc h4:first-child, .case .b h2:first-child { margin-top: 0; }
  /* photo sliders: square, the full width of the screen */
  .project .c .slider { aspect-ratio: 1 / 1; width: 100vw; margin-left: -16px; }
  /* "View full case" under each case slider */
  .case-link { display: inline-block; margin-top: 12px; text-transform: uppercase; }
  /* let the wipe-in mask reach the screen edges, so the full-width photo isn't trimmed */
  .anim .reveal-up .c { clip-path: inset(0 -16px 100% -16px); }
  .anim .reveal-up.in .c { clip-path: inset(0 -16px 0 -16px); }
  .case-nav .c { gap: 16px; }
  .cv-page, .cv-page.reveal-on { position: static; }
  #cv { scroll-margin-top: 70px; }
  .cv-page::after { display: none; }
  .desc, .project .desc { opacity: 1; visibility: visible; height: auto; }   /* phones: descriptions always shown */
  .project .a .reveal { display: none; }   /* descriptions are always open on phones */

  .cv-title { padding: 24px 16px 0; text-align: left; }
  .cv { padding: 16px; }
  .cv-left, .cv-right { position: static; width: auto; }
  .cv-sec, .cv-rsec { grid-template-columns: 1fr; text-align: left; gap: 6px; margin-bottom: 28px; }
  .cv-item { grid-template-columns: 1fr; }
  .cv-item .what { text-align: left; }
  .cv-item .when { order: -1; }
  .cv-langs { grid-template-columns: 1fr auto; max-width: 260px; }
  .cv-download { padding: 32px 16px 56px; text-align: left; }
}