/* GENERAL */

body {
    background-color: var(--greish);
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: var(--blackish);
    line-height: 1.25;
}

.section {
    padding: 0 30px;
}


/* --- BUTTONS --- */

/* --- Want more? --- */

.project-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px;
  background: var(--lime);
  border: 2px solid var(--blackish);
  border-radius: 999px;
  color: var(--blackish);
  text-decoration: none;
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: gap 0.2s ease;
}

.project-cta-left {
    display: flex;
    gap: 8px;
    align-items: center;
}

.project-cta-left {
    display: flex;
    align-items: center;
    height: 100%;
}

.eye-icon {
    height: 16px;
} 

.arrow-icon {
  transition: transform 0.25s ease;
  transform-origin: center;
  width: 18px;
  height: 22px;
  display: block;
}

.project-cta-btn:hover .arrow-icon {
  transform: rotate(-45deg);
}

/* --- Filtros --- */

.filter-category {
  padding: 12px 20px;
  border: 2.25px solid var(--blackish);
  border-radius: 999px;
  background: var(--blackish);
  color: var(--greish);
  cursor: pointer;
  white-space: nowrap;
  position: relative;     
  overflow: hidden;         
  z-index: 0;                
  transition: color 0.25s ease;
}

.filter-category::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #655c54;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;              
}

.filter-category:hover:not(.filter-category-active) {
  color: var(--greish);
}

.filter-category:hover:not(.filter-category-active)::before {
  transform: scaleX(1);
}

.filter-category-active {
  background: var(--lime);
  color: var(--blackish);
  text-transform: uppercase;
}

/* --- Proyecto etiquetas --- */

.project-tag {
  padding: 8px 12px;
  border: 2px solid var(--blackish);
  border-radius: 999px;
  white-space: nowrap;
  color: var(--blackish);
}


/* HEADER */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--blackish);
  color: var(--greish);
  padding: 12px 30px;
  border-radius: 0 0 20px 20px;
}

/* "Hey! Let's get in touch" + hand: a link that opens an email */
.top-bar-left {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.top-bar-right {
  display: flex;
  align-items: center;
  justify-content: right;
  gap: 16px;
}

.gif-mano {
  width: 23px;
  height: 23px;
  object-fit: fill;
  border-radius: 0;
  display: block;
}

/* Language switcher. Closed: only the current language, the size of "CV".
   Hover (or tap on mobile): it opens to the left with a lime dot, the
   current language first and the other two faded, to pick one */
.lang-switch {
  display: flex;
  align-items: center;
}

.lang-switch button {
  display: flex;
  align-items: center;
  max-width: 0;
  padding: 4px 0;
  overflow: hidden;
  border: 0;
  background: none;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--greish);
  white-space: nowrap;
  opacity: 0;
  cursor: pointer;
  transition: max-width 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

/* The current language: always visible, first in the row */
.lang-switch button[aria-pressed="true"] {
  order: -1;
  max-width: 4em;
  padding: 4px 5px;
  opacity: 1;
}

/* Lime dot before the current language, only while open */
.lang-switch button[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 6px;
  margin-right: 0;
  border-radius: 50%;
  background: var(--lime);
  flex-shrink: 0;
  transition: width 0.35s ease, margin 0.35s ease;
}

/* Open: after a tap or click (.is-open), when navigating with the keyboard,
   or on hover with a mouse (not on touch screens, where hover can "stick") */
.lang-switch.is-open button,
.lang-switch:has(:focus-visible) button {
  max-width: 4em;
  padding: 4px 5px;
  opacity: 0.45;
}

.lang-switch.is-open button[aria-pressed="true"],
.lang-switch:has(:focus-visible) button[aria-pressed="true"] {
  opacity: 1;
}

.lang-switch.is-open button[aria-pressed="true"]::before,
.lang-switch:has(:focus-visible) button[aria-pressed="true"]::before {
  width: 6px;
  margin-right: 5px;
}

@media (hover: hover) {
  .lang-switch:hover button {
    max-width: 4em;
    padding: 4px 5px;
    opacity: 0.45;
  }

  .lang-switch:hover button[aria-pressed="true"],
  .lang-switch:hover button:hover {
    opacity: 1;
  }

  .lang-switch:hover button[aria-pressed="true"]::before {
    width: 6px;
    margin-right: 5px;
  }
}

.header-ig {
  height: 18px;
  /* Same distance from "CV" as "CV" has from the language (whose button
     adds 5px of padding) */
  margin-left: 5px;
}

/* "CV" in the top bar: text in the same type as the language switcher */
.header-cv {
  display: block;
  padding: 4px 0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--greish);
}

.top-bar-icon {
  text-decoration: none;
}

/* MAIN */

/* The page content sits on top of the footer: its rounded bottom corners
   show the dark footer behind them */
.page-content {
  position: relative;
  z-index: 1;
  background: var(--greish);
  border-radius: 0 0 var(--radio-l) var(--radio-l);
  /* Keep any content from covering the rounded corners */
  overflow: clip;
}

/* FOOTER */

footer {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: var(--blackish);
  color: var(--greish);
  /* Slide up behind main's rounded corners; the extra top padding
     keeps the footer content where it was */
  margin-top: calc(-1 * var(--radio-l));
  padding: calc(32px + var(--radio-l)) 32px 32px;
}

/* One grid for the whole left side: the photo and the first tag
   (Karolina Utrera Noris) share column 1, so the photo is always exactly
   as wide as that tag. The other tags fill one column each */
.footer-left {
  display: grid;
  /* min-content: the tag can't wrap (nowrap), so the column is exactly its
     width, and the photo (width: 100%) never pushes the column wider */
  grid-template-columns: min-content repeat(4, max-content);
  column-gap: 8px;
  row-gap: 20px;
}

/* Let their children sit directly in the .footer-left grid */
.footer-left-up,
.footer-left-tags {
  display: contents;
}

.footer-left-img {
  grid-column: 1;
  border-radius: var(--radio-s);
  overflow: hidden;
}

.footer-left-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-left-info {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 240px;
  /* 8px column gap + 12px = the original 20px between photo and info */
  margin-left: 12px;
}

.footer-logo {
  height: 60px;
  width: auto;
  display: block;
}

/* The footer logo links to the home page */
.footer-logo-link {
  display: inline-block;
  align-self: flex-start;
}

.footer-text {
  font-family: 'Work Sans', sans-serif;
  font-weight: 350;
  font-size: 16px;
  line-height: 1.4;
  color: var(--greish);
  margin: 0;
}

.footer-text-emphasized {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.footer-tags {
  padding: 8px 16px;
  border: 2.25px solid var(--greish);
  border-radius: 999px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--greish);
  white-space: nowrap;
  /* Keep the text vertically centred when the row is stretched
     to the height of the tag with the video icon */
  display: flex;
  align-items: center;
}

/* Tag with a small looping video icon to the right of the text */
.footer-tags-icon {
  gap: 8px;
}

.footer-tag-video {
  height: 20px;
  width: auto;
  display: block;
  /* Hide the video's dark background so only the hearts show:
     contrast pushes the dark background to pure black (absorbing any
     colour shift the browser applies to video), and lighten lets the
     footer show through wherever the video is darker than it */
  filter: contrast(2);
  mix-blend-mode: lighten;
}

/* "Barcelona" on desktop, "BCN" on mobile */
.footer-tag-short {
  display: none;
}

.footer-tags-active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--blackish);
}

/* --- Columna derecha --- */

.footer-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex: 0 0 auto;
  padding-left: 24px;
}

.footer-right-copyright {
  font-family: 'Work Sans', sans-serif;
  font-weight: 350;
  font-size: 12px;
  letter-spacing: -0.07em;
  color: #8c8781; 
  white-space: nowrap;
}

.footer-right-down {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.footer-cv-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.footer-cv-check {
  font-family: 'Work Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.0;
  color: var(--greish);
  transform: rotate(-15deg);
}

.footer-arrow {
  width: 70px;
  height: auto;
  margin: 24px 72px 0 0;
  color: var(--greish);
  overflow: visible;
}

/* Hovering the CV makes the arrow poke at it, on a loop: the straight end
   of the line grows while the head slides down with it.
   Each cycle: a quick poke, a small springy settle, a smooth pull back
   and a short pause, so it feels like a hand gesture rather than a piston.
   Distances are in the SVG's own units (8 = the full poke) and each
   shaft scale is (34 + distance) / 34 so the line always meets the head */
.footer-arrow {
  --footer-arrow-speed: 1.1s;
}

.footer-arrow-shaft {
  transform-origin: 67.5px 72px;
}

.footer-right-down:has(a:hover) .footer-arrow-shaft {
  animation: footer-arrow-shaft var(--footer-arrow-speed) infinite;
}

.footer-right-down:has(a:hover) .footer-arrow-head {
  animation: footer-arrow-head var(--footer-arrow-speed) infinite;
}

@keyframes footer-arrow-shaft {
  0%   { transform: scaleY(1);     animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }   /* quick poke out */
  28%  { transform: scaleY(1.235); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }   /* 8: full reach */
  42%  { transform: scaleY(1.162); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }   /* 5.5: spring back */
  54%  { transform: scaleY(1.206); animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); } /* 7: settle */
  85%  { transform: scaleY(1); }                                                                /* smooth return */
  100% { transform: scaleY(1); }                                                                /* pause */
}

@keyframes footer-arrow-head {
  0%   { transform: translateY(0);     animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  28%  { transform: translateY(8px);   animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  42%  { transform: translateY(5.5px); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  54%  { transform: translateY(7px);   animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1); }
  85%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-right-down:has(a:hover) .footer-arrow-shaft,
  .footer-right-down:has(a:hover) .footer-arrow-head {
    animation: none;
  }
}

.footer-cv {
  width: 160px;
  height: auto;
  cursor: pointer;
}


/* RESPONSIVE: MOBILE (≤ 768px) */

@media (max-width: 768px) {
  .section {
    padding: 0 16px;
  }

  /* Header */
  .top-bar {
    padding: 12px 16px;
    gap: 8px;
  }

  /* Keep the greeting on one line next to the language switcher */
  .top-bar h3 {
    white-space: nowrap;
  }

  .top-bar-right {
    gap: 10px;
    flex-shrink: 0;
  }

  /* No room for both: while the language switcher is open, the greeting
     fades out and the switcher opens over its space */
  .top-bar-left {
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.25s ease;
  }

  .top-bar:has(.lang-switch.is-open) .top-bar-left {
    opacity: 0;
    pointer-events: none;
  }

  .lang-switch button,
  .header-cv {
    font-size: 14px;
  }

  /* Footer: everything stacks */
  footer {
    flex-direction: column;
    gap: 48px;
    padding: calc(24px + var(--radio-l)) 16px 24px;
  }

  /* The desktop grid needs ~700px; on mobile the photo + info sit side by
     side and the tags wrap underneath */
  .footer-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .footer-left-up {
    display: flex;
    gap: 16px;
  }

  .footer-left-img {
    flex: 0 0 auto;
    width: 120px;
  }

  .footer-left-info {
    margin-left: 0;
    max-width: none;
    gap: 16px;
  }

  .footer-logo {
    height: 48px;
    align-self: flex-start;
  }

  .footer-text {
    font-size: 14px;
  }

  .footer-cv-check {
    font-size: 18px;
  }

  .footer-left-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Tags in two rows: name, 25, BCN / Graphic designer, Motion lover */
  .footer-tags {
    order: 2;
  }

  .footer-tags-active,
  .footer-tags:nth-child(2),
  .footer-tags-city {
    order: 1;
  }

  .footer-tag-long {
    display: none;
  }

  .footer-tag-short {
    display: inline;
  }

  .footer-right {
    padding-left: 0;
    gap: 32px;
    align-items: flex-start;
  }

  /* Copyright goes to the very bottom */
  .footer-right-copyright {
    order: 1;
  }

  /* "Check out more in my" + arrow, then a big CV, all on the left */
  .footer-right-down {
    align-items: flex-start;
    gap: 8px;
  }

  .footer-cv-top {
    gap: 24px;
    padding-left: 8px;
  }

  .footer-arrow {
    margin: 0;
  }

  .footer-cv {
    width: 200px;
  }
}