@import url("/assets/css/site.css");
@import url("/assets/css/language-search.css");

:root {
      --black: #302E2F;
      --navy: #353E50;
      --gray: #787D86;
      --light-gray: #BBBCBC;
      --white: #F1F2F2;
      --hero-width: 756px;
      --footer-tile-size: 236px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--white);
      color: var(--black);
      overflow-x: hidden;
    }

    button,
    input {
      font: inherit;
    }

    .page {
      position: relative;
      isolation: isolate;
      min-height: 100svh;
      overflow-x: clip;
    }

    .topbar {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--site-header-top) var(--site-gutter) 0;
    }

    .logo-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }

    .logo {
      display: block;
      width: var(--site-logo-width);
      height: auto;
    }

    .top-nav {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--site-nav-gap);
    }

    .top-nav-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: var(--site-nav-height);
      padding: 0 var(--site-nav-padding);
      border: 2px solid rgba(187, 188, 188, 0.72);
      border-radius: 999px;
      background: rgba(241, 242, 242, 0.62);
      color: var(--black);
      text-decoration: none;
      font-size: var(--site-nav-font-size);
      font-weight: 800;
      letter-spacing: -0.03em;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .top-nav-link:hover,
    .top-nav-link:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(120, 125, 134, 0.7);
      background: rgba(255, 255, 255, 0.72);
      outline: 0;
    }

    .menu-button {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 999px;
      padding: 6px;
      display: grid;
      place-items: center;
      background: transparent;
      cursor: pointer;
    }

    .menu-button img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .hero {
      position: relative;
      z-index: 2;
      width: min(var(--hero-width), calc(100% - 36px));
      margin: clamp(95px, 12.75vh, 136px) auto 0;
      text-align: center;
    }

    .hero h1 {
      display: flex;
      align-items: baseline;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 0.27em;
      margin: 0;
      font-size: clamp(2.17rem, 2.69vw, 3.02rem);
      line-height: 1.05;
      letter-spacing: -0.052em;
      font-weight: 900;
      color: var(--black);
    }

    .title-static {
      white-space: nowrap;
    }

    .cycling-word-wrap {
      position: relative;
      display: inline-block;
      width: 8ch;
      min-width: 0;
      text-align: left;
      vertical-align: baseline;
      overflow: visible;
      transition: width 320ms cubic-bezier(0.2, 0.75, 0.2, 1);
    }

    .cycling-word,
    .cycling-word-measure {
      display: inline-block;
      white-space: nowrap;
    }

    .cycling-word {
      will-change: contents, opacity, transform, filter;
      transition: opacity 150ms ease, transform 150ms ease, filter 150ms ease;
    }

    .cycling-word-measure {
      position: absolute;
      left: 0;
      top: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .cycling-word.is-jumbling {
      opacity: 0.76;
      transform: translateY(-1px);
      filter: blur(0.25px);
    }

    .subtitle {
      max-width: 586px;
      margin: 26px auto 0;
      color: var(--gray);
      font-size: clamp(0.89rem, 1.12vw, 1.22rem);
      line-height: 1.35;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .search-form {
      width: min(100%, 748px);
      margin: 27px auto 0;
    }

    .browse-languages-link {
      display: inline-flex;
      margin-top: 14px;
      color: var(--gray);
      font-size: 0.8rem;
      font-weight: 800;
      text-decoration: none;
      text-underline-offset: 3px;
    }

    .browse-languages-link:hover,
    .browse-languages-link:focus-visible {
      color: var(--black);
      text-decoration: underline;
    }

    .search-bar {
      height: clamp(53px, 4.04vw, 61px);
      display: flex;
      align-items: center;
      gap: 14px;
      border: 2.5px solid var(--light-gray);
      border-radius: 999px;
      background: rgba(241, 242, 242, 0.78);
      padding: 0 clamp(17px, 1.7vw, 22px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }



    .search-bar.is-disabled {
      background: rgba(225, 226, 226, 0.78);
      border-color: rgba(187, 188, 188, 0.82);
      opacity: 0.72;
      cursor: not-allowed;
      user-select: none;
    }

    .search-bar.is-disabled img,
    .search-bar.is-disabled input {
      opacity: 0.68;
      cursor: not-allowed;
    }

    .search-message {
      min-height: 1.4em;
      margin: 12px 0 0;
      color: var(--gray);
      font-size: clamp(0.76rem, 0.84vw, 0.91rem);
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -0.018em;
      opacity: 0;
      transform: translateY(-3px);
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .search-message.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    .search-message a {
      color: var(--black);
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      font-weight: 900;
    }

    .search-message a:hover,
    .search-message a:focus-visible {
      color: var(--navy);
      outline: 0;
    }

    .search-bar img {
      width: var(--site-icon-size);
      height: var(--site-icon-size);
      flex: 0 0 auto;
      opacity: 0.75;
    }

    .search-bar input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--black);
      font-size: clamp(0.87rem, 1.12vw, 1.21rem);
      font-weight: 600;
      letter-spacing: -0.035em;
    }

    .search-bar input::placeholder {
      color: var(--gray);
      opacity: 1;
    }

    .stats {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px clamp(44px, 5.2vw, 87px);
      list-style: none;
      margin: 32px 0 0;
      padding: 0;
    }

    .stat {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      min-width: 109px;
      text-align: left;
    }

    .stat-icon {
      display: block;
      width: clamp(29px, 2.04vw, 37px);
      height: clamp(29px, 2.04vw, 37px);
      object-fit: contain;
      flex: 0 0 auto;
    }

    .stat-number,
    .stat-label {
      display: block;
    }

    .stat-number {
      font-size: clamp(1rem, 1.23vw, 1.32rem);
      font-weight: 900;
      line-height: 0.92;
      letter-spacing: -0.06em;
      color: var(--black);
      white-space: nowrap;
    }

    .stat-label {
      margin-top: 4px;
      color: var(--gray);
      font-size: clamp(0.61rem, 0.7vw, 0.77rem);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.025em;
    }

    .footer-pattern {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      bottom: 0;
      height: clamp(151px, 18.7vh, 221px);
      pointer-events: none;
      background-image: url("/assets/patterns/footer-pattern.svg");
      background-repeat: repeat;
      background-size: var(--footer-tile-size) var(--footer-tile-size);
      background-position: 0 bottom;
      opacity: 0.9;
      animation: footer-drift 38s linear infinite;
      will-change: background-position;
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.7) 68%, black 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.7) 68%, black 100%);
    }

    @keyframes footer-drift {
      from {
        background-position: 0 bottom;
      }

      to {
        background-position: var(--footer-tile-size) bottom;
      }
    }

    .soft-light {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,0.54), rgba(255,255,255,0) 46%),
        linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0));
    }

    @media (max-width: 760px) {
      .hero {
        margin-top: 78px;
      }

      .hero h1 {
        flex-wrap: wrap;
        row-gap: 0;
      }

      .subtitle {
        margin-top: 20px;
      }

      .search-form {
        margin-top: 25px;
      }

      .stats {
        gap: 22px 28px;
        margin-top: 30px;
      }

      .stat {
        min-width: 132px;
        justify-content: flex-start;
      }
    }

    @media (max-width: 520px) {
      .logo {
        width: var(--site-logo-width);
      }

      .menu-button {
        width: 36px;
        height: 36px;
      }

      .top-nav-link {
        min-height: var(--site-nav-height);
        padding: 0 var(--site-nav-padding);
        font-size: var(--site-nav-font-size);
      }

      .hero {
        width: min(100% - 28px, var(--hero-width));
        margin-top: 64px;
      }

      .hero h1 {
        font-size: 2.1rem;
      }

      .cycling-word-wrap {
        text-align: center;
      }

      .subtitle br {
        display: none;
      }

      .search-bar {
        height: 56px;
        border-width: 2px;
      }

      .search-bar input {
        font-size: 0.9rem;
      }

      .stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: min(100%, 340px);
        margin-inline: auto;
      }

      .stat {
        min-width: 0;
      }

      .footer-pattern {
        height: 155px;
        background-size: 210px 210px;
      }

    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
      }

      .cycling-word-wrap,
      .cycling-word,
      .footer-pattern {
        animation: none;
        transition: none;
      }
    }