/* ============================================================
   motion.css — Apple-style scroll experience for Covly
   Scroll-reveal, cloudy-sky hero, floating phone, parallax.
   Pure CSS. Respects prefers-reduced-motion.
   ============================================================ */

/* -------- Scroll reveal -------- */
[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
[data-reveal][data-delay="5"]{transition-delay:.4s}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .phone-float{animation:none!important}
}

/* -------- Hero cloudy sky -------- */
.hero-sky{position:relative;overflow:hidden}
.hero-sky > .container{position:relative;z-index:2}

.cloud{
  position:absolute;
  background:radial-gradient(closest-side,#fff, rgba(255,255,255,0));
  border-radius:50%;
  pointer-events:none;
  opacity:.9;
  z-index:1;
  filter:blur(6px);
}
.cloud.c1{width:340px;height:340px;left:-60px;top:40px}
.cloud.c2{width:260px;height:260px;right:-40px;top:120px}
.cloud.c3{width:200px;height:200px;left:40%;top:220px;opacity:.7}

/* -------- Floating hero phone -------- */
.phone-wrap{position:relative}
.phone-shadow{
  position:absolute;
  left:50%;
  bottom:-26px;
  transform:translateX(-50%);
  width:70%;
  height:26px;
  background:radial-gradient(closest-side, rgba(36,38,92,.28), rgba(36,38,92,0));
  filter:blur(4px);
  pointer-events:none;
}
.phone-float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-14px) rotate(-3deg)}
}

/* -------- Airier spacing -------- */
.hero-sky.section{padding-top:120px;padding-bottom:120px}
.section{scroll-margin-top:80px}

/* ---- Hero: reduced top gap + on-load split animation ---- */
.hero-section { padding: 44px 0 76px; }
.hero-split { align-items: center; }

/* Text slides in from the phone (center) to the left; phone slides out to the right. */
.hero-anim-left  { animation: heroSplitLeft  .9s cubic-bezier(.22,.61,.36,1) both; }
.hero-anim-right { animation: heroSplitRight .9s cubic-bezier(.22,.61,.36,1) both; }
@keyframes heroSplitLeft  { from { opacity: 0; transform: translateX(64px);  } to { opacity: 1; transform: none; } }
@keyframes heroSplitRight { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }

/* Mobile: stack, no split/reveal animation on the phone — just show it. */
@media (max-width: 820px) {
  .hero-section { padding: 24px 0 48px; }
  .hero-anim-left, .hero-anim-right { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim-left, .hero-anim-right { animation: none; opacity: 1; transform: none; }
}