/* ==========================================================
   Naveen — Portfolio (Coming Soon)
   Converted from Figma: desktop frame 1280×832, mobile 390×844
   ========================================================== */

/* Area Inktrap ExtraBold — the font used in the Figma design (files in assets/fonts/). */
@font-face {
  font-family: "Area Inktrap";
  src: url("../assets/fonts/AreaInktrap-ExtraBold.woff") format("woff"),
       url("../assets/fonts/AreaInktrap-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --text: #ffffff;
  --bg-fallback: #1e3a5f;
  --font-display: "Area Inktrap", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

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

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg-fallback);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;                /* centers the heading horizontally */
  padding: 0 4vw;
  overflow: hidden;                       /* hides the edges while the image zooms/moves */
  background: var(--bg-fallback);
  isolation: isolate;
}

/* Background image lives on its own layer so it can zoom + move (parallax) */
.hero::before {
  content: "";
  position: absolute;
  inset: -2%;                             /* extra room so edges never show */
  z-index: -1;
  background: url("../assets/images/bg-desktop.webp") no-repeat;
  background-size: cover;
  background-position: 61% 67%;           /* matches the crop in Figma */
  will-change: translate, scale;

  /* Slow, gentle zoom-in */
  animation: slowZoom 24s ease-out both;

  /* Mouse parallax (values set by js/main.js) — background moves opposite the cursor */
  translate: calc(var(--mx, 0) * -1.2vw) calc(var(--my, 0) * -1.2vh);
}

@keyframes slowZoom {
  from { scale: 1; }
  to   { scale: 1.1; }
}

/* ---------- Logo ---------- */
.logo {
  position: absolute;
  z-index: 1;
  top: 6.7vh;                              /* ~56px of 832px */
  left: 6.15vw;                            /* ~79px of 1280px */
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 10.67px;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.logo:hover { transform: scale(1.06); }
.logo:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- Heading ---------- */
.title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 12.66vw, 12rem);  /* 162px at 1280px wide */
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: var(--text);

  /* Sits slightly above middle (like the Figma) and drifts a little WITH the cursor,
     so it feels closer to the viewer than the background */
  transform: translate(calc(var(--mx, 0) * 0.8vw), calc(-3vh + var(--my, 0) * 0.8vh));

  /* Mild, smooth fade-in from the bottom */
  animation: fadeUp 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes fadeUp {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ---------- Mobile (Figma iPhone 13/14 frame: 390×844) ---------- */
@media (max-width: 700px) {
  .hero {
    align-items: flex-start;
    justify-content: center;
    padding: 0 16px;
  }

  .hero::before {
    background-image: url("../assets/images/bg-mobile.webp");
    background-position: 98% 50%;
  }

  .logo { top: 30px; left: 30px; }

  .title {
    margin-top: 23.8vh;                    /* text box starts ~201px of 844px */
    font-size: 22.86vw;                    /* 89px at 390px wide */
    line-height: 0.848;
    text-align: center;
    transform: none;
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; translate: none; }
  .logo { transition: none; }
  .title { animation: none; transform: translateY(-3vh); }
}