@keyframes fadeInOut {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

#animate-text {
    animation: fadeInOut 5s infinite; /* Анимация будет повторяться бесконечно каждые 5 секунд */
}

/* базовое состояние */
.cta-sweet .tn-atom{
  position: relative;            /* нужно для блика */
  overflow: hidden;              /* обрезаем блик по краю */
  background:#111; color:#fff; border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:
    background-color .2s ease,
    transform .2s cubic-bezier(.2,.6,.2,1),
    box-shadow .2s cubic-bezier(.2,.6,.2,1);
  will-change: transform, box-shadow;
}

/* мягкий блик поверх кнопки (едва заметный, «дорогой») */
.cta-sweet .tn-atom::after{
  content:"";
  position:absolute; top:0; left:-200%;
  width:50%; height:100%;
  pointer-events:none;           /* чтобы клик не блокировался */
  background: linear-gradient(115deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,0)  38%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,0)  62%,
      rgba(255,255,255,0) 100%);
  transform: translateX(0) skewX(-10deg);
  animation: cta-glint 12s linear infinite;  /* редкий «проезд» блика */
}

/* hover: чуть активнее и быстрее */
.cta-sweet .tn-atom:hover{
  background:#161616;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.cta-sweet .tn-atom:hover::after{
  animation-duration: 6s;
  background: linear-gradient(115deg,
      rgba(255,255,255,0)   0%,
      rgba(255,255,255,0)  40%,
      rgba(255,255,255,.22) 50%,
      rgba(255,255,255,0)  60%,
      rgba(255,255,255,0) 100%);
}

/* клик */
.cta-sweet .tn-atom:active{
  transform:translateY(0);
  box-shadow:0 4px 14px rgba(0,0,0,.20);
}

/* фокус (доступность) */
.cta-sweet .tn-atom:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px rgba(242,76,63,.35), 0 8px 20px rgba(0,0,0,.24);
}

/* редкое движение блика слева направо */
@keyframes cta-glint{
  0%, 96%  { transform: translateX(-220%) skewX(-10deg); }
  100%     { transform: translateX(220%)  skewX(-10deg); }
}

/* уважение к настройке пользователя «меньше анимаций» */
@media (prefers-reduced-motion: reduce){
  .cta-sweet .tn-atom::after{ animation: none; }
}

.cta-sweet--light .tn-atom{ background:#fff; color:#111; border:1px solid #111; }
.cta-sweet--light .tn-atom::after{
  background: linear-gradient(115deg,
      rgba(0,0,0,0)   0%,
      rgba(0,0,0,0)  38%,
      rgba(0,0,0,.12) 50%,
      rgba(0,0,0,0)  62%,
      rgba(0,0,0,0) 100%);
}
.cta-sweet--light .tn-atom:hover{ background:#111; color:#fff; }

/* базовая капсула + идеальный фокус (как в macOS) */
.cta-apple .tn-atom{
  position:relative; overflow:hidden;
  background:#111; color:#fff; border-radius:16px;
  border:1px solid rgba(255,255,255,.06);             /* тонкая «кромка» */
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  transition:background-color .18s ease, transform .18s cubic-bezier(.2,.6,.2,1), box-shadow .18s cubic-bezier(.2,.6,.2,1);
  will-change:transform, box-shadow;
}
/* еле заметный top-highlight (материал, не глянец) */
.cta-apple .tn-atom::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 42%);
  mix-blend-mode:soft-light; opacity:.6;
}
/* редкий «проезд» блика — очень деликатно */
.cta-apple .tn-atom::after{
  content:""; position:absolute; top:0; left:-200%; width:50%; height:100%; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(0) skewX(-10deg);
  animation: apple-glint 12s linear infinite;
}
@keyframes apple-glint{
  0%,96% { transform:translateX(-220%) skewX(-10deg); }
  100%   { transform:translateX(220%)  skewX(-10deg); }
}
/* hover = на 1px выше + тень глубже, фон на пол-тона темнее */
.cta-apple .tn-atom:hover{
  background:#161616;
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.cta-apple .tn-atom:hover::after{ animation-duration:6s; }
/* active = «нажал» */
.cta-apple .tn-atom:active{
  transform:translateY(0);
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}
/* доступность: фокус-кольцо как в macOS */
.cta-apple .tn-atom:focus-visible{
  outline:0;
  box-shadow:0 0 0 2px rgba(10,132,255,.8), 0 8px 20px rgba(0,0,0,.24);
}
/* уважение prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .cta-apple .tn-atom{ transition:none; }
  .cta-apple .tn-atom::after{ animation:none; }
}