/* ══════ GOD ANIMATIONS ══════ */

/* ── HEADER SKULL pulse ── */
.hdr-skull{
  display:inline-block;
  animation:skullBob 2.5s ease-in-out infinite;
  /* filter removed for perf */
}
@keyframes skullBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%    {transform:translateY(-4px) rotate(3deg)}
}

/* ── BOTTOM NAV active glow pulse ── */
.bnav.active .bn-ico{
  animation:navGlow 1.8s ease-in-out infinite alternate;
}
@keyframes navGlow{
  from{transform:scale(1);  opacity:.85}
  to  {transform:scale(1.18);opacity:1}
}

/* ── SCORE RING outer ring spin ── */
.ring-wrap::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-right-color:var(--accent2);
  animation:ringOrbit 3s linear infinite;
  pointer-events:none;
}
@keyframes ringOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── EX-CARD entrance ── */
.ex-card{
  animation:exSlide .35s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes exSlide{
  from{opacity:0;transform:translateX(-20px) scale(.96)}
  to  {opacity:1;transform:translateX(0)     scale(1)}
}

/* ── LEADERBOARD ROW entrance ── */
.lb-row{
  animation:lbDrop .4s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes lbDrop{
  from{opacity:0;transform:translateY(-12px) scale(.97)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}

/* ── PODIUM BLOCK rise animation ── */
.pod-block{
  transform-origin:bottom;
  animation:podRise .7s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes podRise{
  from{transform:scaleY(0)}
  to  {transform:scaleY(1)}
}
.pod-item.p1 .pod-block{animation-delay:.3s}
.pod-item.p2 .pod-block{animation-delay:.1s}
.pod-item.p3 .pod-block{animation-delay:.2s}

/* ── CROWN BOUNCE on #1 ── */
.pod-item.p1 .pod-crown{
  display:inline-block;
  animation:crownBounce 1.2s ease-in-out infinite;
}
@keyframes crownBounce{
  0%,100%{transform:translateY(0) rotate(-5deg)}
  50%    {transform:translateY(-5px) rotate(5deg)}
}

/* ── STATS TILE count-up shimmer ── */
.stat-tile{
  position:relative;overflow:hidden;
  animation:tileIn .4s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes tileIn{
  from{opacity:0;transform:scale(.85)}
  to  {opacity:1;transform:scale(1)}
}
.stat-tile::before{
  content:'';
  position:absolute;
  top:0;left:-80%;
  width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-20deg);
  animation:tileShimmer 4s ease-in-out infinite;
}
@keyframes tileShimmer{
  0%{left:-80%}60%,100%{left:160%}
}

/* ring-num text-shadow removed for perf */

/* ── SQUAD CODE — just scale pulse ── */
.sc-code{
  animation:codePulse 2.5s ease-in-out infinite alternate;
}
@keyframes codePulse{
  from{transform:scale(1)}
  to  {transform:scale(1.04)}
}

/* ── MEMBER CHIP entrance ── */
.member-chip{
  animation:chipSlide .35s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes chipSlide{
  from{opacity:0;transform:translateX(20px)}
  to  {opacity:1;transform:translateX(0)}
}

/* ── CHAT MESSAGE entrance enhanced ── */
.chat-msg{
  animation:chatPopGod .4s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes chatPopGod{
  from{opacity:0;transform:translateY(30px) scale(.88) rotate(-1deg)}
  to  {opacity:1;transform:translateY(0)    scale(1)   rotate(0)}
}

/* ── SEND BUTTON ripple ── */
.chat-send-btn:active{
  animation:sendRipple .3s ease;
}
@keyframes sendRipple{
  0%  {transform:scale(1)}
  50% {transform:scale(.9)}
  100%{transform:scale(1)}
}

/* ── MODAL slide-up enhanced ── */
.modal-box{
  animation:modalGod .35s cubic-bezier(.21,1.04,.67,.98);
}
@keyframes modalGod{
  from{transform:translateY(100%) scale(.97);opacity:.4}
  to  {transform:translateY(0)    scale(1);  opacity:1}
}

/* rtPulse removed for perf */

/* themeActiveGlow removed for perf */

/* ── SPLASH ENHANCED ── */
#splash{
  background:radial-gradient(ellipse at 50% 50%,#150030 0%,#080010 60%,#000 100%);
}
.sp-skull{
  filter:drop-shadow(0 0 30px #7c6fff);
  animation:splashSkull 1s ease-in-out infinite alternate;
}
@keyframes splashSkull{
  from{transform:scale(1)}
  to  {transform:scale(1.15)}
}
.sp-title{
  animation:titleReveal 1s cubic-bezier(.21,1.04,.67,.98);
}
@keyframes titleReveal{
  from{opacity:0;letter-spacing:8px;transform:translateY(10px)}
  to  {opacity:1;letter-spacing:1px;transform:translateY(0)}
}
.sp-bar{
  box-shadow:0 0 14px rgba(124,111,255,.4);
}

/* ── AUTH BOX entrance ── */
.auth-box{
  animation:authIn .6s cubic-bezier(.21,1.04,.67,.98);
}
@keyframes authIn{
  from{opacity:0;transform:translateY(40px) scale(.92)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}

/* ── PAGE TRANSITION enhanced ── */
.page{animation:pageSlide .3s cubic-bezier(.21,1.04,.67,.98)}
@keyframes pageSlide{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}

/* ── GOKU LIGHTNING (goku theme) — handled in unique animations ── */

/* redPulse removed for perf */

/* ownerShine removed for perf */

/* ── STAT TILES stagger ── */
.stat-tile:nth-child(1){animation-delay:.05s}
.stat-tile:nth-child(2){animation-delay:.10s}
.stat-tile:nth-child(3){animation-delay:.15s}
.stat-tile:nth-child(4){animation-delay:.20s}
.stat-tile:nth-child(5){animation-delay:.25s}
.stat-tile:nth-child(6){animation-delay:.30s}

/* ── STREAK FIRE bounce ── */
.streak{
  display:inline-block;
  animation:streakBounce 1.8s ease-in-out infinite;
}
@keyframes streakBounce{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.12)}
}
.streak{will-change:transform}

/* ── SCROLLBAR GOD ── */
::-webkit-scrollbar-track{
  background:rgba(255,255,255,.03);
  border-radius:20px;
}

/* ── TOAST ENHANCED ── */
#toast.show{
  animation:toastPop .3s cubic-bezier(.21,1.04,.67,.98);
}
@keyframes toastPop{
  from{transform:translateX(-50%) translateY(16px) scale(.88);opacity:0}
  to  {transform:translateX(-50%) translateY(0)    scale(1);  opacity:1}
}

/* ── ADD EXERCISE BUTTON pulse ── */
.add-ex-btn{
  animation:addPulse 3s ease-in-out infinite;
}
@keyframes addPulse{
  0%,100%{opacity:.85}
  50%    {opacity:1}
}

/* ── WEEK STRIP DOT DONE bounce ── */
.wday-dot.done{
  animation:dotDone .4s cubic-bezier(.21,1.04,.67,.98);
}
@keyframes dotDone{
  from{transform:scale(0) rotate(180deg)}
  to  {transform:scale(1) rotate(0)}
}

/* ── SAKURA PETALS — handled in themes.css unique theme animations block ── */

/* ── MATRIX RAIN — theme removed ── */

/* ── BOTTOM NAV INDICATOR DOT ── */
.bnav{position:relative}
.bnav.active::after{
  content:'';
  position:absolute;
  bottom:4px;
  left:50%;
  transform:translateX(-50%);
  width:4px;height:4px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  animation:navDot .5s cubic-bezier(.21,1.04,.67,.98) both;
}
@keyframes navDot{
  from{opacity:0;transform:translateX(-50%) scale(0)}
  to  {opacity:1;transform:translateX(-50%) scale(1)}
}

/* ── HEADER accent border — static, no repaint ── */
.app-hdr{
  border-bottom:1px solid var(--border);
}

/* ══ PAGE-BASED ANIMATION OPTIMIZATION ══
   Hidden pages ke elements ko display se bahar rakh */
.page.hidden * {
  transition: none !important;
}
/* Background animations bhi page switch pe pause */
body.page-switching .goku-aura,
body.page-switching .vegeta-aura,
body.page-switching .theme-floating-layer,
body.page-switching .particles {
  animation-play-state: paused !important;
}

/* ══════════════════════════════════════════════════════════
   ⚡ GOD LEVEL PERFORMANCE + SMOOTH ANIMATIONS ⚡
   GPU acceleration, silky transitions, zero jank
══════════════════════════════════════════════════════════ */

/* Global GPU promotion for animated elements */
.page, .modal-box, .modal-ov,
.ex-card, .lb-row, .stat-card,
.train-card, .bnav, .score-ring,
.gami-avatar, .badge-item, .av-item,
.chat-bubble, .chat-msg, .chat-tab-box,
.anime-char-card, .theme-opt,
.auth-box, .auth-btn,
.phys-modal-outer, .train-hero-banner,
.fix-pain-btn, .ai-cta-btn,
.goku-aura, .vegeta-aura,
.sakura-petal, .lalisa-crown, .lalisa-glitter,
.jennie-drip, .rose-heart {
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth scroll everywhere */
* { scroll-behavior: smooth; }
.pages, .modal-box, .phys-modal-outer {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* ── BUTTERY PAGE TRANSITIONS ── */
.page {
  animation: godPageIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes godPageIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── STAGGERED CARD ENTRANCES ── */
.lb-row:nth-child(1) { animation: godCardIn 0.3s 0.00s cubic-bezier(0.34,1.56,0.64,1) both; }
.lb-row:nth-child(2) { animation: godCardIn 0.3s 0.04s cubic-bezier(0.34,1.56,0.64,1) both; }
.lb-row:nth-child(3) { animation: godCardIn 0.3s 0.08s cubic-bezier(0.34,1.56,0.64,1) both; }
.lb-row:nth-child(4) { animation: godCardIn 0.3s 0.12s cubic-bezier(0.34,1.56,0.64,1) both; }
.lb-row:nth-child(5) { animation: godCardIn 0.3s 0.16s cubic-bezier(0.34,1.56,0.64,1) both; }
.lb-row:nth-child(n+6) { animation: godCardIn 0.3s 0.20s cubic-bezier(0.34,1.56,0.64,1) both; }
.ex-card { animation: godCardIn 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes godCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── BUTTERY BUTTON TAPS ── */
.ex-card, .anime-char-card, .theme-opt,
.badge-item, .av-item, .chat-tab-box, .gami-avatar {
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.18s ease,
              border-color 0.18s ease,
              background 0.2s ease !important;
}
.ex-card:active { transform: scale(0.94) translateZ(0) !important; }
.anime-char-card:active { transform: scale(0.93) translateZ(0) !important; }
.badge-item:active, .av-item:active { transform: scale(0.90) translateZ(0) !important; }
.gami-avatar:active { transform: scale(0.91) translateZ(0) !important; }

/* ── SMOOTH HOVER LIFTS ── */
.ex-card:hover {
  transform: translateY(-4px) translateZ(0) !important;
  box-shadow: 0 8px 28px rgba(124,111,255,0.25) !important;
}
.lb-row:hover {
  transform: translateX(4px) translateZ(0);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── BOTTOM NAV — smooth active indicator ── */
.bnav {
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.bnav:active { transform: scale(0.88) translateZ(0) !important; }
.bnav.active { transform: translateY(-2px) translateZ(0); }

/* ── MODAL OPEN/CLOSE SMOOTH ── */
.modal-ov {
  animation: godModalBg 0.25s ease both;
}
@keyframes godModalBg {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(4px); }
}
.modal-box, .phys-modal-outer {
  animation: godModalSlide 0.3s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes godModalSlide {
  from { opacity: 0; transform: translateY(60px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── AUTH BOX ENTRANCE ── */
.auth-box {
  animation: godAuthIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
@keyframes godAuthIn {
  from { opacity: 0; transform: translateY(40px) scale(0.93); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.auth-btn {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease !important;
}
.auth-btn:active { transform: scale(0.95) translateZ(0) !important; }

/* ── SCORE RING SMOOTH ── */
.score-ring circle {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── RIPPLE EFFECT on tap ── */
.ex-card, .lb-row, .bnav {
  position: relative;
  overflow: hidden;
}
/* PERF/DEDUP FIX: .ripple + @keyframes rippleAnim removed from here — this
   exact selector is redeclared in full (same properties) by css/core/
   premium-ui.css, which is @imported later in main.css, so that copy has
   always owned every property on .ripple. This copy never rendered
   anything different and was pure dead weight. See premium-ui.css. */

/* ── TOAST SMOOTH ── */
#toast {
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── TRAIN PAGE CARDS ── */
.train-prog-wrap, .train-section-wrap {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease;
  will-change: transform;
}
.train-prog-wrap:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 6px 20px rgba(124,111,255,0.15);
}

/* ── AI CTA BUTTON ── */
.ai-cta-btn {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease !important;
}
.ai-cta-btn:active { transform: scale(0.95) translateZ(0) !important; }

/* ── THEME OPTIONS ── */
.theme-opt {
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease !important;
}
.theme-opt:active { transform: scale(0.91) translateZ(0) !important; }
.theme-opt:hover  { transform: translateY(-3px) scale(1.03) translateZ(0) !important; }

/* ── INACTIVE PAGE ANIMATIONS PAUSED (perf) ── */

/* ── SMOOTH INPUT FOCUS ── */
input, textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus, textarea:focus {
  transform: translateZ(0);
}

/* ── GAMI TOGGLE SMOOTH ── */
.gami-toggle-arr {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── CHAT MESSAGES ── */
.chat-msg {
  animation: godCardIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
  will-change: transform, opacity;
}

/* ── LOADING DOTS SMOOTH ── */
.ai-typing span {
  animation: godDot 1.4s cubic-bezier(0.4,0,0.6,1) infinite !important;
}
@keyframes godDot {
  0%, 80%, 100% { transform: scale(0.7) translateZ(0); opacity: 0.3; }
  40%           { transform: scale(1.2) translateZ(0); opacity: 1;   }
}

/* ── CONTAIN for perf ── */
.page { contain: layout style; }
.ex-card, .lb-row { contain: layout style paint; }



/* Settings gear button in header */
.hdr-settings-btn{background:rgba(124,111,255,.13);border:1px solid rgba(124,111,255,.3);color:var(--accent);width:34px;height:34px;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.hdr-settings-btn:hover{background:rgba(124,111,255,.25);transform:rotate(30deg)}
.hdr-settings-btn:active{transform:rotate(60deg) scale(.92)}


/* ══════════════════════════════════════════════
   ANIME-STYLE DRAMATIC ANIMATIONS — Reaper Squad
   ══════════════════════════════════════════════ */

/* ── 3. NAV TAP — Anime bounce with overshoot ─────────────── */
.bnav:active .bn-ico {
  animation: navImpact .28s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes navImpact {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(.8) translateY(4px); }
  70%  { transform: scale(1.3) translateY(-6px); }
  85%  { transform: scale(.95) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}

/* Active nav icon — dramatic power glow */
.bnav.active .bn-ico {
  animation: navPowerGlow 2s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 8px var(--accent));
}
@keyframes navPowerGlow {
  from { transform: scale(1.05) translateY(-1px); opacity: .85; }
  to   { transform: scale(1.22) translateY(-3px); opacity: 1;   }
}

/* ── 4. BADGE UNLOCK — dramatic reveal ───────────────────── */
.badge-item:not(.locked):active {
  animation: badgeFlash .35s cubic-bezier(.36,.07,.19,.97) !important;
}
@keyframes badgeFlash {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(.88); filter: brightness(.7); }
  65%  { transform: scale(1.18); filter: brightness(1.6); }
  100% { transform: scale(1);   filter: brightness(1); }
}

/* PERF/DEDUP FIX: .badge-item entrance animation + @keyframes badgePop
   removed from here — css/core/premium-ui.css declares the same selector
   with the same !important weight and is imported later in main.css, so
   its badgePop (both the animation property AND the @keyframes body) has
   always been the one actually used. This copy — and its bouncier
   rotate(4deg) overshoot keyframe — never rendered. See premium-ui.css. */

/* ── 5. GAMI STATS — count shimmer ───────────────────────── */
.gami-stat-num {
  animation: statPulse 3s ease-in-out infinite alternate;
  display: inline-block;
}
@keyframes statPulse {
  from { transform: scale(1);    opacity: .85; }
  to   { transform: scale(1.08); opacity: 1;   }
}

/* ── 6. XP BAR — glowing fill with traveling light ───────── */
.gami-xp-fill {
  position: relative;
  overflow: hidden;
}
.gami-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: xpBeam 2.4s ease-in-out infinite;
}
@keyframes xpBeam {
  0%   { left: -60%; }
  70%, 100% { left: 140%; }
}

/* ── 7. LEADERBOARD #1 ROW — aura pulse ──────────────────── */
.lb-row:first-child {
  animation: lbKingAura 2.5s ease-in-out infinite alternate !important;
  position: relative;
}
@keyframes lbKingAura {
  from { box-shadow: 0 0 0   rgba(251,191,36,.0),  inset 0 0 0  rgba(251,191,36,.0); }
  to   { box-shadow: 0 0 18px rgba(251,191,36,.35), inset 0 0 8px rgba(251,191,36,.08); }
}

/* ── 8. SKULL HEADER — idle ki breath ────────────────────── */
.hdr-skull {
  display: inline-block;
  animation: skullBreath 3s ease-in-out infinite !important;
  transform-origin: center bottom;
}
@keyframes skullBreath {
  0%,100% { transform: scale(1)    translateY(0)    rotate(0deg); }
  30%     { transform: scale(1.08) translateY(-2px) rotate(-3deg); }
  60%     { transform: scale(1.05) translateY(-1px) rotate(2deg); }
  80%     { transform: scale(.97)  translateY(1px)  rotate(-1deg); }
}

/* ── 9. PAGE ENTRANCE — dramatic staggered panels ─────────── */
.page {
  animation: pageDramaIn .38s cubic-bezier(.21,1.04,.67,.98) both !important;
}
@keyframes pageDramaIn {
  from { opacity: 0; transform: translateY(22px) scale(.96) skewX(.5deg); }
  to   { opacity: 1; transform: translateY(0)    scale(1)   skewX(0); }
}

/* ── 10. STAT TILES — staggered wave entrance ─────────────── */
.stat-tile:nth-child(1) { animation-delay: .00s; }
.stat-tile:nth-child(2) { animation-delay: .07s; }
.stat-tile:nth-child(3) { animation-delay: .14s; }

/* ── 12. STREAK FIRE — dramatic kanji-style surge ─────────── */
.lb-streak-badge.hot {
  animation: streakSurge 1.4s ease-in-out infinite !important;
  display: inline-block;
}
@keyframes streakSurge {
  0%,100% { transform: scale(1)    rotate(0deg);  }
  25%     { transform: scale(1.18) rotate(-5deg); }
  50%     { transform: scale(1.1)  rotate(4deg);  }
  75%     { transform: scale(1.2)  rotate(-3deg); }
}

/* ── 13. SETTINGS GEAR — dramatic spin on hover ──────────── */
.hdr-settings-btn:hover {
  transform: rotate(90deg) scale(1.1) !important;
  transition: transform .25s cubic-bezier(.36,.07,.19,.97), background .2s !important;
}
.hdr-settings-btn:active {
  transform: rotate(180deg) scale(.9) !important;
}

/* ── 14. SCORE RING — breathing power pulse ──────────────── */
.score-ring {
  animation: ringPower 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px var(--accent));
}
@keyframes ringPower {
  from { filter: drop-shadow(0 0 4px  var(--accent)); transform: rotate(-90deg) scale(1);    }
  to   { filter: drop-shadow(0 0 14px var(--accent)); transform: rotate(-90deg) scale(1.04); }
}

/* ── 15. MEMBER CHIP — staggered slide from right ──────────── */
.member-chip:nth-child(odd)  { animation: chipSlideR .4s cubic-bezier(.21,1.04,.67,.98) both; }
.member-chip:nth-child(even) { animation: chipSlideL .4s cubic-bezier(.21,1.04,.67,.98) both; }
@keyframes chipSlideR {
  from { opacity: 0; transform: translateX(28px) scale(.93); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}
@keyframes chipSlideL {
  from { opacity: 0; transform: translateX(-28px) scale(.93); }
  to   { opacity: 1; transform: translateX(0)     scale(1); }
}