/* ==========================================================================
   03-LAYOUT.CSS  —  container, section rhythm, shared utilities
   The structural scaffolding every section sits inside.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTAINER
   Caps content at 1200px, centres it, and keeps a comfortable gutter on the
   sides. max() with env() means the content also clears the rounded corners
   and camera notch on modern phones.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   SECTION RHYTHM
   Future sections get this class for consistent vertical breathing room.
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--space-8);
}

/* Empty placeholders for sections not built yet. They exist purely so the
   menu links have something to scroll to, and so nothing needs rearranging
   when each section is added. They take up no space. */
.section-stub {
  display: block;
  height: 0;
}

/* --------------------------------------------------------------------------
   BODY COPY MEASURE
   Long lines are hard to read. Nothing wearing this class runs past 68
   characters, no matter how wide the screen gets.
   -------------------------------------------------------------------------- */
.measure {
  max-width: var(--measure);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   EYEBROW
   The small letter-spaced label with a short orange rule on either side,
   exactly like the "Invite · Impress · Inspire" line in the printed logo.

   Used above the hero wordmark and above every section heading. Add the
   --section modifier for the slightly shorter rules used in sections.

        ──── WE'RE WORKING ON ────
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
  line-height: 1;
}

.eyebrow::before,
.eyebrow::after {
  content: "";
  display: block;
  height: 1px;
  background-color: var(--orange);
  /* Full length as designed, but allowed to shrink on very narrow phones so
     the rule never pushes past the edge of the screen */
  flex: 0 1 var(--rule-w);
  min-width: 16px;
}

.eyebrow--section::before,
.eyebrow--section::after {
  flex-basis: var(--rule-w-section);
}

.eyebrow__text {
  flex: 0 0 auto;
  /* the trailing letter-space would otherwise push the text off centre */
  margin-right: calc(var(--ls-eyebrow) * -1);
}

/* --------------------------------------------------------------------------
   CARD
   The shared look of every card on the site — the white surface, the hairline
   border, the rounded corners, the soft shadow, and the small lift on hover.

   Used by the template cards in Section 2 and the feature cards in Section 4.
   They must look like they came from the same studio, so the appearance is
   defined once, here, and each section only adds what is unique to it.
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;

  transition:
    transform    var(--dur-base) var(--ease-out),
    box-shadow   var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

/* Hover effects only on devices that actually have a pointer. On a phone a
   "hover" is really a tap, and a card that shifts under your finger feels
   broken rather than responsive. */
@media (hover: hover) {

  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--hairline-strong);
  }
}

/* --------------------------------------------------------------------------
   UTILITIES
   -------------------------------------------------------------------------- */

/* Visible to screen readers, invisible on screen */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   PAGE-LOAD SEQUENCE
   Each item fades up 20px into place, one after another, 90ms apart.
   `both` fill mode holds the item hidden during its delay and keeps it
   visible afterwards, so this runs once on load and never repeats.
   The order is set with --load-step on each element (0, 1, 2, 3...).
   -------------------------------------------------------------------------- */
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.load-item {
  animation: rise-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--load-step, 0) * var(--stagger));
}

/* --------------------------------------------------------------------------
   SCROLL REVEALS (for every section built after this one)
   Add data-reveal to any element and it fades up when it scrolls into view.
   Add data-reveal-delay="120" to hold it back 120ms for a staggered group.
   See js/animations.js for the observer that drives this.

   The .js class is added to <html> by a one-line script in the <head>, so if
   JavaScript is switched off these elements are simply visible from the start
   rather than stuck invisible forever.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}