/* =========================================================
   OUTDOOR CARD INTRO MOTION
   Separate animation layer only.
   - Facade card enters from far RIGHT.
   - Street-light card UI enters from far LEFT.
   - No changes to card design, zoom logic, transitions or product UI.
   ========================================================= */

@media (min-width:901px){

  /* Motion tuning */
  #outdoorHeroSection{
    --od-card-intro-duration: 920ms;
    --od-card-intro-ease: cubic-bezier(.16,1,.3,1);
    --od-card-intro-distance: 115vw;
  }

  /* ======================================================
     FACADE CARD — enters from far RIGHT
     Entire card moves together, so typography / arrow /
     magnifier keep their internal positions exactly.
     ====================================================== */

  #outdoorHeroSection .facade-explore__card{
    opacity:0;
    transform:
      translate3d(var(--od-card-intro-distance), -50%, 0);
    transition:
      transform var(--od-card-intro-duration) var(--od-card-intro-ease),
      opacity 420ms ease-out;
    will-change:transform,opacity;
  }

  #outdoorHeroSection.outdoor-cards-entered .facade-explore__card{
    opacity:1;
    transform:
      translate3d(0, -50%, 0);
  }

  /* ======================================================
     STREET-LIGHT CARD — enters from far LEFT
     The original implementation builds the card as several
     sibling layers, so all card-related pieces receive the
     exact same horizontal travel and settle together.
     ====================================================== */

  #outdoorHeroSection .outdoor-fx-glass-back,
  #outdoorHeroSection .outdoor-fx-glass-front,
  #outdoorHeroSection .outdoor-fx-card-content,
  #outdoorHeroSection .outdoor-fx-card-arrow{
    opacity:0;
    transform:translate3d(calc(var(--od-card-intro-distance) * -1),0,0);
    transition:
      transform var(--od-card-intro-duration) var(--od-card-intro-ease),
      opacity 420ms ease-out;
    will-change:transform,opacity;
  }

  /*
    The magnifier already owns translate(-50%,-50%) for its anchor point.
    Preserve that exact positioning while adding the left-side entrance.
  */
  #outdoorHeroSection .outdoor-fx-zoom-trigger{
    opacity:0;
    transform:
      translate(-50%,-50%)
      translate3d(calc(var(--od-card-intro-distance) * -1),0,0);
    transition:
      transform var(--od-card-intro-duration) var(--od-card-intro-ease),
      opacity 420ms ease-out,
      box-shadow .22s ease,
      background .3s ease,
      border-color .3s ease,
      color .3s ease;
    will-change:transform,opacity;
  }

  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-glass-back,
  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-glass-front,
  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-card-content,
  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-card-arrow{
    opacity:1;
    transform:translate3d(0,0,0);
  }

  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-zoom-trigger{
    opacity:1;
    transform:translate(-50%,-50%) translate3d(0,0,0);
  }

  /*
    Restore the existing hover/active scale behavior after the card settles.
    This only affects the magnifier; card geometry stays untouched.
  */
  @media (hover:hover) and (pointer:fine){
    #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-zoom-trigger:hover{
      transform:translate(-50%,-50%) scale(1.07);
    }
  }

  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-zoom-trigger:active{
    transform:translate(-50%,-50%) scale(.96);
  }

  /*
    Arrow guide animation must start only AFTER the card entrance finishes,
    otherwise its own transform animation would fight the slide-in transform.
  */
  #outdoorHeroSection .outdoor-fx-card-arrow{
    animation:none !important;
  }

  #outdoorHeroSection.outdoor-cards-entered .outdoor-fx-card-arrow{
    animation:outdoorCardArrowGuide 1.65s cubic-bezier(.22,1,.36,1)
      var(--od-card-intro-duration) infinite !important;
  }

  /*
    Facade arrow also lives inside the facade card. Pause its guide motion
    during the horizontal entrance, then resume once the card has settled.
  */
  #outdoorHeroSection .facade-explore__arrow{
    animation:none !important;
  }

  #outdoorHeroSection.outdoor-cards-entered:not(.outdoor-light-is-off)
  .facade-explore__arrow{
    animation:facadeArrowGuide 1.65s cubic-bezier(.22,1,.36,1)
      var(--od-card-intro-duration) infinite !important;
  }

  /* LIGHT OFF behavior remains authoritative: no arrow motion. */
  #outdoorHeroSection.outdoor-light-is-off .facade-explore__arrow{
    animation:none !important;
  }

  /*
    When one of the product frame engines owns the hero, don't leave stale
    intro transforms or animations competing with that engine.
  */
  #outdoorHeroSection.is-product-preparing .outdoor-fx-glass-back,
  #outdoorHeroSection.is-product-preparing .outdoor-fx-glass-front,
  #outdoorHeroSection.is-product-preparing .outdoor-fx-card-content,
  #outdoorHeroSection.is-product-preparing .outdoor-fx-card-arrow,
  #outdoorHeroSection.is-product-zooming .outdoor-fx-glass-back,
  #outdoorHeroSection.is-product-zooming .outdoor-fx-glass-front,
  #outdoorHeroSection.is-product-zooming .outdoor-fx-card-content,
  #outdoorHeroSection.is-product-zooming .outdoor-fx-card-arrow,
  #outdoorHeroSection.is-product-detail .outdoor-fx-glass-back,
  #outdoorHeroSection.is-product-detail .outdoor-fx-glass-front,
  #outdoorHeroSection.is-product-detail .outdoor-fx-card-content,
  #outdoorHeroSection.is-product-detail .outdoor-fx-card-arrow{
    will-change:auto;
  }

  @media (prefers-reduced-motion:reduce){
    #outdoorHeroSection .facade-explore__card,
    #outdoorHeroSection .outdoor-fx-glass-back,
    #outdoorHeroSection .outdoor-fx-glass-front,
    #outdoorHeroSection .outdoor-fx-card-content,
    #outdoorHeroSection .outdoor-fx-card-arrow,
    #outdoorHeroSection .outdoor-fx-zoom-trigger{
      transition:none !important;
      animation:none !important;
    }
  }
}

@media (max-width:900px){
  #outdoorHeroSection.outdoor-cards-entered{
    --od-card-intro-distance:0px;
  }
}