/* =========================================================
   FACADE STATIC GLASS CARD
   Zoom transition/reverse system removed completely.
   Desktop only.
   ========================================================= */

@media (min-width:901px){

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

  #outdoorHeroSection .facade-explore{
    position:absolute;
    inset:0;
    z-index:34;
    pointer-events:none;
    overflow:hidden;
  }

  /* Focus dim — same language as the street-light column. */
  #outdoorHeroSection .facade-explore::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:rgba(2,7,12,.36);
    opacity:0;
    transition:opacity .24s ease-out;
  }

  #outdoorHeroSection .facade-explore.is-focus-mode::before{
    opacity:1;
  }

  /*
    Card centered on the actual facade-light canopy.
    The isolated PNG alpha bounds are roughly 40.4% → 70.1%.
    Card center is locked to the same visual center (~55.25%).
  */
  #outdoorHeroSection .facade-explore__card{
    position:absolute;
    z-index:1;

    left:36.5%;
    top:26.5%;
    width:37.5%;
    min-width:560px;
    min-height:248px;
    padding:30px 34px 32px;

    transform:translateY(-50%);

    border:1px solid rgba(255,255,255,.16);
    border-radius:26px;

    color:#f6f0e7;
    text-align:center;

    background:
      radial-gradient(circle at 84% 10%,rgba(255,177,95,.10),transparent 34%),
      linear-gradient(145deg,rgba(15,32,47,.54),rgba(7,19,30,.40));

    -webkit-backdrop-filter:blur(25px) saturate(1.15);
    backdrop-filter:blur(25px) saturate(1.15);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.25),
      0 26px 62px rgba(0,0,0,.27),
      0 0 46px rgba(232,174,88,.045);

    pointer-events:auto;
    overflow:visible;
  }

  #outdoorHeroSection .facade-explore__card::before{
    content:"";
    position:absolute;
    inset:1px;
    border-radius:25px;
    pointer-events:none;
    background:
      linear-gradient(
        130deg,
        rgba(255,255,255,.07),
        transparent 30%,
        transparent 72%,
        rgba(255,177,95,.03)
      );
  }

  /* One clean horizontal title, centered in the upper glass space. */
  #outdoorHeroSection .facade-explore__content{
    position:absolute;
    z-index:5;

    left:50%;
    top:31%;
    width:min(86%,660px);

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
    direction:rtl;

    color:#f4f6f7;
    pointer-events:none;
  }

  #outdoorHeroSection .facade-explore__eyebrow{
    margin:0 0 10px;

    color:#c06024;

    font:800 clamp(9px,.62vw,11px)/1.1 "Manrope","DM Sans",sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;

    opacity:.90;
  }

  #outdoorHeroSection .facade-explore__title{
    margin:0;

    width:100%;

    color:#f4f6f7;

    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(26px,1.7vw,34px);
    font-weight:700;
    line-height:1.35;
    letter-spacing:-.015em;

    white-space:nowrap;

    text-shadow:0 1px 14px rgba(0,0,0,.08);
  }

  #outdoorHeroSection .facade-explore__cta-copy{
    margin-top:10px;

    color:rgba(244,246,247,.64);

    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(13px,.84vw,15px);
    font-weight:600;
    line-height:1.45;
  }

  /*
    Magnifier on the right card edge.
    Same SVG/look as the street-light column.
  */
  #outdoorHeroSection .facade-explore__trigger{
    position:absolute;
    z-index:9;

    left:50%;
    top:66%;

    width:clamp(48px,2.9vw,56px);
    height:clamp(48px,2.9vw,56px);

    transform:translate(-50%,-50%);

    display:grid;
    place-items:center;

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

    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.30),transparent 34%),
      linear-gradient(150deg,rgba(11,18,25,.34),rgba(255,255,255,.05));

    color:#f6f8f9;

    box-shadow:
      0 16px 38px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.40),
      inset 0 -1px 0 rgba(0,0,0,.07);

    -webkit-backdrop-filter:blur(10px) saturate(125%);
    backdrop-filter:blur(10px) saturate(125%);

    pointer-events:auto !important;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    padding:0;
    outline:none;
  }

  @media (hover:hover) and (pointer:fine){
    #outdoorHeroSection .facade-explore__trigger:hover{
      transform:translate(-50%,-50%) scale(1.06);
      box-shadow:
        0 20px 44px rgba(0,0,0,.22),
        0 0 0 5px rgba(192,96,36,.07),
        inset 0 1px 0 rgba(255,255,255,.48);
    }
  }

  #outdoorHeroSection .facade-explore__trigger:focus-visible{
    outline:2px solid #c06024;
    outline-offset:5px;
  }

  #outdoorHeroSection .facade-explore__trigger::before{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:inherit;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    pointer-events:none;
  }

  #outdoorHeroSection .facade-explore__trigger svg{
    width:44%;
    height:44%;
    display:block;
    overflow:visible;
  }

  /*
    SAME arrow SVG/path as the column.
    No mirroring: its arrowhead is on the LEFT.
    The SVG is placed to the RIGHT of the magnifier, so the head points back
    directly at the magnifier instead of away from it.
  */
  #outdoorHeroSection .facade-explore__arrow{
    position:absolute;
    z-index:8;

    left:51.5%;
    top:48%;

    width:8.4%;
    min-width:128px;
    max-width:172px;
    height:auto;

    overflow:visible;

    color:#ffb15f;
    pointer-events:none;

    transform-origin:12% 82%;
    animation:facadeArrowGuide 1.65s cubic-bezier(.22,1,.36,1) infinite;

    filter:
      drop-shadow(0 0 3px rgba(255,224,176,.92))
      drop-shadow(0 0 8px rgba(255,177,95,.78))
      drop-shadow(0 0 16px rgba(192,96,36,.46));
  }

  #outdoorHeroSection .facade-explore__arrow path,
  #outdoorHeroSection .facade-explore__arrow polyline{
    vector-effect:non-scaling-stroke;
    stroke:#ffb15f !important;
    stroke-width:2.7 !important;
  }

  /* Foreground PNG always above the glass card. */
  #outdoorHeroSection .facade-explore__front{
    position:absolute;
    inset:0;
    z-index:3;

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

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

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




  @keyframes facadeArrowGuide{
    0%,100%{
      transform:translate3d(5px,-3px,0) scale(.99);
      opacity:.74;
    }
    50%{
      transform:translate3d(0,0,0) scale(1.015);
      opacity:1;
    }
  }

  /* Street-light product transition owns the whole hero while active.
     Remove the facade card/front layer immediately so it never rides over the frames. */
  #outdoorHeroSection.is-product-preparing .facade-explore,
  #outdoorHeroSection.is-product-zooming .facade-explore,
  #outdoorHeroSection.is-product-detail .facade-explore{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* LIGHT OFF — keep the arrow orange, but remove all glow and motion. */
  #outdoorHeroSection.outdoor-light-is-off .facade-explore__arrow{
    color:#ffb15f !important;
    filter:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  #outdoorHeroSection.outdoor-light-is-off .facade-explore__arrow path,
  #outdoorHeroSection.outdoor-light-is-off .facade-explore__arrow polyline{
    stroke:#ffb15f !important;
  }

  @media (max-width:1180px) and (min-width:901px){
    #outdoorHeroSection .facade-explore__card{
      left:35.25%;
      top:26.7%;
      width:40%;
      min-width:500px;
      min-height:238px;
      padding:26px 28px 28px;
    }

    #outdoorHeroSection .facade-explore__title{
      font-size:clamp(23px,2.15vw,30px);
    }
  }

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

    #outdoorHeroSection .facade-explore::before{
      transition:none !important;
    }
  }
}

@media (max-width:900px){
  #outdoorHeroSection .facade-explore{
    display:none !important;
  }
}