/* ══════════════════════════════
   HERO
══════════════════════════════ */
#home {
  background-color: #fff;
  font-family: 'Oswald', sans-serif;
}

/* ── ANIMATION ── */
.anim { opacity: 0; transform: translateX(-120px); }
.anim.go { animation: slideIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-120px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── PAGE (PC) ── */
.page {
  width: 100%;
  max-width: 1100px;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem 80px 6rem;
  margin: 0 auto;
}

/* ── JAHID'S ──
   opacity/transform/filter on .top-name, .big-title, .script-text and
   .bottom-row below are driven by fadeHeroOnScroll() in hero.js — each
   one fades/lifts at its own rate on scroll for a parallax "exit", so
   each gets its own transform-origin + will-change hint */
.top-name {
  font: 700 italic clamp(18px, 3.2vw, 48px)/1 'Oswald', sans-serif;
  color: #8b0000;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
  will-change: opacity, transform, filter;
}

/* ── WEB DEV ── */
.big-title {
  font: 700 clamp(64px, 18.5vw, 260px)/0.82 'Oswald', sans-serif;
  color: #8b0000;
  letter-spacing: -3px;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: left center;
  display: block;
  will-change: opacity, transform, filter;
}

/* ── PORTFOLIO ── */
.script-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: -5%;
}

.script-text {
  font: clamp(54px, 13vw, 200px)/1 'Pinyon Script', cursive;
  color: #8b0000;
  -webkit-text-stroke: 0.5px #8b0000;
  padding-right: 4px;
  will-change: opacity, transform, filter;
}

/* ── BOTTOM ROW ── */
.bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: clamp(10px, 2.5vw, 28px);
  will-change: opacity, transform, filter;
}

.services {
  font: 700 italic clamp(10px, 1.7vw, 22px)/1.5 'Oswald', sans-serif;
  color: #8b0000;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.email {
  font: 700 italic clamp(10px, 1.6vw, 21px)/1 'Oswald', sans-serif;
  color: #8b0000;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: lowercase;
  padding-top: 4px;
  text-align: right;
}
.email:hover { opacity: 0.7; }

/* ── TABLET ── */
@media (max-width: 1024px) {
  .page {
    min-height: unset;
    justify-content: flex-start;
    padding: 28px 48px;
  }
  .big-title { letter-spacing: -2px; }
  .script-row { margin-top: -4%; }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  .page {
    min-height: unset;
    justify-content: flex-start;
    /* even margin on all sides so content doesn't touch the screen edges */
    padding: 36px 24px 32px;
    gap: 2px;
  }

  .top-name { font-size: clamp(20px, 6vw, 32px); }

  .big-title {
    font-size: clamp(42px, 20vw, 100px);
    line-height: 0.88;
    letter-spacing: -1px;
  }

  .script-row { margin-top: -6px; }
  .script-text { font-size: clamp(36px, 16vw, 82px); line-height: 0.9; }

  .bottom-row {
    flex-direction: column;
    align-items: flex-end;
    margin-top: 10px;
    gap: 7px;
  }

  .services { font-size: 12px; line-height: 1.35; letter-spacing: 0.8px; }

  .email {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.3px;
    word-break: break-all;
    text-align: left;
  }
}