/* IRISMOTION 2026-10-18: the sign-in logo's one opening (Codex D2 design, Claude review, both AGREE), the phone app's
   gold-blade opening on the web: the four blades turn open from -28 degrees at 68 % (400 ms, 24 ms apart), the cross
   settles, the ECG line and the TM appear by 600 ms, then one ECG dot pass ends at 2130 ms. Once per tab (login.html decides and
   sets html.iris-login-open before the first frame), never moves the logo's box, and every field and button works from
   the first frame. Reduced motion, forced colors and high contrast keep the logo still. */
@keyframes iris-login-blade {
  from { opacity: 0; transform: rotate(-28deg) scale(0.68); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes iris-login-cross { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes iris-login-fade { from { opacity: 0; } }
@keyframes iris-login-tm { from { opacity: 0; } }
.ilm-ecg-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: paint; color: #FFF0C4; }
.ilm-ecg-dot { position: absolute; display: block; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; will-change: transform, opacity; }
.ilm-ecg-dot::before { content: ""; position: absolute; left: 0; top: 0; width: 9.322034%; height: 9.322034%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle closest-side, currentColor 0 50%, rgba(223,179,95,.3) 52% 72%, transparent 100%); }
/* Same HTML carrier and horizontal time base as the working cue. Static glow;
   only transform/opacity animate. 1350ms travel plus 180ms fade after the opening. */
@keyframes iris-login-ecg {
  0.000000% { transform: translate(14.194915%, 83.474576%); opacity: 0; }
  7% { opacity: 1; }
  28.324052% { transform: translate(37.182203%, 83.898305%); }
  30.151410% { transform: translate(38.665254%, 82.944915%); }
  33.153498% { transform: translate(41.101695%, 79.449153%); }
  34.067177% { transform: translate(41.843220%, 79.661017%); }
  38.766098% { transform: translate(45.656780%, 88.029661%); }
  44.509224% { transform: translate(50.317797%, 70.127119%); }
  44.770275% { transform: translate(50.529661%, 70.338983%); }
  50.121824% { transform: translate(54.872881%, 91.419492%); }
  55.734424% { transform: translate(59.427966%, 80.084746%); }
  56.778629% { transform: translate(60.275424%, 80.084746%); }
  58.867038% { transform: translate(61.970339%, 82.944915%); }
  60.563871% { transform: translate(63.347458%, 83.792373%); }
  88.235294% { transform: translate(85.805085%, 83.474576%); opacity: 1; }
  100% { transform: translate(85.805085%, 83.474576%); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (forced-colors: none) and (prefers-contrast: no-preference) {
  html.iris-login-open:not(.high-contrast):not(.iris-still):not(.iris-recording) body:not(.high-contrast) .login-logo .ilm-ecg-dot {
    animation: iris-login-ecg 1530ms linear 600ms backwards;
  }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-blade {
    transform-box: view-box; transform-origin: 471px 414px;
    animation: iris-login-blade 400ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-blade:nth-of-type(2) { animation-delay: 24ms; }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-blade:nth-of-type(3) { animation-delay: 48ms; }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-blade:nth-of-type(4) { animation-delay: 72ms; }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-cross {
    transform-box: view-box; transform-origin: 471px 413px;
    animation: iris-login-cross 240ms cubic-bezier(0.16, 1, 0.3, 1) 160ms backwards;
  }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo .ilm-ecg { animation: iris-login-fade 160ms cubic-bezier(0.2, 0, 0, 1) 400ms backwards; }
  html.iris-login-open:not(.high-contrast):not(.iris-still) body:not(.high-contrast) .login-logo > .tm-logo { animation: iris-login-tm 120ms cubic-bezier(0.2, 0, 0, 1) 480ms backwards; }
}
/* Saving data or power: the whole sign-in page is still, like the app (and like the reduced-motion reset in login.css). */
html.iris-still, html.iris-still *, html.iris-still *::before, html.iris-still *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
