/* ========================================
   SSI KIMIDORI - PREMIUM ANIMATIONS
   Tasteful micro-interactions for elderly audience
   GPU-accelerated (transform, opacity only)
   ======================================== */

/* ----------------------------------------
   1. HERO ENTRANCE - Staggered fade-in
   Replace the existing heroFadeIn with
   individual staggered animations
   ---------------------------------------- */
@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSlideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Override the existing single animation with staggered children */
.hero-content {
  animation: none !important;
}

.hero-tagline {
  opacity: 0;
  animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero-content h1 {
  opacity: 0;
  animation: heroSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.hero-lead {
  opacity: 0;
  animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.hero-buttons {
  opacity: 0;
  animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.hero-trust {
  opacity: 0;
  animation: heroSlideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
}

.hero-visual {
  opacity: 0;
  animation: heroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards !important;
}


/* ----------------------------------------
   2. PRODUCT CARD - 3D Tilt on hover
   Uses CSS perspective for subtle depth
   ---------------------------------------- */
.products-grid {
  perspective: 1200px;
}

.product-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.4s ease;
}

.product-card:hover {
  transform: translateY(-8px) rotateX(2deg) rotateY(-1.5deg);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.08),
    0 8px 16px rgba(108,187,90,0.12);
}

/* Inner content lifts slightly on hover for depth */
.product-card-body {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card-body {
  transform: translateZ(8px);
}

/* Logo badge subtle float on hover */
.product-card-logo-badge {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover .product-card-logo-badge {
  transform: translateY(-3px) scale(1.03);
}


/* ----------------------------------------
   3. FEATURE CARDS - Scale + glow on hover
   ---------------------------------------- */
.feature-card {
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.4s ease;
  will-change: transform;
}

.feature-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow:
    0 8px 32px rgba(108,187,90,0.18),
    0 0 0 1px rgba(108,187,90,0.08);
}

/* Feature number circle grows on hover */
.feature-num {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.feature-card:hover .feature-num {
  transform: scale(1.12);
  background: linear-gradient(135deg, var(--green-light), var(--green));
  color: var(--white);
}

/* Feature icon subtle rotation */
.feature-icon-img svg {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover .feature-icon-img svg {
  transform: scale(1.08) rotate(3deg);
}


/* ----------------------------------------
   4. TRUST BADGE COUNTERS - CSS counter
   animation with scroll-triggered appearance
   Uses CSS animation-timeline where supported
   ---------------------------------------- */
@keyframes countPop {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(8px);
  }
  60% {
    transform: scale(1.06) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.hero-trust-item {
  opacity: 0;
  animation: countPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-trust-item:nth-child(1) { animation-delay: 1.0s; }
.hero-trust-item:nth-child(2) { animation-delay: 1.15s; }
.hero-trust-item:nth-child(3) { animation-delay: 1.3s; }

/* Check mark bounce */
@keyframes checkBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.hero-trust-item .check {
  animation: checkBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.hero-trust-item:nth-child(1) .check { animation-delay: 1.15s; opacity: 0; }
.hero-trust-item:nth-child(2) .check { animation-delay: 1.3s; opacity: 0; }
.hero-trust-item:nth-child(3) .check { animation-delay: 1.45s; opacity: 0; }

@keyframes checkAppear {
  to { opacity: 1; }
}

.hero-trust-item .check {
  animation:
    checkBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    checkAppear 0.01s linear forwards;
}

.hero-trust-item:nth-child(1) .check { animation-delay: 1.15s, 1.15s; }
.hero-trust-item:nth-child(2) .check { animation-delay: 1.3s, 1.3s; }
.hero-trust-item:nth-child(3) .check { animation-delay: 1.45s, 1.45s; }


/* ----------------------------------------
   5. PARALLAX BLOBS - Floating movement
   Creates organic, living background effect
   ---------------------------------------- */
@keyframes blobFloat1 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(10px, -15px) rotate(5deg) scale(1.05);
  }
  50% {
    transform: translate(-5px, -25px) rotate(-3deg) scale(0.97);
  }
  75% {
    transform: translate(15px, -10px) rotate(8deg) scale(1.03);
  }
}

@keyframes blobFloat2 {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate(-12px, 10px) rotate(-6deg) scale(1.04);
  }
  50% {
    transform: translate(8px, 20px) rotate(4deg) scale(0.96);
  }
  75% {
    transform: translate(-8px, 8px) rotate(-3deg) scale(1.02);
  }
}

.hero-blob-1 {
  animation: blobFloat1 12s ease-in-out infinite;
  will-change: transform;
}

.hero-blob-2 {
  animation: blobFloat2 14s ease-in-out infinite;
  will-change: transform;
}

/* Subtle background shift on hero */
.hero::before {
  animation: blobFloat1 20s ease-in-out infinite;
  will-change: transform;
}


/* ----------------------------------------
   6. FLOATING DECORATIVE ELEMENTS
   Section decoration dots gently bob
   ---------------------------------------- */
@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

.title-deco .dot {
  animation: gentlePulse 3s ease-in-out infinite;
}

.title-deco span:not(.dot) {
  animation: gentleFloat 4s ease-in-out infinite;
}

.title-deco span:first-child {
  animation-delay: 0s;
}

.title-deco span:last-child {
  animation-delay: 0.5s;
}

/* Hero dots active indicator pulse */
.hero-dots span.active {
  animation: dotActivePulse 2s ease-in-out infinite;
}

@keyframes dotActivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108,187,90,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(108,187,90,0); }
}


/* ----------------------------------------
   7. BUTTON PULSE - Main CTA attention
   Gentle, non-distracting pulse ring
   ---------------------------------------- */
@keyframes btnPulse {
  0% {
    box-shadow:
      0 4px 16px rgba(108,187,90,0.35),
      0 0 0 0 rgba(108,187,90,0.3);
  }
  70% {
    box-shadow:
      0 4px 16px rgba(108,187,90,0.35),
      0 0 0 12px rgba(108,187,90,0);
  }
  100% {
    box-shadow:
      0 4px 16px rgba(108,187,90,0.35),
      0 0 0 0 rgba(108,187,90,0);
  }
}

.hero-buttons .btn-green {
  animation: btnPulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 1.5s;
}

/* Stop pulsing on hover - user is already engaged */
.hero-buttons .btn-green:hover {
  animation: none;
}

/* CTA section button pulse */
.cta-btns .btn-cta-white {
  animation: ctaBtnPulse 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes ctaBtnPulse {
  0% {
    box-shadow:
      0 4px 20px rgba(0,0,0,0.1),
      0 0 0 0 rgba(255,255,255,0.25);
  }
  70% {
    box-shadow:
      0 4px 20px rgba(0,0,0,0.1),
      0 0 0 10px rgba(255,255,255,0);
  }
  100% {
    box-shadow:
      0 4px 20px rgba(0,0,0,0.1),
      0 0 0 0 rgba(255,255,255,0);
  }
}

.cta-btns .btn-cta-white:hover {
  animation: none;
}


/* ----------------------------------------
   8. NEWS ITEMS - Slide in from left
   Uses scroll-triggered animation via
   the existing .fade-up / .visible system
   ---------------------------------------- */
.news-item.fade-up {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-item.fade-up.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger each news item */
.news-item.fade-up:nth-child(1) { transition-delay: 0s; }
.news-item.fade-up:nth-child(2) { transition-delay: 0.08s; }
.news-item.fade-up:nth-child(3) { transition-delay: 0.16s; }
.news-item.fade-up:nth-child(4) { transition-delay: 0.24s; }

/* News item hover enhancement */
.news-item {
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.news-item:hover {
  transform: translateX(6px);
}

/* News tag subtle entrance */
.news-tag {
  transition: transform 0.3s ease;
}

.news-item:hover .news-tag {
  transform: scale(1.05);
}


/* ----------------------------------------
   9. HEADER - Shadow intensifies on scroll
   Pure CSS using a sentinel element trick:
   Add a 1px tall sentinel at top of page.
   Uses sticky positioning to detect scroll.

   NOTE: For full CSS-only, we use the
   existing border-bottom and enhance it
   with a transition. The JS scroll event
   can toggle a class, but here we provide
   the CSS for the .header--scrolled state.
   ---------------------------------------- */
.header {
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease,
    background 0.3s ease;
}

/* Applied via scroll - add class .header--scrolled via JS
   or use this as a progressive enhancement */
.header--scrolled,
.header:has(~ .hero:not(:hover)):not(:hover) {
  /* Fallback: intensify on any interaction */
}

/* CSS-only scroll shadow using animation-timeline (modern browsers) */
@supports (animation-timeline: scroll()) {
  @keyframes headerShadow {
    0% {
      box-shadow: none;
      border-bottom-color: rgba(0,0,0,0.06);
    }
    5%, 100% {
      box-shadow: 0 2px 20px rgba(0,0,0,0.08), 0 1px 6px rgba(0,0,0,0.04);
      border-bottom-color: rgba(0,0,0,0.1);
    }
  }

  .header {
    animation: headerShadow linear forwards;
    animation-timeline: scroll();
    animation-range: 0px 120px;
  }
}

/* Fallback: subtle shadow always visible after initial load */
@keyframes headerAppear {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ----------------------------------------
   10. PHONE NUMBER - Glow/pulse in CTA
   ---------------------------------------- */
@keyframes phoneGlow {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255,255,255,0);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255,255,255,0.3),
      0 0 24px rgba(255,255,255,0.1);
    transform: scale(1.02);
  }
}

.cta-phone-number {
  animation: phoneGlow 4s ease-in-out infinite;
  display: inline-block; /* Required for transform */
}

/* Phone icon gentle ring */
@keyframes phoneRing {
  0%, 100% { transform: rotate(0deg); }
  5% { transform: rotate(12deg); }
  10% { transform: rotate(-10deg); }
  15% { transform: rotate(8deg); }
  20% { transform: rotate(-5deg); }
  25% { transform: rotate(0deg); }
}

.cta-phone svg {
  animation: phoneRing 5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Header phone number subtle attention */
.header-phone-number {
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.header-phone-area:hover .header-phone-number {
  color: var(--green);
  transform: scale(1.05);
}


/* ========================================
   ADDITIONAL POLISH & IMPROVEMENTS
   ======================================== */

/* ---- Smooth section transitions ---- */
.section-header {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Use IntersectionObserver class */
.section-header.visible,
.features .section-header,
.products .section-header,
.policyholder .section-header,
.news .section-header,
.cm-section .section-header {
  opacity: 1;
  transform: translateY(0);
}

/* ---- EN label letter spacing animation ---- */
@keyframes letterSpread {
  from {
    letter-spacing: 0px;
    opacity: 0;
  }
  to {
    letter-spacing: 3px;
    opacity: 1;
  }
}

.section-header .en-label {
  animation: letterSpread 0.6s ease forwards;
  opacity: 0;
}

/* Trigger when section is in view */
.fade-up.visible ~ .section-header .en-label,
.section-header .en-label {
  animation-play-state: running;
}

/* ---- Policyholder cards hover enhancement ---- */
.ph-card {
  transition:
    transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.35s ease;
}

.ph-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ph-card:hover .ph-icon {
  transform: scale(1.12) rotate(5deg);
}

/* ---- Banner items stagger ---- */
.banner-item.fade-up:nth-child(1) { transition-delay: 0s; }
.banner-item.fade-up:nth-child(2) { transition-delay: 0.1s; }
.banner-item.fade-up:nth-child(3) { transition-delay: 0.2s; }

.banner-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.banner-item:hover .banner-icon {
  transform: scale(1.1) rotate(-3deg);
}

/* ---- CM play button breathing ---- */
@keyframes playBreathe {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 8px 40px rgba(0,0,0,0.2), 0 0 0 12px rgba(255,255,255,0.08);
  }
}

.cm-play-btn {
  animation: playBreathe 3s ease-in-out infinite;
}

.cm-play-btn:hover {
  animation: none;
  transform: scale(1.12);
}

/* ---- Product link arrow spring ---- */
.product-link {
  transition:
    background 0.3s ease,
    color 0.3s ease,
    gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s ease;
}

.product-link:hover {
  transform: translateX(3px);
}

/* ---- Phone strip shimmer ---- */
@keyframes stripShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.phone-strip {
  background-size: 200% 100%;
  animation: stripShimmer 8s ease-in-out infinite;
}

/* ---- Scroll indicator for hero ---- */
@keyframes scrollHint {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(6px); }
}

.hero-dots {
  position: relative;
}

/* ---- Focus states for accessibility ---- */
.btn:focus-visible,
.product-link:focus-visible,
.ph-card:focus-visible,
.banner-item:focus-visible,
.news-item:focus-visible,
.header-nav a:focus-visible,
.header-cta-btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* ---- Reduced motion for accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-blob-1,
  .hero-blob-2,
  .cta-phone-number,
  .cm-play-btn,
  .hero-buttons .btn-green,
  .cta-btns .btn-cta-white,
  .title-deco .dot,
  .cta-phone svg {
    animation: none !important;
  }
}

/* ---- Smooth image reveal on product cards ---- */
.product-card-img img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Footer link hover enhancement ---- */
.footer-links a {
  transition:
    opacity 0.3s ease,
    color 0.3s ease,
    padding-left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- CTA section entrance ---- */
@keyframes ctaReveal {
  from {
    opacity: 0.8;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Subtle hover glow for the CTA section ---- */
.cta::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
  animation: blobFloat2 15s ease-in-out infinite;
}