/*
  Fluid layout interpolated between the two Figma frames:
  mobile 428px  → desktop 1440px.
  Every clamp() uses: min = mobile value, max = desktop value,
  preferred = linear interpolation between 428px and 1440px viewport width.
*/

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/open-sans-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/playfair-display-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/playfair-display-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-page: #efefef;
  --color-card: rgb(255 255 255 / 20%);        /* frosted glass over the landscape */
  --color-card-edge: rgb(255 255 255 / 70%);   /* 1px light rim that sells the glass */
  --shadow-card: 0 2.5rem 6rem -2rem rgb(20 30 40 / 28%);
  --color-text: #111111;
  --color-text-soft: #474747;                  /* secondary copy, 8.9:1 on the glass */
  --color-icon-bg: #ffffff;
  --color-icon-edge: rgb(17 17 17 / 8%);
  --color-icon-bg-hover: #111111;
  --shadow-icon: 0 0.5rem 1.25rem -0.5rem rgb(20 30 40 / 30%);
  --color-status: #2ebcdb;
  --color-status-hover: #4dc6e0;
  --color-status-text: #111111; /* white on this blue is only 2.25:1 */
  --shadow-status-hover: 0 0.75rem 1.75rem -0.75rem rgb(46 188 219 / 75%);

  --card-radius: 1.75rem; /* 28 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page-gutter: clamp(1rem, 0.1542rem + 3.1621vw, 3rem);          /* 16 → 48 */
  --card-pad-block: 4.5rem;                                        /* 72 */
  --card-pad-offset: 1.25rem; /* mobile mock sits 20px above true centre */
  --card-pad-inline: clamp(1.5rem, 0.8656rem + 2.3715vw, 3rem);    /* 24 → 48 */

  /* Width-driven values; phones cap them by viewport height further down */
  --photo-size-fluid: clamp(11.5rem, 10.0198rem + 5.5336vw, 15rem);     /* 184 → 240; the cut-out needs no room for a disc */
  /* Spacing follows an 8px rhythm; the CTA sits closer to the icons so all contact actions read as one group */
  --gap-photo-text-fluid: clamp(2.25rem, 2.1443rem + 0.3953vw, 2.5rem);  /* 36 → 40 */
  --gap-text-social-fluid: clamp(2.4375rem, 2.1996rem + 0.8893vw, 3rem); /* 39 → 48 */
  --gap-social-status-fluid: 2rem;                                       /* 32 */

  --photo-size: var(--photo-size-fluid);
  --gap-photo-text: var(--gap-photo-text-fluid);
  --gap-paragraphs: clamp(1rem, 0.6828rem + 1.1858vw, 1.75rem);    /* 16 → 28 */
  --gap-text-social: var(--gap-text-social-fluid);
  --gap-social-status: var(--gap-social-status-fluid);

  /* Clear hierarchy: a display headline, a quieter supporting line */
  --fs-headline: clamp(1.375rem, 0.7935rem + 2.1739vw, 2.75rem);   /* 22 → 44 */
  --lh-headline: 1.3;
  --fs-pitch: clamp(1.0625rem, 0.9303rem + 0.4941vw, 1.375rem);    /* 17 → 22 */
  --lh-pitch: 1.6;
  --fs-status: clamp(0.8125rem, 0.7596rem + 0.1976vw, 0.9375rem);  /* 13 → 15 */

  --social-size: clamp(3.5rem, 3.2885rem + 0.7905vw, 4rem);        /* 56 → 64 */
  --social-icon: clamp(1.5rem, 1.3943rem + 0.3953vw, 1.75rem);     /* 24 → 28 */
  --social-gap: clamp(1rem, 0.8943rem + 0.3953vw, 1.25rem);        /* 16 → 20 */
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--page-gutter);
  display: flex;
  background: var(--color-page) url("assets/img/bg.webp") center bottom / cover no-repeat;
  color: var(--color-text);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Animated mist (canvas injected by fog.js) ---------- */

.fog {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease;
}

.fog.is-on {
  opacity: 1;
}

/* ---------- Card ---------- */

.card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding:
    var(--card-pad-block)
    var(--card-pad-inline)
    calc(var(--card-pad-block) + var(--card-pad-offset));
  position: relative;
  z-index: 1; /* above the fog canvas */
  border: 1px solid var(--color-card-edge);
  border-radius: var(--card-radius);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
}

/* Without backdrop blur the landscape would show through sharp, so make the glass more opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card {
    background: rgb(255 255 255 / 85%);
  }
}

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 61rem; /* ~976px text measure on desktop */
  text-align: center;
}

/* ---------- Photo ---------- */

/* photo-cutout.webp has no white disc, so the portrait sits directly on the glass */
.profile__photo {
  width: var(--photo-size);
  height: var(--photo-size);
  filter: drop-shadow(0 0.75rem 1.25rem rgb(20 30 40 / 12%));
}

/* ---------- Intro copy ---------- */

.profile__intro {
  margin-top: var(--gap-photo-text);
  max-width: 18.75rem; /* mobile measure (300px) */
}

.profile__headline,
.profile__pitch {
  margin: 0;
  font-weight: 400;
}

.profile__headline {
  font-size: var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.profile__headline strong {
  font-weight: 700;
}

/* Supporting line: smaller and softer; emphasis by tone instead of a third and fourth bold */
.profile__pitch {
  max-width: 34em;
  margin: var(--gap-paragraphs) auto 0;
  color: var(--color-text-soft);
  font-size: var(--fs-pitch);
  line-height: var(--lh-pitch);
  text-wrap: balance;
}

.profile__pitch strong {
  color: var(--color-text);
  font-weight: 400;
}

/* Keeps compound words like "Madrid-based" from splitting at the hyphen */
.nowrap {
  white-space: nowrap;
}

/* ---------- Social links ---------- */

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--social-gap);
  margin: var(--gap-text-social) 0 0;
  padding: 0;
  list-style: none;
}

.social__link {
  display: grid;
  place-items: center;
  width: var(--social-size);
  height: var(--social-size);
  border: 1px solid var(--color-icon-edge);
  border-radius: 50%;
  background: var(--color-icon-bg);
  box-shadow: var(--shadow-icon);
  transition:
    background-color 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.social__link img {
  width: var(--social-icon);
  height: var(--social-icon);
  transition: filter 220ms var(--ease-out);
}

.social__link:hover {
  background: var(--color-icon-bg-hover);
  transform: translateY(-3px);
}

/* The SVGs are #1e1e1e; inverting them gives a near-white glyph on the dark hover fill */
.social__link:hover img {
  filter: invert(1);
}

.social__link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* ---------- Availability CTA (opens the email link) ---------- */

.status {
  margin: var(--gap-social-status) 0 0;
  padding: 0.9375rem 1.75rem; /* 48px tall on phones, pill ends rhyme with the round icons */
  border-radius: 999px;
  background: var(--color-status);
  color: var(--color-status-text);
  font-family: var(--font-sans);
  font-size: var(--fs-status);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out),
    transform 220ms var(--ease-out);
}

.status:hover {
  background: var(--color-status-hover);
  box-shadow: var(--shadow-status-hover);
  transform: translateY(-2px);
}

.status:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* ---------- Intermediate breakpoints ---------- */

/* Large phones / small tablets: the text measure opens up */
@media (min-width: 30em) { /* 480px */
  .profile__intro {
    max-width: 30rem;
  }
}

/*
  Phones: fit photo → CTA inside the visible viewport.
  The mock frame is 926px tall, but with browser toolbars showing a phone only
  has ~550–750px. Everything below interpolates on the *small* viewport height
  (stable while the toolbar collapses) between 540px and 720px tall; from 720px
  up the mock values apply and the block is centred as designed.
  Budget at 540px: 32 gutters + 322 text/icons/CTA + 186 for the values below.
*/
@media (max-width: 47.99em) {
  :root {
    --vh: 1vh;

    --card-pad-block: clamp(0.625rem, 6.6667 * var(--vh) - 1.625rem, 1.5rem);        /* 10 → 24 */
    --card-pad-offset: clamp(0rem, 11.1111 * var(--vh) - 3.75rem, 1.25rem);          /* 0 → 20 */
    --photo-size: clamp(5.625rem, 44.4444 * var(--vh) - 9.375rem, var(--photo-size-fluid));    /* 90 → 184, 14px less to make room for the 56px social buttons */
    --gap-photo-text: clamp(1.125rem, 10 * var(--vh) - 2.25rem, var(--gap-photo-text-fluid)); /* 18 → 36 */
    --gap-text-social: clamp(1.25rem, 10.5556 * var(--vh) - 2.3125rem, var(--gap-text-social-fluid));     /* 20 → 39 */
    --gap-social-status: clamp(1.25rem, 10.5556 * var(--vh) - 2.3125rem, var(--gap-social-status-fluid)); /* 20 → 39 */

    --social-size: 3.5rem; /* 56 */
    --social-icon: 1.5rem; /* 24, same 3:7 ratio as the old 18/42 */
    --social-gap: 1rem;    /* 16 */

    /* Full-bleed glass: a 16px sliver of landscape around the card read as a mistake on phones */
    --page-gutter: 0rem;
    --card-radius: 0;
    --card-pad-inline: 1.25rem; /* 320px phones still fit the 272px icon row */
  }

  @supports (height: 1svh) {
    :root {
      --vh: 1svh;
    }
  }

  .card {
    border: 0;
    box-shadow: none;
  }
}

/* Tablets: desktop copy ("I'm" instead of "Hi! I'm"), content truly centred */
@media (min-width: 48em) { /* 768px */
  :root {
    --card-pad-offset: 0rem;
  }

  .profile__intro {
    max-width: 44rem;
  }

  .profile__greeting {
    display: none;
  }
}

/* Laptops and up: a display measure that breaks the 44px headline into three balanced lines */
@media (min-width: 64em) { /* 1024px */
  .profile__intro {
    max-width: 54rem;
  }
}

/* Short, wide screens: avoid the card overflowing the viewport */
@media (min-width: 48em) and (max-height: 50em) {
  :root {
    --card-pad-block: 3rem;
    --photo-size: clamp(9rem, 24vh, 15rem);
    --gap-photo-text: 2rem;
    --gap-text-social: 2.5rem;
    --gap-social-status: 1.5rem;
  }
}

/* ---------- Entrance animation ---------- */

/* Movement only, never opacity: the content is visible even if the animation never runs */
.profile > * {
  animation: rise 700ms var(--ease-out) both;
}

.profile > :nth-child(2) { animation-delay: 90ms; }
.profile > :nth-child(3) { animation-delay: 180ms; }
.profile > :nth-child(4) { animation-delay: 270ms; }

@keyframes rise {
  from {
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile > * {
    animation: none;
  }

  .social__link,
  .social__link img,
  .status {
    transition: none;
  }

  .social__link:hover,
  .status:hover {
    transform: none;
  }
}