/* Diwali card studio: a quiet motion layer. Native CSS only, no libraries.
   Only opacity and transform are animated (cheap on tablets), and everything is off for people who ask for reduced motion.
   Does not change any size or position, so the desktop and phone layouts are untouched. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dqIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes dqCard { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes dqPop { 0% { transform: scale(.92); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
  @keyframes dqSheet { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
  @keyframes dqFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dqGlow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.05); } }
  @keyframes dqSheen { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }

  /* each step slides in */
  .dcq-body { animation: dqIn .28s cubic-bezier(.2, .7, .2, 1) both; }

  /* the card rises in, over a slow warm glow like diya light */
  .dcq-prev { isolation: isolate; }
  .dcq-prev::before { content: ""; position: absolute; inset: 4%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(246, 176, 40, .34), rgba(230, 90, 60, .10) 62%, transparent 76%); animation: dqGlow 5.5s ease-in-out infinite; }
  .dcq-prev canvas { animation: dqCard .4s cubic-bezier(.2, .7, .2, 1) both; }

  /* choices pop when picked */
  .dcq-thumbs button.on, .dcq-chips button.on, .dcq-pic.on, .dcq-sws button.on, .dcq-g4 button.on, .dcq-fonts button.on,
  .dcq-slots button.on, .dcq-stk button.on, .dcq-pill.on, .dcq-tabs button.on { animation: dqPop .26s ease-out; }

  /* a small press response on buttons (the round arrows keep their own centring transform, so they are left out) */
  .dcq-pri, .dcq-sec, .dcq-ghost, .dcq-pill, .dcq-sug, .dcq-pic, .dcq-chips button, .dcq-g4 button, .dcq-fonts button, .dcq-stk button, .dcq-slots button, .dcq-thumbs button { transition: transform .12s, filter .12s; }
  .dcq-pri:active, .dcq-sec:active, .dcq-ghost:active, .dcq-pill:active, .dcq-sug:active, .dcq-pic:active, .dcq-chips button:active, .dcq-g4 button:active, .dcq-fonts button:active, .dcq-stk button:active, .dcq-slots button:active, .dcq-thumbs button:active { transform: scale(.96); }

  /* the main button gives a slow, soft sheen */
  .dcq-foot .dcq-pri { position: relative; overflow: hidden; }
  .dcq-foot .dcq-pri::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .30), transparent); transform: translateX(-160%) skewX(-18deg); animation: dqSheen 5s ease-in-out 1.5s infinite; }

  /* the design picker slides up, its pictures arrive one after another */
  .dcq-sheet { animation: dqFade .2s ease-out both; }
  .dcq-sh { animation: dqSheet .3s cubic-bezier(.2, .8, .2, 1) both; }
  .dcq-pic { animation: dqIn .3s cubic-bezier(.2, .7, .2, 1) both; }
  .dcq-pic:nth-child(2) { animation-delay: .03s; } .dcq-pic:nth-child(3) { animation-delay: .06s; } .dcq-pic:nth-child(4) { animation-delay: .09s; }
  .dcq-pic:nth-child(5) { animation-delay: .12s; } .dcq-pic:nth-child(6) { animation-delay: .15s; } .dcq-pic:nth-child(7) { animation-delay: .18s; }
  .dcq-pic:nth-child(8) { animation-delay: .21s; } .dcq-pic:nth-child(n+9) { animation-delay: .24s; }
}