/* ==========================================================================
   PADDIO BANGNA — "Origin of the name" section + the word-merge device
   Loaded after shared/consumer.css. Pairs with shared/namestory.js. On a
   page with no #origin it does nothing.

   WHY THIS SECTION IS DARK. The brief tints the shared letters in --lime
   (#D6E865) and the borrowed ones in --green-mid (#00BB7E). Lime on the cream
   the neighbouring sections use is about 1.3:1 — invisible, not subtle. Both
   tints are legible on --leaf-deep, which is also what brand.css already does
   for .pb inside the dark .enq band, so the section takes the dark treatment
   rather than the colours being quietly swapped for something else.
   ========================================================================== */

#origin { background: var(--leaf-deep); color: #fff; position: relative; overflow-x: clip; }
#origin h2 { color: #fff; }
#origin h2 em { color: var(--lime); font-style: normal; }
#origin .eyebrow { color: var(--lime); }
#origin .body-lg,
#origin p { color: rgba(255, 255, 255, .82); }
/* The "na" inside Bangna, and the na it explains. Tinting both makes the
   connection visible instead of only asserted — the same device the merge uses
   on PA and IO, so the section teaches the reader to look for it once and then
   reuses it. The one inside the place name is upright because it is part of a
   proper noun; the standalone one stays italic because it is a word being
   quoted as a word. */
#origin .na            { color: var(--lime); font-style: normal; }
#origin .body-lg em.na { color: var(--lime); font-style: italic; }
#origin .body-lg em    { color: var(--sage); font-style: italic; }
/* Plain h3, not .as-h4. as-h4 is 17px, which is SMALLER than the 19px
   .body-lg paragraph immediately above it — the sub-heading was losing to the
   text it introduces. as-h4 exists for card titles sitting under an h2 with no
   h3 between; this is a real section sub-heading, so it takes the h3 size the
   rest of the site uses (22px) and the ladder reads 64 / 22 / 19. */
#origin h3 { color: #fff; }

/* --------------------------------------------------------------------------
   THE WORD MERGE

   PADDY and PATIO sit side by side; the letters that do not survive into
   PADDIO fade out, and the two that do — PADD and IO — close the gap.

   There is no crossfade and no third word underneath. The merged word IS the
   surviving letters, moved into place, so at no point are two pieces of text
   stacked on top of each other. That is also why the letters can be tinted
   consistently: the lime PA you end up with is literally the lime PA you
   started with.

   Only transform and opacity animate. The gap is closed by translating the IO
   group left, never by collapsing the width of the letters between them,
   which would be a layout animation on every frame.
   -------------------------------------------------------------------------- */
.wordmerge {
  --wm-ease: cubic-bezier(.16, 1, .3, 1);
  --wm-ease-slide: cubic-bezier(.5, 0, .2, 1);   /* even, not front-loaded — see below */
  --wm-shift: 0px;
  margin: 30px 0 34px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.04;
  font-size: clamp(40px, 8.5vw, 92px);
  color: #fff;
  /* The row is nowrap and can be wider than the viewport mid-merge on a narrow
     screen; clip rather than scroll. The section is position:relative above,
     so this actually bites. */
  overflow-x: clip;
}
/* Reserves the line box before the script has measured anything, so nothing
   below the device moves when the split is built or when it collapses. */
.wm-row { display: inline-flex; align-items: baseline; white-space: nowrap; }
.wm-l   { display: inline-block; }

.wm-pa { color: var(--lime); }
.wm-io { color: var(--green-mid); }

/* The separator between the two source words. Present only once split. */
.wm-sep { display: inline-block; padding: 0 .18em; color: rgba(255,255,255,.34); font-weight: 400; }

/* The merge. Droppers go first and the survivors follow them in, overlapping
   slightly so it reads as one gesture rather than two steps.

   These transitions are declared on the elements themselves, NOT under
   [data-wm="split"]. Scoping them to the start state means they stop matching
   the instant the attribute flips to "merged", and the whole thing snaps
   instead of animating.

   The .7s hold is load-bearing, not padding. Without it the letters start
   dissolving on the frame the section arrives and PADDY + PATIO are never
   legible — which is the one thing the device exists to show.

   Runtime is 4.9s, against 1.67s when this was first built and 2.15s after the
   first slow-down. At the earlier speeds the letters were gone before you had
   read them, which wastes the only idea the device has.

   NEITHER STEP USES THE BRIEF'S EASING, and that is not an oversight.
   cubic-bezier(.16, 1, .3, 1) spends almost all of its distance in the opening
   moments. That is right for a short flourish and wrong here: measured, it put
   the whole fade into the first 900ms of a 1.9s transition and the slide into
   the first third of 3s, so slowing the durations down bought a snap followed
   by a long crawl rather than a slower gesture. Both now use an even curve, so
   the extra time is actually spent moving.

   The slide starts at 1.9s, just before the fade finishes at 2.3s. Overlapping
   them slightly keeps it one continuous gesture; with the slide starting after
   the fade there was a visible dead beat in the middle where nothing happened. */
.wordmerge .wm-drop   { opacity: 1; transition: opacity 1.6s var(--wm-ease-slide) .7s; }
.wordmerge .wm-keep-b,
.wordmerge .wm-row    { transform: translateX(0); transition: transform 3s var(--wm-ease-slide) 1.9s; }

/* Replaying: snap back to the split state with no transition at all, then let
   the normal rules animate forward again on the next frame. Without this the
   reset would itself animate, and the word would visibly un-merge first. */
.wordmerge.wm-instant .wm-drop,
.wordmerge.wm-instant .wm-keep-b,
.wordmerge.wm-instant .wm-row { transition: none !important; }
.wordmerge[data-wm="merged"] .wm-drop    { opacity: 0; }
.wordmerge[data-wm="merged"] .wm-keep-b  { transform: translateX(var(--wm-shift)); }
/* Re-centre: the word is now narrower by the dropped run, so the row slides
   back by half of it and the merged PADDIO ends up centred where it began. */
.wordmerge[data-wm="merged"] .wm-row     { transform: translateX(calc(var(--wm-shift) / -2)); }

/* --------------------------------------------------------------------------
   REPLAY

   The word replays itself when you point at it, and on tap. There is no
   button: a labelled control for a decorative flourish is more furniture than
   the flourish is worth, and the section reads perfectly without ever seeing
   the animation — the two source words are named in the heading and spelled
   out in the body.

   The cursor is the only hint, which is the right weight for something
   optional. Under prefers-reduced-motion even that goes, because there is
   nothing to replay: the word never split.
   -------------------------------------------------------------------------- */
.wordmerge { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .wordmerge { cursor: auto; } }

/* --------------------------------------------------------------------------
   NEIGHBOURS
   -------------------------------------------------------------------------- */
.nbr { list-style: none; margin: 22px auto 0; max-width: 640px; text-align: left; }
.nbr li {
  display: grid; grid-template-columns: 128px 1fr; gap: 6px 20px;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .13);
}
.nbr li:last-child { border-bottom: none; }
.nbr .k {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage); padding-top: 3px;
}
.nbr .v { font-size: 15.5px; color: rgba(255, 255, 255, .88); }
html[lang="th"] .nbr .k { letter-spacing: .04em; text-transform: none; }

@media (max-width: 560px) {
  .nbr li { grid-template-columns: 1fr; gap: 4px; }
  .nbr .k { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   NO MOTION

   Not a reduced version of the animation — no animation at all. The script
   never splits the word, so what stays on screen is the merged PADDIO that
   was in the markup to begin with, exactly as a visitor with JavaScript off
   would see it. The two source words are named in the heading and spelled out
   in the body copy, so nothing is lost by never showing them separately.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wordmerge .wm-row,
  .wordmerge .wm-drop,
  .wordmerge .wm-keep-b { transition: none !important; transform: none !important; opacity: 1 !important; }
}