/* ==========================================================================
   THE FAMILIES — HOLLYWOOD CUT
   Couche spectaculaire : générique, projecteurs, transitions et mise en scène.
   ========================================================================== */

:root {
  --hollywood-green: #75ff83;
  --hollywood-gold: #f3c85c;
  --hollywood-black: #010302;
  --hollywood-ease: cubic-bezier(.16, 1, .3, 1);
  --hollywood-cut: cubic-bezier(.77, 0, .18, 1);
}

/* ---------- texture caméra et barres cinémascope ---------- */
.cinema-bars {
  position: fixed;
  inset: 0;
  z-index: 195;
  pointer-events: none;
}

.cinema-bars::before,
.cinema-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(34px, 7.5vh, 92px);
  background: #000;
  box-shadow: 0 0 60px rgba(0, 0, 0, .8);
  transition: transform 1.25s var(--hollywood-ease);
}

.cinema-bars::before { top: 0; }
.cinema-bars::after { bottom: 0; }
.cinema-bars.open::before { transform: translateY(-102%); }
.cinema-bars.open::after { transform: translateY(102%); }
.cinema-bars.close::before,
.cinema-bars.close::after { transform: none; transition-duration: .52s; }

.film-burn {
  position: fixed;
  inset: 0;
  z-index: 194;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--burn-x, 22%) 50%, rgba(255, 248, 187, .95) 0 1%, rgba(172, 255, 118, .74) 5%, rgba(31, 255, 79, .22) 17%, transparent 42%),
    linear-gradient(90deg, rgba(3, 255, 61, .1), transparent 35%);
  mix-blend-mode: screen;
  filter: saturate(1.6);
}

.film-burn.flash { animation: filmBurn .72s steps(8) both; }

@keyframes filmBurn {
  0% { opacity: 0; transform: scaleX(.25) translateX(-50%); }
  18% { opacity: .95; }
  62% { opacity: .38; transform: scaleX(1.2) translateX(12%); }
  100% { opacity: 0; transform: scaleX(1.5) translateX(50%); }
}

.film-scratch {
  position: fixed;
  top: -10vh;
  bottom: -10vh;
  z-index: 119;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(225, 255, 230, .38) 12%, rgba(225, 255, 230, .08) 80%, transparent);
  box-shadow: 2px 0 rgba(99, 255, 114, .08);
  opacity: 0;
  animation: filmScratch .35s steps(2) both;
}

@keyframes filmScratch {
  20%, 65% { opacity: .6; transform: translateX(2px); }
  40% { opacity: .12; transform: translateX(-1px); }
  100% { opacity: 0; }
}

/* ---------- générique d'ouverture ---------- */
#splash {
  isolation: isolate;
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(1, 3, 2, .96), rgba(1, 3, 2, .5) 48%, rgba(1, 3, 2, .86)),
    linear-gradient(0deg, #010302, transparent 48%, rgba(1, 3, 2, .6)),
    url("hero-families.webp") center 38% / cover no-repeat;
}

#splash::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35%;
  background:
    conic-gradient(from 205deg at 50% 50%, transparent 0 10%, rgba(117, 255, 131, .16) 13%, transparent 17% 38%, rgba(255, 238, 164, .07) 41%, transparent 44%);
  filter: blur(28px);
  animation: projectorSweep 5s ease-in-out infinite alternate;
}

#splash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(180deg, #000 0 7vh, transparent 7vh calc(100% - 7vh), #000 calc(100% - 7vh)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .62) 100%);
}

@keyframes projectorSweep {
  from { transform: rotate(-7deg) translateX(-8%); }
  to { transform: rotate(8deg) translateX(8%); }
}

#splash .sp-kicker {
  position: relative;
  z-index: 3;
  margin-bottom: 18px;
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: .58em;
  text-transform: uppercase;
  color: rgba(223, 255, 227, .64);
  opacity: 0;
  transform: translateY(14px);
  animation: studioKicker .7s .22s var(--hollywood-ease) forwards;
}

@keyframes studioKicker {
  to { opacity: 1; transform: none; }
}

#splash .sp-tag {
  position: relative;
  z-index: 3;
  font-size: clamp(74px, 15vw, 220px);
  line-height: .78;
  letter-spacing: .028em;
  color: #f3f8f1;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, .6),
    0 0 36px rgba(117, 255, 131, .28),
    0 30px 90px rgba(0, 0, 0, .8);
  perspective: 700px;
}

#splash .sp-tag::before,
#splash .sp-tag::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  white-space: nowrap;
}

#splash .sp-tag::before {
  content: "THE";
  top: -.65em;
  transform: translateX(-50%);
  font-size: .2em;
  letter-spacing: .6em;
  color: var(--hollywood-green);
  text-shadow: 0 0 22px rgba(117, 255, 131, .8);
}

#splash .sp-tag::after {
  content: "A CTG RP ORIGINAL";
  bottom: -1.6em;
  transform: translateX(-50%);
  font: 700 .065em/1 'Space Mono', monospace;
  letter-spacing: .52em;
  color: var(--hollywood-gold);
  text-shadow: none;
}

#splash .sp-tag span {
  transform-origin: 50% 100%;
  animation-name: titleDrop;
  animation-duration: .82s;
  animation-timing-function: var(--hollywood-ease);
}

@keyframes titleDrop {
  0% { opacity: 0; transform: translateY(-85px) rotateX(72deg) scale(.72); filter: blur(18px); }
  55% { opacity: 1; filter: blur(0); }
  78% { transform: translateY(5px) rotateX(-5deg) scale(1.025); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

#splash .sp-rule {
  position: relative;
  z-index: 3;
  width: min(64vw, 760px);
  height: 1px;
  margin-top: 42px;
  overflow: visible;
  background: linear-gradient(90deg, transparent, rgba(117, 255, 131, .8), transparent);
  box-shadow: 0 0 14px rgba(117, 255, 131, .5);
  transform: scaleX(0);
  animation: studioRule 1s 1.25s var(--hollywood-ease) forwards;
}

#splash .sp-rule::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px 6px var(--hollywood-green);
  animation: ruleSpark 1.1s 1.2s var(--hollywood-ease) both;
}

@keyframes studioRule { to { transform: scaleX(1); } }
@keyframes ruleSpark {
  from { left: 0; opacity: 0; }
  15% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

#splash .sp-sub {
  position: relative;
  z-index: 3;
  margin-top: 22px;
  animation: studioSub .75s 1.55s var(--hollywood-ease) forwards;
}

@keyframes studioSub {
  from { opacity: 0; letter-spacing: 1.1em; filter: blur(6px); }
  to { opacity: 1; letter-spacing: .55em; filter: none; }
}

#splash.out { animation: studioOut .95s .05s var(--hollywood-cut) forwards; }

@keyframes studioOut {
  0% { clip-path: inset(0); transform: scale(1); filter: brightness(1); }
  38% { filter: brightness(2.6) saturate(.4); }
  100% { clip-path: inset(49.7% 0); transform: scale(1.07); filter: brightness(.4); }
}

/* ---------- projecteurs et caméra du hero ---------- */
.stage-lights,
.hero-lens,
.hero-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-lights {
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s .3s;
  mix-blend-mode: screen;
}

.hollywood-ready .stage-lights { opacity: 1; }

.stage-lights i {
  position: absolute;
  top: -34%;
  left: var(--beam-left);
  width: clamp(170px, 24vw, 420px);
  height: 130%;
  transform-origin: 50% 0;
  transform: rotate(var(--beam-rotate));
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(193, 255, 199, .23), rgba(75, 255, 104, .035) 60%, transparent);
  filter: blur(20px);
  opacity: var(--beam-opacity, .3);
  animation: beamDance var(--beam-speed, 12s) ease-in-out infinite alternate;
}

.stage-lights i:nth-child(2) { animation-delay: -5s; }
.stage-lights i:nth-child(3) { animation-delay: -8s; }

@keyframes beamDance {
  from { transform: rotate(calc(var(--beam-rotate) - 7deg)) translateX(-6%); opacity: calc(var(--beam-opacity) * .65); }
  to { transform: rotate(calc(var(--beam-rotate) + 8deg)) translateX(8%); opacity: var(--beam-opacity); }
}

.hero-haze {
  z-index: 1;
  inset: auto -15% -24% -15%;
  height: 62%;
  background:
    radial-gradient(ellipse at 35% 70%, rgba(84, 255, 108, .11), transparent 42%),
    radial-gradient(ellipse at 72% 70%, rgba(243, 200, 92, .055), transparent 38%);
  filter: blur(25px);
  animation: hazeBreath 7s ease-in-out infinite alternate;
}

@keyframes hazeBreath {
  to { transform: translateY(-4%) scale(1.08); opacity: .7; }
}

.hero-lens {
  z-index: 4;
  inset: auto;
  left: var(--lens-x, 72%);
  top: var(--lens-y, 34%);
  width: clamp(180px, 28vw, 450px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: .6;
  background:
    radial-gradient(circle, rgba(255, 255, 226, .55) 0 .6%, rgba(143, 255, 150, .22) 1.2%, transparent 4%),
    radial-gradient(circle, transparent 0 22%, rgba(85, 255, 105, .06) 22.4% 23%, transparent 23.5% 40%, rgba(255, 221, 122, .035) 40.4% 41%, transparent 42%);
  filter: blur(.25px);
  mix-blend-mode: screen;
  transition: left .8s var(--hollywood-ease), top .8s var(--hollywood-ease);
}

.hero-cinema-meta {
  display: flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin-bottom: 18px;
  font: 700 9px/1 'Space Mono', monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(224, 255, 228, .72);
  opacity: 0;
  animation: metaRoll .8s 2.75s var(--hollywood-ease) forwards;
}

.hero-cinema-meta .take {
  padding: 6px 9px;
  border: 1px solid rgba(117, 255, 131, .28);
  border-radius: 999px;
  color: var(--hollywood-green);
  background: rgba(117, 255, 131, .06);
  box-shadow: inset 0 1px rgba(255, 255, 255, .05);
}

.hero-cinema-meta .live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hollywood-green);
  box-shadow: 0 0 12px var(--hollywood-green);
  animation: livePulse 1.3s ease-in-out infinite;
}

@keyframes metaRoll {
  from { opacity: 0; transform: translateX(-40px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes livePulse { 50% { opacity: .25; transform: scale(.7); } }

.hero h1 {
  isolation: isolate;
  transform-style: preserve-3d;
  animation: hollywoodTitle 1.45s 2.3s var(--hollywood-ease) both;
}

.hero h1::before {
  transform: translate3d(7px, 6px, -1px);
  opacity: .62;
  animation: titleEcho 6s 4s ease-in-out infinite alternate;
}

.hero h1::after {
  content: attr(data-shadow);
  position: absolute;
  inset: 0;
  z-index: 2;
  color: transparent;
  background: linear-gradient(110deg, transparent 15%, rgba(255, 255, 255, .95) 43%, rgba(177, 255, 187, .58) 47%, transparent 66%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  animation: titleSheen 5.8s 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hollywoodTitle {
  0% { opacity: 0; transform: perspective(900px) translateY(105px) rotateX(24deg) scale(.9); filter: blur(20px); clip-path: inset(0 100% 0 0); }
  52% { opacity: 1; filter: blur(0); }
  78% { clip-path: inset(0); transform: perspective(900px) translateY(-4px) rotateX(-1deg) scale(1.015); }
  100% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
}

@keyframes titleEcho {
  to { transform: translate3d(12px, 3px, -1px); opacity: .28; }
}

@keyframes titleSheen {
  0%, 64% { background-position: 180% 0; opacity: 0; }
  73% { opacity: .85; }
  89%, 100% { background-position: -80% 0; opacity: 0; }
}

.hero h1 .on-top {
  animation: hollywoodStamp .8s 3.4s var(--hollywood-cut) both, tagGlow 3.5s 4.2s ease-in-out infinite alternate;
}

@keyframes hollywoodStamp {
  0% { opacity: 0; transform: translate(120px, -50px) rotate(12deg) scale(1.7); filter: blur(7px); }
  65% { opacity: 1; transform: translate(-6px, 4px) rotate(-5deg) scale(.96); filter: none; }
  100% { opacity: 1; transform: rotate(-3.5deg); filter: none; }
}

.hero-tag { animation-delay: 2.55s; }
.hero-sub { animation-delay: 3.15s; }
.btn-row { animation-delay: 3.42s; }

.hero-film-label {
  position: absolute;
  z-index: 4;
  right: 28px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: center;
  font: 700 8px/1 'Space Mono', monospace;
  letter-spacing: .34em;
  color: rgba(229, 255, 232, .45);
  text-transform: uppercase;
}

.hero-film-label::before,
.hero-film-label::after {
  content: "";
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(117, 255, 131, .48));
}

.hero-film-label::after { transform: scaleX(-1); }

/* ---------- transition de chapitre ---------- */
#wipe {
  inset: 0;
  z-index: 180;
  transform: none;
  display: block;
  background: transparent;
  overflow: hidden;
}

#wipe.go {
  animation: none;
  transform: none;
}

#wipe::after { content: none; }

.wipe-panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.wipe-panels i {
  position: relative;
  height: 100%;
  background:
    linear-gradient(160deg, rgba(18, 72, 28, .98), rgba(2, 7, 3, .99) 55%),
    #020603;
  border-right: 1px solid rgba(117, 255, 131, .12);
  transform: translateY(-105%);
  will-change: transform;
}

.wipe-panels i:nth-child(even) { transform: translateY(105%); }

#wipe.go .wipe-panels i {
  animation: panelCut 1.25s var(--hollywood-cut) both;
  animation-delay: calc(var(--panel-i) * 45ms);
}

@keyframes panelCut {
  0% { transform: translateY(var(--panel-start)); }
  42%, 58% { transform: translateY(0); }
  100% { transform: translateY(var(--panel-end)); }
}

.wipe-panels i:nth-child(odd) {
  --panel-start: -105%;
  --panel-end: 105%;
}

.wipe-panels i:nth-child(even) {
  --panel-start: 105%;
  --panel-end: -105%;
}

.wipe-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

#wipe.go .wipe-copy { animation: wipeCopy 1.15s .17s var(--hollywood-ease) both; }

.wipe-copy .chapter {
  font: 700 10px/1 'Space Mono', monospace;
  letter-spacing: .58em;
  color: var(--hollywood-gold);
  text-transform: uppercase;
}

.wipe-copy strong {
  display: block;
  margin-top: 14px;
  font: 400 clamp(66px, 12vw, 180px)/.78 'Bebas Neue', sans-serif;
  letter-spacing: .03em;
  color: #f4f8f1;
  text-transform: uppercase;
  text-shadow: 0 0 42px rgba(117, 255, 131, .25);
}

.wipe-copy .wipe-rule {
  width: min(360px, 56vw);
  height: 1px;
  margin: 26px auto 0;
  background: linear-gradient(90deg, transparent, var(--hollywood-green), transparent);
  transform: scaleX(0);
}

#wipe.go .wipe-rule { animation: wipeRule .65s .3s var(--hollywood-ease) forwards; }

@keyframes wipeCopy {
  0%, 17% { opacity: 0; transform: scale(.9); filter: blur(14px); }
  38%, 62% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(1.08); filter: blur(10px); }
}

@keyframes wipeRule { to { transform: scaleX(1); } }

.chapter-sting {
  position: fixed;
  z-index: 135;
  left: clamp(18px, 3vw, 48px);
  top: clamp(100px, 15vh, 150px);
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-35px);
}

.chapter-sting.show { animation: chapterSting 2.1s var(--hollywood-ease) both; }

.chapter-sting .cs-num {
  font: 400 42px/1 'Bebas Neue', sans-serif;
  color: var(--hollywood-green);
  text-shadow: 0 0 24px rgba(117, 255, 131, .38);
}

.chapter-sting .cs-copy {
  padding-left: 12px;
  border-left: 1px solid rgba(117, 255, 131, .3);
  font: 700 8px/1.4 'Space Mono', monospace;
  letter-spacing: .28em;
  color: rgba(226, 255, 230, .65);
  text-transform: uppercase;
}

@keyframes chapterSting {
  0% { opacity: 0; transform: translateX(-35px); }
  18%, 68% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(25px); }
}

/* ---------- chorégraphie générale ---------- */
.section {
  --scene-x: 50%;
  --scene-y: 20%;
}

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--scene-x) var(--scene-y), rgba(117, 255, 131, .095), transparent 25rem),
    linear-gradient(105deg, transparent 0 46%, rgba(255, 255, 255, .014) 46.2% 46.5%, transparent 46.7%);
  transition: background-position .5s;
}

.page-cinematic-enter .eyebrow,
.page-cinematic-enter .sec-title,
.page-cinematic-enter .lead {
  will-change: transform, opacity, filter;
}

.sec-title {
  position: relative;
  filter: drop-shadow(0 22px 36px rgba(0, 0, 0, .34));
}

.sec-title::before {
  content: "";
  position: absolute;
  left: -.04em;
  top: -.08em;
  width: .18em;
  height: .18em;
  border-top: 1px solid rgba(117, 255, 131, .48);
  border-left: 1px solid rgba(117, 255, 131, .48);
  opacity: 0;
  transform: translate(-12px, -12px);
  transition: opacity .5s .55s, transform .6s .55s var(--hollywood-ease);
}

.sec-title.in::before { opacity: 1; transform: none; }

.rank,
.item,
.ann-card,
.tcard,
.bank-card,
.ocard,
.leader-card,
.recruit-form,
.track-box {
  transform-style: preserve-3d;
  isolation: isolate;
}

.rank::before,
.item::before,
.ann-card::before,
.tcard::before,
.bank-card::before,
.ocard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 20%, rgba(255, 255, 255, .09) 44%, transparent 63%);
  background-size: 280% 100%;
  background-position: 180% 0;
  opacity: 0;
  transition: opacity .3s;
}

.rank:hover::before,
.item:hover::before,
.ann-card:hover::before,
.tcard:hover::before,
.bank-card:hover::before,
.ocard:hover::before {
  opacity: 1;
  animation: cardSheen 1s var(--hollywood-ease);
}

@keyframes cardSheen { to { background-position: -80% 0; } }

.btn,
.auth-btn,
.cart-btn,
.cat-tab,
.dash-tab {
  isolation: isolate;
}

.hollywood-ripple {
  position: absolute;
  z-index: -1;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(235, 255, 237, .52);
  transform: scale(0);
  animation: rippleCut .7s var(--hollywood-ease) forwards;
}

@keyframes rippleCut {
  to { transform: scale(24); opacity: 0; }
}

.click-wave {
  position: fixed;
  z-index: 310;
  width: 14px;
  height: 14px;
  margin: -7px;
  border: 1px solid rgba(117, 255, 131, .8);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 24px rgba(117, 255, 131, .45);
  animation: clickWave .65s var(--hollywood-ease) forwards;
}

@keyframes clickWave {
  to { transform: scale(8); opacity: 0; border-width: .2px; }
}

}

/* la galerie prend un vrai format écran */
.carousel {
  border-radius: 18px;
}

.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  height: clamp(14px, 3vw, 38px);
  pointer-events: none;
  background: linear-gradient(#000, rgba(0, 0, 0, .86));
  opacity: .72;
}

.carousel::before { top: 0; }
.carousel::after { bottom: 0; transform: scaleY(-1); }

.car-slide.cur img {
  filter: saturate(1.12) contrast(1.04);
}

.map-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border: 1px solid rgba(117, 255, 131, .09);
  border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, .5);
}

/* ---------- responsive et accessibilité ---------- */
@media (max-width: 900px) {
  .stage-lights i:nth-child(3),
  .hero-film-label,
  .cursor-star { display: none; }
  .hero-lens { opacity: .35; }
  .chapter-sting { top: 98px; }
  .wipe-panels { grid-template-columns: repeat(3, 1fr); }
  .wipe-panels i:nth-child(n+4) { display: none; }
}

@media (max-width: 620px) {
  #splash .sp-kicker { letter-spacing: .28em; font-size: 8px; }
  #splash .sp-tag { font-size: clamp(64px, 25vw, 110px); }
  #splash .sp-tag::after { letter-spacing: .25em; }
  #splash .sp-rule { margin-top: 34px; }
  .cinema-bars::before,
  .cinema-bars::after { height: 30px; }
  .stage-lights { opacity: .65; }
  .stage-lights i { filter: blur(30px); }
  .hero-cinema-meta { flex-wrap: wrap; max-width: 270px; line-height: 1.45; }
  .chapter-sting { display: none; }
  .wipe-copy strong { font-size: clamp(62px, 22vw, 100px); }
  .wipe-copy .chapter { font-size: 8px; letter-spacing: .34em; }
  .section::after { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-bars,
  .film-burn,
  .film-scratch,
  .stage-lights,
  .hero-lens,
  .hero-haze,
  .hero-film-label,
  .chapter-sting,
  .click-wave {
    display: none !important;
  }
  #splash { display: none !important; }
  .hero h1,
  .hero h1::before,
  .hero h1::after,
  .hero h1 .on-top,
  .hero-cinema-meta,
  .rank,
  .item,
  .ann-card,
  .tcard,
  .bank-card,
  .ocard {
    animation: none !important;
  }
  #wipe.go .wipe-panels i,
  #wipe.go .wipe-copy,
  #wipe.go .wipe-rule {
    animation-duration: .01ms !important;
  }
}