/* About. Floating category picker + reveal-one-section-at-a-time is
   our interaction on top of the static design. Motion: js/about-float.js. */

.about__hero {
  display: block;
  width: 100%;
  height: auto;
}

.about__intro {
  margin-top: 1.5rem;
  max-width: 50em; /* measure cap, same convention as legal.css */
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

.about__intro :is(p) + :is(p) {
  margin-top: 1em;
}

/* Floating arena — a fixed height "stage" the categories drift and
   bounce inside (js/about-float.js takes over their positioning with
   position:absolute + transform once it boots; this height is also the
   sane static/no-JS fallback, since the buttons stay in normal flow
   otherwise and are still fully clickable/keyboard-operable). */
.about__categories {
  position: relative;
  margin-top: 2rem;
  height: 26rem;
  overflow: hidden;
}

/* pre-placement guard: the absolute bodies pile at 0,0 until the arena's
   first layout. has-arena lands at script parse, is-placed on placement
   (float-arena.js) — without JS neither exists and nothing is hidden. */
.about__categories.has-arena:not(.is-placed) .about__category {
  visibility: hidden;
}

.about__category {
  /* selected-state growth; one value the CSS scale and the arena's
     collision box (about-float.js) both read */
  --category-scale: 1.03;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.about__category-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: scale 0.3s ease-out; /* the deflate — no bounce on the way down */
}

/* Icon size is the uniform rule (Objects/Gatherings' size, applied to all
   four) — fixed HEIGHT with width auto, not the other way round: the source
   illustrations are cropped to their own ink (no padding), but still carry
   different aspect ratios, and Tea/For Businesses are the widest/flattest —
   fixing width instead would leave their actual artwork short and small.
   The button itself hugs its widest child (icon or label) instead of a
   shared fixed width, so the label pill can size to its own text too. */
.about__category-icon {
  display: block;
  width: auto;
  height: 4.3333rem; /* ~69px, sized by eye against the arena */
}

/* phones only — tablet bands and desktop keep the base size */
@media (max-width: 45.9375rem) {
  .about__category-icon {
    height: 3.9rem; /* 10% off the base 4.3333rem */
  }
}

/* iPad-portrait band: half the phone's full-bleed size, centered — also
   keeps the size ramp continuous with the desktop cell above (≈45vw) */
@media (min-width: 46rem) and (max-width: 71.9375rem) {
  .about__hero {
    width: 50%;
    margin-inline: auto;
  }
}

.about__category-label {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
  padding: 0.3em 0.75em;
  border: var(--border-thin);
  border-radius: var(--radius-l);
  background: transparent; /* deliberate deviation from the design's white */
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.about__category:hover .about__category-label,
.about__category:focus-visible .about__category-label,
.about__category[aria-current] .about__category-label {
  background: var(--category-color);
  font-weight: var(--weight-semibold);
}

/* The selected one boings: the linear() curve (the current-practice way
   to hand-shape spring motion in pure CSS, developer.chrome.com/docs/
   css-ui/css-linear-easing-function) peaks at 2.5x the scale delta and
   swings under and over the target twice before settling, with a small
   tilt shake riding along. The easing overshoot must be this exaggerated
   because it works on the DELTA (0.03-0.1) — a textbook spring's ~1.16
   peak reads as no bounce at all at these sizes. Browsers without
   linear() drop that longhand and keep the bezier declared before it.
   about-float.js reserves the 2.5x peak in the arena's collision box —
   keep the two in step. */
.about__category[aria-current] .about__category-inner {
  scale: var(--category-scale);
  transition: scale 0.8s cubic-bezier(0.3, 2.5, 0.4, 1);
  transition-timing-function: linear(
    0, 0.36 6%, 1.2 14%, 2.2 22%, 2.5 26%, 2.2 31%, 1.1 40%,
    0.55 47%, 0.9 55%, 1.45 63%, 1.2 70%, 0.9 78%, 1.05 88%, 1
  );
}

/* Only once the visitor has clicked (about-float.js marks the stage):
   unlike the scale, which is a transition and needs a state change, an
   animation plays on first paint too — the server-selected category
   would wiggle at every page load. */
.is-live .about__category[aria-current] .about__category-inner {
  animation: about-wiggle 0.8s ease-in-out;
}

@keyframes about-wiggle {
  20% { rotate: -5deg; }
  45% { rotate: 4deg; }
  70% { rotate: -2deg; }
  100% { rotate: 0deg; }
}

/* cartoon impact when two icons collide (about-float.js sets the class):
   squash wide, rebound tall, settle */
.about__category-icon.is-bumped {
  animation: about-bump 0.45s ease-out;
}

@keyframes about-bump {
  30% { scale: 1.15 0.85; }
  60% { scale: 0.94 1.06; }
  100% { scale: 1; }
}

/* Fully exempt from the site-wide motion collapse (base.css), like the
   drift this widget already keeps: a small user-triggered icon bounce is
   not the large/vestibular motion WCAG 2.3.3 guards against, and
   collapsed it reads as a broken state switch. Durations only — base.css
   doesn't touch timing functions, so the spring curve survives as-is. */
@media (prefers-reduced-motion: reduce) {
  .about__category-inner {
    transition-duration: 0.3s !important;
  }

  .about__category[aria-current] .about__category-inner {
    transition-duration: 0.8s !important;
    animation-duration: 0.8s !important;
  }

  .about__category-icon.is-bumped {
    animation-duration: 0.45s !important;
  }
}

/* One-off palette sampled from the design's per-section pill fills
   (each section had its own distinct color, node fills carry opacity —
   rendered/flattened value used here) — cycles by structure-row index,
   so a 5th category added later just gets the first color again. */
.about__category--1 { --category-color: #fdffc5; } /* Tea */
.about__category--2 { --category-color: #95ff7a; } /* Objects */
.about__category--3 { --category-color: #ff7070; } /* Gatherings */
.about__category--4 { --category-color: #bb9a67; } /* For Businesses */

.about__sections {
  display: grid;
  margin-top: 1.5rem;
  margin-bottom: var(--space-3);
}

.about__section {
  /* All sections stack in one grid cell (aria-hidden keeps the inactive
     ones in flow), so the grid holds the tallest one's height and the
     footer never jumps when switching. */
  grid-area: 1 / 1;
  max-width: 50em; /* measure cap, same convention as legal.css */
  font-size: var(--text-body); /* 20px */
  font-weight: var(--weight-regular);
  line-height: 1.3;
}

.about__section[aria-hidden='true'] {
  visibility: hidden;
}

.about__section :is(p) + :is(p) {
  margin-top: 1em;
}

/* ============================================================
   Desktop. One screenful under the header: hero over intro on the
   left, the floating category arena over its section text on the right.
   ============================================================ */

@media (min-width: 72rem) {
  .about {
    --about-band: calc(96svh - 2.78125rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* minmax, or the hero's own height pushes the top row past its share
       and the text row off the bottom of the band */
    grid-template-rows: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-areas:
      "hero  arena"
      "intro sections";
    column-gap: var(--space-5);
    row-gap: var(--space-4);
    /* flex:none, or .page's own `flex: 1 1 0%` (base.css) overrides this
       height with a content-driven one — and the fr rows then size to
       their content instead of splitting the band */
    flex: none;
    height: calc(100svh - 2.78125rem);
    min-height: 0;
    padding-block: 2svh;
    overflow: hidden;
  }

  /* Fills its grid cell and lets the drawing scale inside it —
     width: auto stopped the art at its intrinsic thumb size, leaving
     the column half-empty on wide screens. */
  .about__hero {
    grid-area: hero;
    align-self: start;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: left top;
  }

  .about__intro {
    grid-area: intro;
    margin-top: 0;
  }

  /* the arena's fixed mobile height is a no-JS fallback; here the row
     it sits in is what bounds the drift */
  .about__category {
    --category-scale: 1.14; /* more air here than in the mobile arena */
  }

  .about__categories {
    grid-area: arena;
    height: auto;
    min-height: 0;
    margin-top: 0;
  }

  .about__sections {
    grid-area: sections;
    margin-top: 0;
    margin-bottom: 0;
    /* the band clips overflow (.about) — text longer than the row
       scrolls inside its cell instead of vanishing (the ES copy runs
       longer than the EN it was sized around) */
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-2); /* lane for the scrollbar, off the text */
  }

  /* here the cell's height is the band's, not the tallest section's, so
     the mobile stacking (kept in flow against footer jumps) would only
     make the visible text scroll for hidden text's sake */
  .about__section[aria-hidden='true'] {
    display: none;
  }
}

/* landscape tablets — after the desktop block so these win in the band */
@media (min-width: 72rem) and (max-width: 85.4375rem) {
  /* Row 1 restated as the arena's own box so the 12px row-gap below it
     is the exact icons-to-text spacing, and the text row reclaims the
     rest. Height: 47.852svh minus 2.3834rem (~38px). */
  .about {
    grid-template-rows: calc(47.852svh - 2.3834rem) minmax(0, 1fr);
    row-gap: 0.75rem;
  }

  .about__categories {
    height: 100%;
  }

  /* explicit row-1 height (same formula as the grid rows above): iPad
     Safari resolves the base height:100% against the wrong box and the
     art overlaps the text row below */
  .about__hero {
    height: calc(47.852svh - 2.3834rem);
  }

  .about__category-icon {
    height: 3.25rem; /* 25% off the base 4.3333rem */
  }

  /* the pill follows the icon down a step */
  .about__category-label {
    font-size: var(--text-ui);
  }
}

/* big desktops: at full cell size the hero drawing reads oversized —
   half the box, the art follows via object-fit */
@media (min-width: 100rem) {
  .about__hero {
    width: 50%;
    height: 50%;
  }
}