/* =============================================================
   Ayushi Ajmera — Portfolio
   Built from "Portfolio 2026" → page: portfolio → frame: Ayushi AJmera
   Design canvas is 1440 wide; content column 1296 with 72px gutters.
   ============================================================= */

:root {
  /* palette lifted from the Figma frame */
  --paper:  #FEFBF7;   /* page background          */
  --ink:    #403C3C;   /* body + headings          */
  --cream:  #FFF9E9;   /* type on the hero         */
  --sun:    #FFDA3F;   /* accent / eyebrow dot     */
  --stroke: #E7DFCD;   /* hairline on nav buttons  */

  /* type
     NOTE: TASA Explorer (the body face in the Figma file) is a Figma-hosted
     font with no webfont version. It is kept first in the stack so it is used
     if you ever install it locally; on the web Space Grotesk stands in. */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "TASA Explorer", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --ui:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --light: "Inter", system-ui, -apple-system, sans-serif;

  /* rhythm */
  --gutter: 72px;
  --column: 1296px;
  --section-gap: 188px;  /* vertical gap between sections in the frame */
  --radius: 39px;        /* project tile corner radius */
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, p { margin: 0; }

/* Shared mono label: eyebrows, captions, footer meta */
.mono,
.hero__eyebrow,
.contact__eyebrow,
.project__meta p,
.project__index,
.footer__row {
  font-family: var(--mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* =============================================================
   HERO
   Frame: 1440 × 849 image, nav overlaid, headline in DM Serif.
   ============================================================= */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 849;
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hatched sun — sits at x915 / y-94 on the 1440 canvas, so it bleeds
   off the top edge exactly as it does in the frame. */
.hero__sun {
  position: absolute;
  left: 63.54%;          /*  915 / 1440 */
  top: -11.07%;          /*  -94 / 849  */
  width: 39.24%;         /*  565 / 1440 */
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* Cloud and gulls, positioned off the 1440 × 849 hero canvas.
   The cloud sits behind the headline; gull 1 rides in front of it. */
.hero__cloud,
.hero__bird {
  position: absolute;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.hero__cloud {
  left: 28.68%;          /* 413 / 1440 */
  top: 47.59%;           /* 404 / 849  */
  width: 22.78%;         /* 328 / 1440 */
}

.hero__bird--1 {
  left: 27.22%;          /* 392 / 1440 */
  top: 42.21%;
  width: 5.49%;          /*  79 / 1440 */
  z-index: 3;
}

.hero__bird--2 {
  left: 32.92%;          /* 474 / 1440 */
  top: 43.18%;
  width: 4.86%;          /*  70 / 1440 */
}

/* ---------- nav ---------- */

.nav {
  position: absolute;
  inset: 0 var(--gutter) auto;
  top: 24px;
  height: 56px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--cream);
  font-family: var(--ui);
  font-size: 16px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}
.nav__brand svg { width: 14px; height: 20px; }

/* translucent capsule holding the three nav actions */
.nav__pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav__link {
  padding: 8px 10px;
  border-radius: 99px;
  border: 1px solid transparent;
  line-height: 1;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.nav__link.is-active,
.nav__link:hover { border-color: rgba(255, 255, 255, 0.9); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  line-height: 1;
  transition: transform 0.25s ease;
}
.nav__cta svg { width: 24px; height: 24px; }
.nav__cta:hover { transform: translateY(-1px); }

.nav__tools {
  justify-self: end;
  display: flex;
  gap: 4px;
}
.nav__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--stroke);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: transform 0.25s ease;
}
.nav__icon svg { width: 22px; height: 22px; }
.nav__icon:hover { transform: translateY(-1px); }

/* ---------- hero copy ---------- */

/* Spans x216 → x1178 on the 1440 canvas: the eyebrow sits flush left of that
   band, the headline flush right of it. That right alignment is what opens the
   gap on the left where the cloud and gulls sit — keep them in step. */
.hero__copy {
  position: absolute;
  z-index: 2;
  left: 15%;                 /*  216 / 1440 */
  width: 66.81%;             /*  962 / 1440 */
  top: 17.8%;                /*  151 / 849 — top of the headline block */
  color: var(--cream);
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__eyebrow .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sun);
  flex: none;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 9.44vw, 136px);   /* 136 / 1440 */
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-align: right;
}

/* Line one dances on hover — once per hover, never looping. Each WORD moves as
   a single block, so the letters inside stay locked together. script.js wraps
   each word and sets --i (its index, for the stagger) and --r (its tilt,
   alternating direction so the two words lean apart rather than together). */
.dance__word {
  display: inline-block;
}

.dance.is-dancing .dance__word {
  will-change: transform;
  animation: word-dance 500ms cubic-bezier(.45, 0, .55, 1) both;
  animation-delay: calc(var(--i) * 40ms);
}

@keyframes word-dance {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45%      { transform: translateY(-4px) rotate(var(--r)); }
}

/* Line two cycles Solves → Code → Design → Vibe → Ship and back, for ever.
   All five words share ONE grid cell, so the slot is permanently as wide as
   the widest word — nothing reflows as they swap. The words are left-aligned
   in that slot, so every one of them starts on the same x; the longest of them
   ("Design") is what reaches the right edge, under "who". */
.flip {
  display: inline-grid;
  justify-items: start;
  perspective: 800px;
}

.flip__word {
  grid-area: 1 / 1;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  animation: flip-word 15s linear infinite both;
}
.flip__word:nth-child(2) { animation-delay: 3s; }
.flip__word:nth-child(3) { animation-delay: 6s; }
.flip__word:nth-child(4) { animation-delay: 9s; }
.flip__word:nth-child(5) { animation-delay: 12s; }

/* 5 words × 3s = one 15s loop; each holds for 20% of it.
   The flip itself is 2% of the loop — 0.3s — so the word snaps into place and
   then sits still. Widen these two 2% gaps to soften the motion. */
@keyframes flip-word {
  0%   { opacity: 0; transform: rotateX(-90deg);
         animation-timing-function: cubic-bezier(.16,1,.3,1); }
  2%   { opacity: 1; transform: rotateX(0deg); }
  18%  { opacity: 1; transform: rotateX(0deg);
         animation-timing-function: cubic-bezier(.7,0,.84,0); }
  20%  { opacity: 0; transform: rotateX(90deg); }
  100% { opacity: 0; transform: rotateX(90deg); }
}

/* =============================================================
   INTRO
   ============================================================= */

.intro {
  width: min(1218px, calc(100% - var(--gutter) * 2));
  margin: var(--section-gap) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 49px;
}

.intro p {
  font-size: clamp(22px, 2.78vw, 40px);    /* 40 / 1440 */
  line-height: 1.52;
}

.intro__lead {
  font-weight: 700;
  font-size: clamp(24px, 3.06vw, 44px);    /* 44 / 1440 */
  line-height: 1.36;
}

/* =============================================================
   WORK
   Three rows. Wide tile 766, narrow tile 498, 32px apart,
   both 581 tall, then a caption 24px underneath.
   ============================================================= */

.work {
  width: min(var(--column), calc(100% - var(--gutter) * 2));
  margin: var(--section-gap) auto 0;
  display: flex;
  flex-direction: column;
  gap: 104px;
}

.work__row {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.project {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.project--wide   { flex: 766 1 0; }
.project--narrow { flex: 498 1 0; }

.project__media {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1);
}
.project--wide   .project__media { aspect-ratio: 766 / 581; }
.project--narrow .project__media { aspect-ratio: 498 / 581; }

.project__media:hover { transform: scale(0.985); }

.project__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder panels — swap each for <img> when the real case-study
   visuals are ready (see README). */
.project__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, #d9ded8, #aeb9b1 45%, #7f8984);
}
.project__ph[data-tone="green"]  { background: linear-gradient(150deg, #9fae8d, #6d7f5c 48%, #3d4a30); }
.project__ph[data-tone="blue"]   { background: linear-gradient(150deg, #a9c6dd, #5c8bb0 52%, #24455e); }
.project__ph[data-tone="sand"]   { background: linear-gradient(150deg, #ede3cd, #c4b291 50%, #7a6d51); }
.project__ph[data-tone="deep"]   { background: linear-gradient(150deg, #9fb6c9, #4d6d8a 52%, #1d3345); }
.project__ph[data-tone="forest"] { background: linear-gradient(150deg, #8fa47e, #55684a 50%, #2b3722); }
.project__ph[data-tone="slate"]  { background: linear-gradient(150deg, #b8bfc4, #75828c 52%, #38434c); }

.project__caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.project__meta { display: flex; flex-direction: column; gap: 10px; }

.project__meta h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(22px, 2.08vw, 30px);    /* 30 / 1440 */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.project__title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity .25s ease;
}

.project__title-link:hover { opacity: .62; }

.project__meta p {
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.project__index {
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 40%, transparent);
  flex: none;
  padding-top: 4px;
}

/* =============================================================
   CONTACT
   ============================================================= */

.contact {
  width: min(1227px, calc(100% - var(--gutter) * 2));
  margin: var(--section-gap) auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
}

.contact__eyebrow {
  font-size: 11px;
  color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.contact__pair {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.contact__pair p {
  font-family: var(--light);
  font-weight: 300;
  font-size: clamp(22px, 3.06vw, 44px);    /* 44 / 1440 */
  line-height: 1.32;
}

.contact__pair a {
  font-weight: 700;
  font-size: clamp(30px, 5.42vw, 78px);    /* 78 / 1440 */
  line-height: 1.23;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 0 92%;
  transition: background-size 0.45s cubic-bezier(.2,.7,.2,1);
}
.contact__pair a:hover { background-size: 100% 2px; }

/* =============================================================
   FOOTER
   Full-bleed meadow illustration with the meta row sitting on its
   paper-coloured upper half. The fade hides the seam between the
   illustration's paper tone and --paper.
   ============================================================= */

.footer {
  position: relative;
  margin-top: var(--section-gap);
  width: 100%;
  aspect-ratio: 1440 / 506;
  overflow: hidden;
  isolation: isolate;
}

.footer__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* blends the illustration's paper into the page background */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 39.5%;                 /* 200 / 506 */
  z-index: 1;
  background: linear-gradient(var(--paper), rgba(254, 251, 247, 0));
  pointer-events: none;
}

.footer__meta {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  right: var(--gutter);
  top: 11.07%;                   /* 56 / 506 */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__rule {
  height: 1px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.footer__links {
  display: flex;
  gap: 32px;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
}
.footer__links a { transition: color 0.25s ease; }
.footer__links a:hover { color: var(--ink); }

/* =============================================================
   SCROLL REVEAL
   ============================================================= */

.reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .project__media,
  .nav__cta,
  .nav__icon { transition: none; }

  /* hold the headline on the original word */
  .flip__word { animation: none; opacity: 0; transform: none; }
  .flip__word:first-child { opacity: 1; }
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 1100px) {
  :root { --gutter: 40px; --section-gap: 130px; --radius: 28px; }
  .work { gap: 72px; }
  .nav__link { padding: 8px; }
}

@media (max-width: 780px) {
  :root { --gutter: 22px; --section-gap: 96px; --radius: 22px; }

  .hero { aspect-ratio: 3 / 4; }
  .hero__bg { object-position: 62% center; }
  .hero__sun { top: -6%; left: 52%; width: 58%; }

  /* the headline fills the middle of the phone hero, so the cloud and gulls
     drift down into the clear band of sky just above the horizon */
  .hero__cloud   { left: 9%;  top: 48.5%; width: 33%; }
  .hero__bird--1 { left: 7%;  top: 43%;   width: 10%; }
  .hero__bird--2 { left: 21%; top: 44.5%; width: 9%; }

  /* the narrow column has no room for the right-aligned band, so the phone
     hero centres both lines instead */
  .hero__copy {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - var(--gutter) * 2);
    top: 20%;
  }
  .hero__eyebrow { font-size: 10px; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(44px, 13vw, 76px); text-align: center; }
  /* the words share a left edge here too, so the cycle reads the same way it
     does on desktop rather than re-centring on every swap */
  .flip { justify-items: start; }

  /* the pill's inner links collapse; the CTA carries the nav */
  .nav { grid-template-columns: 1fr auto; top: 16px; }
  .nav__pill {
    grid-column: 2;
    background: none;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
  }
  .nav__link { display: none; }
  .nav__tools { display: none; }

  .intro { gap: 32px; }
  .work { gap: 56px; }

  /* one project per row */
  .work__row { flex-direction: column; gap: 56px; }
  .project--wide,
  .project--narrow { flex: 1 1 auto; width: 100%; }
  .project--wide .project__media,
  .project--narrow .project__media { aspect-ratio: 4 / 3; }

  .project__meta h2 { font-size: 22px; }

  .contact { gap: 26px; }

  .footer { aspect-ratio: 1440 / 620; }
  .footer__meta { top: 7%; gap: 12px; }
  .footer__row { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 11px; }
  .footer__links { gap: 20px; }
}

/* =============================================================
   CLOSING BLOCK — contact + footer on one surface (Figma 2147226738)
   Its top edge is a wave that rises with scroll, covering the work
   grid above it. Only clip-path changes, so it stays on the compositor.
   ============================================================= */

.closing {
  --closing-surface: #F7F6F4;   /* Vector 42 fill from the Figma frame */
  --wave-overlap: 300px;        /* how far it laps over the section above */

  position: relative;
  z-index: 3;                   /* paints over .work */
  margin-top: calc(var(--section-gap) - var(--wave-overlap));
  background: var(--closing-surface);
  /* JS swaps in the wavy path; this is the straight-edge fallback */
  clip-path: url(#waveClip);
  /* Vector 42's own drop shadow: 15,0 offset, 9.8 blur, 58 spread, #E8DDCD.
     CSS has no spread on drop-shadow, so it is stacked to the same reach. */
  filter: drop-shadow(15px 0 10px #E8DDCD) drop-shadow(0 0 26px #E8DDCD);
}

/* the <defs> carrier must not take up space */
.closing__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the block owns the surface now, so these lose their own spacing */
.closing .contact { margin-top: 0; padding-top: var(--wave-overlap); }
.closing .footer  { margin-top: 96px; }
/* the footer art fades into the closing surface, not the page paper, so the
   two share one unbroken colour and the join never shows */
.closing .footer::before {
  background: linear-gradient(var(--closing-surface), rgba(247, 246, 244, 0));
}

/* no clip at all when motion is reduced — a plain straight edge */
@media (prefers-reduced-motion: reduce) {
  .closing { clip-path: none; margin-top: var(--section-gap); }
  .closing .contact { padding-top: 0; }
}

@media (max-width: 900px) {
  .closing { --wave-overlap: 160px; }
}

/* avatar in the nav pill — a home button. Figma "Navigation": pill 444x56,
   avatar 40x40 at 9,8 then a 60px gap before the 326px link group. */
.nav__pill { gap: 60px; }
.nav__items { display: flex; align-items: center; gap: 16px; }

.nav__home {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.nav__home img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav__home:hover { transform: scale(1.06); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.nav__home:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 760px) {
  .nav__pill { gap: 14px; }
  .nav__items { gap: 10px; }
}