/* ==========================================================================
   LANGUAGES — use the portal in your own language
   Heading matches the neighbouring sections (eyebrow pill + gradient title).
   The stage pairs two images shot in the same frame: the kitchen bg is
   cropped inside a rounded card (object-position bottom) and the transparent
   cut-out of the girl sits on top at identical scale, so she lines up
   pixel-perfect with the bg while her head pops above the card, overlapping
   the title. A glassy "hello" pill marquee slides right-to-left across the
   card behind her. 9 language chips stack on each side of the photo.
   languages.js adds .is-in for the reveal and duplicates the marquee track.
   ========================================================================== */

.mia-lang {
  position: relative;
  padding: clamp(44px, 6vh, 72px) clamp(16px, 4vw, 56px) clamp(96px, 13vh, 160px);
  background: linear-gradient(180deg, #ffffff 0%, #f2f7fc 55%, #ffffff 100%);
  overflow: hidden;
}

/* soft ambient glows so it blends with the neighbouring sections */
.mia-lang::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 34% at 18% 30%, rgba(125, 184, 232, 0.16), transparent 70%),
    radial-gradient(36% 30% at 84% 66%, rgba(186, 156, 232, 0.1), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

.mia-lang__inner {
  position: relative;
  z-index: 1;
  max-width: 1520px;
  margin: 0 auto;
}

/* ---------------- centered heading (girl overlaps it from below) --------- */

.mia-lang__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 1.8vh, 20px);
}

.mia-lang__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(74, 144, 194, 0.3);
  background: rgba(125, 184, 232, 0.12);
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2b5f8f;
}

.mia-lang__title {
  margin: 0;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #16324f;
}

.mia-lang__title em {
  font-style: normal;
  color: #4a97d8;
}

/* line — anchor — line rule under the heading */
.mia-lang__title::after {
  content: '';
  display: block;
  width: 190px;
  height: 16px;
  margin: 20px auto 0;
  background-color: #4a97d8;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='3'/%3E%3Cline x1='12' y1='22' x2='12' y2='8'/%3E%3Cpath d='M5 12H2a10 10 0 0 0 20 0h-3'/%3E%3C/svg%3E") center / 15px 15px no-repeat,
    linear-gradient(#000, #000) left center / 70px 1.5px no-repeat,
    linear-gradient(#000, #000) right center / 70px 1.5px no-repeat;
}


/* copy reveal */
.mia-lang__copy > * {
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-lang:not(.is-in) .mia-lang__copy > * {
  opacity: 0;
  transform: translateY(30px);
}

.mia-lang.is-in .mia-lang__copy > :nth-child(2) { transition-delay: 0.08s; }

/* ---------------- stage grid: chips | photo | chips ---------------- */

.mia-lang__grid {
  position: relative;
  z-index: 2;
  /* small gap below the title — the girl's head must never cut the text */
  margin-top: clamp(6px, 0.6vw, 14px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 960px) minmax(150px, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  align-items: start;
}

/* ---------------- centre stage ---------------- */

.mia-lang__stage {
  position: relative;
  transition:
    opacity 0.8s ease 0.1s,
    transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1) 0.1s;
}

.mia-lang:not(.is-in) .mia-lang__stage {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
}

/* cut-out girl — defines the stage height, never clipped */
.mia-lang__girl {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 22px 34px rgba(22, 50, 79, 0.22));
}

/* cropped bg card — bottom-aligned with the girl so both images line up */
.mia-lang__card {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74%;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(22, 50, 79, 0.1);
  box-shadow: 0 26px 54px -22px rgba(22, 50, 79, 0.4);
}

.mia-lang__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the bottom of the frame — same anchor as the cut-out girl */
  object-position: center bottom;
}

/* subtle veil so the hello pills stay readable over the kitchen */
.mia-lang__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 50, 79, 0.18) 0%, rgba(22, 50, 79, 0) 45%);
  pointer-events: none;
}

/* ---------------- hello marquee (right to left, behind the girl) --------- */

.mia-lang__marquee {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(34px, 14%, 64px);
  overflow: hidden;
  pointer-events: none;
  /* soft fade at both edges so pills don't pop in/out hard */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.mia-lang__track {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  width: max-content;
  padding: 4px 0;
  animation: mia-lang-marquee 30s linear infinite;
}

@keyframes mia-lang-marquee {
  to { transform: translateX(-50%); }
}

.mia-lang__hello {
  display: inline-flex;
  align-items: center;
  padding: 11px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(22, 50, 79, 0.35);
  white-space: nowrap;
}

/* ---------------- language chips (9 left / 9 right) ---------------- */

.mia-lang__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* chips span exactly the card's height: languages.js sets padding-top to
     the card's top offset, stretch + space-between pins first/last chip to
     the card's top/bottom edges */
  align-self: stretch;
  justify-content: space-between;
  gap: clamp(7px, 1vh, 10px);
}

.mia-lang__list--left  { align-items: flex-end; }
.mia-lang__list--right { align-items: flex-start; }

/* gentle arc toward the photo for an organic look */
.mia-lang__list--left  .mia-lang__chip:nth-child(1),
.mia-lang__list--left  .mia-lang__chip:nth-child(9)  { transform: translateX(-14px); }
.mia-lang__list--left  .mia-lang__chip:nth-child(2),
.mia-lang__list--left  .mia-lang__chip:nth-child(8)  { transform: translateX(-6px); }
.mia-lang__list--right .mia-lang__chip:nth-child(1),
.mia-lang__list--right .mia-lang__chip:nth-child(9)  { transform: translateX(14px); }
.mia-lang__list--right .mia-lang__chip:nth-child(2),
.mia-lang__list--right .mia-lang__chip:nth-child(8)  { transform: translateX(6px); }

.mia-lang__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22, 50, 79, 0.12);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 20px -14px rgba(22, 50, 79, 0.4);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.mia-lang__chip::before {
  content: '';
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0d84b5 0%, #006994 100%);
  flex: 0 0 auto;
}

.mia-lang__chip strong {
  font-weight: 500;
  font-size: clamp(12.5px, 1.05vw, 14px);
  color: #16324f;
}

.mia-lang__chip span {
  font-weight: 300;
  font-size: clamp(10.5px, 0.85vw, 12px);
  color: #45607a;
}

/* chips reveal — slide in from their own side, staggered */
.mia-lang__chip {
  transition:
    opacity 0.6s ease,
    transform 0.75s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.mia-lang:not(.is-in) .mia-lang__list--left  .mia-lang__chip { opacity: 0; transform: translateX(-32px); }
.mia-lang:not(.is-in) .mia-lang__list--right .mia-lang__chip { opacity: 0; transform: translateX(32px); }

.mia-lang.is-in .mia-lang__chip:nth-child(2) { transition-delay: 0.06s; }
.mia-lang.is-in .mia-lang__chip:nth-child(3) { transition-delay: 0.12s; }
.mia-lang.is-in .mia-lang__chip:nth-child(4) { transition-delay: 0.18s; }
.mia-lang.is-in .mia-lang__chip:nth-child(5) { transition-delay: 0.24s; }
.mia-lang.is-in .mia-lang__chip:nth-child(6) { transition-delay: 0.3s; }
.mia-lang.is-in .mia-lang__chip:nth-child(7) { transition-delay: 0.36s; }
.mia-lang.is-in .mia-lang__chip:nth-child(8) { transition-delay: 0.42s; }
.mia-lang.is-in .mia-lang__chip:nth-child(9) { transition-delay: 0.48s; }

/* ---------------- bottom note ---------------- */

.mia-lang__note {
  margin: clamp(26px, 4vh, 40px) auto 0;
  max-width: 640px;
  text-align: center;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
  color: #45607a;
  transition:
    opacity 0.7s ease 0.3s,
    transform 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) 0.3s;
}

.mia-lang__note strong {
  font-weight: 500;
  color: #006994;
}

.mia-lang:not(.is-in) .mia-lang__note {
  opacity: 0;
  transform: translateY(24px);
}

/* ---------------- responsive ---------------- */

@media (max-width: 980px) {
  .mia-lang__grid {
    grid-template-columns: 1fr;
    margin-top: clamp(-56px, -6vw, -24px);
    gap: clamp(18px, 3vh, 26px);
  }

  .mia-lang__stage {
    order: -1;
    width: min(100%, 560px);
    margin: 0 auto;
  }

  /* chips become centred wrapped rows under the photo */
  .mia-lang__list,
  .mia-lang__list--left,
  .mia-lang__list--right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-self: auto;
    gap: 8px;
    margin-top: 0;
  }

  .mia-lang__list--right { margin-top: -10px; }

  .mia-lang__list--left  .mia-lang__chip:nth-child(n),
  .mia-lang__list--right .mia-lang__chip:nth-child(n) { transform: none; }

  .mia-lang:not(.is-in) .mia-lang__list--left  .mia-lang__chip,
  .mia-lang:not(.is-in) .mia-lang__list--right .mia-lang__chip {
    transform: translateY(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mia-lang__copy > *,
  .mia-lang:not(.is-in) .mia-lang__copy > *,
  .mia-lang__stage,
  .mia-lang:not(.is-in) .mia-lang__stage,
  .mia-lang__chip,
  .mia-lang:not(.is-in) .mia-lang__chip,
  .mia-lang__note,
  .mia-lang:not(.is-in) .mia-lang__note {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mia-lang__track { animation: none; }
}

/* ---------------- dark theme ---------------- */

[data-theme="dark"] .mia-lang {
  background: linear-gradient(180deg, #04101d 0%, #071a2e 45%, #04101d 100%);
}

[data-theme="dark"] .mia-lang::before {
  background:
    radial-gradient(42% 30% at 18% 26%, rgba(43, 95, 143, 0.25), transparent 70%),
    radial-gradient(38% 28% at 84% 62%, rgba(74, 42, 120, 0.16), transparent 70%);
}

[data-theme="dark"] .mia-lang__eyebrow {
  background: rgba(13, 32, 52, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  color: #7db8e8;
}

[data-theme="dark"] .mia-lang__title { color: #e6eef7; }
[data-theme="dark"] .mia-lang__title em { color: #7db8e8; }
[data-theme="dark"] .mia-lang__title::after { background-color: #6fb1de; }

[data-theme="dark"] .mia-lang__card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .mia-lang__girl {
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45));
}

[data-theme="dark"] .mia-lang__chip {
  background: rgba(13, 32, 52, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .mia-lang__chip strong { color: #e6eef7; }
[data-theme="dark"] .mia-lang__chip span   { color: #9db4c9; }

[data-theme="dark"] .mia-lang__note        { color: #9db4c9; }
[data-theme="dark"] .mia-lang__note strong { color: #7db8e8; }