/* EyeFit motion layer (visual pass 2026-09-24). Loaded by index.php, exercise.php and
   _guide.php (guides, hub, 20-20-20 timer). Sits on top of the shared CryoMotion kit
   (/assets/js/cryo-anim.js + the CRYO-MOTION-KIT section of cryo-unified.css).

   .ef-eye[data-ex="<exercise key>"] = the animated eye-target for one exercise. The key is
   the ef_exercises() key from _data.php; the motion for each key is chosen HERE, so PHP
   and JS only set the attribute. Unknown key = a still dot. Purely decorative (aria-hidden). */
body.cryo-app{--app-accent:#0f766e}   /* teal-700: 5.4:1 against white text */

.ef-eye{--eye:150px;position:relative;display:grid;place-items:center;width:var(--eye);height:var(--eye);flex:none;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#fff,#e3f3f0 72%);border:1px solid rgba(15,118,110,.16);box-shadow:inset 0 2px 14px rgba(15,118,110,.12)}
.ef-eye::before,.ef-eye::after{content:"";position:absolute;background:rgba(15,118,110,.10)}
.ef-eye::before{left:50%;top:16%;bottom:16%;width:1px}
.ef-eye::after{top:50%;left:16%;right:16%;height:1px}
.ef-eye>*{grid-area:1/1;position:relative;z-index:1}
.ef-eye-dot{display:block;width:22%;aspect-ratio:1;border-radius:50%;will-change:transform,filter;
  background:radial-gradient(circle at 35% 32%,#7fe0d3,#0f9488 60%,#0f766e);box-shadow:0 0 0 5px rgba(15,148,136,.14),0 0 16px 3px rgba(15,148,136,.45)}
.ef-eye-open,.ef-eye-shut{display:none;width:64%;overflow:visible}
.ef-eye-open .w{fill:#fff;stroke:#0f766e;stroke-width:3}
.ef-eye-open .i{fill:#14b8a6}.ef-eye-open .p{fill:#0b3b37}
.ef-eye-shut path{fill:none;stroke:#0f766e;stroke-width:4;stroke-linecap:round}

/* eyes-open exercises: the dot moves */
.ef-eye[data-ex=pumping] .ef-eye-dot{animation:efe-focus 2.8s ease-in-out infinite}
.ef-eye[data-ex=tromboning] .ef-eye-dot{animation:efe-focus 5s ease-in-out infinite}
.ef-eye[data-ex=clockRotations] .ef-eye-dot{animation:efe-orbit 9.6s steps(12) infinite}
.ef-eye[data-ex=eyeRolls] .ef-eye-dot{animation:efe-orbit 6s linear infinite}
.ef-eye[data-ex=shifting] .ef-eye-dot{animation:efe-shift 4.5s ease-in-out infinite}
.ef-eye[data-ex=blurZoning] .ef-eye-dot{animation:efe-blur 4s ease-in-out infinite}
/* blinking: an open eye that blinks */
.ef-eye:is([data-ex=slowBlinking],[data-ex=squeezeBlinking]) .ef-eye-dot{display:none}
.ef-eye:is([data-ex=slowBlinking],[data-ex=squeezeBlinking]) .ef-eye-open{display:block;transform-origin:50% 50%}
.ef-eye[data-ex=slowBlinking] .ef-eye-open{animation:efe-blink 4s ease-in-out infinite}
.ef-eye[data-ex=squeezeBlinking] .ef-eye-open{animation:efe-squeeze 2.4s ease-in-out infinite}
/* eyes-closed rest (palming, compresses, acupressure): a closed eye and a slow breathing halo */
.ef-eye:is([data-ex=palming],[data-ex=hydrotherapy],[data-ex^=acupressure]) .ef-eye-dot{display:none}
.ef-eye:is([data-ex=palming],[data-ex=hydrotherapy],[data-ex^=acupressure]) .ef-eye-shut{display:block}
.ef-eye:is([data-ex=palming],[data-ex=hydrotherapy],[data-ex^=acupressure]){animation:efe-breathe 5s ease-in-out infinite}

@keyframes efe-focus{0%,100%{transform:scale(.45);opacity:.7}50%{transform:scale(1.5);opacity:1}}
@keyframes efe-orbit{from{transform:rotate(0) translateX(150%) rotate(0)}to{transform:rotate(360deg) translateX(150%) rotate(-360deg)}}
@keyframes efe-shift{0%,12%{transform:translateX(-160%)}30%,45%{transform:translateX(0)}63%,78%{transform:translateX(160%)}96%,100%{transform:translateX(-160%)}}
@keyframes efe-blur{0%,100%{filter:blur(0)}50%{filter:blur(3px);transform:scale(1.15)}}
@keyframes efe-blink{0%,40%,56%,100%{transform:scaleY(1)}48%{transform:scaleY(.06)}}
@keyframes efe-squeeze{0%,20%,80%,100%{transform:scaleY(1)}35%,62%{transform:scaleY(.05) scaleX(.94)}}
@keyframes efe-breathe{0%,100%{box-shadow:inset 0 2px 14px rgba(15,118,110,.12),0 0 0 0 rgba(20,184,166,.28)}50%{box-shadow:inset 0 2px 14px rgba(15,118,110,.12),0 0 0 14px rgba(20,184,166,0)}}

.ef-eye.is-paused,.ef-eye.is-paused *{animation-play-state:paused!important}
.ef-eye.is-done,.ef-eye.is-done *{animation:none!important}
.ef-eye.is-done .ef-eye-dot{background:radial-gradient(circle at 35% 32%,#86efac,#16a34a 62%,#15803d);box-shadow:0 0 0 5px rgba(22,163,74,.16)}

/* hover-only variant (hub cards): still until hovered/focused */
.ef-eye--hover,.ef-eye--hover *{animation-play-state:paused!important}
a:hover .ef-eye--hover,a:focus-visible .ef-eye--hover,a:hover .ef-eye--hover *,a:focus-visible .ef-eye--hover *{animation-play-state:running!important}

@media (prefers-reduced-motion:reduce){
  .ef-eye,.ef-eye *{animation:none!important}
  .ef-eye-open{transform:none}
}