/* Yoga Circle loading screen: "She Presents the Circle" (2026-11-06)
   ONE TEMPO: every move is .6s (screen-wide moves 1s), all on the same soft-in, soft-out curve, and each beat starts
   as the last one lands. About 5s in total. Keep it that way: mixed speeds read as glitchy.
   A. She sits and breathes while the page loads.
   B. She sweeps her arms up from her sides (one drawing, arms rotate at the armpit, shoulder lines stretch) and summons the logo:
      the ring draws itself, the lotus inks in from its center, the name writes on, and the whole logo pops into place.
   Opening: a dark room; an orange seed of light gathers at her heart and bursts. One ripple rushes out like a drop in
      still water, the room lights up behind it (lit center, darker edges) and she lands in place with a floor shadow.
   B2. A soft glow blooms behind the circle; she slides down and fades out so the logo has the stage.
   C. The logo glides to center and zooms in; the circle settles in the middle while the wordmark slides into it, out of view.
   D. The lotus inside the ring dissolves into a window onto the site (soft sage rim for depth), then the window widens
      past the screen edges. The page underneath never moves. Once per visit; Reduce Motion = still logo, short fade.
   Logo art is 752 x 208: ring center (100.5, 104), ring outer radius 99, stroke about 5 (inner radius 94), ring right edge x 203. */
.ycl { display: none; }
html.yc-loading, html.yc-loading body { overflow: hidden; }
html.yc-loading .ycl {
  --f: .466px;      /* lady: screen px per raised-pose art px (raised art 397 x 536; seated art is drawn 1/1.37 the scale) */
  --yb: 153px;      /* her feet, below screen center */
  --k: 1px;         /* logo at full zoom: screen px per logo art px */
  --sb: .5;         /* logo scale while she holds it up */
  --bx: -136.25px;  /* whole logo (ring + name) centered over her: -(373 - 100.5) k sb */
  --by: -158px;     /* just above her raised hands */
  --hy: 28px;       /* her heart, below screen center: where the seed bursts */
  display: block; position: fixed; inset: 0; z-index: 2147483646; overflow: hidden; background: #1C2A23;
}
/* the lit room, revealed behind the ripple */
@property --rv { syntax: '<length>'; inherits: false; initial-value: 0px; }
.ycl__room { position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 46%, #587868 0%, #4E6C5C 30%, #4A6758 50%, #435F51 72%, #3A5447 100%);
  -webkit-mask-image: radial-gradient(circle at 50% calc(50% + var(--hy)), #000 var(--rv), transparent calc(var(--rv) + 260px));
  mask-image: radial-gradient(circle at 50% calc(50% + var(--hy)), #000 var(--rv), transparent calc(var(--rv) + 260px));
  animation: ycl-rv 1s cubic-bezier(.45, 0, .25, 1) .35s both; }
@keyframes ycl-rv { from { --rv: -260px; } to { --rv: 150vmax; } }
/* the seed: appears, gathers in, bursts */
.ycl__seed { position: absolute; left: -11px; top: calc(var(--hy) - 11px); width: 22px; height: 22px; border-radius: 50%; background: #E85204;
  animation: ycl-seed .6s cubic-bezier(.45, 0, .25, 1) both; }
/* on screen from the first frame: gathers in right away, bursts at .35s */
@keyframes ycl-seed { 0% { transform: scale(1); opacity: 1; } 58% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
/* one ripple, like a drop in still water */
.ycl__wave { position: absolute; left: 50%; top: calc(50% + var(--hy)); width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box;
  border: 3px solid #E85204; transform: translate(-50%, -50%); opacity: 0; animation: ycl-wave 1s cubic-bezier(.45, 0, .25, 1) .35s both; }
@keyframes ycl-wave { 0% { width: 18px; height: 18px; opacity: 1; border-width: 4px; } 70% { opacity: .55; }
  100% { width: 300vmax; height: 300vmax; opacity: 0; border-width: 1px; } }
.ycl__c { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

/* A + B: the lady (with a soft floor shadow under her) */
.ycl__ground { position: absolute; left: calc(-260 * var(--f)); top: calc(var(--yb) - 30 * var(--f)); width: calc(520 * var(--f)); height: calc(70 * var(--f)); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 36, 29, .4) 0%, rgba(22, 36, 29, .26) 40%, rgba(22, 36, 29, .1) 72%, rgba(22, 36, 29, 0) 100%); animation: ycl-in-d .6s cubic-bezier(.45, 0, .25, 1) .45s both; }
@keyframes ycl-in-d { from { opacity: 0; } to { opacity: 1; } }
.ycl__lady { position: absolute; left: 0; top: 0; }
/* her rig: one drawing split into body + two arms; the arms swing up from the armpit while JS stretches the shoulder lines */
.ycl__rigw { position: absolute; left: calc(-198 * var(--f)); top: calc(var(--yb) - 534 * var(--f)); width: calc(397 * var(--f)); height: calc(536 * var(--f));
  transform-origin: 50% 100%; animation: ycl-in .6s cubic-bezier(.45, 0, .25, 1) .45s both; }
.ycl__rig { position: absolute; inset: 0; transform-origin: 50% 100%; animation: ycl-breathe 2.6s cubic-bezier(.45, 0, .55, 1) 1.05s infinite alternate; }
.ycl__rig img, .ycl__rig svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; display: block; overflow: visible; }
.ycl__rig line { stroke: #fff; stroke-width: 9.6; stroke-linecap: round; }
.ycl__arm--l { transform-origin: 34.509% 52.799%; transform: rotate(-62deg); }
.ycl__arm--r { transform-origin: 65.491% 52.799%; transform: rotate(62deg); }
@keyframes ycl-in { from { opacity: 0; transform: scale(1.06); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes ycl-breathe { from { transform: scale(1); } to { transform: scale(1.025); } }
.ycl.is-raise .ycl__rig { animation-play-state: paused; }

/* the logo: mark + wordmark (the wordmark sits in a window that starts at the ring's right edge) */
.ycl__logo { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0;
  transform: translate(var(--bx), calc(var(--by) + 12px)) scale(var(--sb));
  transition: opacity .6s cubic-bezier(.45, 0, .25, 1), transform .6s cubic-bezier(.45, 0, .25, 1); }
.ycl__pop { position: absolute; left: 0; top: 0; width: 0; height: 0; }
/* soft orange glow behind the circle: many stops so it fades smoothly, no hard ring */
.ycl__glow { position: absolute; left: calc(-260 * var(--k)); top: calc(-260 * var(--k)); width: calc(520 * var(--k)); height: calc(520 * var(--k)); border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 82, 4, .34) 0%, rgba(232, 82, 4, .26) 18%, rgba(232, 82, 4, .16) 32%, rgba(232, 82, 4, .08) 46%, rgba(232, 82, 4, .03) 58%, rgba(232, 82, 4, 0) 70%);
  opacity: 0; transform: scale(.6); transition: opacity .6s cubic-bezier(.45, 0, .25, 1) .15s, transform .6s cubic-bezier(.45, 0, .25, 1) .15s; pointer-events: none; }
.ycl.is-show .ycl__glow { opacity: 1; transform: scale(1); }
.ycl.is-window .ycl__glow { opacity: 0; transition: opacity .3s cubic-bezier(.45, 0, .25, 1); }
.ycl.is-show .ycl__pop { animation: ycl-pop .6s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes ycl-pop { 0% { transform: scale(.75); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
.ycl__draw { position: absolute; left: calc(-100 * var(--k)); top: calc(-100 * var(--k)); width: calc(200 * var(--k)); height: calc(200 * var(--k));
  transform: rotate(-90deg); overflow: visible; transition: opacity .3s cubic-bezier(.45, 0, .25, 1); }
.ycl__draw circle { fill: none; stroke: #E85204; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ycl.is-show .ycl__draw circle { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.45, 0, .25, 1); }
.ycl__mark { position: absolute; left: calc(-100.5 * var(--k)); top: calc(-104 * var(--k)); width: calc(752 * var(--k)); height: auto;
  max-width: none; display: block; clip-path: circle(0px at calc(100.5 * var(--k)) calc(104 * var(--k)));
  transition: opacity .3s cubic-bezier(.45, 0, .25, 1), clip-path .6s cubic-bezier(.45, 0, .25, 1) .15s; }
.ycl.is-show .ycl__mark { clip-path: circle(calc(100 * var(--k)) at calc(100.5 * var(--k)) calc(104 * var(--k))); }
.ycl__wordw { position: absolute; left: calc(102.5 * var(--k)); top: calc(-104 * var(--k)); width: calc(549 * var(--k)); height: calc(208 * var(--k)); overflow: hidden; }
.ycl__word { position: absolute; left: calc(-203 * var(--k)); top: 0; width: calc(752 * var(--k)); height: auto; max-width: none; display: block;
  clip-path: inset(0 72% 0 0); transition: clip-path .6s cubic-bezier(.45, 0, .25, 1) .3s, transform .6s cubic-bezier(.45, 0, .25, 1); }
.ycl.is-show .ycl__word { clip-path: inset(0 0 0 0); }
.ycl.is-show .ycl__logo { opacity: 1; transform: translate(var(--bx), var(--by)) scale(var(--sb)); }

/* C: to center, zoom in; the name slides into the circle */
.ycl.is-center .ycl__logo { transform: translate(0, 0) scale(1); transition: transform .6s cubic-bezier(.45, 0, .25, 1); }
.ycl.is-center .ycl__word { transform: translateX(calc(-549 * var(--k))); }
.ycl.is-exit .ycl__lady { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.45, 0, .25, 1), transform .6s cubic-bezier(.45, 0, .25, 1); }

/* D: the window. JS draws the ring (same size and color as the logo ring) and the mask hole. */
.ycl__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; box-sizing: border-box; transform: translate(-50%, -50%);
  border: calc(5 * var(--k)) solid #E85204; border-radius: 50%; opacity: 0; pointer-events: none; }
.ycl.is-window .ycl__mark, .ycl.is-window .ycl__draw { opacity: 0; }

@media (max-width: 600px) {
  html.yc-loading .ycl { --f: .38px; --yb: 128px; --hy: 26px; --k: .7px; --sb: .48; --bx: -91.6px; --by: -108px; }
}
@media (prefers-reduced-motion: reduce) {
  html.yc-loading .ycl__lady { display: none; }
  html.yc-loading .ycl__logo { opacity: 1; transform: translate(calc(-137.75 * var(--k)), 0) scale(.5); transition: none; }
  html.yc-loading .ycl__draw, html.yc-loading .ycl__glow, html.yc-loading .ycl__seed, html.yc-loading .ycl__wave { display: none; }
  html.yc-loading .ycl__room { animation: none; -webkit-mask-image: none; mask-image: none; }
  html.yc-loading .ycl__ground { animation: none; }
  html.yc-loading .ycl__mark { clip-path: circle(calc(100 * var(--k)) at calc(100.5 * var(--k)) calc(104 * var(--k))); transition: none; }
  html.yc-loading .ycl__word { clip-path: none; transition: none; }
  .ycl.is-fade { opacity: 0; transition: opacity .3s linear; }
}