/* ==========================================================================
   André Camacho — minimal landing page
   Single stylesheet. No framework, no build step.
   (Kept compatible with the project's csslint CI: no custom properties,
    no dvh unit — both are unsupported by csslint's parser.)
   ========================================================================== */

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

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* single screen, never scrolls */
  padding: 0;
}

/* --- Self-hosted fonts (latin subset, woff2) ------------------------------ */
@font-face {
  font-display: swap;
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-300.woff2") format("woff2");
}

/* --- Base ----------------------------------------------------------------- */
body {
  background-color: #0a0a0a;
  color: #f2f0ea;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- Layout: full viewport, centered, no scroll --------------------------- */
.hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1.5rem;
  text-align: center;
}

/* --- Name ----------------------------------------------------------------- */
.name {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 4rem;
  font-size: clamp(2.4rem, 8.5vw, 6rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 0;
  overflow-wrap: break-word;
  width: 100%;
}

/* --- Title / competency line ---------------------------------------------- */
.title {
  color: #9a978f;
  font-size: 0.85rem;
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  font-weight: 300;
  letter-spacing: 0.28em;
  margin: 1.5rem 0 0;
  text-transform: uppercase;
  width: 100%;
}

.title .sep {
  margin: 0 0.55em;
}

/* On narrow screens, stack each phrase on its own line */
@media (max-width: 600px) {
  .title {
    line-height: 2.3;
  }

  .title .part {
    display: block;
  }

  .title .sep {
    display: none;
  }
}

/* --- Contact button (ghost / outline) ------------------------------------- */
.contact {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  color: #f2f0ea;
  display: inline-block;
  font-size: 0.8rem;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  font-weight: 300;
  letter-spacing: 0.22em;
  margin-top: 3rem;
  padding: 0.85em 2.4em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.contact:hover {
  background-color: #f2f0ea;
  border-color: rgba(255, 255, 255, 0.6);
  color: #0a0a0a;
}

.contact:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 4px;
}

/* --- Gentle entrance (skipped for reduced-motion users) -------------------
   The name (.name) is NOT animated: it paints immediately, so it satisfies
   First/Largest Contentful Paint right away — keeping Lighthouse/PageSpeed
   happy even though the animation timeline is paused in a background tab.
   Only the subtitle and button fade in, via opacity (no layout change, so
   zero CLS). If the animation is paused they simply stay hidden, which costs
   nothing because the name already counted for FCP/LCP. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .title,
  .contact {
    animation: rise 1.1s ease both;
  }

  .title {
    animation-delay: 0.15s;
  }

  .contact {
    animation-delay: 0.45s;
  }
}