/* ============================================================
   Luana Baiocco · portfolio
   Design-canvas units: 1rem = 1px at 1440w (fluid).
   ============================================================ */

@font-face { font-family: "PP Valve"; src: url("../assets/fonts/PPValve-Extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Valve"; src: url("../assets/fonts/PPValve-ExtralightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Valve"; src: url("../assets/fonts/PPValve-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Valve"; src: url("../assets/fonts/PPValve-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --bg: #0f0e0c;
  --ink: #f2efe9;
  --muted: rgba(242, 239, 233, 0.5);
  --faint: rgba(242, 239, 233, 0.16);
  --accent: #8b1fff;
  /* saturated furta-cor matching the cursor glow: fuchsia / violet / electric blue, no pale or warm stops */
  --holo: linear-gradient(110deg, #f21a9e 0%, #8021ff 30%, #1a6bff 50%, #8021ff 70%, #f21a9e 100%);
  --margin: 40rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
  --font-sans: "PP Valve", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html { font-size: calc(100vw / 1440); }
@media (max-width: 768px) { html { font-size: calc(100vw / 390); } :root { --margin: 20rem; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: 18rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body[data-loading] { overflow: hidden; }
body.menu-open { overflow: hidden; }

em { font-style: italic; font-weight: inherit; }

a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ---- gl canvas ---- */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

main, .header, .footer, .marquee { position: relative; z-index: 1; }

/* ---- split chars ---- */
[data-split] .ch { display: inline-block; transform: translateY(120%); transition: transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); will-change: transform; }
[data-split] { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.is-in [data-split] .ch, [data-split].is-in .ch { transform: translateY(0); }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(28rem); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
.is-in .reveal, .reveal.is-in { opacity: 1; transform: none; }

/* ---- intro ---- */
.intro {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: transform 1s var(--ease-out) 0.15s;
}
.intro__name { font-size: 64rem; font-weight: 200; letter-spacing: -0.02em; }
.intro.is-done { transform: translateY(-101%); }

/* ---- header ---- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--margin) * 0.6) var(--margin);
  mix-blend-mode: difference;
}
.header__logo { font-size: 24rem; font-weight: 500; letter-spacing: -0.02em; display: inline-flex; }
.header__star { display: inline-block; font-size: 14rem; transform: translateY(-2rem); transition: transform 0.5s var(--ease-spring); }
.header__logo:hover .header__star { transform: translateY(-2rem) rotate(180deg); }
.header__meta { display: flex; gap: 12rem; font-size: 13rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.menu-btn { position: relative; font-size: 16rem; font-weight: 500; letter-spacing: 0.02em; overflow: hidden; height: 1.3em; }
.menu-btn__label { display: block; }
.menu-btn__label--close { position: absolute; top: 0; left: 0; }
.menu-btn .menu-btn__label--close .ch,
body.menu-open .menu-btn .menu-btn__label:first-child .ch { transform: translateY(120%); }
body.menu-open .menu-btn .menu-btn__label--close .ch { transform: translateY(0); }

/* ---- menu ---- */
.menu {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--margin);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(18rem);
  -webkit-backdrop-filter: blur(18rem);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
body.menu-open .menu { opacity: 1; pointer-events: auto; }
.menu__list { display: flex; flex-direction: column; gap: 4rem; counter-reset: m; }
.menu__link { font-size: 88rem; font-weight: 200; letter-spacing: -0.025em; line-height: 1.08; color: var(--muted); transition: color 0.3s ease; }
.menu__link:hover { color: var(--ink); }
.menu__list li::before { counter-increment: m; content: "0" counter(m); font-size: 13rem; color: var(--accent); font-variant-numeric: tabular-nums; vertical-align: super; margin-right: 14rem; }
.menu__foot { position: absolute; bottom: var(--margin); left: var(--margin); font-size: 14rem; color: var(--muted); }

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96rem var(--margin) 72rem;
}
.hero__eyebrow { font-size: 17rem; color: var(--muted); margin-bottom: 28rem; letter-spacing: 0.01em; }
.hero__eyebrow em { font-size: 1.18em; color: var(--ink); }
.hero__title { font-size: 148rem; font-weight: 200; letter-spacing: -0.028em; line-height: 0.98; text-transform: lowercase; }
.hero__line { display: block; white-space: nowrap; }
.hero__line--indent { padding-left: 12vw; }
.hero__title em { font-style: italic; letter-spacing: -0.02em; }
.hero__dot { color: var(--accent); }
.hero__sub { max-width: 470rem; margin-top: 40rem; color: var(--muted); font-size: 19rem; }
.hero__scroll { position: absolute; bottom: calc(var(--margin) * 0.9); right: var(--margin); display: flex; gap: 10rem; font-size: 13rem; color: var(--muted); align-items: center; }
.hero__arrow { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(5rem); } }

/* ---- marquee ---- */
.marquee { border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); overflow: hidden; padding: 16rem 0; }
.marquee__track { display: flex; white-space: nowrap; width: max-content; animation: marquee 28s linear infinite; font-size: 15rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- works ---- */
.works { padding: 140rem var(--margin) 120rem; }
.works__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 48rem; }
.section-label { font-size: 15rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.section-label::before { content: "✲ "; color: var(--accent); }
.works__range { font-size: 14rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 70rem 1fr auto;
  align-items: baseline; gap: 24rem;
  padding: 34rem 0;
  border-top: 1px solid var(--faint);
  cursor: pointer;
}
.work-row:last-child { border-bottom: 1px solid var(--faint); }
.work-row__num { font-size: 14rem; color: var(--muted); font-variant-numeric: tabular-nums; transition: color 0.3s ease; }
.work-row__title { font-size: 56rem; font-weight: 200; letter-spacing: -0.02em; line-height: 1.04; color: var(--muted); transition: color 0.35s ease, transform 0.5s var(--ease-out); }
.work-row__meta { display: flex; gap: 26rem; font-size: 14rem; color: var(--muted); align-items: baseline; }
.work-row__award { color: var(--accent); }
.work-row__soon { font-family: var(--font-mono); font-weight: 500; font-size: 11rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 100rem; padding: 4rem 12rem; align-self: center; white-space: nowrap; }
.work-row--soon { cursor: default; }
.work-row:hover .work-row__title { color: var(--ink); transform: translateX(18rem); }
.work-row:hover .work-row__num { color: var(--accent); }

/* ---- preview (follows cursor over works) ---- */
.preview {
  position: fixed; top: 0; left: 0; z-index: 20;
  width: 450rem; /* Alterado para proporção horizontal */
  height: 280rem; /* Alterado para proporção horizontal */
  pointer-events: none;
  opacity: 0; transform: scale(0.92);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-spring);
}
.preview.is-on { opacity: 1; transform: scale(1); }
.preview__inner { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 6rem; }
.preview__media {
  position: absolute; inset: 0;
  background: var(--preview-bg, linear-gradient(160deg, #333, #111));
  background-size: cover;
  background-position: center;
  object-fit: cover; /* Adicionado para garantir que a imagem não seja distorcida */
}
/* cover layers (Vimeo iframe / local video); the media is zoomed inline per
   project so poster + video share one framing. fade the active one in. */
.preview__video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.preview__video.is-active { opacity: 1; }
.preview__label { position: absolute; bottom: 14rem; left: 14rem; font-size: 12rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); mix-blend-mode: difference; }

/* ---- about ---- */
.about { padding: 140rem var(--margin); max-width: 1100rem; }
.about .section-label { margin-bottom: 48rem; }
.about__lead { font-size: 40rem; font-weight: 200; letter-spacing: -0.01em; line-height: 1.24; margin-bottom: 36rem; }
.about__body { font-size: 21rem; color: var(--muted); max-width: 640rem; margin-bottom: 56rem; }
.about__clients { display: flex; flex-wrap: wrap; gap: 10rem 0; font-size: 14rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.about__clients li:not(:last-child)::after { content: "·"; margin: 0 14rem; color: var(--accent); }

/* ---- contact ---- */
.contact { padding: 160rem var(--margin) 140rem; text-align: center; }
.contact__memoji { width: 150rem; margin: 0 auto 8rem; perspective: 760rem; animation: memojiFloat 5.5s ease-in-out infinite; will-change: transform; }
.contact__memoji-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14rem 32rem rgba(0,0,0,0.5)); transform-style: preserve-3d; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); will-change: transform; }
@keyframes memojiFloat { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(-12rem) rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .contact__memoji { animation: none; } }
.contact__kicker { font-size: 24rem; color: var(--muted); margin-bottom: 18rem; }
.contact__mail { display: inline-block; font-size: 118rem; font-weight: 200; letter-spacing: -0.028em; text-transform: lowercase; line-height: 1.05; }
.contact__star { display: inline-block; font-size: 0.4em; vertical-align: super; color: var(--ink); transition: transform 0.7s var(--ease-spring); }
.contact__mail:hover .contact__star { transform: rotate(360deg) scale(1.25); }
.contact__links { display: flex; justify-content: center; gap: 34rem; margin-top: 44rem; font-size: 15rem; }
.contact__links a { color: var(--muted); transition: color 0.25s ease; border-bottom: 1px solid var(--faint); padding-bottom: 3rem; }
.contact__links a:hover { color: var(--ink); border-color: var(--accent); }

/* ---- footer ---- */
.footer { display: flex; justify-content: space-between; padding: 24rem var(--margin); font-size: 13rem; color: var(--muted); border-top: 1px solid var(--faint); font-variant-numeric: tabular-nums; }

/* ---- mono for small functional labels ---- */
.header__meta, .section-label, .works__range, .work-row__num, .work-row__meta,
.about__clients, .footer, .marquee__track, .hero__scroll, .contact__links,
.preview__label, .menu__foot, .menu__list li::before {
  font-family: var(--font-mono);
  font-weight: 500;
}
/* mono already runs wide — pull back the uppercase tracking */
.section-label { letter-spacing: 0.1em; }
.marquee__track { letter-spacing: 0.08em; }
.about__clients { letter-spacing: 0.04em; text-transform: none; }
.preview__label { letter-spacing: 0.06em; }
.work-row__meta { letter-spacing: -0.01em; }

/* ---- holo accent (furta-cor) ---- */
.hero__dot, .work-row__award, .menu__list li::before, .section-label::before {
  background: var(--holo); background-size: 240% 240%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: holo 7s ease-in-out infinite;
}
@keyframes holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero__dot, .work-row__award, .menu__list li::before, .section-label::before { animation: none; } }

/* ---- burst: the exact glow hue floods the screen BEHIND the content ---- */
/* z-index 0 sits above the #gl canvas but below main content (z-index 1),
   so text/memoji stay crisp on top. Colour is sampled live at hover. */
.cta-burst {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, var(--burst-color, #f21a9e) 0%, var(--burst-color, #f21a9e) 44%, transparent 78%);
  opacity: 0; transform: scale(0.18); transform-origin: 50% 60%;
  transition: opacity 0.4s ease, transform 0.75s var(--ease-out);
  will-change: transform, opacity;
}
body.cta-burst-on .cta-burst { opacity: 1; transform: scale(3); }
@media (prefers-reduced-motion: reduce) {
  .cta-burst { transition-duration: 0.2s; }
  body.cta-burst-on .cta-burst { transform: none; }
}


/* ---- cursor ---- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 70;
  width: 10rem; height: 10rem; border-radius: 50%;
  background: var(--ink); mix-blend-mode: difference;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.cursor.is-big { width: 56rem; height: 56rem; }
@media (hover: none) { .cursor, .preview { display: none !important; } }

/* ---- case study ---- */
.work-row.is-clickable { cursor: pointer; }
.case { padding: calc(var(--margin) * 3) 0 var(--margin); }
.case-hero { padding: 40rem var(--margin) 64rem; }
.case-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 14rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 28rem; }
.case-title { font-size: 200rem; font-weight: 200; letter-spacing: -0.03em; line-height: 0.95; margin-bottom: 48rem; }
.case-intro { max-width: 680rem; display: flex; flex-direction: column; gap: 22rem; font-size: 22rem; line-height: 1.5; }
.case-intro em { font-style: italic; }
.case-meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30rem; padding: 40rem var(--margin); border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.case-meta__row { display: flex; flex-wrap: wrap; gap: 56rem; }
.case-meta__item { display: flex; flex-direction: column; gap: 10rem; }
.case-meta__k { font-family: var(--font-mono); font-weight: 500; font-size: 12rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case-meta__v { font-size: 19rem; }
.case-visit { font-family: var(--font-mono); font-weight: 500; font-size: 14rem; letter-spacing: 0.04em; text-transform: uppercase; display: inline-flex; gap: 8rem; padding: 14rem 22rem; border: 1px solid var(--faint); border-radius: 100rem; transition: border-color 0.25s ease, color 0.25s ease; }
.case-visit:hover { border-color: var(--accent); color: var(--accent); }
.case-visit span { transition: transform 0.4s var(--ease-spring); }
.case-visit:hover span { transform: translate(3rem, -3rem); }
.case-palette { padding: 64rem var(--margin); }
.case-label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 14rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 28rem; }
.swatches { display: flex; flex-wrap: wrap; gap: 20rem; }
.swatch { display: flex; flex-direction: column; gap: 10rem; width: 150rem; }
.swatch__chip { display: block; height: 96rem; border-radius: 10rem; }
.swatch__hex { font-family: var(--font-mono); font-weight: 500; font-size: 13rem; letter-spacing: 0.02em; }
.swatch__name { font-family: var(--font-mono); font-size: 12rem; color: var(--muted); }
.case-gallery { padding: 48rem var(--margin) 24rem; }
.case-gallery__grid { columns: 2; column-gap: 22rem; max-width: 1180rem; margin: 0 auto; }
.case-item { break-inside: avoid; margin: 0 0 22rem; border-radius: 12rem; overflow: hidden; box-shadow: 0 24rem 70rem rgba(0, 0, 0, 0.5); display: block; }
.case-item img { width: 100%; height: auto; display: block; }
.case-vid { position: relative; background: #0a0a12; }
.case-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-foot { display: flex; justify-content: space-between; padding: 80rem var(--margin) 40rem; font-family: var(--font-mono); font-weight: 500; font-size: 15rem; }
.case-foot a { color: var(--muted); transition: color 0.25s ease; }
.case-foot a:hover { color: var(--ink); }
.case-foot__next span, .case-foot__back { display: inline-block; }
.case-foot__next span { transition: transform 0.4s var(--ease-spring); }
.case-foot__next:hover span { transform: translateX(5rem); }
.case-close { font-family: var(--font-mono); font-weight: 500; }

/* ---- mobile ---- */
@media (max-width: 768px) {
  .case-title { font-size: 84rem; }
  .case-intro { font-size: 18rem; }
  .case-meta { gap: 24rem; }
  .case-meta__row { gap: 28rem; }
  .case-gallery { padding: 24rem var(--margin); }
  .case-gallery__grid { columns: 1; }
  .case-foot { padding: 56rem var(--margin) 32rem; }
  .hero__title { font-size: 54rem; }
  .hero__line--indent { padding-left: 8vw; }
  .hero__sub { max-width: 100%; font-size: 16rem; }
  .menu__link { font-size: 52rem; }
  .work-row { grid-template-columns: 40rem 1fr; gap: 10rem; padding: 24rem 0; }
  .work-row__title { font-size: 30rem; }
  .work-row__meta { grid-column: 2; font-size: 12rem; gap: 14rem; flex-wrap: wrap; }
  .about__lead { font-size: 27rem; }
  .contact__mail { font-size: 44rem; }
  .footer { font-size: 11rem; gap: 8rem; }
  .intro__name { font-size: 34rem; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  [data-split] .ch, .reveal { transform: none !important; opacity: 1 !important; }
}