/* ==========================================================================
   The cast, at the top of the home page (v38), after landing.css.

   The headline is a message: three quick texts from someone happy to hear
   from you, with their little face beside them. Beside it, a phone with one
   of the cast in it, alive (cast.js plays their few seconds of video and
   eases the end back into the start), saying hello in the visitor's
   language, with two quick replies and reactions that float up. The others
   ping from around the phone, and the faces below change who is in it.

   Colour lives in the people: each has their own (--c, with --c-ink to write
   on it), and the button, the stickers, the ring around their face and the
   glow behind each section they appear in all take it. Poppins, round and
   bold, says the big things; Inter says the rest.
   ========================================================================== */

@font-face { font-family: "Poppins"; src: url("../fonts/poppins-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

.is-home { --display: "Poppins", "Inter", system-ui, sans-serif; }
.is-home .lp-h2, .is-home .final-title { font-family: var(--display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }

/* -------------------------------------------------------------------- hero */

.ch { --c: #ff7a1a; --c-ink: #000; padding-top: clamp(24px, 4vw, 64px); }
.ch .lp-wrap { position: relative; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy stage" "faces faces"; gap: 40px 64px; align-items: center; }
.ch-copy { grid-area: copy; position: relative; z-index: 1; }
.ch-stage { grid-area: stage; }
.ch-faces { grid-area: faces; min-width: 0; }

/* The headline, sent as three quick messages. */
.ch-said { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px; }
.ch-sender { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--c); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
.ch-title { grid-column: 2; grid-row: 1; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-family: var(--display); font-size: clamp(28px, 3.9vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em; }
.ch-line { display: block; max-width: 100%; padding: 0.1em 0.38em 0.15em; border-radius: 0.46em; background: var(--theirs); color: var(--theirs-ink); text-wrap: balance; }
.ch-line:not(:first-child) { border-top-left-radius: 0.14em; }
.ch-line:not(:last-child) { border-bottom-left-radius: 0.14em; }
.ch-sub { margin: 28px 0 0; max-width: 30em; color: var(--text-2); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; letter-spacing: -0.014em; text-wrap: pretty; }
.ch .hero-ctas { margin-top: 30px; }
.ch-cta { background: var(--c); color: var(--c-ink); border-color: var(--c); font-weight: 600; transition: background-color 400ms, color 400ms, border-color 400ms, transform 160ms var(--ease-out); }
.ch-cta:hover { filter: brightness(1.06); }
.ch-cta:active { transform: scale(0.97); }

/* The phone, with one of the cast in it. */
.ch-stage { position: relative; display: grid; justify-items: center; padding: 8px 0 0; }
.ch-phone { position: relative; margin: 0; width: min(100%, 360px); aspect-ratio: 9 / 17.2; padding: 9px; border-radius: 46px; background: #000;
  box-shadow: 0 40px 90px -36px color-mix(in srgb, var(--c) 75%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.09) inset; transition: box-shadow 600ms ease; touch-action: pan-y; }
:root[data-theme="dark"] .ch-phone { box-shadow: 0 40px 110px -30px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.14) inset; }
.ch-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 38px; background: var(--c); isolation: isolate; transition: background-color 500ms; }
.ch-face { position: absolute; inset: 0; opacity: 0; transform: scale(1.05); transition: opacity 450ms ease, transform 900ms var(--ease-out); background: var(--c); }
.ch-face.is-on { opacity: 1; transform: none; }
.ch-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ch-face.is-drawn img { object-fit: contain; padding: 22% 8% 36%; }
.ch-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 350ms ease; pointer-events: none; }
.ch-video.is-on { opacity: 1; }
.ch-video.is-on.is-easing { opacity: 0; transition-duration: 550ms; }
/* Shade at the top and bottom, so the words over the picture always read. */
.ch-screen::before, .ch-screen::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.ch-screen::before { top: 0; height: 26%; background: linear-gradient(rgba(0, 0, 0, 0.5), transparent); }
.ch-screen::after { bottom: 0; height: 46%; background: linear-gradient(transparent, rgba(0, 0, 0, 0.62)); }
.ch-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 26px 20px 0; color: #fff; }
.ch-who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.ch-who b { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.ch-who small { font-size: 13.5px; opacity: 0.88; }
.ch-live { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.42); font-size: 12.5px; font-weight: 600; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ch-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d058; box-shadow: 0 0 0 3px rgba(52, 208, 88, 0.25); }
.ch-chat { position: absolute; left: 14px; right: 62px; bottom: 70px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 15px; }
.ch-chat .bub { padding: 9px 14px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.95); color: #000; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.ch-chat .bub.them { border-bottom-left-radius: 6px; }
.ch-chat .bub.me { align-self: flex-end; background: var(--c); color: var(--c-ink); border-bottom-right-radius: 6px; }
.ch-chat .th-dots { display: inline-flex; gap: 5px; height: 38px; align-items: center; opacity: 1; color: #000; }
.ch-chat .th-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.45; animation: ch-dot 1s ease-in-out infinite; }
.ch-chat .th-dots i:nth-child(2) { animation-delay: 0.15s; }
.ch-chat .th-dots i:nth-child(3) { animation-delay: 0.3s; }
.ch-replies { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 8px; }
.ch-replies button, .ch-replies a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset; transition: background-color 140ms, transform 160ms var(--ease-out); }
.ch-replies button:hover { background: rgba(255, 255, 255, 0.3); }
.ch-replies button:active, .ch-replies a:active { transform: scale(0.96); }
.ch-replies .ch-keep { background: var(--c); color: var(--c-ink); box-shadow: none; }
.ch-react { position: absolute; right: 10px; bottom: 68px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.ch-react button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.32); font-size: 20px; line-height: 1;
  cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 160ms var(--ease-out), background-color 140ms; }
.ch-react button:hover { background: rgba(0, 0, 0, 0.5); transform: scale(1.08); }
.ch-react button:active { transform: scale(0.9); }
.ch-float { position: absolute; z-index: 4; font-size: 26px; line-height: 1; pointer-events: none; animation: ch-float 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.ch-screen :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Stickers on the phone: how they are. */
.ch-vibes { position: absolute; z-index: 3; top: 15%; right: -30px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.ch-sticker { display: inline-block; padding: 8px 15px 9px; border-radius: 14px; background: var(--c); color: var(--c-ink); font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35); transform: rotate(-7deg); transition: background-color 400ms, color 400ms; }
.ch-sticker:nth-child(2) { margin-right: 20px; transform: rotate(5deg); background: var(--bg); color: var(--text); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.3), 0 0 0 2px var(--c) inset; }

/* The others, pinging from around the phone. */
.ch-pings { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ch-ping { position: absolute; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 250px; padding: 9px 14px 9px 9px; border-radius: 18px; background: var(--bg); color: var(--text);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.32), 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.3; pointer-events: auto; cursor: pointer; animation: ch-ping 4.6s var(--ease-out) both; }
.ch-ping img { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--c); box-shadow: 0 0 0 2px var(--c); }
.ch-ping b { display: block; font-size: 13.5px; }
.ch-ping span { color: var(--text-2); }
/* Beside the phone on a computer, coming in from the side with the room. */
.ch-ping.at-0 { top: 27%; right: calc(100% - 60px); }
.ch-ping.at-1 { top: 45%; right: calc(100% - 34px); }

.ch-note { max-width: 30em; margin: 18px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.45; text-align: center; }

/* The faces below: who is in the phone. */
.ch-strip { display: flex; justify-content: center; gap: 6px 14px; margin: 0; padding: 6px 0 4px; overflow-x: auto; scrollbar-width: none; }
.ch-strip::-webkit-scrollbar { display: none; }
.ch-pick { display: flex; flex: none; flex-direction: column; align-items: center; gap: 2px; width: 84px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; }
.ch-ring { position: relative; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 50%; background: var(--line-2); transition: transform 200ms var(--ease-out); }
.ch-ring::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, var(--c), color-mix(in srgb, var(--c) 30%, var(--bg)), var(--c)); opacity: 0; transition: opacity 250ms; }
.ch-ring img { position: relative; width: 66px; height: 66px; border-radius: 50%; object-fit: cover; background: var(--c); box-shadow: 0 0 0 3px var(--bg); }
.ch-pick b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.ch-pick small { color: var(--text-3); font-size: 11.5px; line-height: 1.2; text-align: center; }
.ch-pick:hover .ch-ring { transform: scale(1.06); }
.ch-pick.is-on .ch-ring::before { opacity: 1; }
.ch-pick.is-on b { color: var(--text); }
.ch-swipe { margin: 6px 0 0; color: var(--text-3); font-size: 12.5px; text-align: center; }

/* ------------------------------------------------- the sections below */

/* The person a section shows lends it their colour: a soft glow behind it. */
.has-cast { position: relative; isolation: isolate; }
.has-cast::before { content: ""; position: absolute; z-index: -1; inset: -6% -4% -6% 4%; border-radius: 48px; pointer-events: none;
  background: radial-gradient(60% 60% at 60% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%); }
:root[data-theme="dark"] .has-cast::before { background: radial-gradient(60% 60% at 60% 50%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%); }
.flip .has-cast::before { inset: -6% 4% -6% -4%; background: radial-gradient(60% 60% at 40% 50%, color-mix(in srgb, var(--c) 30%, transparent), transparent 72%); }
.has-cast .vtile.has-face, .has-cast .callcard, .has-cast .ring-card, .has-cast .memory { box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--c) 70%, transparent); }

/* ------------------------------------------------------------- motion */

@keyframes ch-dot { 0%, 100% { transform: none; opacity: 0.4; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes ch-float { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; transform: translate(calc(var(--dx, 0px) * 0.2), -30px) scale(1.15); }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -260px) scale(0.9) rotate(var(--rot, 0deg)); } }
@keyframes ch-ping { 0% { opacity: 0; transform: translateY(14px) scale(0.86); } 9% { opacity: 1; transform: translateY(-3px) scale(1.03); } 14% { transform: none; }
  84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px) scale(0.96); } }
@keyframes ch-drop { 0% { opacity: 0; transform: translateY(-120%); } 9% { opacity: 1; transform: translateY(3px); } 14% { transform: none; }
  84% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-120%); } }
@keyframes ch-arrive { from { opacity: 0; transform: translateY(16px) scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes ch-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ch-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-10px) rotate(-1.5deg); } 60% { transform: translateY(2px) rotate(1deg); } }
@keyframes ch-spin { to { transform: rotate(1turn); } }

@media (prefers-reduced-motion: no-preference) {
  /* The headline arrives as three messages, once. */
  html.alive .ch-line { animation: ch-arrive 520ms var(--ease-out) calc(120ms + var(--k, 0) * 420ms) both; }
  html.alive .ch-sender { animation: ch-arrive 420ms var(--ease-out) 1.2s both; }
  .ch-chat .bub:not(.th-dots) { animation: ch-in 320ms var(--ease-out) both; transform-origin: 0 100%; }
  .ch-chat .bub.me { transform-origin: 100% 100%; }
  .ch-pick.is-on .ch-ring::before { animation: ch-spin 4s linear infinite; }
  .ch-phone.is-hop .ch-screen { animation: ch-hop 600ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .ch-ping, .ch-float { animation: none; }
  .ch-face, .ch-video, .ch-cta, .ch-sticker { transition: none; }
}

/* -------------------------------------------------------------- phones */

@media (max-width: 960px) {
  /* Phones: the headline, the phone, the faces, then the words and the buttons. */
  .ch-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "said" "stage" "faces" "sub" "ctas" "note" "more"; gap: 0; }
  .ch-copy { display: contents; }
  .ch-said { grid-area: said; }
  .ch-sub { grid-area: sub; }
  .ch .hero-ctas { grid-area: ctas; }
  .ch .hero-note { grid-area: note; }
  .ch .hero-more { grid-area: more; }
  .ch-stage { margin-top: 30px; }
  .ch-faces { margin-top: 4px; }
  .ch-title { font-size: clamp(27px, 7.4vw, 48px); gap: 5px; }
  .ch-sub { margin-top: 20px; }
  .ch-phone { width: min(82vw, 330px); aspect-ratio: 9 / 15.4; border-radius: 40px; }
  .ch-screen { border-radius: 32px; }
  .ch-top { padding-top: 20px; }
  .ch-vibes { right: -12px; top: 15%; }
  /* On a phone, inside the screen at the top, the way notifications arrive. */
  .ch-ping, .ch-ping.at-0 { top: 16px; left: 18px; right: 18px; width: auto; max-width: none; padding: 8px 12px 8px 8px; border-radius: 16px; font-size: 13px;
    background: var(--bg); animation-name: ch-drop; }
  .ch-ping img { width: 32px; height: 32px; }
  .ch-ping.at-1 { display: none; }
  /* The name steps aside while a notification covers it, so nothing peeks out from under it. */
  .ch-top { transition: opacity 0.3s var(--ease-out); }
  .ch-phone:has(.ch-ping) .ch-top { opacity: 0; }
  .ch-strip { justify-content: flex-start; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); }
}
@media (max-width: 420px) {
  .ch-said { gap: 8px; }
  .ch-sender { width: 34px; height: 34px; }
  .ch-chat { font-size: 14px; right: 58px; }
  .ch-replies button, .ch-replies a { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .ch-react button { width: 38px; height: 38px; font-size: 18px; }
}