/* ============================================================
   HERO — International Typographic Style
   ------------------------------------------------------------
   The rotating word is untouched: #dynamic-layer, .slide-up,
   .slide-in and both keyframes below are exactly as they were,
   and Hero.tsx still cycles LOVE -> TEACH -> BUILD -> REACH on
   the same 3s period with the same 600ms transition.

   What changed is everything around it. The hero now hangs off
   the same left edge and gutter as the sections below it, so the
   page reads as one grid rather than a centred banner followed
   by aligned content.

   A side effect worth naming: the title row used to be centred,
   so "WE" physically shifted left and right every time the word
   changed width (LOVE vs BUILD). Anchoring the row left holds
   "WE" still and lets only the word's right edge move.
   ============================================================ */

/* Hero content is centred, as the original was: the rotating title, the
   welcome line and the two buttons all share the page's vertical axis.
   The max-width and gutter stay, so nothing can touch the screen edge. */
.video-section .content {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 6rem);
  box-sizing: border-box;

  /* Anchor the block low in the frame; the video reads above it. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: clamp(3rem, 10vh, 7rem);
}

/* Symmetric scrim. The left-weighted one was for left-aligned type; with
   the composition back on the centre axis it would darken one shoulder of
   the picture and not the other. Still no text-shadow. */
.video-section .video-overlay {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0.12) 70%, rgba(0, 0, 0, 0.3) 100%);
}

/* ------------------------------------------------------------
   Title row — "WE" + the rotating word
   ------------------------------------------------------------ */
#section-title {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  z-index: 5;

  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 2rem);
}

#static-layer,
#dynamic-layer {
  position: relative;
  top: auto;
  transform: none;
  left: auto !important;         /* override any JS inline positioning */
  white-space: nowrap;

  font-family: 'Sofia Pro', sans-serif;
  /* rem/clamp, not vh: sizing display type in vh means it resizes
     when the window changes HEIGHT, which no type system survives. */
  font-size: clamp(3.25rem, 12vw, 11rem);
  font-weight: 100;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #ffffff;
  text-shadow: none;
}

/* The rotating word carries the weight contrast. */
#dynamic-layer {
  font-weight: 700;
  text-decoration: none;
  margin: 0;
  color: #ffffff;
}

/* ------------------------------------------------------------
   Spanish sets its own scale.

   The row is `white-space: nowrap`, and the two languages are not
   the same length: the English hero's longest line is WE TEACH,
   the Spanish one is TE ALCANZAMOS. At the English size the long
   Spanish words ran off the right edge and were clipped by the
   hero -- silently, because the section hides the overflow rather
   than scrolling the page.

   Scaling per language instead of shrinking the shared value
   leaves the English hero exactly as it is.
   ------------------------------------------------------------ */
html[lang^="es"] #static-layer,
html[lang^="es"] #dynamic-layer {
  font-size: clamp(2.75rem, 10vw, 9rem);
}

/* ---- Animation: unchanged from the original ---- */
.slide-up {
  animation: slideUp 0.6s forwards;
}

.slide-in {
  animation: slideIn 0.6s forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------
   Supporting copy + actions
   ------------------------------------------------------------ */
.content-info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 10;

  animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
  pointer-events: none;
}

.content-info>* {
  pointer-events: auto;
}

/* Hairline above the supporting copy, tying the hero to the
   rules used throughout the rest of the page. */
.description-landing {
  font-family: 'Sofia Pro', sans-serif;
  font-weight: 300;
  text-align: center;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: none;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  max-width: 42ch;
  width: 100%;
}

.buttons-landing {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  width: auto;
  margin-bottom: 0;
}

/* The two actions are different elements -- the livestream one is a <Link>,
   so an <a>, and About Us is a <button>. Browsers give <button> border-box
   in their own stylesheet and leave <a> at content-box, and with preflight
   off in this project nothing evens that out. So the same class produced two
   different boxes: at `width: 100%` the <a> added its 48px of padding on top
   and ran 45px past the screen, while the <button> sat exactly in the
   gutters. Setting it here is what makes them one button in two elements. */
.buttons-landing,
.buttons-landing * {
  box-sizing: border-box;
}

/* Square, opaque, no blur. The old glass pills were decoration
   rather than affordance, and backdrop-filter is expensive over
   a playing video. */
.button-landing {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 1rem 2.25rem;

  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 0;
  box-shadow: none;

  color: #ffffff;
  font-family: 'Sofia Pro', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* First action is the primary one: solid. */
.buttons-landing> :first-child {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #1b1b1b;
}

.button-landing:hover {
  background-color: #ff820d;
  border-color: #ff820d;
  color: #000000;
  transform: none;
  box-shadow: none;
}

.button-landing:focus-visible {
  outline: 2px solid #ff820d;
  outline-offset: 3px;
}

/* Legacy: the CTA used to wrap a link inside a button. */
.button-landing a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------
   Responsive — the left edge never moves
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .video-section .content {
    padding-bottom: clamp(2.5rem, 8vh, 5rem);
  }

  #section-title {
    gap: 0.6rem;
  }
}

@media (max-width: 480px) {

  #static-layer,
  #dynamic-layer {
    font-size: clamp(2.75rem, 16vw, 4.5rem);
  }

  html[lang^="es"] #static-layer,
  html[lang^="es"] #dynamic-layer {
    font-size: clamp(2rem, 11.2vw, 4rem);
  }

  .buttons-landing {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0.6rem;
  }

  .button-landing {
    width: 100%;
    padding: 0.95rem 1.5rem;
  }

  .description-landing {
    max-width: none;
  }
}

/* Very short viewports: keep the title from crowding the actions. */
@media (max-height: 560px) {

  #static-layer,
  #dynamic-layer {
    font-size: clamp(2.5rem, 9vh, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {

  .content-info {
    animation: none;
  }

  .button-landing {
    transition: none;
  }
}