/* lovable.runtime.css — visual effects layer for lovable.runtime.js */

/* Scroll reveal (useScrollAnimation parity) */
[data-scroll]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
[data-scroll].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Parallax */
[data-parallax]{ will-change: transform; }

/* Typing (optional) */
.typing-active{
  position: relative;
}
.typing-active::after{
  content: "▍";
  display: inline-block;
  margin-left: 2px;
  opacity: .9;
  animation: rt-blink 1s steps(2,end) infinite;
}
@keyframes rt-blink { 50% { opacity: 0; } }

/* Mobile helpers */
.is-mobile .desktop-only{ display:none !important; }
.is-desktop .mobile-only{ display:none !important; }

/* Toaster */
#rt-toaster{
  position: fixed;
  right: 16px;
  bottom: 160px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.rt-toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  animation: rt-toast-in .18s ease-out;
}
@keyframes rt-toast-in{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
.rt-toast .title{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
}
.rt-toast .desc{
  margin-top: 4px;
  color: rgba(229,231,235,.78);
  line-height: 1.35;
  font-size: .92rem;
}
.rt-toast .x{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  cursor: pointer;
}
.rt-toast .x:hover{ background: rgba(255,255,255,.10); }

.rt-toast.success{ border-color: rgba(34,197,94,.35); }
.rt-toast.success .title{ color: rgba(187,247,208,.95); }
.rt-toast.error{ border-color: rgba(239,68,68,.35); }
.rt-toast.error .title{ color: rgba(254,202,202,.95); }
.rt-toast.gold{ border-color: rgba(251,191,36,.35); box-shadow: 0 0 40px rgba(251,191,36,.12); }
.rt-toast.gold .title{ color: rgba(251,191,36,.95); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  [data-scroll]{ transition: none; }
  .typing-active::after{ animation: none; }
  .rt-toast{ animation: none; }
}


/* =========================
   Lovable parity++ extras (v5)
========================= */
.typing-active{ position: relative; }
.typing-active::after{
  content: "";
  display: inline-block;
  width: 0.6ch;
  height: 1em;
  margin-left: .12ch;
  vertical-align: -0.12em;
  background: hsl(var(--primary, 45 93% 58%));
  animation: rt-caret 0.9s steps(2,end) infinite;
  border-radius: 2px;
}
.typing-complete::after{ display:none; }
@keyframes rt-caret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.rt-hl{ position: relative; display: inline-block; padding: 0 .06em; }
.rt-hl::after{
  content:"";
  position:absolute;
  left: -2%;
  right: -2%;
  bottom: .08em;
  height: .38em;
  background: linear-gradient(135deg, hsl(45 93% 58% / .18), hsl(45 70% 45% / .28));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
}
.rt-hl-animate::after{ animation: rt-hl 900ms ease-out forwards; }
@keyframes rt-hl{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

.rt-btn-shine{ position:relative; overflow:hidden; }
.rt-btn-shine::before{
  content:"";
  position:absolute;
  top:0; left:-120%;
  width:120%; height:100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.20) 50%, transparent 100%);
  transition: left 0.55s ease-in-out;
}
.rt-btn-shine:hover::before{ left:120%; }

.rt-pulse-glow{ animation: rt-glow 2.2s ease-in-out infinite; }
@keyframes rt-glow{
  0%,100%{ box-shadow: 0 0 20px rgba(251,191,36,.22), 0 0 40px rgba(251,191,36,.10); }
  50%{ box-shadow: 0 0 35px rgba(251,191,36,.38), 0 0 70px rgba(251,191,36,.16); }
}

#rt-toaster{
  position: fixed;
  right: 16px;
  bottom: 110px;
  z-index: 9999;
  display: grid;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.rt-toast{
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(2,6,23,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display:flex;
  gap: 10px;
  align-items:flex-start;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.rt-toast .content{ flex:1; }
.rt-toast .title{ font-weight: 900; color: rgba(229,231,235,.96); }
.rt-toast .desc{ margin-top: 4px; color: rgba(229,231,235,.70); line-height:1.4; }
.rt-toast .x{
  border: 0;
  background: rgba(255,255,255,.06);
  color: rgba(229,231,235,.9);
  border-radius: 10px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.rt-toast.success{ border-color: rgba(34,197,94,.35); }
.rt-toast.error{ border-color: rgba(239,68,68,.35); }
.rt-toast.gold{ border-color: rgba(251,191,36,.35); }

/* === NEXT LEVEL: CTA pulse synced with typing + scroll idle === */
@media (prefers-reduced-motion: reduce){
  .pulse-smart, .pulse-burst{ animation: none !important; }
}

.pulse-smart{
  animation: heroPulse 2.4s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes heroPulse {
  0% {
    box-shadow:
      0 0 0 rgba(251, 191, 36, 0),
      0 0 18px rgba(251, 191, 36, 0.45);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 12px rgba(251, 191, 36, 0.65),
      0 0 42px rgba(251, 191, 36, 0.85);
    transform: scale(1.02);
  }
  100% {
    box-shadow:
      0 0 0 rgba(251, 191, 36, 0),
      0 0 18px rgba(251, 191, 36, 0.45);
    transform: scale(1);
  }
}

/* One-shot burst (used after typing completes or on scroll stop) */
.pulse-burst{
  animation: heroBurst .85s ease-out 1;
  will-change: transform, box-shadow;
}

@keyframes heroBurst{
  0%{
    transform: scale(1);
    box-shadow: 0 0 14px rgba(251,191,36,.45);
  }
  45%{
    transform: scale(1.03);
    box-shadow:
      0 0 26px rgba(251,191,36,.80),
      0 0 58px rgba(251,191,36,.80);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 18px rgba(251,191,36,.55);
  }
}