/* ============================================================================
   motion.css — the site-wide motion system                            v2.39.0
   ============================================================================
   Owner: "introduce strong animations, hovers, and interactions across the
   entire site for panels, elements, buttons, icons etc."
   Approved: EXPRESSIVE strength, staggered entrances, whole site.

   ---------------------------------------------------------------------------
   IT ADOPTS, IT DOES NOT REPLACE.
   ---------------------------------------------------------------------------
   platform.css:2896-2904 already declares --motion-fast / --motion-base /
   --motion-slow / --motion-ease on :root, and --motion-ease is byte-identical
   to chat-flagship's --m-ease — that curve is already the house curve. This
   file consumes those tokens in the established `var(--motion-base, 220ms)`
   fallback form rather than inventing a parallel scale. --motion-slow had zero
   consumers before this file; it does now.

   platform.css:2911-2932 already binds a seven-property transition to
   `.eos-app a, .eos-app button, .eos-app .eos-btn, .eos-app .eos-chip`, and
   body always carries .eos-app. So transitions largely EXIST already — what was
   missing is the movement itself, consistently, on every family. This file adds
   the transforms and the families the base rule never reached.

   ---------------------------------------------------------------------------
   THE REDUCED-MOTION CONTRACT (read before adding anything)
   ---------------------------------------------------------------------------
   Four guards already exist and they do DIFFERENT things:
     platform.css:1219 and :2236  universal `*`, duration clamped to .001ms
     platform.css:3010-3028       `.eos-app *` with animation:none + transition:none,
                                  PLUS an explicit transform:none list. This is the
                                  strongest and the one that matters.
     watch-controls.css:771       `.eos-watch--cinema *`, animation only, loaded later
   Because :3010 uses `transition: none !important`, a hover TRANSFORM still
   applies — it simply snaps instead of easing. So every new hover transform
   must be named in a transform:none list or it will still jump. The audit found
   NINE existing hover transforms already missing from that list; they are added
   at the end of this file along with the new ones.

   Note also that home-redesign.css:254, broadcast-redesign.css:152,
   watch-redesign.css:1091 and notes-assist.css:83 are INVERSE gates
   (`no-preference`). Adding a `reduce` block for anything inside them would be
   dead code — they emit nothing under `reduce` already.

   ---------------------------------------------------------------------------
   WHAT IS DELIBERATELY NOT TOUCHED
   ---------------------------------------------------------------------------
   - Studio panels and the video tile. studio.css sets `animation: none
     !important` on them because a CSS animation with fill-mode:both overrode the
     inline transform the drag writes, and the video would not move at all. No
     entrance animation may be added there. Hovers are fine; movement is not.
   - Anything drag-positioned, any canvas, any iframe.
   ==========================================================================*/

:root {
  /* Expressive scale. Durations reuse the platform values; the travel is ours. */
  --eosm-fast:   var(--motion-fast, 150ms);
  --eosm-base:   var(--motion-base, 220ms);
  --eosm-slow:   var(--motion-slow, 320ms);
  --eosm-ease:   var(--motion-ease, cubic-bezier(.2, .7, .3, 1));
  --eosm-spring: cubic-bezier(.34, 1.56, .64, 1);
  --eosm-lift:      -4px;
  --eosm-lift-sm:   -2px;
  --eosm-press:     .95;
  --eosm-icon-pop:  1.14;
  --eosm-shadow:    0 10px 26px rgba(16, 24, 40, .14);
  --eosm-shadow-sm: 0 6px 16px rgba(16, 24, 40, .10);
}
[data-theme="dark"] {
  --eosm-shadow:    0 12px 30px rgba(0, 0, 0, .52);
  --eosm-shadow-sm: 0 8px 20px rgba(0, 0, 0, .44);
}

/* ---------------------------------------------------------------- buttons */
/* The base transition already exists at platform.css:2911; this adds the travel. */
.eos-app .eos-btn:hover,
.eos-app .eos-btn-outline:hover,
.eos-app .eos-btn-light:hover {
  transform: translateY(var(--eosm-lift-sm));
  box-shadow: var(--eosm-shadow-sm);
}
.eos-app .eos-btn-primary:hover,
.eos-app .eos-nav-cta:hover {
  transform: translateY(var(--eosm-lift));
  box-shadow: 0 10px 26px rgba(245, 163, 18, .34);
}
.eos-app .eos-btn:active,
.eos-app .eos-btn-primary:active,
.eos-app .eos-nav-cta:active {
  transform: scale(var(--eosm-press));
  transition-duration: var(--eosm-fast);
}

/* ------------------------------------------------------------ icon buttons */
/* Icons get a spring and a small rotate — the one place a bit of character is
   worth it, because an icon has no label to carry the affordance. */
.eos-app .eos-nav-tools button,
.eos-app .eos-cn-ibtn,
.eos-app .eos-cn-cbtn,
.eos-app .eos-pc-btn,
.eos-app .eos-ntp-tb button,
.eos-app .eos-chat-emoji-btn,
.eos-app .eos-chat-nl,
.eos-app .eos-ink-pop button,
.eos-app .eos-studio-bar button {
  transition: transform var(--eosm-base) var(--eosm-spring),
              background-color var(--eosm-base) var(--eosm-ease),
              color var(--eosm-base) var(--eosm-ease),
              border-color var(--eosm-base) var(--eosm-ease),
              box-shadow var(--eosm-base) var(--eosm-ease);
}
.eos-app .eos-nav-tools button:hover,
.eos-app .eos-cn-ibtn:hover,
.eos-app .eos-cn-cbtn:hover,
.eos-app .eos-pc-btn:hover,
.eos-app .eos-chat-emoji-btn:hover,
.eos-app .eos-chat-nl:hover { transform: translateY(var(--eosm-lift-sm)); }

.eos-app .eos-nav-tools button svg,
.eos-app .eos-cn-ibtn svg,
.eos-app .eos-pc-btn svg,
.eos-app .eos-chat-emoji-btn svg,
.eos-app .eos-chat-nl svg,
.eos-app .eos-ntp-tb button .svg,
.eos-app .eos-ntp-tb button .mi {
  transition: transform var(--eosm-base) var(--eosm-spring);
}
.eos-app .eos-nav-tools button:hover svg,
.eos-app .eos-cn-ibtn:hover svg,
.eos-app .eos-pc-btn:hover svg,
.eos-app .eos-chat-emoji-btn:hover svg,
.eos-app .eos-chat-nl:hover svg { transform: scale(var(--eosm-icon-pop)) rotate(-6deg); }
.eos-app .eos-ntp-tb button:hover .svg,
.eos-app .eos-ntp-tb button:hover .mi { transform: scale(var(--eosm-icon-pop)); }

.eos-app .eos-nav-tools button:active,
.eos-app .eos-cn-ibtn:active,
.eos-app .eos-cn-cbtn:active,
.eos-app .eos-pc-btn:active,
.eos-app .eos-ntp-tb button:active,
.eos-app .eos-chat-emoji-btn:active,
.eos-app .eos-chat-nl:active {
  transform: scale(var(--eosm-press));
  transition-duration: var(--eosm-fast);
}

/* -------------------------------------------------------------- cards */
.eos-app .eos-card,
.eos-app .eos-quick-card,
.eos-app .eos-ev-card,
.eos-app .eos-bc-card,
.eos-app .eos-step,
.eos-app .eos-watch__step {
  transition: transform var(--eosm-base) var(--eosm-ease),
              box-shadow var(--eosm-base) var(--eosm-ease),
              border-color var(--eosm-base) var(--eosm-ease);
}
.eos-app .eos-card:hover,
.eos-app .eos-quick-card:hover,
.eos-app .eos-ev-card:hover,
.eos-app .eos-bc-card:hover,
.eos-app .eos-step:hover,
.eos-app .eos-watch__step:hover {
  transform: translateY(var(--eosm-lift));
  box-shadow: var(--eosm-shadow);
}

/* -------------------------------------------------------------- chips */
.eos-app .eos-chip:hover,
.eos-app .eos-hub-pill:hover {
  transform: translateY(var(--eosm-lift-sm)) scale(1.03);
}
.eos-app .eos-chip:active { transform: scale(var(--eosm-press)); transition-duration: var(--eosm-fast); }

/* ------------------------------------------------------------- list rows */
/* A row shifts and reveals its chevron, so "this is tappable" is legible. */
.eos-app .eos-oa-btn,
.eos-app .eos-hub-row,
.eos-app .eos-acct-item {
  transition: background-color var(--eosm-base) var(--eosm-ease),
              padding-left var(--eosm-base) var(--eosm-ease),
              color var(--eosm-base) var(--eosm-ease);
}
.eos-app .eos-hub-row:hover,
.eos-app .eos-acct-item:hover { padding-left: 16px; }

/* ---------------------------------------------------------------- panels */
/* Panels lift a little on hover in the WINDOWED view only. The workspace is
   excluded: a studio tile is dragged, and a transform transition fights a drag. */
.eos-watch--cinema:not(.is-studio) .eos-side,
.eos-watch--cinema:not(.is-studio) .eos-player {
  transition: box-shadow var(--eosm-slow) var(--eosm-ease),
              border-color var(--eosm-slow) var(--eosm-ease);
}
.eos-watch--cinema:not(.is-studio) .eos-side:hover,
.eos-watch--cinema:not(.is-studio) .eos-player:hover { box-shadow: var(--eosm-shadow); }

/* ------------------------------------------------------------------ tabs */
.eos-app .eos-side-tab,
.eos-app .eos-ntp-seg button {
  transition: color var(--eosm-base) var(--eosm-ease),
              background-color var(--eosm-base) var(--eosm-ease);
}

/* --------------------------------------------------------------- entrances */
/* The site already has TWO entrance systems: `.eos-reveal` (platform.js) and
   `.reveal`/`.is-in` (home + broadcast). A third would be one too many, so this
   only adds the STAGGER the owner asked for, to the containers that already
   reveal. Delay is capped: past ~6 items a stagger stops reading as polish and
   starts reading as lag. */
@media (prefers-reduced-motion: no-preference) {
  .eos-app .eosm-stagger > * { animation: eosm-rise var(--eosm-slow) var(--eosm-ease) both; }
  .eos-app .eosm-stagger > *:nth-child(1) { animation-delay: 0ms; }
  .eos-app .eosm-stagger > *:nth-child(2) { animation-delay: 55ms; }
  .eos-app .eosm-stagger > *:nth-child(3) { animation-delay: 110ms; }
  .eos-app .eosm-stagger > *:nth-child(4) { animation-delay: 165ms; }
  .eos-app .eosm-stagger > *:nth-child(5) { animation-delay: 220ms; }
  .eos-app .eosm-stagger > *:nth-child(n+6) { animation-delay: 265ms; }
  @keyframes eosm-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================================
   REDUCED MOTION — extending platform.css:3010, not duplicating it
   ============================================================================
   That block already sets animation:none + transition:none for `.eos-app *`,
   which means every hover transform below would still APPLY, just instantly.
   The list therefore has to name them. The first group is the nine the audit
   found already missing before this file existed; the second is everything new.
   ==========================================================================*/
@media (prefers-reduced-motion: reduce) {
  /* pre-existing gaps */
  .eos-app .eos-chip:hover,
  .eos-app .eos-btn-primary:hover,
  .eos-app .eos-next-steps-toggle:hover,
  .eos-app .theme-toggle:hover,
  .eos-app .theme-toggle:active,
  .eos-app .eos-mobile-nav-close:hover,
  .eos-app .eos-nav-cta:hover,
  .eos-app .eos-nav-signin--icon:hover,
  .eos-app .eos-footer-socials a:hover,
  .eos-app .eos-statusbar-cta:hover,
  /* everything this file adds */
  .eos-app .eos-btn:hover,
  .eos-app .eos-btn:active,
  .eos-app .eos-btn-outline:hover,
  .eos-app .eos-btn-light:hover,
  .eos-app .eos-btn-primary:active,
  .eos-app .eos-nav-cta:active,
  .eos-app .eos-nav-tools button:hover,
  .eos-app .eos-nav-tools button:active,
  .eos-app .eos-cn-ibtn:hover,
  .eos-app .eos-cn-ibtn:active,
  .eos-app .eos-cn-cbtn:hover,
  .eos-app .eos-cn-cbtn:active,
  .eos-app .eos-pc-btn:hover,
  .eos-app .eos-pc-btn:active,
  .eos-app .eos-ntp-tb button:active,
  .eos-app .eos-chat-emoji-btn:hover,
  .eos-app .eos-chat-emoji-btn:active,
  .eos-app .eos-chat-nl:hover,
  .eos-app .eos-chat-nl:active,
  .eos-app .eos-hub-pill:hover,
  .eos-app .eos-chip:active,
  .eos-app .eos-nav-tools button:hover svg,
  .eos-app .eos-cn-ibtn:hover svg,
  .eos-app .eos-pc-btn:hover svg,
  .eos-app .eos-chat-emoji-btn:hover svg,
  .eos-app .eos-chat-nl:hover svg,
  .eos-app .eos-ntp-tb button:hover .svg,
  .eos-app .eos-ntp-tb button:hover .mi {
    transform: none !important;
  }
  /* a row that slides is still motion, even without a transform */
  .eos-app .eos-hub-row:hover,
  .eos-app .eos-acct-item:hover { padding-left: inherit !important; }
  /* and the stagger must not run at all */
  .eos-app .eosm-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   TOUCH — a hover state that sticks is worse than no hover state
   ============================================================================
   responsive.css:318-323 tries to do this at (0,2,0), but the lift it targets is
   declared at (0,3,0) (platform.css:2944), so it LOSES and the lift sticks on a
   phone after tapping. These are written at (0,3,0)+!important so they actually
   win, and they cover the families that guard never listed at all.
   ==========================================================================*/
@media (hover: none) {
  .eos-app .eos-card:hover,
  .eos-app .eos-quick-card:hover,
  .eos-app .eos-ev-card:hover,
  .eos-app .eos-bc-card:hover,
  .eos-app .eos-step:hover,
  .eos-app .eos-watch__step:hover,
  .eos-app .eos-chip:hover,
  .eos-app .eos-hub-pill:hover,
  .eos-app .eos-btn:hover,
  .eos-app .eos-btn-primary:hover,
  .eos-app .eos-btn-outline:hover,
  .eos-app .eos-btn-light:hover,
  .eos-app .eos-nav-cta:hover,
  .eos-app .eos-nav-tools button:hover,
  .eos-app .eos-cn-ibtn:hover,
  .eos-app .eos-pc-btn:hover,
  .eos-app .eos-chat-emoji-btn:hover,
  .eos-app .eos-chat-nl:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .eos-app .eos-nav-tools button:hover svg,
  .eos-app .eos-cn-ibtn:hover svg,
  .eos-app .eos-pc-btn:hover svg,
  .eos-app .eos-chat-emoji-btn:hover svg,
  .eos-app .eos-chat-nl:hover svg { transform: none !important; }
  .eos-app .eos-hub-row:hover,
  .eos-app .eos-acct-item:hover { padding-left: inherit !important; }
}