/* ====== Yorukuru — motion / playful interactions ====== */

/* Progressive enhancement: only hide pre-reveal when JS is active */
html.js [data-reveal] { opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .float-a, .float-b, .badge, .sparkle, .moon, .glow,
  .price-card.recommended, .em, .arrow-grad { animation: none !important; }
}

/* ---------- generic reveal base ---------- */
html.js [data-reveal] {
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
html.js .is-in [data-reveal],
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* stagger helper (children) */
html.js .is-in [data-reveal]:nth-child(1){transition-delay:.00s}
html.js .is-in [data-reveal]:nth-child(2){transition-delay:.08s}
html.js .is-in [data-reveal]:nth-child(3){transition-delay:.16s}
html.js .is-in [data-reveal]:nth-child(4){transition-delay:.24s}
html.js .is-in [data-reveal]:nth-child(5){transition-delay:.32s}
html.js .is-in [data-reveal]:nth-child(6){transition-delay:.40s}

/* ---------- NAV: shrink + shadow on scroll ---------- */
.nav { transition: box-shadow .3s, background .3s; }
.nav.scrolled {
  box-shadow: 0 6px 24px rgba(139,92,246,.12);
  background: rgba(255,255,255,.95);
}
.nav.scrolled .nav-inner { height: 60px; transition: height .3s; }
.nav-inner { transition: height .3s; }
.logo-mark { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }

/* ---------- HERO: continuous life ---------- */
.tablet { animation: floatA 6s ease-in-out infinite; }
.phone  { animation: floatB 5s ease-in-out infinite; }
.badge-1 { animation: badgePop 4s ease-in-out infinite; }
@keyframes floatA {
  0%,100% { transform: rotate(-2deg) translateY(0); }
  50%     { transform: rotate(-2deg) translateY(-14px); }
}
@keyframes floatB {
  0%,100% { transform: rotate(3deg) translateY(0); }
  50%     { transform: rotate(3deg) translateY(12px); }
}
@keyframes badgePop {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-8px) scale(1.05); }
}
.sparkle { animation: twinkle 3s ease-in-out infinite; }
.sparkle:nth-of-type(2){ animation-delay:.6s }
.sparkle:nth-of-type(3){ animation-delay:1.2s }
.sparkle:nth-of-type(4){ animation-delay:1.8s }
@keyframes twinkle {
  0%,100% { opacity:.35; transform: scale(.8) rotate(0deg); }
  50%     { opacity:1;   transform: scale(1.25) rotate(45deg); }
}
h1.hero-h .em {
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }

/* hero entrance */
html.js .hero h1.hero-h,
html.js .hero .eyebrow,
html.js .hero .hero-sub,
html.js .hero .hero-cta,
html.js .hero .trust-row,
html.js .hero .hero-visual {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
html.js .hero.is-in .eyebrow      { opacity:1; transform:none; transition-delay:.05s; }
html.js .hero.is-in h1.hero-h     { opacity:1; transform:none; transition-delay:.15s; }
html.js .hero.is-in .hero-sub     { opacity:1; transform:none; transition-delay:.30s; }
html.js .hero.is-in .hero-cta     { opacity:1; transform:none; transition-delay:.42s; }
html.js .hero.is-in .trust-row    { opacity:1; transform:none; transition-delay:.54s; }
html.js .hero.is-in .hero-visual  { opacity:1; transform:none; transition-delay:.20s; }
.trust-item .num { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.trust-item:hover .num { transform: scale(1.12); }

/* ---------- PROBLEMS: pop up + tilt, staggered ---------- */
html.js .problems .prob-card { opacity:0; transform: translateY(40px) rotate(-3deg) scale(.96); }
html.js .problems.is-in .prob-card { opacity:1; transform:none; }
html.js .problems.is-in .prob-card:nth-child(1){transition-delay:.00s}
html.js .problems.is-in .prob-card:nth-child(2){transition-delay:.10s}
html.js .problems.is-in .prob-card:nth-child(3){transition-delay:.20s}
html.js .problems.is-in .prob-card:nth-child(4){transition-delay:.30s}
html.js .problems.is-in .prob-card:nth-child(5){transition-delay:.40s}
.prob-card { transition: transform .7s cubic-bezier(.22,1,.36,1), opacity .7s, box-shadow .25s; }
.prob-num { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.prob-card:hover .prob-num { transform: rotate(360deg) scale(1.15); }
.prob-card:hover .prob-illust svg { animation: jiggle .5s ease; }
@keyframes jiggle {
  0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg)} 75%{transform:rotate(6deg)}
}

/* ---------- SOLUTION: slide in from sides ---------- */
html.js .solution .solve-before { opacity:0; transform: translateX(-60px); }
html.js .solution .solve-after  { opacity:0; transform: translateX(60px); }
html.js .solution .arrow-grad   { opacity:0; transform: scale(.4); }
html.js .solution.is-in .solve-before,
html.js .solution.is-in .solve-after { opacity:1; transform:none; transition: opacity .8s, transform .8s cubic-bezier(.22,1,.36,1); }
html.js .solution.is-in .arrow-grad  { opacity:1; transform:none; transition: opacity .5s .35s, transform .6s .35s cubic-bezier(.34,1.56,.64,1); }
.solution.is-in .arrow-grad { animation: arrowPulse 2s ease-in-out 1s infinite; }
@keyframes arrowPulse {
  0%,100%{ box-shadow: var(--shadow-lg); }
  50%    { box-shadow: 0 0 0 14px rgba(217,70,173,.10), var(--shadow-lg); }
}
html.js .solution .solve-bullet { opacity:0; transform: translateY(20px); transition: opacity .5s, transform .5s cubic-bezier(.22,1,.36,1); }
html.js .solution.is-in .solve-bullet { opacity:1; transform:none; }
html.js .solution.is-in .solve-bullet:nth-child(1){transition-delay:.5s}
html.js .solution.is-in .solve-bullet:nth-child(2){transition-delay:.62s}
html.js .solution.is-in .solve-bullet:nth-child(3){transition-delay:.74s}
.solve-bullet { transition: transform .25s; }
.solve-bullet:hover { transform: translateY(-4px) scale(1.03); }

/* ---------- REASONS: 3D flip-up ---------- */
html.js .reason-grid { perspective: 1200px; }
html.js .reasons .reason-card { opacity:0; transform: rotateX(18deg) translateY(50px); transform-origin: top center; }
html.js .reasons.is-in .reason-card { opacity:1; transform:none; transition: opacity .8s, transform .9s cubic-bezier(.22,1,.36,1); }
html.js .reasons.is-in .reason-card:nth-child(1){transition-delay:.05s}
html.js .reasons.is-in .reason-card:nth-child(2){transition-delay:.20s}
html.js .reasons.is-in .reason-card:nth-child(3){transition-delay:.35s}
.reason-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.reason-card:hover { transform: translateY(-10px) rotate(-1deg); box-shadow: var(--shadow-lg); }
.r-num { display:inline-block; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.reason-card:hover .r-num { transform: scale(1.25) translateY(-4px); }

/* ---------- FEATURES: zoom-in + icon wiggle ---------- */
html.js .features .feat-card { opacity:0; transform: scale(.85); }
html.js .features.is-in .feat-card { opacity:1; transform:none; transition: opacity .6s, transform .6s cubic-bezier(.34,1.56,.64,1); }
html.js .features.is-in .feat-card:nth-child(1){transition-delay:.00s}
html.js .features.is-in .feat-card:nth-child(2){transition-delay:.08s}
html.js .features.is-in .feat-card:nth-child(3){transition-delay:.16s}
html.js .features.is-in .feat-card:nth-child(4){transition-delay:.24s}
html.js .features.is-in .feat-card:nth-child(5){transition-delay:.32s}
html.js .features.is-in .feat-card:nth-child(6){transition-delay:.40s}
.feat-icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.feat-card:hover .feat-icon { transform: rotate(-10deg) scale(1.12); animation: wiggle .6s ease; }
@keyframes wiggle {
  0%,100%{transform:rotate(-10deg) scale(1.12)} 30%{transform:rotate(8deg) scale(1.12)} 60%{transform:rotate(-6deg) scale(1.12)}
}

/* ---------- STEPS: sequential rise + arrow draw ---------- */
html.js .steps .step-card { opacity:0; transform: translateY(40px); }
html.js .steps .step-arrow { opacity:0; transform: scale(.3); }
html.js .steps.is-in .step-card { opacity:1; transform:none; transition: opacity .6s, transform .7s cubic-bezier(.22,1,.36,1); }
html.js .steps.is-in .step-arrow { opacity:1; transform:none; transition: opacity .5s, transform .5s cubic-bezier(.34,1.56,.64,1); }
html.js .steps.is-in .step-card:nth-child(1){transition-delay:.00s}
html.js .steps.is-in .step-arrow:nth-child(2){transition-delay:.25s}
html.js .steps.is-in .step-card:nth-child(3){transition-delay:.40s}
html.js .steps.is-in .step-arrow:nth-child(4){transition-delay:.65s}
html.js .steps.is-in .step-card:nth-child(5){transition-delay:.80s}
.step-illust { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.step-card:hover .step-illust { transform: rotate(360deg) scale(1.08); }
.step-arrow svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(5px)} }

/* ---------- PRICING: rise + recommended glow ---------- */
html.js .pricing .price-card { opacity:0; transform: translateY(46px); }
html.js .pricing.is-in .price-card { opacity:1; transform:none; transition: opacity .7s, transform .8s cubic-bezier(.22,1,.36,1); }
html.js .pricing.is-in .price-card:nth-child(1){transition-delay:.05s}
html.js .pricing.is-in .price-card:nth-child(2){transition-delay:.20s}
.price-card { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.price-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.price-card.recommended.is-glow { animation: recoGlow 2.6s ease-in-out infinite; }
@keyframes recoGlow {
  0%,100% { box-shadow: var(--shadow); }
  50%     { box-shadow: 0 0 0 6px rgba(217,70,173,.10), 0 20px 48px rgba(236,72,153,.28); }
}
.price-row.main .val { display:inline-block; transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.price-card:hover .price-row.main .val { transform: scale(1.06); }
.recommend-tag { animation: tagFloat 3s ease-in-out infinite; }
@keyframes tagFloat {
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%    { transform: translateX(-50%) translateY(-5px); }
}

/* ---------- FAQ: fade in from left, staggered ---------- */
html.js .faq .faq-item { opacity:0; transform: translateX(-28px); }
html.js .faq.is-in .faq-item { opacity:1; transform:none; transition: opacity .55s, transform .55s cubic-bezier(.22,1,.36,1); }
html.js .faq.is-in .faq-item:nth-child(1){transition-delay:.00s}
html.js .faq.is-in .faq-item:nth-child(2){transition-delay:.10s}
html.js .faq.is-in .faq-item:nth-child(3){transition-delay:.20s}
html.js .faq.is-in .faq-item:nth-child(4){transition-delay:.30s}
.q-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.faq-item.open .q-icon { transform: rotate(360deg) scale(1.1); }

/* ---------- FINAL CTA: moon glow + skyline drift + shine ---------- */
.final-cta .moon { animation: moonGlow 5s ease-in-out infinite; }
@keyframes moonGlow {
  0%,100% { transform: translateY(-50%) scale(1); filter: blur(.5px) brightness(1); }
  50%     { transform: translateY(-54%) scale(1.06); filter: blur(.5px) brightness(1.15); }
}
.final-cta .skyline { width: 108%; animation: drift 18s linear infinite alternate; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-26px); } }
html.js .final-cta .cta-head,
html.js .final-cta .cta-buttons { opacity:0; transform: translateY(28px); transition: opacity .8s, transform .8s cubic-bezier(.22,1,.36,1); }
html.js .final-cta.is-in .cta-head    { opacity:1; transform:none; transition-delay:.1s; }
html.js .final-cta.is-in .cta-buttons { opacity:1; transform:none; transition-delay:.3s; }
.final-cta .btn { position: relative; overflow: hidden; }
.final-cta .btn::after {
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
}
.final-cta .btn:hover::after { animation: shine .8s ease; }
@keyframes shine { to { left: 130%; } }

/* ---------- section title small underline grow ---------- */
.section-title-small::before, .section-title-small::after { transition: width .6s ease; }
html.js .is-in .section-title-small::before,
html.js .is-in .section-title-small::after { width: 32px; }
html.js [data-reveal].section-title-small::before,
html.js .section-title-small { }