/* =====================================================================
   Daytime Design Co. — Motion layer
   Scroll reveals, hero entrance, count-ups. allinonebrandsprint-style:
   smooth, premium easing, nothing flashy. Fully disabled for users who
   prefer reduced motion.
   ===================================================================== */

:root { --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll reveal ---- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
  }
  [data-reveal="left"]  { transform: translateX(-32px); }
  [data-reveal="right"] { transform: translateX(32px); }
  [data-reveal="scale"] { transform: translateY(28px) scale(0.97); }
  [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* ---- Hero entrance (plays as the loader gif lands) ---- */
  .hero__center h1 span { display: block; opacity: 0; animation: riseIn .8s both var(--ease-out); }
  .hero__center h1 span:nth-child(1) { animation-delay: 1.1s; }
  .hero__center h1 span:nth-child(2) { animation-delay: 1.23s; }
  .hero__center h1 span:nth-child(3) { animation-delay: 1.36s; }
  .hero__center .btn { opacity: 0; animation: riseIn .8s 1.5s both var(--ease-out); }
  .polaroid--left  { opacity: 0; animation: polaroidL 1s 1.15s both var(--ease-out); }
  .polaroid--right { opacity: 0; animation: polaroidR 1s 1.27s both var(--ease-out); }
  /* the phone slides up onto the poster just after it lands */
  .hero__phone     { opacity: 0; animation: phoneIn 0.9s 1.42s both var(--ease-out); }
  @keyframes phoneIn { from { opacity: 0; transform: translateY(30px) rotate(-6deg); } to { opacity: 1; transform: none; } }
  .hero__meta, .hero__divider, .hero__tags { opacity: 0; animation: fadeUp .8s 1.6s both var(--ease-out); }

  @keyframes riseIn   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
  @keyframes polaroidL { from { opacity: 0; transform: translateY(36px) rotate(-13deg); } to { opacity: 1; transform: rotate(-5deg); } }
  @keyframes polaroidR { from { opacity: 0; transform: translateY(36px) rotate(12deg); } to { opacity: 1; transform: rotate(4deg); } }

  /* ---- Gentle hover lift on teaser covers + cards ---- */
  .teaser__cover, .testi__card { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .teaser__cover:hover { transform: translateY(-6px); }
  .testi__card:hover   { transform: translateY(-4px); }

  /* ---- Smooth services accordion ---- */
  .srow__body { overflow: hidden; }
}

/* ---- Count-up: hold layout so numbers don't reflow while animating ---- */
.num[data-count] { font-variant-numeric: tabular-nums; }