/* Theme "cathat" for the promo strip — «Кіт у капелюсі» (animated family
   comedy). Colours from the poster: a sea of blue fluff, the red/white striped
   stovepipe hat, white bubbly title. Stage: a fluffy tufted top edge, the
   title lockup in the middle and, on the right, the striped hat that wobbles,
   hops up and spins while three fluffy little ones pop out and blink — then
   it lands back on them (one 7 s loop). Overrides only — layout lives in
   kuzma_promo.css. */

.kz-promo--cathat {
  --kz-amber: #ffe46b;
  --kz-amber2: #ffc93a;
  --kz-red: #e2232a;
  --kz-red2: #b3141a;
  --ct-blue: #1f8fd0;
  --ct-deep: #0a3a66;
  --ct-ink: #08284a;
  background:
    radial-gradient(55% 150% at 76% 130%, rgba(120, 214, 255, .55), transparent 62%),
    radial-gradient(45% 120% at 6% 135%, rgba(40, 170, 230, .5), transparent 60%),
    linear-gradient(180deg, rgba(20, 110, 180, 0) 0%, rgba(20, 110, 180, 0) 14%, rgba(24, 120, 190, .88) 40%, #1878bb 66%, #0d5a96 100%);
}

/* fluffy tufted top edge instead of the crowd silhouette */
.ct-tufts { position: absolute; left: 0; bottom: 120px; width: 100%; height: 40px; display: block; }
.ct-tufts path { fill: rgba(24, 120, 190, .9); }

/* CTA card: deep blue with a red/white hat-stripe edge on top */
.kz-promo--cathat .kz-promo__cta {
  color: #f2f9ff;
  background:
    repeating-linear-gradient(90deg, #e2232a 0 14px, #fff 14px 28px) top / 100% 7px no-repeat,
    linear-gradient(180deg, rgba(10, 58, 102, .95), rgba(6, 36, 68, .97));
  padding-top: 18px;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 16px 36px rgba(3, 24, 48, .5), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.kz-promo--cathat .kz-promo__poster { background: #1878bb; }
.kz-promo--cathat .kz-promo__eyebrow { color: #4a2c00; }
.kz-promo--cathat .kz-promo__meta { color: #bfe3ff; }
.kz-promo--cathat .kz-promo__age { color: #f2f9ff; border-color: rgba(191, 227, 255, .55); }
.kz-promo--cathat .kz-promo__btn { box-shadow: 0 8px 18px rgba(226, 35, 42, .45); }
.kz-promo--cathat .kz-promo__close { background: rgba(6, 36, 68, .6); color: #eaf6ff; border-color: rgba(255, 255, 255, .3); }
.kz-promo--cathat .kz-promo__close:hover { background: rgba(6, 36, 68, .9); }

/* title lockup like the poster: tagline + chunky white bubbly letters */
.ct-lockup {
  position: absolute; left: 50%; bottom: 22px;
  display: flex; flex-direction: column; align-items: center;
  transform: translateX(-36%) rotate(-2deg);
  white-space: nowrap; line-height: 1; pointer-events: none;
}
.ct-lockup__tag {
  font-family: "Rubik", "Manrope", sans-serif; font-weight: 800;
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; opacity: .92; margin-bottom: 6px;
  text-shadow: 0 2px 0 rgba(8, 40, 74, .6);
}
.ct-lockup__title {
  font-family: "Rubik", "Arial Black", sans-serif; font-weight: 900;
  font-size: 3.3rem; letter-spacing: -.01em; text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 2px var(--ct-ink);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--ct-ink), 0 8px 18px rgba(3, 24, 48, .35);
  animation: ct-jolt 7s linear infinite;    /* the hat lands → the letters jump */
}
.ct-lockup__title small { font-size: .55em; vertical-align: .55em; margin: 0 .05em; }
@keyframes ct-jolt {
  0%, 73% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(3px) rotate(-1deg); }
  78% { transform: translateY(-2px) rotate(.6deg); }
  81%, 100% { transform: translateY(0) rotate(0); }
}

/* the hat + the little ones under it */
.ct-stage {
  position: absolute; right: 14%; bottom: 14px;
  width: 170px; height: 150px;
  pointer-events: none;
}
.ct-hat {
  position: absolute; left: 22px; bottom: 0; width: 120px; height: 146px;
  transform-origin: 50% 90%;
  animation: ct-hat 7s cubic-bezier(.45, .05, .35, 1) infinite;
  filter: drop-shadow(0 6px 6px rgba(3, 24, 48, .35));
  z-index: 2;
}
.ct-hat svg { width: 100%; height: 100%; display: block; }
@keyframes ct-hat {
  0%   { transform: translateY(0) rotate(0); }
  7%   { transform: translateY(0) rotate(-7deg); }       /* wobble… something's under it */
  14%  { transform: translateY(0) rotate(6deg); }
  20%  { transform: translateY(-8px) rotate(-4deg); }
  26%  { transform: translateY(0) rotate(0); }
  33%  { transform: translateY(0) rotate(5deg); }
  38%  { transform: translateY(4px) rotate(0) scale(1.04, .94); }  /* …crouch… */
  50%  { transform: translateY(-46px) rotate(200deg); }            /* …pop! */
  60%  { transform: translateY(-52px) rotate(360deg); }
  73%  { transform: translateY(0) rotate(360deg) scale(1.05, .9); } /* lands on them */
  78%  { transform: translateY(-6px) rotate(363deg) scale(.98, 1.03); }
  84%, 100% { transform: translateY(0) rotate(360deg); }
}
.ct-hat__shadow {
  position: absolute; left: 6px; right: 0; bottom: -6px; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 24, 48, .45), transparent);
  animation: ct-shadow 7s cubic-bezier(.45, .05, .35, 1) infinite;
}
@keyframes ct-shadow {
  0%, 38%, 73%, 100% { transform: scaleX(1); opacity: 1; }
  50%, 60% { transform: scaleX(.5); opacity: .35; }
}

.ct-fluffs {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  z-index: 1;
}
.ct-fluff {
  width: 56px; height: 52px; margin: 0 -3px;
  transform-origin: 50% 100%;
  animation: ct-pop 7s cubic-bezier(.3, 1.4, .5, 1) infinite;
}
.ct-fluff svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ct-fluff .fur { fill: #5cc8ff; stroke: #06305a; stroke-width: 2.5; }
.ct-fluff .face { fill: #f6dcc6; }
.ct-fluff.f1 { width: 66px; height: 62px; animation-delay: .08s; }
.ct-fluff.f1 .fur { fill: #8fdcff; }
.ct-fluff.f2 { animation-delay: .16s; }
.ct-fluff .eyes { transform-origin: 50% 60%; animation: ct-blink 7s steps(1) infinite; }
@keyframes ct-pop {
  0%, 40% { transform: scale(.55, .4); }       /* hidden under the hat */
  47% { transform: scale(1.05, 1.15); }        /* pop up when it jumps */
  52% { transform: scale(1, 1); }
  58% { transform: scale(1, 1) rotate(-6deg); }
  64% { transform: scale(1, 1) rotate(6deg); }
  68% { transform: scale(1, 1) rotate(0); }
  72%, 100% { transform: scale(.55, .4); }     /* duck as it comes down */
}
@keyframes ct-blink {
  0%, 55% { transform: scaleY(1); }
  56% { transform: scaleY(.1); }
  58%, 100% { transform: scaleY(1); }
}

/* soap bubbles drifting up — things are getting out of control */
.ct-bubble {
  position: absolute; bottom: 30px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .7) 0 18%, rgba(255, 255, 255, .08) 40%);
  opacity: 0;
  animation: ct-bubble 7s ease-out infinite;
}
.ct-bubble.b1 { left: -20px; animation-delay: 3.4s; }
.ct-bubble.b2 { right: -24px; width: 22px; height: 22px; animation-delay: 3.6s; }
.ct-bubble.b3 { left: 50%; width: 12px; height: 12px; animation-delay: 3.9s; }
@keyframes ct-bubble {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  8% { opacity: .95; }
  40% { opacity: 0; transform: translate(12px, -120px) scale(1.1); }
  100% { opacity: 0; transform: translate(12px, -120px) scale(1.1); }
}

/* narrower screens: drop the lockup first, then the hat */
@media (max-width: 1240px) {
  .ct-lockup { display: none; }
  .ct-stage { right: 24%; }   /* keep the jump clear of the call button */
}
@media (max-width: 860px) {
  .ct-stage { display: none; }
}
@media (max-width: 640px) {
  .ct-tufts { bottom: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-hat, .ct-hat__shadow, .ct-lockup__title, .ct-fluff, .ct-fluff .eyes { animation: none; }
  .ct-fluff { transform: scale(.55, .4); }
  .ct-bubble { display: none; }
}