/* design-forge preset: cool — animations
   かっこいい系:シャープに・直線的に。ふわふわさせない */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.65}
}

/* スクロール出現(JSで .is-visible 付与) — 横からの鋭いスライドイン */
.reveal{opacity:0;transform:translateX(-36px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.reveal.is-visible{opacity:1;transform:translateX(0)}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}

/* ホバー — 浮きは最小、エッジの発光で締める */
.hover-lift{transition:transform var(--speed),box-shadow var(--speed),border-color var(--speed)}
.hover-lift:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-m),0 0 18px color-mix(in srgb,var(--c-primary) 35%,transparent);
  border-color:color-mix(in srgb,var(--c-primary) 60%,var(--c-border));
}

/* cool固有:浮遊させず、エッジの明滅に置き換え */
@keyframes edgePulse{
  0%,100%{box-shadow:0 0 2px rgba(111,194,232,.2)}
  50%{box-shadow:0 0 14px rgba(111,194,232,.55)}
}
.float-deco{animation:edgePulse 2.6s ease-in-out infinite}

/* cool固有:鋭く走る金属光沢(グリント) */
@keyframes glint{
  0%{transform:translateX(-160%) skewX(-24deg)}
  45%,100%{transform:translateX(280%) skewX(-24deg)}
}
.shine{position:relative;overflow:hidden}
.shine::after{
  content:"";position:absolute;top:0;left:0;width:32%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:glint 2.8s cubic-bezier(.65,0,.35,1) infinite;
}