/* ALTERRA VR — MOBILE/TABLET MOTION BLOCK 05 V1
   Scope: <=1100px only. Geometry stays untouched. */
@media (max-width:1100px){
  .m5-occasions{--m5m-ease:cubic-bezier(.22,.61,.36,1)}

  /* Entrance: copy first, then cards cascade into view. */
  html.m5m-ready .m5-occasions:not(.m5m-in) .m5-kicker,
  html.m5m-ready .m5-occasions:not(.m5m-in) .m5-title,
  html.m5m-ready .m5-occasions:not(.m5m-in) .m5-lead,
  html.m5m-ready .m5-occasions:not(.m5m-in) .m5-card,
  html.m5m-ready .m5-occasions:not(.m5m-in) .m5-index{
    opacity:0;
    transform:translateY(16px);
    filter:blur(3px);
  }

  html.m5m-ready .m5-occasions .m5-kicker,
  html.m5m-ready .m5-occasions .m5-title,
  html.m5m-ready .m5-occasions .m5-lead,
  html.m5m-ready .m5-occasions .m5-card,
  html.m5m-ready .m5-occasions .m5-index{
    transition:
      opacity .62s var(--m5m-ease),
      transform .70s var(--m5m-ease),
      filter .70s var(--m5m-ease),
      border-color .22s ease,
      box-shadow .22s ease;
  }

  html.m5m-ready .m5-occasions.m5m-in .m5-kicker{transition-delay:.02s}
  html.m5m-ready .m5-occasions.m5m-in .m5-title{transition-delay:.10s}
  html.m5m-ready .m5-occasions.m5m-in .m5-lead{transition-delay:.20s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(1){transition-delay:.30s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(2){transition-delay:.38s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(3){transition-delay:.46s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(4){transition-delay:.54s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(5){transition-delay:.62s}
  html.m5m-ready .m5-occasions.m5m-in .m5-index{transition-delay:.72s}

  html.m5m-ready .m5-occasions.m5m-in .m5-kicker,
  html.m5m-ready .m5-occasions.m5m-in .m5-title,
  html.m5m-ready .m5-occasions.m5m-in .m5-lead,
  html.m5m-ready .m5-occasions.m5m-in .m5-card,
  html.m5m-ready .m5-occasions.m5m-in .m5-index{
    opacity:1;
    transform:none;
    filter:none;
  }

  /* One restrained light pass over each card after it appears. */
  .m5-card::before{
    content:"";
    position:absolute;
    z-index:2;
    top:-55%;
    left:-42%;
    width:18%;
    height:220%;
    transform:rotate(18deg);
    opacity:0;
    background:linear-gradient(90deg,transparent,rgba(120,238,255,.24),transparent);
    pointer-events:none;
  }
  html.m5m-ready .m5-occasions.m5m-in .m5-card::before{
    animation:m5mCardSweep 1.05s var(--m5m-ease) both;
  }
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(1)::before{animation-delay:.48s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(2)::before{animation-delay:.62s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(3)::before{animation-delay:.74s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(4)::before{animation-delay:.86s}
  html.m5m-ready .m5-occasions.m5m-in .m5-card:nth-child(5)::before{animation-delay:.98s}

  @keyframes m5mCardSweep{
    0%{left:-42%;opacity:0}
    20%{opacity:.72}
    72%{opacity:.28}
    100%{left:124%;opacity:0}
  }

  /* Birthday is the primary conversion card, so it keeps a very calm halo. */
  .m5-card--birthday{
    animation:m5mBirthdayBreath 4.8s ease-in-out 1.4s infinite;
  }
  @keyframes m5mBirthdayBreath{
    0%,100%{border-color:rgba(66,224,248,.40);box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 44px rgba(0,0,0,.24),0 0 0 rgba(48,220,244,0)}
    50%{border-color:rgba(91,236,255,.68);box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 44px rgba(0,0,0,.24),0 0 24px rgba(48,220,244,.11)}
  }

  /* Touch feedback replaces hover on linked image cards. */
  .m5-card:active{
    transform:scale(.985) !important;
    filter:brightness(1.07) !important;
    border-color:rgba(103,240,255,.86);
    box-shadow:0 0 22px rgba(48,220,244,.15),0 14px 36px rgba(0,0,0,.26);
  }
}

@media (prefers-reduced-motion:reduce){
  .m5-occasions *,
  .m5-occasions *::before,
  .m5-occasions *::after{
    animation:none !important;
    transition:none !important;
  }
  html.m5m-ready .m5-occasions .m5-kicker,
  html.m5m-ready .m5-occasions .m5-title,
  html.m5m-ready .m5-occasions .m5-lead,
  html.m5m-ready .m5-occasions .m5-card,
  html.m5m-ready .m5-occasions .m5-index{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}