/* ============================================================
   UMD Design System — home page styles
   ============================================================
   Scoped to #design-home. Everything here is additive: the site's
   own dsHome.css already supplies .umd-design-lock,
   .umd-design-lock-content, .umd-design-home-section and the
   web-styles-library base.

   Colors, spacing, and font stacks come from the web-styles-library
   tokens dsHome.css defines at :root (--umd-color-*, --umd-space-*,
   --sanSerif) — nothing is redeclared here.
============================================================ */

/* Sections that run edge to edge inside the content column. */
#design-home .umd-design-home-section-flush {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------
   1. Hero — umd-element-hero, stacked display

   The component supplies the sticky text block, the scroll-in
   scrim, the video play-pause control, and its own type scale.
   Three things are needed here: a black ground, breathing room
   above the eyebrow, and containment for the 100vw scrim.
------------------------------------------------------------ */
#design-home #home-section-hero {
  background-color: var(--umd-color-black);

  /* The component pads its text block 32px top and bottom at every width —
     there is no wider step to reach, so this is the component behaving
     normally rather than an integration fault. The rest is added out here,
     on ground that is already black, so it reads as part of the hero rather
     than as a gap above it. Section-level padding, not a shadow injection.

     The step is the design system's own interior vertical scale — 56px, 80px
     from 1024px up — written as padding because every
     umd-layout-space-vertical-* utility in the build is a margin-bottom and
     none of them can put space above anything. See README, "Overrides". */
  padding-top: 56px;

  /* The component's scrim (.umd-hero-stacked__overlay) is 100vw by 100vh and
     centres on the hero, so it overruns the content column by about half a
     sidebar each side and would put a horizontal scrollbar on the page. The
     scrim is the only thing that overflows — the media band and its control
     size from the component's own box — but the containment is still needed.
     clip, not hidden: hidden would make this a scroll container and break
     the sticky text block. See README, "Known integration issues". */
  overflow-x: clip;
}

@media (min-width: 1024px) {
  #design-home #home-section-hero {
    padding-top: 80px;
  }
}

/* ------------------------------------------------------------
   2. Brand chevron + statement

   The chevrons ride up over the bottom of the hero, and the
   statement sits alongside them instead of below. Both live in
   one positioned wrapper so the overlap survives reflow.

   umd-element-brand-logo-animation is position:absolute and its
   shadow container is a 100vw band whose chevrons anchor to
   right:0 and translate rightward on a view() timeline — the
   "off the right side" motion is the component's own. The
   wrapper gives that absolute element a box, pulls its 100vw
   width back so right:0 lands on the content column's edge, and
   clips the exit.
------------------------------------------------------------ */
/* Chevrons + statement.

   The chevrons are laid out the way umd.edu does it: the wrapper is
   height: 0 with overflow: clip visible, so the animation takes no space in
   the flow at all and simply overlays whatever is around it — clipped
   horizontally, free to spill vertically. Anchoring the component to the
   wrapper's bottom edge lifts it above the statement and up into the hero.

   Because it costs no layout height, it does not have to clear the
   statement, and the statement can just centre normally.
------------------------------------------------------------ */
#design-home .umd-design-home-brand-statement {
  position: relative;
  margin-top: 64px;
  margin-bottom: 96px;
}

@media (min-width: 768px) {
  #design-home .umd-design-home-brand-statement {
    margin-top: 96px;
    margin-bottom: 160px;
  }
}

@media (min-width: 1024px) {
  #design-home .umd-design-home-brand-statement {
    margin-top: 160px;
    margin-bottom: 240px;
  }
}

/* Out of the flow (the umd.edu approach — the decoration costs no layout
   height and simply overlays what is around it), sitting level with the
   statement rather than above it.

   The chevrons fill roughly the top 70% of the component's 50vw band, so
   translateY(-35%) against top: 50% centres the artwork itself on the group
   rather than centring the band.

   Horizontal room is the real constraint: the statement is 1100px centred in
   a column that is the viewport less a 312px sidebar, leaving only
   (column - 1100) / 2 of clear space each side. Below 1700px that is too
   little for the artwork to sit beside the text, so it is hidden outright
   rather than lifted out of the way. It is decorative and aria-hidden, so
   nothing is lost when it goes. */
#design-home .umd-design-home-brand-bleed {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 50vw;
  max-height: 720px;
  transform: translateY(-35%);
  overflow: clip;
  pointer-events: none;
}

@media (min-width: 1700px) {
  #design-home .umd-design-home-brand-bleed {
    display: block;
  }
}

/* umd-element-brand-logo-animation is position:absolute and its shadow
   container is a 100vw band whose chevrons anchor to right:0 and translate
   rightward on a view() timeline — running off the page is the component's
   own motion. The negative right offset pushes the cluster further out, so
   what reads beside the statement is its leading edge rather than the whole
   mark. */
#design-home .umd-design-home-brand-bleed umd-element-brand-logo-animation {
  display: block;
  position: absolute;
  top: 0;
  bottom: auto;
  right: -7%;
  left: auto;
  width: 100vw;
  height: 100%;
}


/* ------------------------------------------------------------
   3. Statement — DS quote animation, campaign display face

   Type comes from .umd-campaign-small (Barlow Condensed bold
   italic, 44px at desktop). Nothing here restates the font.
------------------------------------------------------------ */
/* Width and gutter come from the .umd-layout-space-horizontal-small wrapper
   in home.html (max-width: 992px, 64px each side at desktop) — this rule
   must not restate them or it will fight the class. */
#design-home .umd-design-home-statement {
  margin: 0;
  padding: 0;
  /* .umd-campaign-small ships 0.91em, which is tight for a multi-line
     display block at this measure. Size and face stay the class's. */
  line-height: 1.1;
  text-align: center;
  color: var(--umd-color-black);
  text-wrap: balance;
}

/* Word spans injected by initStatement(); mirrors the DS quote element. */
/* vertical-align: top because inline-block defaults to baseline, which grows
   every line box by the descender. No white-space: pre-wrap — the spaces are
   text nodes between the spans, not inside them, so the copy wraps exactly as
   it would unsplit. See initStatement(). */
#design-home .umd-design-home-statement .quote-text-split-word {
  display: inline-block;
  vertical-align: top;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 0.5s ease;
}

@media (max-width: 767px) {
  #design-home .umd-design-home-statement {
    max-width: none;
  }
}

/* ------------------------------------------------------------
   4. See the design system in use — angled drifting columns
------------------------------------------------------------ */
#design-home .umd-design-home-in-use {
  position: relative;
  overflow: hidden;
  background-color: var(--umd-color-black);
  min-height: 640px;
  height: 78vh;
  max-height: 900px;
}

#design-home .in-use-stage {
  position: absolute;
  /* Oversized so the rotation never exposes a corner. Mostly vertical:
     too much horizontal bleed and the tiles blow past the ~1/3-of-band
     width the design draws them at. */
  inset: -35% -8%;
  display: flex;
  justify-content: center;
  gap: 2.5%;
  transform: rotate(-8deg);
  transform-origin: center center;
}

#design-home .in-use-column {
  flex: 1 1 0;
  max-width: 33%;
  overflow: hidden;
}

#design-home .in-use-track {
  display: flex;
  flex-direction: column;
  gap: var(--umd-space-md);
  will-change: transform;
}

#design-home .in-use-track img {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--umd-color-gray-darker);
}

/* Opposing directions. Each track holds its tiles twice, so a
   -50% translate lands exactly on the duplicate and loops clean. */
#design-home .in-use-column[data-direction="up"] .in-use-track {
  animation: umd-in-use-up 70s linear infinite;
}

#design-home .in-use-column[data-direction="down"] .in-use-track {
  animation: umd-in-use-down 86s linear infinite;
}

/* Slight desync so the three columns never march in lockstep. */
#design-home .in-use-column:nth-child(3) .in-use-track {
  animation-duration: 78s;
}

@keyframes umd-in-use-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}

@keyframes umd-in-use-down {
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* Headline + CTA sit over a bottom gradient, per the design. */
#design-home .in-use-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--umd-space-md);
  padding: var(--umd-space-max) var(--umd-space-lg) var(--umd-space-xl);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.8) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

#design-home .in-use-headline {
  /* size and face come from .umd-sans-extralarge-uppercase */
  margin: 0;
  letter-spacing: -1px;
  color: var(--umd-color-white);
}

/* Motion toggle. Geometry, colour, hover and icon size are the design
   system's .umd-action-button-video-state verbatim (web-components-library
   1.19.5, XA.action.button.videoState) — the control the hero's video draws
   in its bottom-right corner. Only the corner changes: this one sits top
   right, clear of the headline and CTA in the bottom gradient. The class is
   ours because that DS class lives in the component's shadow root and is not
   published to the page. */
#design-home .in-use-motion-toggle {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s;
}

/* home.js drops the attribute once the click handler is attached. */
#design-home .in-use-motion-toggle[hidden] {
  display: none;
}

@media (min-width: 768px) {
  #design-home .in-use-motion-toggle {
    width: 44px;
    height: 44px;
  }
}

#design-home .in-use-motion-toggle:hover,
#design-home .in-use-motion-toggle:focus {
  background-color: rgba(0, 0, 0, 1);
}

/* The hero's control relies on that background darkening alone to show
   focus, which it can afford inside its shadow root — it still has the UA
   ring. Out here the site's reset strips outlines from every button under
   #design-home, and black-on-black is not an indicator, so the ring is
   redrawn. Inset, because the chip sits in the section's top corner and the
   section clips its overflow. */
#design-home .in-use-motion-toggle:focus-visible {
  outline: 3px solid var(--umd-color-gold);
  outline-offset: -3px;
}

#design-home .in-use-motion-icon {
  display: block;
  width: 20px;
  fill: var(--umd-color-white);
}

/* One icon at a time. Both ship in the markup so the swap is a class
   change, not an innerHTML rewrite. */
#design-home .in-use-motion-icon-play {
  display: none;
}

#design-home .umd-design-home-in-use.is-paused .in-use-motion-icon-pause {
  display: none;
}

#design-home .umd-design-home-in-use.is-paused .in-use-motion-icon-play {
  display: block;
}

/* Pausing the play state, not the animation, so the columns hold their
   current offset and resume from it rather than snapping to the top.
   Three classes each, so both of these outrank the reduced-motion default
   at the foot of this file without !important. */
#design-home .umd-design-home-in-use.is-paused .in-use-track {
  animation-play-state: paused;
}

#design-home .umd-design-home-in-use.is-playing .in-use-track {
  animation-play-state: running;
}

/* ------------------------------------------------------------
   5. Benefits — watermark numerals, sticky panel

   The rail's red line runs up to meet the dark mosaic section
   above, with the "Benefits" label sitting below the line. Each
   numeral is an outlined watermark at 400px in the campaign face,
   with the headline and copy stacked on top of it.
------------------------------------------------------------ */
/* The rail line has to start on the dark section's edge, so close the gap
   the shared .umd-design-home-section bottom margin would otherwise leave. */
#design-home #home-section-in-use {
  margin-bottom: 0;
}

#design-home .umd-design-home-benefits {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: var(--umd-space-3xl);
}

#design-home .benefits-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--umd-space-lg);
}

/* The line and label pin to the top of the viewport and stay there for the
   whole 01–03 run. The line starts at the section's top edge — the bottom
   edge of the dark mosaic — and shortens to its sticky length as the rail
   lifts off. */
#design-home .benefits-rail {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Shrink to the label's own width so the word starts on the lock
     content's 120px edge, in line with every other section's headline.
     Stretched to the full grid column, align-items: center pushed it
     ~37px inboard of that edge. The column keeps its 120px — that sets
     the gutter between the rail and the copy, so the panel does not
     move — and align-items still centres the 2px line on the word. */
  width: fit-content;
}

/* Runs from the section's top edge — the bottom edge of the dark mosaic —
   down to the label.

   This was briefly tied to the copy's top offset so the label would end
   exactly on the first panel's headline. That only holds before the rail
   pins, and forcing it pushed the copy 325px down the section, which read
   too low. The two are independent again: the label now runs a little past
   where the copy starts, which is also what the Figma frame does (headline
   ~88px above the label's end). */
#design-home .benefits-rail-line {
  display: block;
  width: 2px;
  flex: 0 0 auto;
  height: 160px;
  background-color: var(--umd-color-red);
}

#design-home .benefits-rail-label {
  /* size comes from .umd-sans-largest */
  flex: 0 0 auto;
  color: var(--umd-color-black);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-top: var(--umd-space-md);
  white-space: nowrap;
}

/* Brings the copy clear of the section's top edge without dropping it so far
   that the first panel starts low. Independent of the rail's line length. */
#design-home .benefits-track {
  margin: 0;
  padding: var(--umd-space-max) 0 0;
  list-style: none;
}

/* Each step owns a screenful of scroll; its panel sticks for that
   stretch, so the number and copy swap as you move down the page. */
#design-home .benefits-step {
  min-height: 92vh;
}

/* Numeral and copy share one grid cell so the text sits on top of the
   watermark. */
#design-home .benefits-panel {
  position: sticky;
  top: 180px;
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
  padding-block: var(--umd-space-min);
}

#design-home .benefits-number,
#design-home .benefits-body {
  grid-area: stack;
}

#design-home .benefits-number {
  margin: 0;
  justify-self: start;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 400px;
  line-height: 0.72;
  letter-spacing: 0.02em;

  /* Outline only — the fill is knocked out so the copy stays readable
     over it. */
  color: transparent;
  -webkit-text-stroke: 2px var(--umd-color-gray-light);
  user-select: none;
}

#design-home .benefits-body {
  position: relative;
  max-width: var(--umd-space-maxWidth-smallest);
  padding-left: 240px;
}

#design-home .benefits-headline {
  /* size comes from .umd-sans-extralarge-uppercase */
  margin: 0 0 var(--umd-space-sm);
  color: var(--umd-color-black);
}

#design-home .benefits-text p {
  margin: 0;
  color: var(--umd-color-gray-dark);
}

/* Progressive enhancement: initBenefits() adds .is-observed to the
   section, which turns on the cross-fade. Without JS every panel
   simply stays at full opacity.

   The numeral and the copy fade independently so the panel can
   assemble rather than arrive all at once: the watermark lands
   first, the copy follows a beat later. */
#design-home .umd-design-home-benefits.is-observed .benefits-number,
#design-home .umd-design-home-benefits.is-observed .benefits-body {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#design-home .umd-design-home-benefits.is-observed .benefits-step.is-active .benefits-number {
  opacity: 1;
}

/* The only real change: the copy waits out the numeral's head start.
   The delay lives on the active rule alone, so a panel leaving focus
   dims as a single unit — a stagger on the way out reads as lag. */
#design-home .umd-design-home-benefits.is-observed .benefits-step.is-active .benefits-body {
  opacity: 1;
  transition-delay: 0.5s;
}

/* Scroll progress for the run, sitting in the copy column under the panel.

   sticky with `bottom` rather than `top`: the bar's natural position is the
   last row of the layout, far below the fold, so it stays perched 120px off
   the viewport foot for the whole run and only settles into flow as the
   section ends. That keeps it under the pinned panel without needing to know
   how tall the panel is.

   The fill is driven by --benefits-progress (0-1), set on the section by
   initBenefitsProgress(). scaleX rather than width so the update stays on the
   compositor -- it runs on every frame of scroll. */
#design-home .benefits-progress {
  grid-column: 2;
  position: sticky;
  bottom: 120px;
  height: 6px;
  background-color: var(--umd-color-gray-light);
  transition: opacity 0.4s ease;
}

#design-home .benefits-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--umd-color-red);
  transform: scaleX(var(--benefits-progress, 0));
  transform-origin: left center;
}

/* Out of the way at either end of the run: clear of the 01 panel on the way
   back up, and gone once 03 is done. */
#design-home .benefits-progress.is-waiting,
#design-home .benefits-progress.is-complete {
  opacity: 0;
}

@media (max-width: 1279px) {
  #design-home .benefits-number {
    font-size: 280px;
  }

  #design-home .benefits-body {
    padding-left: 120px;
  }
}

@media (max-width: 767px) {
  #design-home .benefits-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--umd-space-md);
  }

  /* Sat centred against the 96px line, which left it floating in space.
     Dropping it to the foot of the line ties the label to the rule and
     pulls it down towards the first numeral. */
  #design-home .benefits-rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--umd-space-sm);
  }

  #design-home .benefits-rail-line {
    width: 2px;
    flex: 0 0 auto;
    height: 96px;
  }

  #design-home .benefits-rail-label {
    writing-mode: horizontal-tb;
    transform: none;
    padding-top: 0;

    /* flex-end aligns the text's box, not its baseline, and the box
       carries ~7px of descender and half-leading below it. "Benefits"
       has no descenders, so without this the word visibly stops short
       of the rule. Pull it down so the letters sit on the line's foot. */
    margin-bottom: -7px;
  }

  /* The desktop panel stacks the copy on top of the numeral in a single
     grid cell. There isn't width for that here, so the cell becomes two
     rows: numeral first, copy pulled back up so the headline just clips
     its lower edge. Mostly above, slightly overlapping. */
  #design-home .benefits-number {
    grid-area: numeral;
    font-size: 180px;
  }

  #design-home .benefits-body {
    grid-area: copy;
    padding-left: 24px;
    margin-top: -24px;
  }

  /* The desktop offset clears a sticky rail that doesn't exist here;
     without it the label and the first numeral read as one group. */
  #design-home .benefits-track {
    padding-top: 0;
  }

  /* No pinning on small screens — the three benefits just stack. */
  #design-home .benefits-step {
    min-height: 0;
    margin-bottom: var(--umd-space-2xl);
  }

  #design-home .benefits-panel {
    position: static;
    grid-template-areas: "numeral" "copy";
    align-items: start;
  }

  /* The bar measures progress through a pinned run. Nothing pins here --
     the benefits are just three blocks in flow -- so it has nothing to say. */
  #design-home .benefits-progress {
    display: none;
  }

  /* Nothing pins at this width, so there is no focused panel to
     distinguish from its neighbours — every benefit is simply present.
     transition:none also neutralises the copy's delay, so the .is-active
     rule above has no effect here. */
  #design-home .umd-design-home-benefits.is-observed .benefits-number,
  #design-home .umd-design-home-benefits.is-observed .benefits-body {
    opacity: 1;
    transition: none;
  }
}

/* ------------------------------------------------------------
   6. Common components carousel
------------------------------------------------------------ */

/* dsHome.css gives these cards a full 1px #454545 box
   (umd-design-card-components[theme=dark][data-border]). Dropping the right
   edge stops each card closing itself off against the next one along the
   track. The #design-home prefix is enough to win on specificity, so no
   !important. */
#design-home umd-design-card-components[theme="dark"][data-border] {
  border-right: none;
}

/* ------------------------------------------------------------
   Reduced motion — hold everything at its final state
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* Held still by default rather than stripped, so the toggle can still
     start the drift for anyone who asks for it. .is-playing outranks this. */
  #design-home .in-use-column .in-use-track {
    animation-play-state: paused;
  }

  #design-home .umd-design-home-statement .quote-text-split-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #design-home .umd-design-home-benefits.is-observed .benefits-number,
  #design-home .umd-design-home-benefits.is-observed .benefits-body {
    opacity: 1;
    transition: none;
    transition-delay: 0s;
  }

  /* The fill still tracks scroll -- that is information, not decoration --
     but the hand-off to the empty state is immediate. */
  #design-home .benefits-progress {
    transition: none;
  }
}