/* Lageeto brand (v2): tokens, logo lockup and the flipping wordmark.
   The middle letter flips through six Syrian pronunciations:
   لقيتو · لئيتو · لكيتو · لگيتو · لغيتو · لجيتو
   (Laqeeto · La'eeto · Lakeeto · Lageeto · Lageeto · Lajeeto) */

:root {
  --lg-ink: #0F3D33;        /* deep green: icon tile, logo text */
  --lg-ink-soft: #3B6B5E;   /* Latin line under the Arabic */
  --lg-cream: #F7F5EF;      /* pin fill, light backgrounds */
  --lg-accent: #E8863A;     /* tick, "!" */
  --lg-step: 1.5s;          /* time each pronunciation is shown */
  --lg-font: "Baloo Bhaijaan 2", "Segoe UI", Tahoma, sans-serif;
}

.lg-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--lg-font);
  font-size: 18px;               /* the whole lockup scales from this */
  color: var(--lg-ink);
  text-decoration: none;
}
.lg-logo:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 4px; border-radius: 6px; }
.lg-logo--sm { font-size: 14px; }
.lg-logo--lg { font-size: 28px; }
/* The artboard itself: 96px Arabic, 38px Latin, 6px apart, a 300px tile
   56px away; here scaled to a 60px Arabic line. */
.lg-logo--hero { font-size: 37.5px; gap: 0.93em; --lg-tile: 5em; }
.lg-logo--hero .lg-logo__words { gap: 0.1em; }
.lg-logo--hero:not(.lg-logo--en) .lg-word--en { font-size: 0.633em; margin-top: 0; }   /* 38 / 96 of the Arabic */
.lg-logo--hero.lg-logo--en .lg-logo__words { gap: 0.03em; }
@media (max-width: 640px) { .lg-logo--hero { font-size: 24px; } }

/* v2: the pin on its rounded tile (the artboard's 300px tile, 68px radius,
   220px pin). --lg-tile is the tile's side, in the lockup's em. */
.lg-tile {
  --lg-tile-bg: var(--lg-ink);
  inline-size: var(--lg-tile, 2.9em); block-size: var(--lg-tile, 2.9em);
  border-radius: 22.6%;
  background: var(--lg-tile-bg);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lg-tile svg { inline-size: 73.3%; block-size: 73.3%; }
.lg-tile__pin { fill: var(--lg-cream); }
.lg-tile__house { fill: none; stroke: var(--lg-tile-bg); stroke-width: 5; stroke-linejoin: round; }
.lg-tile__tick { fill: none; stroke: var(--lg-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

.lg-logo__words { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }

.lg-word { display: flex; align-items: center; line-height: 1.3; white-space: nowrap; }
.lg-word--ar { font-size: 1.6em; font-weight: 800; }
.lg-word--en { font-size: 0.8em; font-weight: 700; color: var(--lg-ink-soft); margin-top: -0.15em; }
.lg-bang { color: var(--lg-accent); }

/* The flipping slot: fixed width so the letters around it never move */
.lg-slot { position: relative; display: inline-block; height: 1.3em; perspective: 600px; }
.lg-word--ar .lg-slot { width: 0.55em; clip-path: inset(-40% 0 -40% 0); } /* tatweel joins clipped to the slot */
.lg-word--en .lg-slot { width: 0.62em; }

.lg-slot > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap;
  transform-origin: 50% 50%;
  animation: lg-flip calc(var(--lg-step) * 6) linear infinite both;
}
.lg-slot > span:nth-child(2) { animation-delay: var(--lg-step); }
.lg-slot > span:nth-child(3) { animation-delay: calc(var(--lg-step) * 2); }
.lg-slot > span:nth-child(4) { animation-delay: calc(var(--lg-step) * 3); }
.lg-slot > span:nth-child(5) { animation-delay: calc(var(--lg-step) * 4); }
.lg-slot > span:nth-child(6) { animation-delay: calc(var(--lg-step) * 5); }

@keyframes lg-flip {   /* one sixth of the cycle each: in, hold, out */
  0%    { transform: rotateX(90deg);  opacity: 0; }
  3%    { transform: rotateX(0deg);   opacity: 1; }
  14%   { transform: rotateX(0deg);   opacity: 1; }
  17.5% { transform: rotateX(-90deg); opacity: 0; }
  100%  { transform: rotateX(-90deg); opacity: 0; }
}


/* Static version: reduced motion, or .lg-logo--static. Shows لقيتو / Laqeeto */
.lg-logo--static .lg-slot > span { animation: none; opacity: 0; }
.lg-logo--static .lg-slot > span:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lg-slot > span { animation: none; opacity: 0; }
  .lg-slot > span:first-child { opacity: 1; }
}

/* V2 En (lageeto-brand/V2 En/FlipEn.dc.html): the Latin line leads at 92
   against the Arabic version's 96, heavy and tightened by 1px; the Arabic
   follows at half that, in the softer green. */
.lg-logo--en .lg-word--en { font-size: 1.533em; font-weight: 800; color: inherit; letter-spacing: -0.011em; margin-top: 0; }
.lg-logo--en .lg-word--ar { font-size: 0.767em; font-weight: 700; color: var(--lg-ink-soft); }
.lg-logo--en.lg-logo--on-dark .lg-word--ar { color: #BFD6CE; }
.lg-logo--en.lg-logo--on-dark .lg-word--en { color: inherit; }

/* On dark backgrounds. On the green bar the tile is a shade deeper and
   outlined, or it would vanish into the bar. */
.lg-logo--on-dark { color: var(--lg-cream); }
.lg-logo--on-dark .lg-tile { --lg-tile-bg: #0A2B24; box-shadow: inset 0 0 0 1px rgba(247, 245, 239, .22); }
.lg-logo--on-dark .lg-word--en { color: #BFD6CE; }