/* ALTERRA VR — MOBILE/TABLET MOTION BLOCK 03 V1
   Scope: <=1100px only. Geometry untouched. */

@media (max-width:1100px){
  .m3-story.m3m-ready .m3-kicker,
  .m3-story.m3m-ready .m3-title,
  .m3-story.m3m-ready .m3-copy,
  .m3-story.m3m-ready .m3-portal,
  .m3-story.m3m-ready .m3-step,
  .m3-story.m3m-ready .m3-cta,
  .m3-story.m3m-ready .m3-index{
    opacity:0;
  }

  .m3-story.m3m-ready .m3-kicker,
  .m3-story.m3m-ready .m3-title,
  .m3-story.m3m-ready .m3-copy,
  .m3-story.m3m-ready .m3-cta,
  .m3-story.m3m-ready .m3-index{
    transform:translateY(16px);
  }

  .m3-story.m3m-ready .m3-portal{
    transform:translateY(18px) scale(.985);
    filter:brightness(.86);
  }

  .m3-story.m3m-ready .m3-step{
    transform:translateY(18px) scale(.987);
    filter:brightness(.88);
  }

  .m3-story.m3m-in .m3-kicker{
    animation:m3mCopyIn .52s cubic-bezier(.22,.61,.36,1) .04s forwards;
  }
  .m3-story.m3m-in .m3-title{
    animation:m3mTitleIn .82s cubic-bezier(.22,.61,.36,1) .12s forwards;
  }
  .m3-story.m3m-in .m3-copy{
    animation:m3mCopyIn .62s cubic-bezier(.22,.61,.36,1) .28s forwards;
  }
  .m3-story.m3m-in .m3-portal{
    animation:m3mPortalIn .84s cubic-bezier(.22,.61,.36,1) .38s forwards;
  }
  .m3-story.m3m-in .m3-step:nth-child(1){
    animation:m3mStepIn .60s cubic-bezier(.22,.61,.36,1) .54s forwards;
  }
  .m3-story.m3m-in .m3-step:nth-child(2){
    animation:m3mStepIn .64s cubic-bezier(.22,.61,.36,1) .64s forwards;
  }
  .m3-story.m3m-in .m3-step:nth-child(3){
    animation:m3mStepIn .68s cubic-bezier(.22,.61,.36,1) .74s forwards;
  }
  .m3-story.m3m-in .m3-cta{
    animation:m3mCopyIn .58s cubic-bezier(.22,.61,.36,1) .84s forwards;
  }
  .m3-story.m3m-in .m3-index{
    animation:m3mCopyIn .50s cubic-bezier(.22,.61,.36,1) .94s forwards;
  }

  @keyframes m3mCopyIn{
    to{opacity:1;transform:translateY(0)}
  }
  @keyframes m3mTitleIn{
    0%{opacity:0;transform:translateY(18px) scale(.978);filter:blur(4px)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
  }
  @keyframes m3mPortalIn{
    0%{opacity:0;transform:translateY(18px) scale(.985);filter:brightness(.86)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
  }
  @keyframes m3mStepIn{
    0%{opacity:0;transform:translateY(18px) scale(.987);filter:brightness(.88)}
    100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
  }

  /* Ambient portal life: calm, not nightclub signage. */
  .m3-story.m3m-in .m3-portal img{
    animation:m3mPortalBreath 7.2s ease-in-out 1.35s infinite;
    transform-origin:center 46%;
  }
  .m3-story.m3m-in .m3-portal::after{
    animation:m3mPortalGlow 5.8s ease-in-out 1.35s infinite;
  }
  .m3-story.m3m-in .m3-portal-badge::before{
    animation:m3mBadgePulse 3.8s ease-in-out 1.25s infinite;
  }

  @keyframes m3mPortalBreath{
    0%,100%{transform:scale(1.02);filter:saturate(1.12) contrast(1.07) brightness(.94)}
    50%{transform:scale(1.045);filter:saturate(1.18) contrast(1.08) brightness(1.01)}
  }
  @keyframes m3mPortalGlow{
    0%,100%{opacity:.82;filter:brightness(1)}
    50%{opacity:1;filter:brightness(1.12)}
  }
  @keyframes m3mBadgePulse{
    0%,72%,100%{box-shadow:0 0 14px rgba(92,236,255,.58);transform:scale(1)}
    84%{box-shadow:0 0 23px rgba(92,236,255,.94);transform:scale(1.18)}
  }

  /* The three numbered steps wake up one by one, then stay calm. */
  .m3-story.m3m-in .m3-step-num{
    animation:m3mStepNumGlow 6s ease-in-out infinite;
  }
  .m3-story.m3m-in .m3-step:nth-child(2) .m3-step-num{animation-delay:.75s}
  .m3-story.m3m-in .m3-step:nth-child(3) .m3-step-num{animation-delay:1.5s}
  @keyframes m3mStepNumGlow{
    0%,76%,100%{box-shadow:0 0 0 rgba(79,232,252,0);filter:brightness(1)}
    86%{box-shadow:0 0 22px rgba(79,232,252,.24);filter:brightness(1.08)}
  }

  /* Conversion motion for touch devices: periodic sweep, long pause. */
  .m3-story .m3-cta{
    position:relative;
    overflow:hidden;
    isolation:isolate;
  }
  .m3-story .m3-cta::after{
    content:"";
    position:absolute;
    z-index:1;
    top:-80%;
    left:-34%;
    width:18%;
    height:260%;
    transform:rotate(18deg);
    opacity:0;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.68),transparent);
  }
  .m3-story.m3m-in .m3-cta{
    animation:m3mCtaBreath 5.8s ease-in-out 1.4s infinite;
  }
  .m3-story.m3m-in .m3-cta::after{
    animation:m3mCtaSweep 5.8s ease-in-out 1.6s infinite;
  }
  .m3-story .m3-cta:active{
    transform:scale(.985);
    filter:brightness(1.08);
  }

  @keyframes m3mCtaBreath{
    0%,68%,100%{box-shadow:0 10px 30px rgba(30,215,238,.13)}
    78%{box-shadow:0 10px 30px rgba(30,215,238,.13),0 0 26px rgba(54,225,245,.24)}
  }
  @keyframes m3mCtaSweep{
    0%,70%{left:-34%;opacity:0}
    74%{opacity:.78}
    84%{left:120%;opacity:0}
    100%{left:120%;opacity:0}
  }
}

@media (prefers-reduced-motion:reduce){
  .m3-story.m3m-ready .m3-kicker,
  .m3-story.m3m-ready .m3-title,
  .m3-story.m3m-ready .m3-copy,
  .m3-story.m3m-ready .m3-portal,
  .m3-story.m3m-ready .m3-step,
  .m3-story.m3m-ready .m3-cta,
  .m3-story.m3m-ready .m3-index{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
  }
  .m3-portal img,
  .m3-portal::after,
  .m3-portal-badge::before,
  .m3-step-num,
  .m3-cta,
  .m3-cta::after{
    animation:none!important;
  }
}