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

  /* Entrance: only opacity/transform/filter, no layout movement. */
  html.m4m-ready .m4-quests:not(.m4m-in) .m4-kicker,
  html.m4m-ready .m4-quests:not(.m4m-in) .m4-title,
  html.m4m-ready .m4-quests:not(.m4m-in) .m4-selector,
  html.m4m-ready .m4-quests:not(.m4m-in) .m4-card,
  html.m4m-ready .m4-quests:not(.m4m-in) .m4-index{
    opacity:0;
    transform:translateY(16px);
    filter:blur(3px);
  }

  html.m4m-ready .m4-quests .m4-kicker,
  html.m4m-ready .m4-quests .m4-title,
  html.m4m-ready .m4-quests .m4-selector,
  html.m4m-ready .m4-quests .m4-card,
  html.m4m-ready .m4-quests .m4-index{
    transition:
      opacity .62s var(--m4m-ease),
      transform .68s var(--m4m-ease),
      filter .68s var(--m4m-ease);
  }

  html.m4m-ready .m4-quests.m4m-in .m4-kicker{transition-delay:.02s}
  html.m4m-ready .m4-quests.m4m-in .m4-title{transition-delay:.10s}
  html.m4m-ready .m4-quests.m4m-in .m4-selector{transition-delay:.22s}
  html.m4m-ready .m4-quests.m4m-in .m4-card{transition-delay:.32s}
  html.m4m-ready .m4-quests.m4m-in .m4-index{transition-delay:.46s}

  html.m4m-ready .m4-quests.m4m-in .m4-kicker,
  html.m4m-ready .m4-quests.m4m-in .m4-title,
  html.m4m-ready .m4-quests.m4m-in .m4-selector,
  html.m4m-ready .m4-quests.m4m-in .m4-card,
  html.m4m-ready .m4-quests.m4m-in .m4-index{
    opacity:1;
    transform:none;
    filter:none;
  }

  /* Active selector has a calm ambient glow instead of hover. */
  .m4-tab.is-active{
    animation:m4mTabBreath 3.8s ease-in-out infinite;
  }
  @keyframes m4mTabBreath{
    0%,100%{box-shadow:inset 0 0 0 1px rgba(90,236,255,.08),0 0 16px rgba(48,215,239,.07)}
    50%{box-shadow:inset 0 0 0 1px rgba(90,236,255,.14),0 0 27px rgba(48,215,239,.16)}
  }

  /* Image/content change when another quest is tapped. */
  .m4-card.m4m-switching .m4-media img{
    animation:m4mImageSwap .48s var(--m4m-ease) both;
  }
  .m4-card.m4m-switching .m4-body > *{
    animation:m4mCopySwap .42s var(--m4m-ease) both;
  }
  .m4-card.m4m-switching .m4-body > *:nth-child(2){animation-delay:.035s}
  .m4-card.m4m-switching .m4-body > *:nth-child(3){animation-delay:.07s}
  .m4-card.m4m-switching .m4-body > *:nth-child(4){animation-delay:.10s}
  .m4-card.m4m-switching .m4-body > *:nth-child(5){animation-delay:.13s}

  @keyframes m4mImageSwap{
    0%{opacity:.42;transform:scale(1.035);filter:brightness(.82) saturate(.88)}
    100%{opacity:1;transform:scale(1);filter:saturate(1.08) contrast(1.05)}
  }
  @keyframes m4mCopySwap{
    0%{opacity:.20;transform:translateY(7px)}
    100%{opacity:1;transform:none}
  }

  /* Conversion motion: main CTA stays alive without hover. */
  .m4-primary{
    position:relative;
    overflow:hidden;
    box-shadow:0 0 18px rgba(49,218,240,.12);
    animation:m4mPrimaryBreath 4.6s ease-in-out infinite;
  }
  .m4-primary::after{
    content:"";
    position:absolute;
    top:-85%;
    left:-38%;
    width:20%;
    height:270%;
    transform:rotate(18deg);
    opacity:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
    pointer-events:none;
    animation:m4mSweep 5.2s var(--m4m-ease) 1.7s infinite;
  }
  @keyframes m4mPrimaryBreath{
    0%,100%{box-shadow:0 0 14px rgba(49,218,240,.10)}
    50%{box-shadow:0 0 27px rgba(49,218,240,.23)}
  }
  @keyframes m4mSweep{
    0%,64%{left:-38%;opacity:0}
    69%{opacity:.78}
    83%{left:122%;opacity:0}
    100%{left:122%;opacity:0}
  }

  /* Touch feedback replaces hover. */
  .m4-tab:active,
  .m4-primary:active,
  .m4-secondary:active{
    transform:scale(.985);
    filter:brightness(1.08);
  }

  .m4-counter{
    animation:m4mCounterGlow 4.2s ease-in-out infinite;
  }
  @keyframes m4mCounterGlow{
    0%,100%{box-shadow:0 0 0 rgba(74,230,250,0)}
    50%{box-shadow:0 0 16px rgba(74,230,250,.16)}
  }
}

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