/* ==========================================================================
   Lina Arias · home page
   Built from Figma "Lina-Arias-Webpage" › new_landing (1920px desktop frame).
   The design is a layered collage, so each layer keeps its Figma position;
   --u is one Figma pixel, scaled down below 1920px viewports.
   ========================================================================== */

:root {
  --u: calc(min(100vw, 1920px) / 1920);

  --mint: #7cecb8;
  --ink: #1e1e1e;
  --white: #fff;

  --font-body: "Futura", system-ui, sans-serif;
}

/* Base ------------------------------------------------------------------ */

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1, h2, p, nav { margin: 0; }
h1, h2 { font: inherit; }
img { display: block; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

/* Canvas ----------------------------------------------------------------
   Children are placed with --left/--top/--w/--h in Figma pixels. */

.landing {
  position: relative;
  width: calc(1920 * var(--u));
  height: calc(5141 * var(--u));
  margin-inline: auto;
  overflow: hidden;
}

.layer {
  position: absolute;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
}
.layer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image fills that Figma crops: img size and offset in % of the layer */
.layer--crop { overflow: hidden; }
.layer--crop > img {
  position: absolute;
  max-width: none;
}
.layer--fondo > img { width: 112.39%; height: 112.35%; left: -12.4%; top: 0.01%; }
.layer--blur > img  { width: 235.28%; height: 603.06%; left: 0; top: -250.06%; }

/* Text ------------------------------------------------------------------ */

.tagline,
.about__text {
  position: absolute;
  left: calc(var(--left) * var(--u));
  top: calc(var(--top) * var(--u));
  font-size: max(11px, calc(40 * var(--u)));
  line-height: 1.325;
  white-space: nowrap;
}

.tagline { color: var(--mint); }
.tagline .is-white { color: var(--white); }
.tagline .is-faded { color: rgba(255, 255, 255, 0.56); }

.about__text p + p { margin-top: 1.325em; }

/* Obra carousel ---------------------------------------------------------
   Slides are 1470 Figma px wide and sit edge to edge, so the next one peeks
   in at the right like in the design. js/landing.js moves the track. */

.obra-carousel { overflow: hidden; }

.obra-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.8s ease-in-out;
}
.obra-carousel__track > img {
  flex: 0 0 calc(1470 * var(--u));
  width: calc(1470 * var(--u));
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .obra-carousel__track { transition: none; }
}

/* Obra buttons ---------------------------------------------------------- */

.obra-link { transition: transform 0.25s ease, filter 0.25s ease; }
.obra-link:hover,
.obra-link:focus-visible {
  transform: scale(1.04);
  filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(124, 236, 184, 0.6));
}

@media (prefers-reduced-motion: reduce) {
  .obra-link { transition: none; }
  .obra-link:hover,
  .obra-link:focus-visible { transform: none; }
}