/* =============================================================================
   KS Animations
   @keyframes approach — does not override component transition-property rules.
   ============================================================================= */

/* ── Initial hidden states ──────────────────────────────────────────────── */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(36px);
}

[data-animate="fade-in"] {
  opacity: 0;
}

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-48px);
}

[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(48px);
}

[data-animate="scale-up"] {
  opacity: 0;
  transform: scale(0.91);
}

/* ── Animated-in: run keyframes (fill-mode both holds the end state) ─────── */

[data-animate="fade-up"].is-inview {
  animation: ks-fade-up 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-animate="fade-in"].is-inview {
  animation: ks-fade-in 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-animate="slide-left"].is-inview {
  animation: ks-slide-left 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-animate="slide-right"].is-inview {
  animation: ks-slide-right 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-animate="scale-up"].is-inview {
  animation: ks-scale-up 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Keyframe definitions ───────────────────────────────────────────────── */

@keyframes ks-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ks-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ks-slide-left {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ks-slide-right {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ks-scale-up {
  from { opacity: 0; transform: scale(0.91); }
  to   { opacity: 1; transform: none; }
}

/* ── Tactile press feedback — all buttons, desktop + mobile ─────────────────
   A gentle scale-down on :active gives every interactive element a physical
   "press" feel. Snap-in is intentional — it's instant like a real button.
   .ks-s-trust-btn already has "transition: transform 0.2s" so it animates
   smoothly. Animated cards need !important to override keyframe fill-mode.
   ─────────────────────────────────────────────────────────────────────── */

.ks-s-cta-btn:active,
.ks-s-trust-btn:active,
.ks-s-bystander-number:active,
.ks-about-locations-cta-btn:active,
.ks-about-cta-footer-btn:active,
.ks-g-cta-btn:active,
.ks-g-bottom-cta-btn:active,
.ks-g-process-btn:active,
.ks-g-sofort-btn:active,
.ks-hb-closing-btn:active,
.ks-floating-cta-btn:active {
  transform: scale(0.96);
}

/* Animated card links: !important overrides keyframe animation fill-mode */
.ks-s-topic-card:active {
  transform: scale(0.97) !important;
}

/* ── Nav & small link press feedback ───────────────────────────────────────
   Nav links, inline links, and utility CTAs all get the same instant snap.
   No transition: transform needed — snap is intentional.
   ─────────────────────────────────────────────────────────────────────── */

.ks-main-navigation a:active,
.ks-nav-sub a:active,
.ks-nav-toggle:active,
.ks-inline-link:active,
.ks-s-network-link:active,
.ks-g-trust-support-cta:active,
.ks-g-trust-support-link:active,
.ks-g-safety-banner-cta:active,
.ks-about-team-cta:active,
.ks-about-jobs-link:active,
.ks-about-feedback-email:active,
.ks-about-locations-bv-link:active,
.ks-hb-help-topic-card:active,
.ks-hb-emergency-number:active,
.ks-hb-contact-card-link:active,
.ks-hb-rights-more-link:active,
.ks-hb-contact-more-link:active,
.ks-g-context-panel-link:active,
.ks-g-related-link:active,
.ks-g-grenzen-check:active {
  transform: scale(0.96);
}

/* Animated overview / topic cards — !important overrides keyframe fill-mode */
.ks-g-overview-card:active,
.ks-about-topic-card:active,
.ks-hb-entry-card:active,
.ks-g-problem-card:active {
  transform: scale(0.97) !important;
}

/* Animated explain / guidance cards — slightly softer press (larger target) */
.ks-g-explain-card:active,
.ks-g-guidance-card:active,
.ks-g-forms-card:active {
  transform: scale(0.98) !important;
}

/* ── About-page press feedback (about.css audit) ────────────────────────────
   Elements identified in about.css that had :hover or cursor:pointer rules
   but were not yet covered by any :active rule above.
   ─────────────────────────────────────────────────────────────────────── */

/* Breadcrumb links in the about hero — small text links */
.ks-about-breadcrumb a:active,
/* Location card website / email links in the scrollable list */
.ks-about-locations-card-link:active,
/* SVG map dots (cursor:pointer set inline via [data-dot]) */
.ks-about-locations-map-wrap [data-dot]:active,
/* State-select dropdown (cursor:pointer) */
.ks-about-locations-select:active {
  transform: scale(0.96);
}

/* ── base.css press feedback — footer links, breadcrumbs, content links ─────
   Elements in base.css that had :hover rules but no :active rule.
   .ks-nav-sub-toggle has cursor:pointer in the mobile media query.
   ─────────────────────────────────────────────────────────────────────── */

.ks-footer-links a:active,
.ks-g-breadcrumb-link:active,
.ks-main a:active,
.ks-nav-sub-toggle:active {
  transform: scale(0.96);
}

/* ── topic-components.css press feedback ────────────────────────────────────
   Every interactive element in topic-components.css that had a :hover or
   cursor:pointer rule but was not yet covered by an :active rule above.
   Elements that carry data-animate directly need !important to beat the
   keyframe animation-fill-mode:both that holds the final transform state.
   ─────────────────────────────────────────────────────────────────────── */

/* Plain CTAs, small buttons and links — standard snap (scale 0.96) */
.ks-g-subnav-pill:active,
.ks-g-faq summary:active,
.ks-g-callout-cta:active,
.ks-g-callout-link:active,
.ks-g-sofort-split-link:active,
.ks-g-validation-cta:active,
.ks-g-explain-card-cta:active,
.ks-g-source-card-link:active,
.ks-g-awareness-link:active {
  transform: scale(0.96);
}

/* Hero tel-link cards — inside animated container but element itself is not animated */
.ks-g-hero-card:active {
  transform: scale(0.97);
}

/* Animated crosslink chips — data-animate="fade-up" on each chip element;
   !important required to override the held keyframe end-state */
.ks-g-crosslink:active {
  transform: scale(0.96) !important;
}

/* Animated trust panel CTA — data-animate="fade-up" on the element itself */
.ks-g-trust-panel-cta:active {
  transform: scale(0.96) !important;
}

/* Animated linked cards — medium-sized card, data-animate="fade-up" */
.ks-g-linked-card:active {
  transform: scale(0.97) !important;
}

/* ── Hero illustration — eye blink ──────────────────────────────────────── */

#ks-hero-eye {
  animation: ks-hero-eye-blink 5s ease-in-out 2s infinite;
  transform-box: fill-box;
  transform-origin: center center;
}

@keyframes ks-hero-eye-blink {
  /* open for most of the cycle, then blink twice */
  0%, 3%   { transform: scaleY(1); }
  6%       { transform: scaleY(0.07); }
  9%       { transform: scaleY(1); }
  14%      { transform: scaleY(0.07); }
  17%      { transform: scaleY(1); }
  100%     { transform: scaleY(1); }
}

/* ── Hero illustration — chat bubble float ───────────────────────────────── */

#ks-hero-chatbubble {
  animation-name:            ks-hero-bubble-in, ks-hero-bubble-float;
  animation-duration:        600ms,             3.8s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-delay:           800ms,             1500ms;
  animation-fill-mode:       both,              none;
  animation-iteration-count: 1,                 infinite;
  transform-box: fill-box;
  transform-origin: center center;
}

@keyframes ks-hero-bubble-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ks-hero-bubble-float {
  0%, 100% { transform: translateY(0)    rotate(0deg);   }
  30%       { transform: translateY(-9px) rotate(-1.5deg); }
  60%       { transform: translateY(-5px) rotate(1deg);   }
}

/* ── Navbar logo: person hover animation ────────────────────────────────── */

#guy1,
#guy2 {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ks-brand:hover #guy1,
.ks-brand:focus-visible #guy1 {
  transform: translateX(6.9px);
}

.ks-brand:hover #guy2,
.ks-brand:focus-visible #guy2 {
  transform: translateX(-6.9px);
}

/* ── Navbar brand name: "Kinderschutz" color on hover ───────────────────── */

.ks-brand-name {
  transition: color 0.2s ease;
}

.ks-brand:hover .ks-brand-name,
.ks-brand:focus-visible .ks-brand-name {
  color: var(--ks-purple-300);
}

/* ── Lime chat button states ─────────────────────────────────────────────── */

.ks-chat-badge {
  background: #e53e3e;
  border: 2px solid #fff;
  border-radius: 50%;
  display: none;
  height: 10px;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 10px;
}

.ks-floating-cta-icon {
  position: relative;
}

.ks-chat--has-badge .ks-chat-badge {
  display: block;
}

.ks-chat--is-open .ks-floating-cta-icon--green {
  background: #155044;
}

/* ── Accessible: respect reduced-motion preference ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  #ks-hero-eye,
  #ks-hero-chatbubble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}