/* =====================================================================
   landing.css — the "Pick your language" page at the main address.
   15 buttons sit on an oval around a bicycle wheel, joined to the hub
   by spokes. On phones they stack into two neat columns under a
   smaller wheel. Colours and fonts come from site.css.

   Everything on the wheel is measured in "em", so the whole wheel
   grows and shrinks together to fit the screen (see .dial font-size).
   ===================================================================== */

.landing-body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lane--top { height: 8px; }

.landing {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(.75rem, 2.5vh, 1.75rem); padding: clamp(1.25rem, 3vh, 2.25rem) 1.25rem clamp(1.5rem, 4vh, 2.5rem);
}
.landing__brand { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--brown); }
.landing__logo { height: clamp(4rem, 8.5vh, 6rem); width: auto; display: block; }
.landing__brand .brand__name { font-size: clamp(1.5rem, 3vw, 2rem); }

/* ---------- The wheel ---------- */
.dial {
  /* 1em here = the size of everything on the wheel. It follows the screen size. */
  font-size: clamp(12px, min(1.34vh, 1.19vw), 16px);
  --rx: 27.5;          /* oval width  (must match RX in the generator) */
  --ry: 23;            /* oval height (must match RY in the generator) */
  --bw: 10.4em;        /* button width  */
  --bh: 5.5em;         /* button height: every button on the wheel is this tall */
  position: relative;
  width: calc(var(--rx) * 2em + var(--bw));
  height: calc(var(--ry) * 2em + var(--bh) + 1.2em);
}
.dial__wheel { position: absolute; inset: 0; }
.dial__spin { position: absolute; inset: 0; animation: gs-roll 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.dial__tire {
  position: absolute; left: 50%; top: 50%; width: 31em; height: 31em; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.05em solid var(--brown);
  box-shadow: inset 0 0 0 .45em var(--white), inset 0 0 0 .75em var(--green);
}
.spoke {
  position: absolute; left: 50%; top: 50%; width: calc(var(--len) * 1em); height: 2px; margin-top: -1px;
  background: var(--brown); border-radius: 2px; opacity: .7;
  transform-origin: 0 50%; transform: rotate(var(--ang));
}
.spoke:nth-child(odd) { background: var(--leather); }
@keyframes gs-roll { from { transform: rotate(-200deg); } to { transform: rotate(0); } }

/* ---------- The hub in the middle ---------- */
.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 13.5em; height: 13.5em; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em;
  background: var(--brown); color: var(--white);
  border: .45em solid var(--green); box-shadow: 0 0 0 .35em var(--brown);
  padding: 1.3em; text-align: center;
}
.hub__globe .icon { width: 2.3em; height: 2.3em; color: var(--green); }
.hub__words { display: grid; width: 100%; }
.hub__say {
  grid-area: 1 / 1; align-self: center;
  font-family: var(--font-head); font-weight: 800; font-size: 1.35em; line-height: 1.25;
  opacity: 0; transform: translateY(.4em); transition: opacity .45s, transform .45s;
}
.hub__say:first-child { opacity: 1; transform: none; }           /* no JavaScript: show English */
.hub.js .hub__say:first-child { opacity: 0; transform: translateY(.4em); }
.hub.js .hub__say.is-on { opacity: 1; transform: none; }

/* ---------- The 15 buttons ---------- */
.picks { list-style: none; margin: 0; padding: 0; }
.pick {
  position: absolute; left: 50%; top: 50%; width: var(--bw);
  transform: translate(calc(var(--x) * 1em - 50%), calc(var(--y) * 1em - 50%));
}
.pick__btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1em;
  height: var(--bh); padding: .4em .55em;
  border: 3px solid var(--brown); border-radius: 1.1em; box-shadow: 0 5px 0 var(--brown);
  color: var(--brown); text-decoration: none; text-align: center; line-height: 1.2;
  font-family: var(--font-body);
  animation: gs-pop .45s cubic-bezier(.3, 1.4, .5, 1) both;
  animation-delay: calc(.6s + var(--i) * .045s);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s;
}
.pick--green .pick__btn { background: var(--green); }
.pick--white .pick__btn { background: var(--white); }
.pick__btn:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--brown); color: var(--brown); }
.pick--white .pick__btn:hover { background: var(--mint); }
.pick--green .pick__btn:hover { background: #5ce886; }
.pick__btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brown); }
.pick__btn:focus-visible { outline: 4px solid var(--brown); outline-offset: 4px; }
.pick__name { font-family: var(--font-head); font-weight: 800; font-size: 1.28em; letter-spacing: -.01em; }
.pick__say { font-size: .9em; font-weight: 700; color: var(--brown); opacity: .85; text-wrap: balance; }
.pick__btn:lang(my) { line-height: 1.28; }
@keyframes gs-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* The language we think you want gets a green halo and a tick */
.pick.is-suggested .pick__btn { box-shadow: 0 5px 0 var(--brown), 0 0 0 5px var(--white), 0 0 0 9px var(--green-deep); }
.pick.is-suggested .pick__btn::after {
  content: "✓"; position: absolute; top: -.75rem; inset-inline-end: -.6rem;
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--green-deep); color: var(--white); font: 800 .9rem/1 system-ui, sans-serif;
  border: 2px solid var(--white);
}

/* ---------- The road at the bottom, with a little bike ---------- */
.road--landing { height: 3.4rem; }
.road__bike {
  position: absolute; bottom: 1rem; left: 50%; margin-left: -1.2rem; color: var(--green);
  animation: gs-ride 2.4s cubic-bezier(.2, .7, .2, 1) .3s both;
}
.road__bike .icon { width: 2.4rem; height: 2.4rem; }
@keyframes gs-ride { from { transform: translateX(-55vw); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dial__spin, .pick__btn, .road__bike { animation: none; }
  .hub__say { transition: none; }
}

/* ---------- Phones, tablets and short windows: a grid of buttons ---------- */
@media (max-width: 60rem), (max-height: 36rem) {
  .dial { font-size: 16px; width: 100%; max-width: 40rem; height: auto; }
  .dial__wheel { position: relative; inset: auto; width: 15rem; height: 15rem; margin: 0 auto 1.6rem; }
  .spoke { display: none; }
  .dial__tire {
    width: 15rem; height: 15rem; border-width: 10px;
    box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 8px var(--green);
    background: repeating-conic-gradient(from 0deg, var(--leather) 0 1.2deg, transparent 1.2deg 24deg);
  }
  .hub { width: 9.4rem; height: 9.4rem; border-width: 5px; box-shadow: 0 0 0 4px var(--brown); padding: .8rem; }
  .hub__globe .icon { width: 1.6rem; height: 1.6rem; }
  .hub__say { font-size: 1.02rem; }
  /* Rows of equal buttons. Every button is the same width and the same height,
     and a short last row sits in the middle. --cols = buttons per row. */
  .picks { --cols: 2; --gap: .75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
  .pick {
    position: static; transform: none; width: auto;
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  }
  .pick__btn { min-height: 6.25rem; height: 100%; animation-delay: calc(.3s + var(--i) * .04s); }
  .pick__name { font-size: 1.2rem; }
  .pick__say { font-size: .84rem; }
}
@media (min-width: 34rem) and (max-width: 60rem), (min-width: 34rem) and (max-height: 36rem) {
  .picks { --cols: 3; }
}
@media (min-width: 46rem) and (max-width: 60rem), (min-width: 46rem) and (max-height: 36rem) {
  .picks { --cols: 4; }
}
@media (max-width: 21rem) {
  .picks { --cols: 1; }
}