/* =========================================================
   FACADE FRAME TRANSITION ENGINE
   Desktop only — transition + reverse only.
   No product card / product UI.
   ========================================================= */

@media (min-width:901px){

  #outdoorHeroSection,
  #outdoorHeroSection .outdoor-hero{
    position:relative;
  }

  #outdoorHeroSection .facade-frame-stack{
    position:absolute;
    inset:0;
    z-index:120;

    width:100%;
    height:100%;

    overflow:hidden;
    border-radius:inherit;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    background:#081522;

    contain:layout paint style;
    isolation:isolate;
    transform:translateZ(0);
  }

  #outdoorHeroSection .facade-frame-stack.is-active{
    opacity:1;
    visibility:visible;
    will-change:contents;
  }

  #outdoorHeroSection .facade-frame-stack__img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    max-width:none;
    max-height:none;

    object-fit:cover;
    object-position:center;

    opacity:0;
    visibility:hidden;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

  #outdoorHeroSection .facade-frame-stack__img.is-current{
    opacity:1;
    visibility:visible;
  }

  /*
    During facade transition, hide the normal hero image and every expensive
    interactive/glass layer that must not sit over the frame sequence.
  */
  #outdoorHeroSection.is-facade-zooming .outdoor-hero__frame,
  #outdoorHeroSection.is-facade-detail .outdoor-hero__frame{
    visibility:hidden !important;
  }

  #outdoorHeroSection.is-facade-zooming .outdoor-fx-viewport,
  #outdoorHeroSection.is-facade-detail .outdoor-fx-viewport,
  #outdoorHeroSection.is-facade-zooming .facade-explore,
  #outdoorHeroSection.is-facade-detail .facade-explore{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }


  /* Keep the existing LIGHT switch VISUALLY above the frame stack.
     Use higher specificity than the standalone switch CSS, which sets z-index:80 !important. */
  #outdoorHeroSection.is-facade-zooming .outdoor-hero > .outdoor-light-switch.tq-hero-light-switch,
  #outdoorHeroSection.is-facade-detail .outdoor-hero > .outdoor-light-switch.tq-hero-light-switch{
    position:absolute !important;
    z-index:1000 !important;
    opacity:1 !important;
    visibility:visible !important;
    display:flex !important;
    pointer-events:auto !important;
    isolation:isolate !important;
  }

  #outdoorHeroSection.is-facade-preparing [data-facade-zoom-trigger]{
    cursor:progress !important;
  }

  /* ======================================================
     TEMP X CONTROL
     Clear + centered for reverse testing.
     We'll art-direct it later.
     ====================================================== */

  #outdoorHeroSection .facade-transition-close{
    position:absolute;
    z-index:2147483000;

    left:50%;
    bottom:34px;

    width:60px;
    height:60px;
    padding:0;

    display:grid;
    place-items:center;

    transform:translate(-50%,10px) scale(.92);

    border:1px solid rgba(255,255,255,.32);
    border-radius:50%;

    color:#fff;
    background:rgba(5,13,21,.86);

    box-shadow:
      0 16px 36px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 0 5px rgba(255,177,95,.06);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    cursor:pointer;

    transition:
      opacity .18s ease,
      transform .22s cubic-bezier(.22,1,.36,1),
      visibility .18s ease;
  }

  #outdoorHeroSection .facade-transition-close.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transform:translate(-50%,0) scale(1);
  }

  #outdoorHeroSection .facade-transition-close:hover{
    transform:translate(-50%,-2px) scale(1.04);
    border-color:rgba(255,218,178,.55);
  }

  #outdoorHeroSection .facade-transition-close:active{
    transform:translate(-50%,0) scale(.95);
  }

  #outdoorHeroSection .facade-transition-close:focus-visible{
    outline:2px solid #ffb15f;
    outline-offset:5px;
  }

  #outdoorHeroSection .facade-transition-close svg{
    width:24px;
    height:24px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
  }

  @media (prefers-reduced-motion:reduce){
    #outdoorHeroSection .facade-transition-close{
      transition:none !important;
    }
  }
}

@media (max-width:900px){
  #outdoorHeroSection .facade-frame-stack,
  #outdoorHeroSection .facade-transition-close{
    display:none !important;
  }
}