/* ══════════════════════════════════════════════════════════════════════════
   Loader 11 · "Inside the mark" — the animated badge, as one source.

   Two very different hosts render this: public/landing.html (a static page)
   and components/BootScreen.web.tsx (the app's React loading screen). They
   each carry their own copy of the SVG markup — a static document and a
   component cannot share an element — but they MUST NOT carry their own copy
   of these rules, or the two loaders drift apart and the hand-off between
   them stops reading as one continuous thing.

   Geometry is fitted to the 1254px master by design-system/loquar/
   logo-split.py; see the loader-audition page for the full account of how the
   circles, tail and lens are cut. Transforms and opacity only, so this ports
   to native untouched if the native splash ever wants it.

   EVERY APPEARANCE STARTS AT REST. 0% is the mark exactly as the logo draws
   it, and the wind-up does not begin until 8%; whatever else is going on, the
   first thing anyone sees here is the logo. An earlier version carried the
   loop's phase across page loads so a hand-off resumed mid-flight — it made
   the loader arrive already fused or already spinning, which reads as landing
   in the middle of something rather than as the mark coming to life. The
   continuity that survived is at the SCREEN level (see loader-phase.js): the
   wordmark, rule and caption do not replay their entrance on a hand-off.
   ══════════════════════════════════════════════════════════════════════════ */

.lq-11 {
  --lq11-dur: 3.8s;
  --lq11-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --lq11-ease-out: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  display: block;
  flex: none;
  color: #153d31;
}

.lq-11 svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lq-11 .disc { fill: #113929; }
.lq-11 .cream { fill: #f2e6d7; }
.lq-11 .lensFill { fill: #c0c4b0; }            /* the continents' own sage */
.lq-11 .lensArc { fill: none; stroke: #103c2b; stroke-width: 0.5; }

.lq-11 .bubbleGrp, .lq-11 .globeGrp, .lq-11 .unBub, .lq-11 .unGlobe, .lq-11 .tail {
  transform-box: view-box;
  animation-duration: var(--lq11-dur);
  animation-iteration-count: infinite;
  animation-timing-function: var(--lq11-ease-in-out);
}
.lq-11 .bubbleGrp { transform-origin: 45.2px 58.37px; animation-name: bub11; }
.lq-11 .globeGrp  { transform-origin: 80.57px 59.49px; animation-name: glo11; }
.lq-11 .unBub     { transform-origin: 45.2px 58.37px; animation-name: unbub11; }
.lq-11 .unGlobe   { transform-origin: 80.57px 59.49px; animation-name: unglo11; }
.lq-11 .tail      { transform-origin: 35.81px 81.52px; animation-name: tail11; }

.lq-11 .lensTop {
  animation: lens11 var(--lq11-dur) var(--lq11-ease-in-out) infinite;
}
/* The fill goes first — a half-faded tint under continents that are sliding
   over it reads as a ghost circle; the outline can linger. */
.lq-11 .lensFill {
  animation: lensfill11 var(--lq11-dur) var(--lq11-ease-in-out) infinite;
}
@keyframes lensfill11 { 0%,11% { opacity:1 } 18%,76% { opacity:0 } 90%,100% { opacity:1 } }

/* The land strip is four tiles of the globe's own width — near side, mirror,
   near side, mirror — so tiles butt at the limbs and every seam is continuous.
   One period (two tiles) per turn brings the near side back, so the loop's
   jump from -2W to 0 is invisible. */
.lq-11 .drift {
  animation: drift11 var(--lq11-dur) linear infinite;
}
@keyframes drift11 {
  0%,34%   { transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.15,1) }
  56%,100% { transform: translateX(-116.64px) }
}

/* Cream haze at the limbs — continents dim toward the edge the way a real
   sphere foreshortens them. Off at rest so the mark is untouched. */
.lq-11 .haze {
  opacity: 0;
  animation: haze11 var(--lq11-dur) var(--lq11-ease-in-out) infinite;
}
@keyframes haze11 { 0%,30% { opacity:0 } 36%,54% { opacity:1 } 62%,100% { opacity:0 } }

/* One timeline, four tracks: the bubble and globe move; .unBub/.unGlobe are
   their exact inverses (scale 1/s, translate -t) so the lens can be clipped in
   one circle's space while following the other. Wind-up at 8-11%, rush and
   fuse by 26% with a 1.8% overshoot that settles by 31%, hold, come apart at
   72% past rest at 82%, settled by 90%. */
@keyframes bub11 {
  0%   { transform: none }
  8%   { transform: none; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  11%  { transform: translate(-1.4px,-0.4px) scale(0.985); animation-timing-function: cubic-bezier(.5,.05,.2,1) }
  26%  { transform: translate(18.3px,5.13px) scale(1.429); animation-timing-function: var(--lq11-ease-out) }
  31%  { transform: translate(18.3px,5.13px) scale(1.404) }
  72%  { transform: translate(18.3px,5.13px) scale(1.404); animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  82%  { transform: translate(-1.6px,-0.6px) scale(0.975); animation-timing-function: var(--lq11-ease-out) }
  90%  { transform: none }
  100% { transform: none }
}
@keyframes glo11 {
  0%   { transform: none }
  8%   { transform: none; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  11%  { transform: translate(1.4px,-0.4px) scale(0.985); animation-timing-function: cubic-bezier(.5,.05,.2,1) }
  26%  { transform: translate(-17.07px,4.01px) scale(1.271); animation-timing-function: var(--lq11-ease-out) }
  31%  { transform: translate(-17.07px,4.01px) scale(1.249) }
  72%  { transform: translate(-17.07px,4.01px) scale(1.249); animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  82%  { transform: translate(1.6px,-0.6px) scale(0.975); animation-timing-function: var(--lq11-ease-out) }
  90%  { transform: none }
  100% { transform: none }
}
@keyframes unbub11 {
  0%   { transform: none }
  8%   { transform: none; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  11%  { transform: scale(1.015) translate(1.4px,0.4px); animation-timing-function: cubic-bezier(.5,.05,.2,1) }
  26%  { transform: scale(0.7) translate(-18.3px,-5.13px); animation-timing-function: var(--lq11-ease-out) }
  31%  { transform: scale(0.712) translate(-18.3px,-5.13px) }
  72%  { transform: scale(0.712) translate(-18.3px,-5.13px); animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  82%  { transform: scale(1.026) translate(1.6px,0.6px); animation-timing-function: var(--lq11-ease-out) }
  90%  { transform: none }
  100% { transform: none }
}
@keyframes unglo11 {
  0%   { transform: none }
  8%   { transform: none; animation-timing-function: cubic-bezier(.3,0,.6,1) }
  11%  { transform: scale(1.015) translate(-1.4px,0.4px); animation-timing-function: cubic-bezier(.5,.05,.2,1) }
  26%  { transform: scale(0.787) translate(17.07px,-4.01px); animation-timing-function: var(--lq11-ease-out) }
  31%  { transform: scale(0.801) translate(17.07px,-4.01px) }
  72%  { transform: scale(0.801) translate(17.07px,-4.01px); animation-timing-function: cubic-bezier(.3,.9,.5,1) }
  82%  { transform: scale(1.026) translate(-1.6px,0.6px); animation-timing-function: var(--lq11-ease-out) }
  90%  { transform: none }
  100% { transform: none }
}
/* The tail retracts INTO the bubble (its origin is the tail's base on the
   bubble's rim), stretching a touch in the wind-up first. */
@keyframes tail11 {
  0%,8%    { transform: scale(1) }
  11%      { transform: scale(1.05); animation-timing-function: cubic-bezier(.5,.05,.2,1) }
  20%,74%  { transform: scale(.02) }
  84%      { transform: scale(1.07) }
  90%,100% { transform: scale(1) }
}
/* The lens dissolves while it still has a shape to keep, and is back before
   the circles have finished settling. */
@keyframes lens11 { 0%,11% { opacity:1 } 24%,74% { opacity:0 } 86%,100% { opacity:1 } }

@media (prefers-reduced-motion: reduce) {
  .lq-11, .lq-11 * { animation: none !important; }
}