/* Data Moat motion / interaction polish — shared by KOR + ENG */

/* Modern, restrained hover for Data Moat metric cards */
.metric-card,
.data-moat .stat,
section.data-moat .stat{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             box-shadow .42s cubic-bezier(.22,.61,.36,1),
             border-color .42s ease,
             background-color .42s ease;
}
.metric-card::before,
.data-moat .stat::before,
section.data-moat .stat::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(48,202,203,.11) 0%, rgba(48,202,203,0) 58%),
    linear-gradient(135deg, rgba(143,232,233,.05), rgba(255,255,255,0) 62%);
  transition:opacity .42s ease;
}
.metric-card::after,
.data-moat .stat::after,
section.data-moat .stat::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:100%;
  height:2px;
  pointer-events:none;
  background:#30CACB;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.metric-card img,
.data-moat .stat .stat-icon,
section.data-moat .stat .stat-icon{
  transition:transform .42s cubic-bezier(.22,.61,.36,1), filter .42s ease;
}
.metric-card strong,
.data-moat .stat strong,
section.data-moat .stat strong{
  display:inline-block;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  font-variant-numeric:tabular-nums;
}

/* Why Child Data Matters cards: glass lift rather than a flat hover */
.why-tab{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),
             box-shadow .42s cubic-bezier(.22,.61,.36,1),
             border-color .42s ease,
             background-color .42s ease;
}
.why-tab::before{
  content:"";
  position:absolute;
  inset:-35%;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 30% 20%, rgba(143,232,233,.2), rgba(48,202,203,0) 55%);
  transform:translate3d(-8%,8%,0);
  transition:opacity .42s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}

@media (hover:hover) and (pointer:fine){
  .metric-card:hover,
  .data-moat .stat:hover,
  section.data-moat .stat:hover{
    transform:translateY(-7px);
    border-color:rgba(48,202,203,.35);
    box-shadow:0 18px 42px rgba(14,50,58,.09), 0 4px 12px rgba(48,202,203,.06);
  }
  .metric-card:hover::before,
  .data-moat .stat:hover::before,
  section.data-moat .stat:hover::before{opacity:1}
  .metric-card:hover::after,
  .data-moat .stat:hover::after,
  section.data-moat .stat:hover::after{transform:scaleX(1)}
  .metric-card:hover img,
  .data-moat .stat:hover .stat-icon,
  section.data-moat .stat:hover .stat-icon{
    transform:translateY(-3px) scale(1.055);
    filter:drop-shadow(0 7px 12px rgba(48,202,203,.14));
  }
  .metric-card:hover strong,
  .data-moat .stat:hover strong,
  section.data-moat .stat:hover strong{transform:translateY(-2px)}

  .why-tab:not(.active):hover{
    transform:translateY(-7px) scale(1.03);
    border-color:rgba(143,232,233,.72);
    background:rgba(255,255,255,.25);
    box-shadow:0 18px 48px rgba(0,20,30,.15);
  }
  .why-tab:not(.active):hover::before{opacity:1;transform:translate3d(0,0,0)}
  .why-tab.active:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 18px 44px rgba(0,20,30,.12)}
}

/* Data to ELM — desktop accordion is a fixed-height stage.
   Switching tabs no longer pushes the sections below up/down. */
@media (min-width:1101px){
  .data-elm .elm-grid{align-items:start}
  .data-elm .accordion{
    height:460px;
    min-height:460px;
    max-height:460px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .data-elm .accordion-item{
    flex:0 0 100px;
    height:100px;
    min-height:100px;
    overflow:hidden;
    transition:height .38s cubic-bezier(.22,.61,.36,1), flex-basis .38s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
  }
  .data-elm .accordion-item.active{
    flex-basis:160px;
    height:160px;
  }
  .data-elm .accordion-item button,
  .data-elm .accordion-item.active button{
    height:100px;
    min-height:100px;
    flex:0 0 100px;
  }
  .data-elm .accordion-panel{height:60px;min-height:0}
  .data-elm .accordion-panel p{
    max-height:60px;
    box-sizing:border-box;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .data-elm .accordion-item.active .accordion-panel p{padding:0 20px 18px}
  .data-elm .elm-image{height:460px!important;min-height:460px!important;max-height:460px!important}
}

@media (prefers-reduced-motion:reduce){
  .metric-card,.why-tab,.data-moat .stat,section.data-moat .stat,
  .metric-card::before,.metric-card::after,.why-tab::before,
  .data-moat .stat::before,.data-moat .stat::after,
  section.data-moat .stat::before,section.data-moat .stat::after{
    transition:none!important;
  }
}

/* Why Child Data Matters — active autoplay tab emphasis */
.why-tab.active{
  transform:scale(1.04);
  z-index:3;
}

@media (hover:hover) and (pointer:fine){
  .why-tab.active:hover{
    transform:translateY(-4px) scale(1.04);
  }
}

@media (prefers-reduced-motion:reduce){
  .why-tab.active{transform:none!important;}
}

/* 2026-08-14 DATA MOAT divider spacing — keep cards inside the grid.
   Use grid column-gap instead of pushing individual cards outward. */
@media (min-width:768px){
  .metric-card,
  .data-moat .stat,
  section.data-moat .stat{
    margin-right:0!important;
  }

  .metrics-grid,
  .data-moat .stats,
  section.data-moat .stats{
    column-gap:35px;
  }

  .data-moat .stat-wide,
  section.data-moat .stat-wide{
    grid-column:1 / 2;
    width:100%;
  }
}