/* ==========================================================================
   Jake Bingley — Motion Design Portfolio
   ========================================================================== */

/* The supplied font file is actually "ITC Avant Garde Gothic Pro Bold
   Oblique" (its own name table says so) -- an italic weight, not the
   upright Bold the designs use. Left defined here in case the correct
   upright file shows up later; --font-headline below uses Poppins Bold
   in the meantime, which is not referenced by this @font-face. */
@font-face {
  font-family: 'ITC Avant Garde Gothic Pro Bold Oblique';
  src: url('../assets/fonts/ITCAvantGardeGothicProBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-red: #C30909;
  --color-green: #267324;
  --color-blue: #1B1BC4;
  --color-cyan: #00AAEA;
  --color-magenta: #EC008C;
  --color-yellow: #FFF200;

  --font-headline: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;

  --navbar-height: 96px;
  --footer-height: 96px;

  /* mobile-safe viewport height, set/updated by js/script.js */
  --vh: 1vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  overscroll-behavior: none;
}

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  margin: 0 0 1rem;
}

p { line-height: 1.5; }

a { color: inherit; }

/* ---------------------------------- Navbar ---------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: var(--color-white);
  z-index: 100;
}

.navbar__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.navbar__logo {
  height: 58px;
  width: auto;
  display: block;
}

.navbar__list {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar__link {
  position: relative;
  font-family: var(--font-headline);
  font-weight: 700;
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--color-black);
  padding-bottom: 0;
  transition: opacity 0.2s ease;
}

.navbar__link:hover {
  opacity: 0.6;
}

/* Same height/position on all four -- close enough that Shop's descender
   naturally tucks in behind its own underline without needing a special case. */
.navbar__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
  z-index: -1;
}

.navbar__link.is-active {
  opacity: 1;
}

.navbar__link[data-color="red"].is-active::after    { background: var(--color-red); }
.navbar__link[data-color="green"].is-active::after  { background: var(--color-green); }
.navbar__link[data-color="blue"].is-active::after   { background: var(--color-blue); }
.navbar__link[data-color="shop"].is-active::after {
  background: linear-gradient(
    90deg,
    var(--color-cyan) 0 33.33%,
    var(--color-magenta) 33.33% 66.66%,
    var(--color-yellow) 66.66% 100%
  );
}

/* ------------------------------ Scroll container ----------------------------- */

.scroll-container {
  display: flex;
  flex-direction: row;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.panel {
  flex: 0 0 100vw;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 96px);
  padding: calc(var(--navbar-height) + 24px) 64px calc(var(--footer-height) + 24px);
  position: relative;
  overflow: hidden;
}

/* Midground rail -- a single rectangle spanning Work -> About -> Chat (Shop
   sits outside the narrative, so it's excluded). Its left edge shows partway
   into Work, its right edge shows partway into Chat (mirrored inset); through
   About both edges are off-panel so only the bare top/bottom lines show.
   It sits behind the actual content (video/form/circle/text), which is free
   to overlap it -- this is a backdrop, not a frame around anything. */
.narrative-rail {
  position: absolute;
  left: 25vw;
  width: 250vw;
  top: 27vh;
  bottom: 27vh;
  border: 3px solid var(--color-black);
  pointer-events: none;
}

/* --------------------------------- Work -------------------------------- */

/* Both children are positioned directly against the panel instead of via
   the base flex row, so each can be centered against its own zone: the
   greeting within the gutter left of the rail, the reel within the railed
   zone to its right -- both sharing the panel's full height, same as the
   rail's own top/bottom insets, so all three share one vertical center. */
.panel--work {
  display: block;
}

.work__greeting {
  position: absolute;
  left: 0;
  width: 25vw;
  top: 0;
  bottom: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
}

.work__frame {
  position: absolute;
  left: 25vw;
  width: 75vw;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.work__frame .reel-wrapper {
  width: min(100%, 900px);
}

.reel-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--color-black);
}

.reel-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ----------------------------------- About ------------------------------------ */

/* Circle + content are normal flex siblings, centered as a group against
   the panel's own center (base .panel already does this) -- gap keeps a
   guaranteed minimum distance between them at every viewport width, so
   they cannot ever overlap the way absolutely-positioned siblings could. */
.about__circle {
  width: clamp(220px, 32vw, 420px);
  aspect-ratio: 1;
  flex: none;
  display: block;
}

.about__content {
  max-width: 620px;
}

.about__heading {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.about__content p {
  margin: 0 0 1.25rem;
}

/* --------------------------------- Chat ------------------------------------ */

.chat__frame {
  width: min(100%, 480px);
}

.chat__tagline {
  font-size: 1rem;
  margin: 0;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.contact-form__field input,
.contact-form__field textarea {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  padding: 10px 12px;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  resize: vertical;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

.contact-form__honeypot {
  display: none;
}

.contact-form__submit {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px;
  background: var(--color-blue);
  color: var(--color-white);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-form__submit:hover { opacity: 0.85; }
.contact-form__submit:disabled { opacity: 0.5; cursor: default; }

.contact-form__status {
  min-height: 1.2em;
  font-size: 0.85rem;
  margin: 0;
}

/* ----------------------------------- Shop ------------------------------------ */

.shop__message {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  margin: 0;
}

/* ------------------------------- Footer / logos -------------------------------- */

.logo-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.6);
  z-index: 90;
  display: flex;
  align-items: center;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.logo-strip.is-hidden {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.logo-strip__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  /* --marquee-distance is measured and set in js/script.js to the exact
     pixel width of one logo set (including its trailing gap) -- relying
     on -50% here was fragile against any sub-pixel width mismatch between
     the two halves, which read as a stutter/gap once per loop. The 50%
     fallback keeps this looking reasonable before JS runs. */
  --marquee-distance: 50%;
  animation: logo-scroll 30s linear infinite;
}

.logo-strip:hover .logo-strip__track {
  animation-play-state: paused;
}

.logo-strip__logo {
  height: 36px;
  width: auto;
  flex: none;
  opacity: 0.8;
  filter: grayscale(1) brightness(2);
}

/* This mark pairs an icon with "Microsoft Education" wordmark inside one
   SVG, so at the shared 36px row height its detail reads much smaller
   than the single-word marks around it. Scaling just this one up. */
.logo-strip__logo[src*="Microsoft_Education"] {
  height: 52px;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--marquee-distance))); }
}

/* -------------------------------- Responsive ---------------------------------- */

@media (max-width: 900px) {
  /* Stacked content (circle + heading + three paragraphs, etc.) can end up
     taller than a short/narrow phone's 100vh -- the base .panel clips
     overflow, which was cropping the bottom of About's content. Letting
     this one axis scroll guarantees nothing is ever cut off, regardless
     of viewport size, without touching the horizontal snap-scroll between
     sections (this is the panel's own internal vertical scroll). */
  .panel {
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    text-align: center;
    padding: calc(var(--navbar-height) + 24px) 24px calc(var(--footer-height) + 24px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .about__circle {
    width: min(60vw, 320px);
  }

  /* the rail's proportions are tuned for the wide horizontal-scroll layout;
     below the stacked breakpoint it doesn't read the same way, so drop it */
  .narrative-rail {
    display: none;
  }
}

@media (max-width: 640px) {
  .navbar { padding: 0 16px; }
  .navbar__list { gap: 20px; }
  .navbar__link { font-size: 1.15rem; }
  .navbar__logo { height: 43px; }
}

@media (max-width: 480px) {
  .navbar { padding: 0 10px; }
  .navbar__list { gap: 8px; }
  .navbar__link { font-size: 0.83rem; }
  .navbar__logo { height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip__track { animation: none; }
}