/* lanai brand v1.1.5 - the Lanai mark: the word's final lowercase i dotted by the eye (owner 2026-10-27 "A"; the
   rule: shared/knowledge/owner_lanai_names.md). A pinned copy from the hub's shared/brand - never edit it in an app:
   change shared/brand, release, then `brand_sync.py update`.

   Drawn exactly as the first web app that showed it draws its eye (its .eye-i / .eye, 2026-10-27): a dotless
   i (U+0131) with the eye in place of the dot - a white almond with a cyan rim and glow, a dark pupil with a violet
   ring that glances left and right, three lashes, and a blink now and then. Markup (README.md):
     <span class="lanai-mark" role="img" aria-label="Lanai"><span aria-hidden="true">Lana<span class="lanai-eye-i">&#305;<i
       class="lanai-eye lanai-eye--lashed"></i></span></span></span>
   The word takes the page's own font, size and color; only the eye is drawn here. lanai-mark.js (optional) moves the
   eye to a fixed gap above the i's measured ink in whatever font the page uses; without it the offset below is the
   fallback (tuned for sans text; add .lanai-mark--mono on monospace text). Add .lanai-mark--still for the plain (still) variant;
   .lanai-mark--grow (1.1.0) for the grow variant below; reduced motion is always still. No inline style is
   needed anywhere (CSP default-src 'self'). */

:root {
  --lanai-eye-white: #e9fdff;
  --lanai-eye-rim: #4af0ff;
  --lanai-eye-glow: rgba(74, 240, 255, 0.8);
  --lanai-eye-pupil: #04111a;
  --lanai-eye-ring: #a06bff;
  --lanai-eye-lash: #c9fbff;
}

.lanai-mark { white-space: nowrap; }
.lanai-eye-i { position: relative; display: inline-block; }
.lanai-eye {
  position: absolute; left: 50%; top: 0.06em; width: 0.5em; height: 0.3em; margin-left: -0.25em;
  border-radius: 0.5em / 0.3em; background: var(--lanai-eye-white);
  box-shadow: 0 0 8px var(--lanai-eye-glow), inset 0 0 0 1px var(--lanai-eye-rim);
  animation: lanai-eye-blink 6s infinite;
}
.lanai-eye--lashed::before {
  content: ""; position: absolute; left: 50%; top: -0.12em; width: 0.42em; height: 0.12em; margin-left: -0.21em;
  background:
    linear-gradient(118deg, transparent 44%, var(--lanai-eye-lash) 44% 62%, transparent 62%) left center / 34% 100% no-repeat,
    linear-gradient(90deg, transparent 38%, var(--lanai-eye-lash) 38% 62%, transparent 62%) center center / 34% 100% no-repeat,
    linear-gradient(62deg, transparent 38%, var(--lanai-eye-lash) 38% 56%, transparent 56%) right center / 34% 100% no-repeat;
  filter: drop-shadow(0 0 0.04em var(--lanai-eye-rim));
}
.lanai-eye::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.17em; height: 0.17em; margin: -0.085em 0 0 -0.085em;
  border-radius: 50%; background: var(--lanai-eye-pupil); box-shadow: 0 0 0 0.03em var(--lanai-eye-ring);
  animation: lanai-eye-look 6s ease-in-out infinite;
}
@keyframes lanai-eye-look {
  0%, 18% { transform: translateX(0); }
  28%, 42% { transform: translateX(-0.12em); }
  52%, 66% { transform: translateX(0.12em); }
  76%, 100% { transform: translateX(0); }
}
@keyframes lanai-eye-blink {
  0%, 88%, 94%, 100% { transform: scaleY(1); }
  91% { transform: scaleY(0.1); }
}
/* monospace text: the no-script offset its narrower i needs (the script measures every font anyway) */
.lanai-mark--mono .lanai-eye { top: 0; }
/* The grow variant (.lanai-mark--grow, 1.1.0 - the hub header's animation, made shared so every place shows the same
   one): now and then the word's last "ai", eye and all, grows into a big AI that flips with SI (lagoon) and shrinks
   back, an 18 s loop. The markup (README.md) wraps that "ai" in .lanai-grow-ai and adds the two big layers. At rest the
   "ai" takes the word's own font, size, weight and color (no transform), so the word reads as one; only transforms
   and opacity move and the big letters are absolute layers above the line - nothing reflows, at any size. */
.lanai-grow-tail { position: relative; }
.lanai-grow-ai { display: inline-block; transform-origin: 0 80%; }
.lanai-grow-big {
  position: absolute; left: 0; top: 0; opacity: 0; transform-origin: 0 80%; pointer-events: none;
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800;
}
.lanai-grow-AI { background-image: linear-gradient(135deg, #ff8a3d, #e8336f); }
.lanai-grow-SI { background-image: linear-gradient(135deg, #19a7a0, #2f8f4e); }
.lanai-mark--grow .lanai-grow-ai { animation: lanai-grow-ai 18s infinite; }
.lanai-mark--grow .lanai-grow-AI { animation: lanai-grow-AI 18s infinite; }
.lanai-mark--grow .lanai-grow-SI { animation: lanai-grow-SI 18s infinite; }
/* 0-33 rest | 33-45 the ai grows slowly, AI takes over | 45-78 AI / SI flips | 78-90 shrinks back to ai | 90-100 rest */
@keyframes lanai-grow-ai {
  0%, 33%   { opacity: 1; transform: none; animation-timing-function: ease-in-out; }
  41%       { opacity: 1; transform: scale(1.45); }
  44%       { opacity: 0; transform: scale(1.6); }
  82%       { opacity: 0; transform: scale(1.6); }
  85%       { opacity: 1; transform: scale(1.45); animation-timing-function: ease-in-out; }
  90%, 100% { opacity: 1; transform: none; }
}
@keyframes lanai-grow-AI {
  0%, 40%   { opacity: 0; transform: scale(1.35); }
  44%       { opacity: 1; transform: scale(1.6); }
  47%       { opacity: 1; transform: scale(1.7); }
  50%       { opacity: 1; transform: scale(1.7) rotate(-6deg); }
  52%       { opacity: 0; transform: scale(1.7) rotateY(90deg); }
  59%       { opacity: 0; transform: scale(1.7) rotateY(90deg); }
  61%       { opacity: 1; transform: scale(1.7) rotateY(0); }
  64%       { opacity: 1; transform: scale(1.8) rotate(5deg); }
  66%       { opacity: 1; transform: scale(1.7) rotate(0); }
  68%       { opacity: 0; transform: scale(1.7) rotateX(90deg); }
  74%       { opacity: 0; transform: scale(1.7) rotateX(90deg); }
  76%       { opacity: 1; transform: scale(1.7) rotateX(0); }
  82%       { opacity: 1; transform: scale(1.6); }
  85%, 100% { opacity: 0; transform: scale(1.45); }
}
@keyframes lanai-grow-SI {
  0%, 50%   { opacity: 0; transform: scale(1.7) rotateY(-90deg); }
  52%       { opacity: 1; transform: scale(1.7) rotateY(0); }
  55%       { opacity: 1; transform: scale(1.8) rotate(6deg); }
  57%       { opacity: 1; transform: scale(1.7) rotate(-4deg); }
  59%       { opacity: 0; transform: scale(1.7) rotateY(-90deg); }
  66%       { opacity: 0; transform: scale(1.7) rotateX(-90deg); }
  68%       { opacity: 1; transform: scale(1.7) rotateX(0); }
  71%       { opacity: 1; transform: scale(1.7) rotate(-6deg); }
  73%       { opacity: 1; transform: scale(1.7) rotate(0); }
  74%, 100% { opacity: 0; transform: scale(1.7) rotateX(-90deg); }
}
/* the still variant, and reduced motion (the grow variant then rests: plain "ai", no big letters) */
.lanai-mark--still .lanai-eye, .lanai-mark--still .lanai-eye::after { animation: none; }
.lanai-mark--still .lanai-grow-ai, .lanai-mark--still .lanai-grow-big { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .lanai-eye, .lanai-eye::after { animation: none; }
  .lanai-mark--grow .lanai-grow-ai, .lanai-mark--grow .lanai-grow-big { animation: none; }   /* as specific as the run */
}