/* peak footer (motion v4): pink sign-off under a living wavy edge. A huge "Reach your peak.", a heart button,
   two crossing tapes with their lines, the giant wordmark that rises letter by letter and turns into the p,
   and the bottom bar. Tokens come from styles.css. Without JS or with reduced motion it is a calm, complete footer. */
.foot { position: relative; color: var(--ink); background: var(--ink); overflow: clip; }

.foot__wave { display: block; width: 100%; height: clamp(34px, 5.5vw, 78px); fill: var(--pink); margin-bottom: -1px; }
.foot__panel { background: var(--pink); padding: 8px var(--gutter) calc(20px + var(--safe-bottom)); }
.foot__inner { max-width: 1280px; margin-inline: auto; display: grid; gap: 40px; }

/* ---------- sign-off ---------- */
.foot__sign { position: relative; padding-top: 12px; }
.foot__kicker { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.foot__title {
  margin: 14px 0 24px; max-width: 11ch;
  font-size: clamp(3.4rem, 1rem + 11vw, 10.5rem); font-weight: 600; line-height: .9; letter-spacing: -.045em;
}
:lang(ar) .foot__title { line-height: 1.2; font-size: clamp(3.2rem, 1rem + 10vw, 9.5rem); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
.foot__sub { max-width: 30ch; text-wrap: balance; font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem); font-weight: 500; line-height: 1.3; }
:lang(ar) .foot__sub { line-height: 1.6; }

/* the heart button: a counter that remembers your taps (this browser only) */
.foot__love {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding-inline: 10px 8px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: rgb(255 255 255 / .22);
  font-size: .9375rem; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s var(--ease), scale .3s var(--spring);
}
html:not(.js) .foot__love { display: none; }
.foot__love:active { scale: .94; }
.foot__love-heart { width: 30px; height: 30px; fill: var(--paper); stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; overflow: visible; }
.foot__count {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding-inline: 8px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: .875rem; font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .foot__love:hover { background: rgb(255 255 255 / .45); } }
.foot__burst { position: absolute; z-index: 5; width: 22px; height: 20px; pointer-events: none; fill: var(--paper); stroke: var(--ink); stroke-width: 7; overflow: visible; }

/* hand-drawn doodles (drawn in and animated by footer.js) */
.doodle { position: absolute; fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; overflow: visible; }
.doodle--smile { width: clamp(64px, 11vw, 132px); inset-inline-end: 4px; top: 0; rotate: 10deg; }
.doodle--heart { width: clamp(44px, 7vw, 86px); inset-inline-end: clamp(80px, 16vw, 220px); top: clamp(120px, 18vw, 280px); rotate: -12deg; stroke: var(--paper); stroke-width: 6; }
[dir="rtl"] .doodle--smile { rotate: -10deg; }
[dir="rtl"] .doodle--heart { rotate: 12deg; }
@media (prefers-reduced-motion: no-preference) {
  .doodle--heart { animation: foot-beat 2.8s var(--ease) infinite; transform-origin: 50% 60%; }
  @keyframes foot-beat { 0%, 70%, 100% { scale: 1; } 78% { scale: 1.14; } 86% { scale: .96; } 93% { scale: 1.07; } }
}

/* ---------- links + address ---------- */
.foot__links { border-top: 1.5px solid rgba(43, 43, 46, .85); }
.foot__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; border-bottom: 1.5px solid rgba(43, 43, 46, .85); text-decoration: none; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 600; letter-spacing: -.01em; transition: padding .35s var(--ease), background-color .25s; }
:lang(ar) .foot__link { letter-spacing: 0; }
.foot__link svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--spring); }
[dir="rtl"] .foot__link svg { transform: scaleX(-1); }
.foot__handle { font-size: .62em; font-weight: 500; margin-inline-start: .35em; }
@media (hover: hover) {
  .foot__link:hover { padding-inline: 14px; background: rgba(255, 255, 255, .28); }
  .foot__link:hover svg { transform: translateX(6px) rotate(-8deg); }
  [dir="rtl"] .foot__link:hover svg { transform: scaleX(-1) translateX(6px) rotate(-8deg); }
}
.foot__addr { margin-top: 24px; font-style: normal; }
.foot__addr a { display: inline-grid; gap: 4px; text-decoration: none; }
.foot__addr1 { font-size: 1.0625rem; font-weight: 600; }
.foot__addr2 { font-size: .9375rem; }
.foot__addr a:hover .foot__addr1 { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- two crossing tapes (a marquee each; footer.js loops them and reacts to scroll speed) ---------- */
.foot__tapes { position: relative; height: clamp(170px, 15vw, 210px); margin-inline: calc(50% - 50vw); pointer-events: none; }
.tape { position: absolute; left: -6%; right: -6%; top: 50%; overflow: clip; padding-block: 14px; box-shadow: 0 14px 30px -12px rgb(43 43 46 / .45); }
.tape--front { background: var(--ink); color: var(--paper); rotate: -4deg; translate: 0 -50%; }
.tape--back { background: var(--paper); color: var(--ink); rotate: 3.5deg; translate: 0 -50%; }
[dir="rtl"] .tape--front { rotate: 4deg; }
[dir="rtl"] .tape--back { rotate: -3.5deg; }
@media (max-width: 899px) { .tape--front { rotate: -7deg; } .tape--back { rotate: 6deg; } [dir="rtl"] .tape--front { rotate: 7deg; } [dir="rtl"] .tape--back { rotate: -6deg; } }
.tape__track { display: flex; width: max-content; }
.tape__group { display: flex; align-items: center; gap: 26px; padding-inline-end: 26px; flex: none; }
.tape__group li { white-space: nowrap; font-size: clamp(1.125rem, .9rem + 1vw, 1.875rem); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
:lang(ar) .tape__group li { line-height: 1.5; }
.tape__sep svg { width: clamp(22px, 2vw, 32px); height: auto; overflow: visible; }
.tape__sep--heart svg { fill: var(--pink); }
.tape__sep--smile svg { fill: none; stroke: var(--pink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.tape--back .tape__sep--heart svg { fill: var(--pink-deep); }
.tape--back .tape__sep--smile svg { stroke: var(--pink-deep); }

/* ---------- the giant wordmark (inline SVG, never mirrored; letters move by SVG transforms so it stays crisp) ---------- */
.foot__word { position: relative; margin-block: -8px -18px; }
.foot__mark { display: block; width: 100%; height: auto; overflow: hidden; fill: var(--ink); -webkit-tap-highlight-color: transparent; }
.js .foot__mark { cursor: pointer; }
.fw__heart { fill: var(--paper); stroke: var(--ink); stroke-width: 7; opacity: 0; }
.foot__hint {
  position: absolute; left: 1%; top: 3%; rotate: -5deg;
  padding: 6px 12px; border-radius: 999px; background: var(--paper); color: var(--ink);
  font-size: clamp(.75rem, .7rem + .3vw, .9375rem); font-weight: 600; white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 16px -6px rgb(43 43 46 / .4);
}
html:not(.js) .foot__hint { display: none; }

/* ---------- the pill (Khalid 2026-10-27, after the "Wild" pill hero): "pe" and "ak" part around a stadium playing the matcha swirl.
   js/footer.js sets the viewBox, moves the two halves and lays the pill over the SVG in %; row on wide screens, stacked on phones.
   Without JS the wordmark is unchanged. ---------- */
.foot__word { isolation: isolate; }
.foot__lines {
  position: absolute; z-index: -1; left: -32px; top: -16%; width: calc(100% + 64px); height: 132%;
  fill: none; stroke: var(--paper); stroke-linecap: round; pointer-events: none;
}
.foot__lines path { vector-effect: non-scaling-stroke; }
.foot__lines .fl { stroke-dasharray: 24 76; animation: foot-flow var(--d) linear var(--dl) infinite; }
@keyframes foot-flow { to { stroke-dashoffset: -100; } }
.foot:not(.is-live) .foot__lines .fl { animation-play-state: paused; }
html:not(.js) .foot__lines { display: none; }
.js .foot__lines { opacity: 0; }
.foot__pill { display: none; position: absolute; overflow: hidden; border-radius: 999px; background: var(--ink); cursor: pointer; clip-path: inset(50% 0); }
.has-pill .foot__pill { display: block; }
.foot__pill-vid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.foot__pill-line { position: absolute; inset: 0; background: var(--ink); }
.foot__pill-line, .foot__pill-ico, .foot__pill::after { z-index: 3; } /* above the clip that is opening in */
.foot__pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--ink); pointer-events: none; } /* the clip's pink wall would melt into the panel */
.foot__pill-ico {
  position: absolute; top: 50%; height: 16%; width: auto; translate: 0 -50%; opacity: 0;
  fill: none; stroke: var(--paper); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round;
}
.foot__pill-ico--s { left: 7%; }
.foot__pill-ico--e { right: 7%; }
.is-stack .foot__pill-ico { height: 13%; }
.is-stack ~ .foot__hint, .is-stack .foot__hint { left: -1%; top: 27%; } /* on the pill's corner, clear of the p */

/* ---------- bottom bar ---------- */
.foot__legal { display: grid; gap: 8px; padding-top: 20px; border-top: 1.5px solid rgba(43, 43, 46, .85); font-size: .875rem; }
.foot__made span { font-weight: 600; } /* plain credit, no link for now */
.foot__concept { font-size: .8125rem; line-height: 1.5; max-width: 46ch; }
.foot__top {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
  height: 52px; padding-inline: 20px 6px; border-radius: 999px; background: var(--ink); color: var(--paper);
  text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.foot__top-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pink); color: var(--ink); overflow: hidden; }
.foot__top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .foot__top:hover svg { animation: foot-up .9s var(--ease) infinite; }
  @keyframes foot-up { 0% { translate: 0 0; } 45% { translate: 0 -140%; } 46% { translate: 0 140%; } 100% { translate: 0 0; } }
}
.foot a:focus-visible, .foot__love:focus-visible { outline: 2px solid var(--ink); box-shadow: 0 0 0 5px var(--paper); border-radius: 6px; }
.foot__top:focus-visible, .foot__love:focus-visible { border-radius: 999px; }

/* ---------- tablet / desktop ---------- */
@media (min-width: 900px) {
  .foot__panel { padding: 16px 32px 28px; }
  .foot__inner { row-gap: 56px; }
  .foot__info { display: grid; grid-template-columns: 1.2fr .8fr; column-gap: 72px; align-items: end; }
  .foot__addr { margin-top: 0; justify-self: end; text-align: end; }
  .foot__row { max-width: 980px; }
  .foot__word { margin-block: -24px -30px; }
  .foot__legal { grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: 32px; }
  .foot__top { margin-top: 0; justify-self: end; }
  .foot__concept { justify-self: end; text-align: end; }
}
@media (min-width: 900px) and (max-width: 1100px) { .foot__legal { grid-template-columns: 1fr auto; } .foot__concept { grid-column: 1; justify-self: start; text-align: start; } .foot__top { grid-column: 2; grid-row: 1 / span 3; align-self: center; } }
@media (prefers-reduced-motion: reduce) { .foot__lines .fl { animation: none; } }
@media (prefers-reduced-motion: reduce) { .foot__link, .foot__top, .foot__link svg, .foot__love { transition: none; } }