/* The homepage's newer parts (2026-11-06, from design/new-home-v2): the three-video hero with kinds of video, the
   kinds shelf, videos by language, the full language list and sound buttons. Reads landing.css tokens only, so it
   follows Day and Night with the rest of the site. Loaded by the homepage and /languages only. */

/* ---------- hero ---------- */
.hv { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; max-width: var(--wrap); margin: 0 auto; padding: 56px 20px 30px; }
.hv-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); font-size: 13.5px; font-weight: 700; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.hv-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #3bb273; }
.hv h1 { font-family: "Bricolage Grotesque", "Figtree", sans-serif; font-size: clamp(44px, 5.4vw, 78px); letter-spacing: -.035em; line-height: 1.02; margin: 20px 0 18px; }
.hv h1 em { font-style: normal; color: var(--accent); }
.hv-lead { font-size: 18.5px; color: var(--ink-2); max-width: 34rem; }
.hv-say { margin-top: 26px; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 26px; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--note-shadow-hi); }
.hv-say input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 17px/1.3 "Figtree", sans-serif; }
.hv-say input::placeholder { color: var(--ink-3); }
.hv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; max-width: 580px; padding: 0; list-style: none; }
.hv-chips button { height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); font: 600 14px "Figtree", sans-serif; cursor: pointer; }
.hv-chips button:hover { border-color: var(--line-2); color: var(--ink); }
.hv-chips button[aria-pressed="true"] { background: var(--orange-btn); border-color: var(--orange-btn); color: var(--btn-ink); }
.hv-fine { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.hv-stage { position: relative; height: 620px; }
.hv-halo { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; }
.hv-reel { position: absolute; border-radius: 28px; overflow: hidden; border: 6px solid var(--sheet); box-shadow: var(--note-shadow-hi); background: var(--stone); }
.hv-reel img, .hv-reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-r0, .hv-r2 { width: 218px; height: 388px; top: 96px; }
.hv-r0 { left: 2%; transform: rotate(-8deg); }
.hv-r2 { right: 2%; transform: rotate(8deg); }
.hv-r1 { width: 290px; height: 516px; left: 50%; top: 30px; margin-left: -145px; z-index: 3; }
.hv-tag { position: absolute; left: 10px; bottom: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700; }
.hv-pill { position: absolute; z-index: 6; display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--note-shadow-hi); font-size: 14px; font-weight: 700; color: var(--ink); }
.hv-pill u { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange-btn); color: var(--btn-ink); text-decoration: none; font-size: 12px; }
.hv-goal { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 16px; border-radius: 18px; }
.hv-goal small { font-size: 11px; color: var(--ink-3); }
.hv-goal b { font-family: "Bricolage Grotesque"; font-size: 26px; line-height: 1; color: var(--accent); }
.hv-star { position: absolute; color: #e9a24a; animation: hv-tw 3.6s ease-in-out infinite; }
@keyframes hv-tw { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---------- the language strip under the hero ---------- */
.hv-tick { overflow: hidden; margin-top: 18px; border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hv-tick ul { display: flex; gap: 42px; width: max-content; list-style: none; margin: 0; padding: 14px 0; animation: hv-tick 70s linear infinite; font-weight: 700; font-size: 19px; color: var(--ink-2); }
.hv-tick li { white-space: nowrap; }
@keyframes hv-tick { to { transform: translateX(-50%); } }

/* ---------- kinds of video ---------- */
.hk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 28px 0 0; }
.hk li { display: flex; flex-direction: column; border-radius: 26px; background: var(--sheet); border: 1px solid var(--line); box-shadow: var(--note-shadow); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.hk li:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--note-shadow-hi); }
.hk .pic { position: relative; aspect-ratio: 9 / 13; overflow: hidden; background: var(--stone); }
.hk .pic img, .hk .pic video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hk .lab { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #1e2a32; }
.hk h3 { padding: 16px 18px 0; font-size: 19px; }
.hk p { padding: 4px 18px 20px; font-size: 14.5px; color: var(--ink-2); }

/* ---------- videos by language ---------- */
.hl-vids { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; list-style: none; padding: 0; margin: 26px 0 0; }
.hl-vids li { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 9 / 15; border: 1px solid var(--line); box-shadow: var(--note-shadow); background: var(--stone); }
.hl-vids img, .hl-vids video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hl-vids .lbl { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-weight: 700; font-size: 13px; }
.hl-vids .lbl b { font-size: 18px; }
.hl-vids .lbl small { margin-left: auto; opacity: .8; font-size: 12px; }
/* the full list: the first twelve, then all 44 when asked */
.lang-wall-all li.lang-x { display: none; }
.lang-wall-all.open li.lang-x { display: list-item; }

/* ---------- sound buttons ---------- */
.snd { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .58); color: #fff; cursor: pointer; transition: transform .15s; }
.snd:hover { transform: scale(1.08); }
.snd.on { background: #fff; color: #1e2a32; }
.snd svg { width: 19px; height: 19px; }
.hv-r1 .snd { width: 46px; height: 46px; right: 12px; bottom: 12px; }
.hl-vids .snd, .hk .snd { top: 10px; bottom: auto; }

/* ---------- /languages ---------- */
.lp-region { margin: 40px 0 14px; font-size: 22px; }
.lp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.lp-card { display: flex; flex-direction: column; gap: 8px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--line); padding: 18px; box-shadow: var(--note-shadow); }
.lp-card .nat { font-size: 24px; font-weight: 800; line-height: 1.15; }
.lp-card .en { color: var(--ink-3); font-weight: 600; font-size: 13.5px; }
.lp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.lp-acts button, .lp-acts a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font: 700 13px "Figtree", sans-serif; text-decoration: none; cursor: pointer; }
.lp-acts button { border: 1px solid var(--line); background: var(--stone); color: var(--ink); }
.lp-acts button.playing { background: var(--orange-btn); color: var(--btn-ink); border-color: var(--orange-btn); }
.lp-acts a { background: var(--orange-btn); color: var(--btn-ink); }
.lp-acts .soon { font-size: 12.5px; color: var(--ink-3); font-weight: 600; align-self: center; }

@media (max-width: 1000px) {
  .hv { grid-template-columns: 1fr; padding-top: 36px; }
  .hk { grid-template-columns: repeat(2, 1fr); }
  .hl-vids { grid-template-columns: repeat(2, 1fr); }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .hv-stage { height: 430px; overflow: hidden; }
  .hv-r0, .hv-r2 { width: 130px; height: 231px; top: 80px; }
  .hv-r1 { width: 190px; height: 338px; margin-left: -95px; }
  .hv-pill { font-size: 12px; padding: 6px 12px 6px 8px; }
  .lp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hv-star, .hv-tick ul { animation: none; } }