/* V29 — lightweight animated polish. Only transform/opacity/background where possible. */
:root{--tm-a-green:#72ee67;--tm-a-gold:#d6bd76;--tm-a-red:#e6594c}

/* page entry */
.page-tmnt-v28 .wrapper{animation:tmPageIn .34s ease-out both}
@keyframes tmPageIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}

/* small responsive feedback on tappable cards */
.page-tmnt-v28 .hm-card,.page-tmnt-v28 .up21-card,.page-tmnt-v28 .tm-shop-card,
.page-tmnt-v28 .tm-m-card,.page-tmnt-v28 .v28-action,.page-tmnt-v28 .tm-v28-nav a{
  transition:transform .14s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease
}
.page-tmnt-v28 .hm-card:active,.page-tmnt-v28 .up21-card:active,.page-tmnt-v28 .tm-shop-card:active,
.page-tmnt-v28 .tm-m-card:active,.page-tmnt-v28 .v28-action:active,.page-tmnt-v28 .tm-v28-nav a:active{transform:scale(.975)}

/* cards enter cleanly; only meaningful states keep moving */
.page-tmnt-v28 .hm-card{animation:tmCardIn .34s ease-out both}
.page-tmnt-v28 .hm-card:nth-child(2){animation-delay:.025s}.page-tmnt-v28 .hm-card:nth-child(3){animation-delay:.05s}.page-tmnt-v28 .hm-card:nth-child(4){animation-delay:.075s}.page-tmnt-v28 .hm-card:nth-child(5){animation-delay:.10s}.page-tmnt-v28 .hm-card:nth-child(6){animation-delay:.125s}.page-tmnt-v28 .hm-card:nth-child(7){animation-delay:.15s}.page-tmnt-v28 .hm-card:nth-child(8){animation-delay:.175s}.page-tmnt-v28 .hm-card:nth-child(n+9){animation-delay:.20s}
@keyframes tmCardIn{from{opacity:.55;transform:translateY(4px) scale(.99)}to{opacity:1;transform:none}}
.page-tmnt-v28 .clan-boss-entry{animation:tmClanBoss 2.8s ease-in-out infinite;will-change:box-shadow}
@keyframes tmClanBoss{0%,100%{box-shadow:0 0 12px rgba(168,73,190,.09),inset 0 0 16px rgba(168,73,190,.04)}50%{box-shadow:0 0 22px rgba(198,91,225,.20),inset 0 0 20px rgba(198,91,225,.08)}}
.page-tmnt-v28 .clan-boss-new{animation:tmClanNew 1s steps(2,end) infinite}
@keyframes tmClanNew{0%,49%{opacity:.55}50%,100%{opacity:1}}

/* ready dot — only the tiny status dot pulses */
.page-tmnt-v28 .hm-dot{animation:tmReadyDot 1.75s ease-in-out infinite;will-change:transform,opacity}
@keyframes tmReadyDot{0%,100%{transform:scale(.88);opacity:.75;box-shadow:0 0 3px #38ff2e}50%{transform:scale(1.16);opacity:1;box-shadow:0 0 9px #38ff2e}}

/* ready cards get a very subtle living edge */
.page-tmnt-v28 .hm-card.is-ready{animation:tmReadyEdge 3.2s ease-in-out infinite}
@keyframes tmReadyEdge{0%,100%{border-color:#3a4437}50%{border-color:#547b48}}

/* NEW — visible pulse so the badge is clearly noticeable */
.page-tmnt-v28 .hm-new{animation:tmNew .95s ease-in-out infinite;transform-origin:center;will-change:transform,opacity,filter,box-shadow}
@keyframes tmNew{0%,100%{transform:scale(.90);opacity:.72;filter:brightness(.92);box-shadow:0 0 4px rgba(99,255,38,.16)}50%{transform:scale(1.16);opacity:1;filter:brightness(1.24);box-shadow:0 0 16px rgba(99,255,38,.56)}}

/* active bottom nav */
.page-tmnt-v28 .tm-v28-nav a.active>span{animation:tmNavGlow 2.6s ease-in-out infinite}
@keyframes tmNavGlow{0%,100%{box-shadow:0 0 6px rgba(83,216,77,.13),inset 0 0 7px #000}50%{box-shadow:0 0 13px rgba(83,216,77,.34),inset 0 0 7px #000}}

/* resource and save-banner micro animation */
.page-tmnt-v28 .hm-save-copy small img{animation:tmCoinFloat 2.7s ease-in-out infinite}
@keyframes tmCoinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* progress bars animate into place on page load */
.page-tmnt-v28 .progress._green,.page-tmnt-v28 .tm-m-progress i,.page-tmnt-v28 .v28-home-xp i,
.page-tmnt-v28 .v28-hpbar i{transform-origin:left center;animation:tmBarIn .62s cubic-bezier(.2,.75,.25,1) both}
@keyframes tmBarIn{from{transform:scaleX(.08);opacity:.45}to{transform:scaleX(1);opacity:1}}

/* CTA buttons breathe very subtly */
.page-tmnt-v28 .atom-green,.page-tmnt-v28 .tm-m-btn.green,.page-tmnt-v28 .ws23-action,
.page-tmnt-v28 .wss-up button,.page-tmnt-v28 .tm-buy-btn,.page-tmnt-v28 .v28-action.hit{
  position:relative;overflow:hidden;animation:tmCtaGlow 2.9s ease-in-out infinite
}
@keyframes tmCtaGlow{0%,100%{box-shadow:inset 0 0 10px rgba(82,223,90,.04),0 2px 8px rgba(0,0,0,.22)}50%{box-shadow:inset 0 0 16px rgba(82,223,90,.11),0 0 10px rgba(56,181,68,.12)}}

/* Home portal / dimension X */
.page-tmnt-v28 .hm-portal span{animation:tmPortal 3.4s linear infinite;will-change:transform,opacity}
@keyframes tmPortal{0%{transform:rotate(0deg) scale(.93);opacity:.82}50%{transform:rotate(180deg) scale(1.07);opacity:1}100%{transform:rotate(360deg) scale(.93);opacity:.82}}

/* battle polish */
.page-tmnt-v28 .v28-vs{animation:tmVs 1.55s ease-in-out infinite;will-change:transform,opacity}
@keyframes tmVs{0%,100%{transform:scale(.96);opacity:.78}50%{transform:scale(1.08);opacity:1}}
.page-tmnt-v28 .v28-fighter.me{animation:tmFighterMe 3.2s ease-in-out infinite}
.page-tmnt-v28 .v28-fighter.enemy{animation:tmFighterEnemy 3.2s ease-in-out infinite .35s}
@keyframes tmFighterMe{0%,100%{box-shadow:0 0 0 rgba(57,154,68,0)}50%{box-shadow:0 0 10px rgba(57,154,68,.12)}}
@keyframes tmFighterEnemy{0%,100%{box-shadow:0 0 0 rgba(192,62,54,0)}50%{box-shadow:0 0 10px rgba(192,62,54,.11)}}
.page-tmnt-v28 .v28-scene:before{content:"";position:absolute;inset:-12%;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(92,198,92,.08),transparent 48%);animation:tmSceneBreath 4.3s ease-in-out infinite;will-change:transform,opacity}
.page-tmnt-v28 .v28-scene:after{z-index:2}
@keyframes tmSceneBreath{0%,100%{transform:scale(.95);opacity:.35}50%{transform:scale(1.07);opacity:.78}}
.page-tmnt-v28 .v28-action img{transition:transform .16s ease}
.page-tmnt-v28 .v28-action:active img{transform:scale(1.12) rotate(-3deg)}

/* upgrades / shop card icon only gets a tiny idle float */
.page-tmnt-v28 .up21-card .up21-icon,.page-tmnt-v28 .tm-shop-card>img{animation:tmIconFloat 3.6s ease-in-out infinite}
.page-tmnt-v28 .up21-card:nth-child(even) .up21-icon,.page-tmnt-v28 .tm-shop-card:nth-child(even)>img{animation-delay:.55s}
@keyframes tmIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* notification appearance */
.page-tmnt-v28 .hm-notice,.page-tmnt-v28 .hm-compensation,.page-tmnt-v28 .notf,.page-tmnt-v28 .notice{
  animation:tmNoticeIn .3s ease-out both
}
@keyframes tmNoticeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


.page-tmnt-v28 .hm-world-event{animation:tmWorldEvent 2.35s ease-in-out infinite;will-change:box-shadow,filter}
@keyframes tmWorldEvent{0%,100%{box-shadow:0 0 13px rgba(132,177,58,.10),inset 0 0 0 1px rgba(190,171,73,.08);filter:brightness(.98)}50%{box-shadow:0 0 24px rgba(132,211,75,.22),inset 0 0 0 1px rgba(190,171,73,.15);filter:brightness(1.035)}}
.page-tmnt-v28 .hm-world-symbol{animation:tmWorldSymbol 1.7s ease-in-out infinite}
@keyframes tmWorldSymbol{0%,100%{transform:scale(.96);text-shadow:0 0 5px rgba(255,190,50,.35)}50%{transform:scale(1.07);text-shadow:0 0 13px rgba(255,190,50,.72)}}
.page-tmnt-v28 .hm-world-progress i{transform-origin:left center;animation:tmWorldBar .75s cubic-bezier(.2,.75,.25,1) both}
@keyframes tmWorldBar{from{transform:scaleX(.05);opacity:.5}to{transform:scaleX(1);opacity:1}}
.page-tmnt-v28 .hm-world-reward{animation:tmReward 1.15s ease-in-out infinite}
@keyframes tmReward{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2px) rotate(4deg)}}

/* never punish users who request reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-tmnt-v28 *,.page-tmnt-v28 *:before,.page-tmnt-v28 *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* V53 NEW badges: deliberately obvious but still lightweight. Visibility itself is server-timed to 7 days. */
.page-tmnt-v28 .hm-new{animation:tmNewV53 .88s ease-in-out infinite!important;will-change:transform,opacity,filter,box-shadow!important}
@keyframes tmNewV53{0%,100%{transform:scale(.92);opacity:.70;filter:brightness(.92);box-shadow:0 0 4px rgba(100,255,47,.12)}45%{transform:scale(1.15);opacity:1;filter:brightness(1.32);box-shadow:0 0 15px rgba(105,255,48,.58)}60%{transform:scale(1.07);opacity:.94;filter:brightness(1.10);box-shadow:0 0 9px rgba(105,255,48,.34)}}
.page-home .hm-bg-clanwar.is-ready{animation:tmWarEdge 2.8s ease-in-out infinite}.page-home .hm-live-feed{animation:tmFeedGlow 4.2s ease-in-out infinite}.page-clan .clan-war-entry{animation:tmWarEdge 3.1s ease-in-out infinite}
@keyframes tmWarEdge{0%,100%{box-shadow:0 0 7px rgba(184,152,56,.05),inset 0 0 8px rgba(184,152,56,.02)}50%{box-shadow:0 0 15px rgba(184,152,56,.13),inset 0 0 12px rgba(184,152,56,.04)}}
@keyframes tmFeedGlow{0%,100%{border-color:#29362b}50%{border-color:#3c583e}}
/* V54: new raid gets a living purple edge while NEW is active */
.page-tmnt-v28 .hm-card.hm-bg-raid{animation:tmRaidHome 2.9s ease-in-out infinite}
@keyframes tmRaidHome{0%,100%{box-shadow:0 0 8px rgba(171,66,199,.08),inset 0 0 0 1px rgba(190,92,214,.05)}50%{box-shadow:0 0 18px rgba(190,76,224,.21),inset 0 0 0 1px rgba(211,116,233,.12)}}
.page-raid .raid54-boss{animation:tmRaidBoss 3.4s ease-in-out infinite}
@keyframes tmRaidBoss{0%,100%{box-shadow:0 0 15px rgba(176,74,206,.11),inset 0 0 20px rgba(0,0,0,.35)}50%{box-shadow:0 0 25px rgba(190,80,222,.22),inset 0 0 20px rgba(0,0,0,.35)}}

/* V55 tournament motion */
.page-tournament .tr55-trophy span{animation:tr55Trophy 2.8s ease-in-out infinite}.page-tournament .tr55-final-cup span{animation:tr55Cup 2.4s ease-in-out infinite}.page-tournament .tr55-duel-row.winner{animation:tr55Winner 2.1s ease-in-out infinite}.page-tournament .tr55-actions .fight{animation:tr55Fight 1.65s ease-in-out infinite}
@keyframes tr55Trophy{0%,100%{transform:translateY(0) scale(.98);filter:drop-shadow(0 0 6px rgba(190,173,71,.2))}50%{transform:translateY(-2px) scale(1.03);filter:drop-shadow(0 0 14px rgba(190,173,71,.42))}}
@keyframes tr55Cup{0%,100%{transform:scale(.96);filter:brightness(.95)}50%{transform:scale(1.08);filter:brightness(1.2)}}
@keyframes tr55Winner{0%,100%{box-shadow:inset 2px 0 #67b837}50%{box-shadow:inset 2px 0 #8cf052,0 0 8px rgba(99,213,68,.13)}}
@keyframes tr55Fight{0%,100%{box-shadow:0 0 4px rgba(82,222,67,.10)}50%{box-shadow:0 0 14px rgba(82,222,67,.26)}}
.page-home .hm-bg-tournament,.page-home-modern .hm-bg-tournament{animation:tmTournamentHome 2.7s ease-in-out infinite!important}@keyframes tmTournamentHome{0%,100%{box-shadow:0 0 10px rgba(155,176,56,.08),inset 0 0 0 1px rgba(203,181,72,.06)}50%{box-shadow:0 0 21px rgba(184,198,63,.20),inset 0 0 0 1px rgba(231,206,80,.13)}}

/* V60 — animate the city alert card only while the event is LIVE */
@keyframes tmCityAlertLive{0%,100%{box-shadow:0 0 7px rgba(255,54,45,.13),inset 0 0 0 1px rgba(255,82,72,.07)}50%{box-shadow:0 0 20px rgba(255,49,39,.34),0 0 5px rgba(255,112,61,.16),inset 0 0 0 1px rgba(255,102,90,.18)}}
@keyframes tmCityAlertSiren{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(255,70,62,.25))}50%{transform:scale(1.11);filter:drop-shadow(0 0 8px rgba(255,67,58,.7))}}
@keyframes tmCityAlertLiveText{0%,100%{opacity:.75}50%{opacity:1}}
.page-home .hm-bg-alert.alert-live{animation:tmCityAlertLive 1.25s ease-in-out infinite!important;border-color:#9d3d35!important}
.page-home .hm-bg-alert.alert-live .hm-icon-alert{animation:tmCityAlertSiren .85s ease-in-out infinite!important}
.page-home .hm-bg-alert.alert-live em{color:#ff756b!important;font-weight:700!important;animation:tmCityAlertLiveText .75s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){.page-home .hm-bg-alert.alert-live,.page-home .hm-bg-alert.alert-live .hm-icon-alert,.page-home .hm-bg-alert.alert-live em{animation:none!important}}