/* ============================================================
   landing.css — LANDING PAGE (index.html) STYLES
   Loaded only by index.html, on top of style.css.
   Aesthetic direction: Sleek dark premium — electric blue accents,
   floating glow orbs, a grain texture overlay for depth.
   
   Sections covered:
     1.  Hero section  — the big intro above the fold
     2.  Discipline cards — the three clickable panels
     3.  About strip  — stats + bio
     4.  Contact section
   ============================================================ */


/* ============================================================
   1. HERO SECTION
   Full-viewport-height intro with animated floating blobs,
   a noise texture overlay, and staggered animated text.
   ============================================================ */

.landing-hero {
  min-height: 100vh;           /* takes up the full screen height */
  display: flex;
  align-items: center;         /* vertically centres content */
  position: relative;          /* needed so absolute children (orbs) position correctly */
  overflow: hidden;            /* prevents orbs from causing a scrollbar */
  padding-top: 80px;           /* clears the fixed nav bar (nav is ~80px tall) */
}

/* --- Glow orbs ---
   Large blurred circles that create the ambient blue glow.
   They're positioned absolutely and sit behind all content.
   animation: orbFloat makes them drift slowly up and down. */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);   /* heavy blur turns the circle into a soft glow */
  pointer-events: none; /* clicks pass straight through to content below */
}
/* Top-right orb — larger, brighter */
.hero-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,0.2), transparent 70%);
  top: -100px; right: -100px;
  animation: orbFloat 8s ease-in-out infinite;
}
/* Bottom-left orb — smaller, dimmer */
.hero-orb-2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(37,99,235,0.1), transparent 70%);
  bottom: -50px; left: -50px;
  animation: orbFloat 10s ease-in-out infinite reverse; /* reverse = starts moving the other way */
}

/* The keyframe for the gentle floating drift of the orbs */
@keyframes orbFloat {
  0%,100% { transform: translate(0, 0);         }
  50%      { transform: translate(20px, -20px);  } /* drifts 20px right and 20px up at midpoint */
}

/* --- Noise texture overlay ---
   A faint SVG noise pattern layered on top of the background.
   This adds a subtle film-grain / texture feel that makes the
   background look less flat. pointer-events: none means you
   can still click through it. */
.hero-noise {
  position: absolute;
  inset: 0;  /* shorthand for top/right/bottom/left: 0 (fills the whole hero) */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
  pointer-events: none;
}

/* The actual text/content — z-index: 1 puts it above the orbs and noise */
.landing-hero__content { position: relative; z-index: 1; }


/* --- "Available for opportunities" pill badge --- */
.hero-available {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.4rem 1rem;
  margin-bottom: 2rem;
  background: rgba(255,255,255,0.02);
}

/* The small green pulsing dot inside the badge */
.hero-available__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;             /* green */
  box-shadow: 0 0 10px #22c55e;   /* green glow around it */
  animation: pulse 2s ease-in-out infinite;
}

/* Keyframe: the dot breathes in and out */
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1);    }
  50%      { opacity: 0.6; transform: scale(0.85); }
}


/* --- Main hero title (MAXIM CALLAGHAN) ---
   clamp(min, preferred, max) means the font scales responsively:
   never smaller than 4.5rem, ideally 10% of viewport width,
   never bigger than 10rem. */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 10vw, 10rem);
  line-height: 0.9;  /* tight line height for big display text */
  color: var(--text);
  margin-bottom: 0.5rem;
}
/* Each part of the name is a block so they stack vertically */
.hero-title .name-first { display: block; }
/* The last name uses an outline effect: text is transparent,
   only the stroke (outline) is blue. */
.hero-title .name-last {
  display: block;
  -webkit-text-stroke: 1px rgba(37,99,235,0.7); /* 1px blue outline */
  color: transparent;
}
/* When .solid is added (could be used with JS), it switches to filled */
.hero-title .name-last.solid {
  color: var(--blue);
  -webkit-text-stroke: none;
}


/* --- Role line below the name --- */
.hero-role {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.8rem 0;
}
.hero-role span { color: var(--blue); }  /* each role title is blue */
.hero-role__sep { color: var(--border); } /* the / separators are dim */


/* --- Description paragraph --- */
.hero-desc {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 2.8rem;
}
.hero-desc strong { color: var(--text); } /* highlighted words are brighter */


/* --- CTA button row --- */
.hero-cta { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Primary filled button */
.btn-hero-primary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--blue);
  color: #fff;
  padding: 0.9rem 2rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.btn-hero-primary:hover { background: #1d4ed8; } /* slightly darker blue on hover */

/* Secondary outlined button */
.btn-hero-secondary {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.9rem 2rem;
  transition: all 0.2s;
  background: rgba(255,255,255,0.02);
}
.btn-hero-secondary:hover { border-color: var(--text); color: var(--text); }


/* ============================================================
   2. DISCIPLINE CARDS
   Three clickable panels: Game Design / IT Skills / Web Design.
   They sit in a horizontal row on desktop, stack on mobile.
   Each has a coloured accent stripe at the top that glows on hover.
   ============================================================ */

.disciplines { padding: 7rem 0; }
.disciplines__label { margin-bottom: 1.5rem; }

/* The intro heading above the cards */
.disciplines__intro {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 4rem;
  max-width: 640px;
}
.disciplines__intro em { color: var(--blue); font-style: normal; }

/* The three-column grid containing the cards */
.disc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 2px;  /* tiny 2px gap between cards — visually looks like a border */
}

/* Individual discipline card */
.disc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
  text-decoration: none; /* it's an <a> tag so remove underline */
  display: block;
  transition: border-color 0.3s, background 0.3s;
}
.disc-card:hover { background: rgba(255,255,255,0.03); }

/* The coloured stripe at the very top of each card.
   position: absolute so it sits at the top edge.
   Each card modifier (--game, --it, --web) sets a different colour. */
.disc-card__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  transition: opacity 0.3s;
}
.disc-card--game .disc-card__accent { background: #00d4ff; } /* cyan for game */
.disc-card--it   .disc-card__accent { background: #00ff88; } /* green for IT */
.disc-card--web  .disc-card__accent { background: #a855f7; } /* purple for web */

/* Large faint number in the background of each card */
.disc-card__num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: rgba(255,255,255,0.05); /* barely visible — just texture */
  line-height: 1;
  margin-bottom: 1rem;
}

/* Emoji icon */
.disc-card__icon { font-size: 1.8rem; margin-bottom: 1rem; }

/* Card heading — each discipline gets its own colour */
.disc-card__title {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--text);
  line-height: 1.05;
  margin-bottom: 0.8rem;
}
.disc-card--game .disc-card__title { color: #00d4ff; }
.disc-card--it   .disc-card__title { color: #00ff88; }
.disc-card--web  .disc-card__title { color: #a855f7; }

/* Short description text */
.disc-card__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

/* Row of small skill tags */
.disc-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.8rem; }
.disc-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  background: rgba(255,255,255,0.02);
}

/* The "View Projects →" call-to-action at the bottom of each card.
   On hover, the gap between text and arrow increases (the arrow slides right). */
.disc-card__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s, gap 0.2s;
}
.disc-card:hover .disc-card__cta { gap: 0.7rem; } /* arrow slides right */

/* CTA colour per card type on hover */
.disc-card--game:hover .disc-card__cta { color: #00d4ff; }
.disc-card--it:hover   .disc-card__cta { color: #00ff88; }
.disc-card--web:hover  .disc-card__cta { color: #a855f7; }


/* ============================================================
   3. ABOUT STRIP
   Two-column layout: bio text on the left, stats grid on the right.
   Has a slightly lighter background (--surface) to visually separate
   it from the sections above and below.
   ============================================================ */

.about-strip {
  padding: 6rem 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Two columns: bio (narrower) and stats (wider) */
.about-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1.6fr; /* bio takes ~38%, stats take ~62% */
  gap: 5rem;
  align-items: center;
}

.about-strip__label { margin-bottom: 1rem; }

.about-strip__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--text);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.about-strip__text {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Each credential row (degree, fencing, cadets) */
.about-strip__creds { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 2rem; }
.cred-row { display: flex; align-items: center; gap: 1rem; }

/* Circular icon on the left of each cred row */
.cred-row__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0; /* don't let the icon shrink if text is long */
}

.cred-row__text { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); }
.cred-row__sub  { font-family: var(--font-mono); font-size: 0.62rem; color: var(--muted); }

/* --- 2x2 stats grid (23 team members, 6 games, etc.) --- */
.about-strip__stats {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 1.5rem;
}

/* Individual stat box */
.about-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 2rem;
}

/* The big number — uses data-target attribute, animated by JS */
.about-stat__num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--blue);
  line-height: 1;
}

.about-stat__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.4rem;
}


/* ============================================================
   4. CONTACT SECTION
   Centred layout with a large heading and contact buttons.
   ============================================================ */

.contact-section { padding: 8rem 0; }

/* Centre everything within a max-width container */
.contact-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.contact-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  color: var(--text);
  line-height: 0.95;
  margin-bottom: 1.5rem;
}
.contact-title span { color: var(--blue); } /* the "?" in "Got a project in mind?" */

.contact-sub {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 3rem;
}

/* Row of contact buttons */
.contact-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-link {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1.8rem;
  transition: all 0.2s;
}
.contact-link.primary  { background: var(--blue); color: #fff; }
.contact-link.primary:hover  { background: #1d4ed8; }
.contact-link.secondary { border: 1px solid var(--border); color: var(--muted); }
.contact-link.secondary:hover { border-color: var(--text); color: var(--text); }


/* ============================================================
   5. RESPONSIVE OVERRIDES FOR LANDING PAGE
   Below 900px: disc-cards stack vertically, about strip stacks.
   ============================================================ */
@media (max-width: 900px) {
  /* Stack the three discipline cards vertically on mobile/tablet */
  .disc-cards { grid-template-columns: 1fr; }
  /* Stack about bio and stats vertically */
  .about-strip__inner { grid-template-columns: 1fr; gap: 3rem; }
}