/* ============================================================
   STYLE.CSS
   This file controls how the page LOOKS. The HTML file says
   WHAT is on the page, and this file says how it should appear.

   How CSS works:
     selector {
       property: value;
     }
   The selector picks which HTML elements to style.
   ============================================================ */


/* ------------------------------------------------------------
   1. COLOR AND FONT VARIABLES
   We save our colors and fonts in one place so they're easy to
   change. ":root" means "the whole page". Use them with var(--name).
   ------------------------------------------------------------ */
:root {
  --background: #0b0b0d;  /* page background (almost black) */
  --surface: #151518;     /* slightly lighter, for the section cards */
  --text: #f2efe9;        /* main text (warm off-white) */
  --muted: #9a9790;       /* softer gray for less important text */
  --accent: #e63946;      /* bold red that makes things pop */
  --border: #2a2a2e;      /* thin lines around cards */

  --font-display: "Anton", Impact, sans-serif;           /* big headings */
  --font-body: "Inter", -apple-system, Arial, sans-serif; /* normal text */
}


/* ------------------------------------------------------------
   2. BASIC RESET
   Browsers add their own default spacing. This clears it so
   the page looks the same everywhere.
   "*" means "every element".
   ------------------------------------------------------------ */
* {
  margin: 0;
  padding: 0;
  /* Makes width include padding and border, which is much easier to reason about. */
  box-sizing: border-box;
}

/* Makes menu clicks scroll smoothly instead of jumping. */
html {
  scroll-behavior: smooth;
}


/* ------------------------------------------------------------
   3. THE WHOLE PAGE
   ------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  background-color: var(--background);
  color: var(--text);
  line-height: 1.7; /* space between lines, makes text easier to read */

  /* A faint grid of dots behind everything, for a techy look.
     "radial-gradient" draws one small circle, and "background-size"
     repeats it every 28px in both directions. */
  background-image: radial-gradient(#2a2a2e 1px, transparent 1px);
  background-size: 28px 28px;
}


/* ------------------------------------------------------------
   4. HEADER AND NAVIGATION
   ------------------------------------------------------------ */
.site-header {
  /* "fixed" keeps the header stuck to the top of the screen while
     you scroll, floating on top of the page. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10; /* higher number = drawn on top of other things */

  /* Flexbox puts the logo and the menu side by side. */
  display: flex;
  justify-content: space-between; /* logo on the left, menu on the right */
  align-items: center;            /* line them up vertically */
  padding: 20px 32px;

  /* See-through dark background with a blur behind it. */
  background-color: rgba(11, 11, 13, 0.7); /* rgba = red, green, blue, opacity */
  backdrop-filter: blur(8px);
}

/* The "JT." logo. */
.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;      /* rem = relative to the default text size */
  color: var(--text);
  text-decoration: none;  /* removes the underline links normally have */
  letter-spacing: 1px;
}

/* The red period after "JT". */
.dot {
  color: var(--accent);
}

/* The menu links. "nav a" means "any <a> inside <nav>". */
nav a {
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase; /* shows the text in CAPITALS */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  margin-left: 28px; /* space between each link */

  /* "transition" makes the color change fade in smoothly on hover. */
  transition: color 0.2s;
}

/* ":hover" styles apply when the mouse is over the link. */
nav a:hover {
  color: var(--accent);
}


/* ------------------------------------------------------------
   5. HERO (the full-screen opening picture)
   ------------------------------------------------------------ */
.hero {
  /* "vh" = viewport height. 100vh = exactly one full screen tall. */
  min-height: 100vh;

  /* Center everything inside, both across and up/down. */
  display: flex;
  flex-direction: column;  /* stack items top to bottom */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px 24px;

  /* "relative" lets us place the scroll arrow at the bottom of the hero. */
  position: relative;

  /* THE BACKGROUND PICTURE.
     There are two layers here. The top layer is a dark see-through
     gradient so the white text is always readable. The bottom layer
     is your photo.

     TO ADD YOUR PHOTO: make a folder called "images" next to this
     file, put a picture in it named "hero.jpg", and it will show up.
     Until then, you'll just see the dark red gradient. */
  background-image:
    linear-gradient(to bottom, rgba(11, 11, 13, 0.55), rgba(11, 11, 13, 0.95)),
    url("images/hero.jpg"),
    radial-gradient(circle at 50% 40%, #4a1419, var(--background) 70%);
  background-size: cover;     /* stretch the picture to fill the whole area */
  background-position: center;
}

/* The small line above your name. */
.eyebrow {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Your name, huge. */
h1 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 400;  /* Anton is already very bold, so no extra bold needed */
  line-height: 0.9;  /* tight lines so "JASON" and "TUNA" sit close together */

  /* "clamp" picks a size that grows with the screen width (18vw),
     but never smaller than 4.5rem or bigger than 11rem. This is an
     easy way to make text fit both phones and big screens. */
  font-size: clamp(4.5rem, 18vw, 11rem);
}

.hero-tagline {
  color: var(--muted);
  font-size: 1.15rem;
  margin-top: 24px;
  max-width: 480px;
}

/* The "Scroll ↓" link at the bottom of the hero. */
.scroll-down {
  position: absolute; /* placed relative to .hero (see "position: relative" above) */
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%); /* shifts it left by half its width, so it's truly centered */

  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 3px;
}

.scroll-down .arrow {
  font-size: 1.4rem;
  color: var(--accent);
  /* Plays the "bounce" animation (defined below) forever. */
  animation: bounce 1.6s infinite;
}

/* An ANIMATION: describes how something moves over time.
   0% is the start, 50% is halfway, 100% is the end. */
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); } /* moves down 8px */
  100% { transform: translateY(0); }   /* then back up */
}


/* ------------------------------------------------------------
   6. MAIN CONTENT AREA
   ------------------------------------------------------------ */
main {
  max-width: 820px; /* keeps lines from getting too long on big screens */
  margin: 0 auto;   /* "auto" left/right centers it on the page */
  padding: 80px 24px 40px;
}


/* ------------------------------------------------------------
   7. SECTIONS (About, Early Life, Contact)
   ------------------------------------------------------------ */
.section {
  background-color: var(--surface);
  border: 1px solid var(--border);
  /* A thick red line on the left side of each card. */
  border-left: 4px solid var(--accent);
  padding: 48px;
  margin-bottom: 40px; /* space between cards */

  /* "relative" lets us place the big number in the corner. */
  position: relative;
  overflow: hidden; /* hides the part of the big number that sticks out */

  /* When a menu link jumps here, leave room for the fixed header. */
  scroll-margin-top: 100px;

  transition: transform 0.3s, border-color 0.3s;
}

/* A small lift when you hover over a card. */
.section:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

/* The giant "01", "02", "03" in the top-right corner of each card. */
.section-number {
  position: absolute;
  top: -10px;
  right: 20px;
  font-family: var(--font-display);
  font-size: 7rem;
  line-height: 1;

  /* Makes the number see-through with only a thin outline. */
  color: transparent;
  -webkit-text-stroke: 1px var(--border);
}

/* Section headings */
h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 7vw, 4rem);
  line-height: 1;
  margin-bottom: 24px;
  position: relative; /* keeps the heading on top of the big number */
}

/* Normal paragraphs inside the sections */
.section p {
  color: #d6d3cc;
  font-size: 1.05rem;
  position: relative;
}

/* Space between paragraphs.
   "p + p" means "a paragraph that comes right after another paragraph". */
p + p {
  margin-top: 16px;
}

/* The one sentence we wanted to stand out in Early Life. */
.section .highlight {
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 600;
  margin-top: 24px;
}


/* ------------------------------------------------------------
   8. CONTACT BUTTON
   ------------------------------------------------------------ */
.button {
  display: inline-block; /* lets a link have padding like a box */
  margin-top: 24px;
  padding: 16px 28px;
  background-color: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  word-break: break-all; /* lets a long email wrap on tiny screens */
  transition: background-color 0.2s, color 0.2s;
}

.button:hover {
  background-color: var(--text);
  color: var(--background);
}


/* ------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 1px;
  padding: 40px 24px 56px;
}


/* ------------------------------------------------------------
   10. PHONES (the "responsive" part)
   A "media query" only applies these styles when the screen is
   600px wide or smaller. They override the styles above.
   ------------------------------------------------------------ */
@media (max-width: 600px) {

  /* Smaller header so it doesn't take up too much of the screen. */
  .site-header {
    padding: 14px 16px;
  }

  /* Tighter spacing between menu links so they fit. */
  nav a {
    margin-left: 14px;
    font-size: 0.7rem;
    letter-spacing: 1px;
  }

  .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 2px;
  }

  main {
    padding: 48px 16px 24px;
  }

  /* Less padding inside the cards on a narrow screen. */
  .section {
    padding: 32px 20px;
    margin-bottom: 24px;
    scroll-margin-top: 70px;
  }

  .section-number {
    font-size: 5rem;
  }
}