/* =========================================================
   TAQA OUTDOOR — MOBILE CARDS / FRONT LAYER
   Canonical mobile-route styles
   ========================================================= */

/* Mobile route mirrors the TAQA responsive router:
   phone + portrait/tall tablet => mobile behavior.
   Desktop landscape is excluded by the inverse media block below. */
@media (max-width:900px), (orientation:portrait), (max-height:599px), (max-aspect-ratio:6/5){

  #outdoorHeroMobileSection{
    --mobile-glass-blur:18px;
    --mobile-glass-saturate:125%;
    --mobile-glass-shadow:0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.16);
    --mobile-glass-shadow-moving:0 14px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.13);
    --mobile-accent:#c06024;
    --mobile-arrow:#ffb15f;
  }

  /* =======================================================
     01) SECTION / HERO INFRASTRUCTURE
     ======================================================= */

  #outdoorHeroMobileSection{
    position:relative;
    width:100vw;
    max-width:100vw;
    height:130vh;
    min-height:130vh;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0;
    overflow:visible;
  }

  #outdoorHeroMobileSection > .outdoor-mobile-hero,
  #outdoorHeroMobileSection .outdoor-mobile-hero{
    position:sticky;
    top:0;
    isolation:isolate;
    width:100vw;
    height:100vh;
    height:100svh;
    height:100dvh;
    min-height:100vh;
    min-height:100svh;
    min-height:100dvh;
    aspect-ratio:auto;
    overflow:hidden;
    background:#081522;
    transform-origin:center top;
    transition:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-hero__frame{
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    object-fit:fill;
    object-position:center;
  }

  /* Layer order:
     1 = base frame
     2 = glass cards
     3 = front layer */
  #outdoorHeroMobileSection .outdoor-mobile-cards-layer{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-front-layer{
    position:absolute;
    inset:0;
    z-index:3;
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    margin:0;
    padding:0;
    object-fit:fill;
    object-position:center;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

  /* =======================================================
     02) GLASS CARD FOUNDATION
     ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-glass-card{
    position:absolute;
    overflow:hidden;
    container-type:inline-size;
    pointer-events:auto;
    background:
      linear-gradient(
        135deg,
        rgba(18,28,40,.62) 0%,
        rgba(10,17,27,.48) 52%,
        rgba(5,11,18,.56) 100%
      );
    border:1px solid rgba(255,255,255,.15);
    box-shadow:var(--mobile-glass-shadow);
    -webkit-backdrop-filter:blur(var(--mobile-glass-blur)) saturate(var(--mobile-glass-saturate));
    backdrop-filter:blur(var(--mobile-glass-blur)) saturate(var(--mobile-glass-saturate));
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      linear-gradient(
        150deg,
        rgba(255,255,255,.10) 0%,
        rgba(255,255,255,.025) 34%,
        transparent 64%
      );
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card--pole{
    left:var(--street-card-cover-left, calc(13.1% - 5px));
    top:57.8%;
    width:63.2%;
    height:22.7%;
    border-radius:0 24px 24px 0;
    transform-origin:left center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card--awning{
    left:32%;
    right:-1px;
    top:22.9%;
    width:calc(68% + 1px);
    height:19.1%;
    container-type:size;
    border-radius:24px 0 0 24px;
    transform-origin:left center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-glass-card.is-focus-mode{
    box-shadow:
      0 20px 48px rgba(0,0,0,.34),
      0 0 0 1px rgba(192,96,36,.10),
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -1px 0 rgba(0,0,0,.16);
  }

  /* =======================================================
     03) ENTRANCE STATE
     Entrance starts immediately when the hero reaches a
     full-viewport state. Night mode runs on a separate timer.
     ======================================================= */

  #outdoorHeroMobileSection.mobile-cards-awaiting-entrance
  .outdoor-mobile-glass-card{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:none;
  }

  #outdoorHeroMobileSection.mobile-cards-awaiting-entrance
  .outdoor-mobile-glass-card--pole{
    opacity:0;
    transform:translate3d(-18%,0,0) scaleX(.16);
  }

  #outdoorHeroMobileSection.mobile-cards-awaiting-entrance
  .outdoor-mobile-glass-card--awning{
    opacity:0;
    transform:translate3d(18%,0,0) scaleX(.16);
  }

  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--pole{
    animation:
      taqaMobileCardRevealFromEdge
      .72s
      cubic-bezier(.16,1,.30,1)
      .04s
      both;
    will-change:transform,opacity;
  }

  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card--awning{
    animation:
      taqaMobileCardRevealFromRightEdge
      .78s
      cubic-bezier(.16,1,.30,1)
      .12s
      both;
    will-change:transform,opacity;
  }

  /* Avoid repainting the expensive blur while the cards are moving.
     The approved blur returns immediately when the entrance settles. */
  #outdoorHeroMobileSection.is-mobile-cards-animate
  .outdoor-mobile-glass-card{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    box-shadow:var(--mobile-glass-shadow-moving);
  }

  #outdoorHeroMobileSection.mobile-cards-animation-done
  .outdoor-mobile-glass-card{
    -webkit-backdrop-filter:blur(var(--mobile-glass-blur)) saturate(var(--mobile-glass-saturate));
    backdrop-filter:blur(var(--mobile-glass-blur)) saturate(var(--mobile-glass-saturate));
    box-shadow:var(--mobile-glass-shadow);
    will-change:auto;
  }

  /* =======================================================
     04) CARD CONTENT
     ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-card-ui{
    position:absolute;
    z-index:1;
    inset:0;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(4px,1.5cqw,6px) clamp(10px,4.5cqw,15px);
    direction:rtl;
    text-align:center;
    color:#f4f6f7;
    pointer-events:none;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-eyebrow{
    display:block;
    margin:0 0 clamp(3px,1.2cqw,4px);
    color:var(--mobile-accent);
    font:800 clamp(8px,3.3cqw,9px)/1.15 "Manrope","DM Sans",sans-serif;
    letter-spacing:.13em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-title{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    justify-content:center;
    gap:clamp(2px,.8cqw,3px);
    width:max-content;
    max-width:100%;
    margin:0;
    direction:rtl;
    white-space:nowrap;
    color:#f4f6f7;
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(12.5px,6.8cqw,18.5px);
    font-weight:700;
    line-height:1.16;
    letter-spacing:-.018em;
    text-shadow:0 1px 14px rgba(0,0,0,.08);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-title > span{
    display:inline-block;
    flex:0 0 auto;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-separator{
    font-size:.78em;
    opacity:.78;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-brand{
    font-size:clamp(10px,.78em,15px);
    font-weight:600;
    color:rgba(244,246,247,.84);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-cta{
    align-self:center;
    display:block;
    margin-top:clamp(6px,2.5cqw,9px);
    color:rgba(244,246,247,.82);
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
    font-size:clamp(10px,4.2cqw,12px);
    font-weight:600;
    line-height:1.25;
    white-space:nowrap;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-action-row{
    --zoom-size:clamp(31px,15cqw,38px);
    --arrow-width:clamp(62px,27cqw,82px);
    position:relative;
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--zoom-size);
    height:var(--zoom-size);
    margin-top:clamp(5px,2cqw,8px);
    pointer-events:auto;
  }

  /* =======================================================
     05) ZOOM CONTROL / GUIDE
     ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom{
    position:relative;
    z-index:1;
    top:2px;
    display:grid;
    place-items:center;
    width:var(--zoom-size);
    height:var(--zoom-size);
    flex:0 0 auto;
    padding:0;
    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 12px 30px 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%);
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    pointer-events:auto;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom::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;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom svg{
    display:block;
    width:44%;
    height:44%;
    overflow:visible;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom:active{
    transform:scale(.95);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-zoom:focus-visible{
    outline:2px solid var(--mobile-accent);
    outline-offset:4px;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-arrow{
    position:absolute;
    z-index:0;
    left:calc(-3px - var(--arrow-width)*.718);
    top:calc(var(--zoom-size)/2 - var(--arrow-width)*.435);
    width:var(--arrow-width);
    height:auto;
    overflow:visible;
    color:var(--mobile-arrow);
    pointer-events:none;
    transform-origin:center center;
    transform:scaleX(-1);
    animation:none;
    filter:
      drop-shadow(0 0 3px rgba(255,224,176,.85))
      drop-shadow(0 0 7px rgba(255,177,95,.62));
  }

  #outdoorHeroMobileSection.mobile-cards-animation-done.is-mobile-fx-active
  .outdoor-mobile-card-arrow{
    animation:taqaMobileCardArrowGuide 1.65s ease-in-out infinite;
    will-change:opacity;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-arrow path,
  #outdoorHeroMobileSection .outdoor-mobile-card-arrow polyline{
    vector-effect:non-scaling-stroke;
    stroke:var(--mobile-arrow);
    stroke-width:2.5;
  }

  /* =======================================================
     06) LIGHT-SWITCH HOOKS
     ======================================================= */

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow{
    animation:none;
    filter:none;
    opacity:1;
    transform:scaleX(-1);
    will-change:auto;
  }

  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow path,
  #outdoorHeroMobileSection.outdoor-light-is-off
  .outdoor-mobile-light-switch-arrow polyline{
    stroke:var(--mobile-arrow);
  }

  /* =======================================================
     07) FACADE SAFE CONTENT ZONE
     ======================================================= */

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade{
    inset:2% 0 auto 0;
    width:100%;
    height:65%;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:
      clamp(4px, min(1.8cqw,2.6cqh), 7px)
      clamp(10px, min(4.2cqw,5.2cqh), 18px);
    text-align:center;
    overflow:hidden;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-eyebrow{
    align-self:center;
    width:100%;
    margin-bottom:clamp(2px,min(1.4cqw,2.0cqh),5px);
    font-size:clamp(7.5px,min(3.3cqw,4.8cqh),9px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-title{
    justify-content:center;
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    font-size:clamp(10.5px,min(5.5cqw,8.2cqh),15.5px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-brand{
    font-size:clamp(8.5px,min(4.2cqw,6.2cqh),13px);
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-cta{
    align-self:center;
    width:100%;
    margin-top:clamp(3px,min(1.9cqw,2.8cqh),6px);
    font-size:clamp(8px,min(3.45cqw,5.1cqh),10.5px);
    text-align:center;
  }

  #outdoorHeroMobileSection .outdoor-mobile-card-ui--facade
  .outdoor-mobile-card-action-row{
    --zoom-size:clamp(27px,min(11.22cqw,17cqh),34.7px);
    --arrow-width:clamp(52px,min(23cqw,34cqh),72px);
    align-self:center;
    margin-top:clamp(3px,min(1.7cqw,2.5cqh),6px);
  }

  /* =======================================================
     08) NIGHT / LIGHT MODE TOAST
     ======================================================= */

  #outdoorMobileNightModeToast{
    position:fixed;
    left:50%;
    bottom:max(6px, env(safe-area-inset-bottom,0px));
    z-index:2147483000;
    width:min(calc(100vw - 96px),290px);
    transform:translate3d(-50%,10px,0) scale(.99);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    padding:7px 8px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.09),transparent 34%),
      linear-gradient(145deg,rgba(7,14,22,.95),rgba(16,28,39,.90));
    color:#f4f7f8;
    box-shadow:
      0 12px 34px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.11);
    -webkit-backdrop-filter:blur(12px) saturate(120%);
    backdrop-filter:blur(12px) saturate(120%);
    transition:
      opacity .28s ease,
      transform .40s cubic-bezier(.22,1,.36,1),
      visibility .28s ease;
    direction:rtl;
    font-family:"IBM Plex Sans Arabic","Cairo",Tahoma,Arial,sans-serif;
  }

  #outdoorMobileNightModeToast.is-visible{
    opacity:1;
    visibility:visible;
    transform:translate3d(-50%,0,0) scale(1);
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__row{
    display:flex;
    align-items:center;
    gap:7px;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__icon{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border:1px solid rgba(241,176,99,.16);
    border-radius:8px;
    color:#f1b063;
    background:rgba(241,176,99,.08);
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__icon svg{
    display:block;
    width:15px;
    height:15px;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__sun{
    display:none;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__copy{
    min-width:0;
    display:block;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__title{
    display:block;
    color:#fff;
    font-size:clamp(11px,2.7vw,12px);
    font-weight:700;
    line-height:1.25;
  }

  #outdoorMobileNightModeToast .outdoor-mobile-night-toast__text{
    display:block;
    margin-top:2px;
    color:rgba(244,247,248,.68);
    font-size:clamp(9px,2.2vw,10px);
    font-weight:500;
    line-height:1.35;
  }

  #outdoorMobileNightModeToast.is-light{
    border-color:rgba(17,36,49,.12);
    background:
      radial-gradient(circle at 18% 0%,rgba(255,255,255,.96),transparent 40%),
      linear-gradient(145deg,rgba(248,250,250,.97),rgba(225,234,237,.95));
    color:#112431;
    box-shadow:
      0 12px 34px rgba(17,36,49,.16),
      inset 0 1px 0 rgba(255,255,255,.90);
  }

  #outdoorMobileNightModeToast.is-light
  .outdoor-mobile-night-toast__icon{
    color:var(--mobile-accent);
    background:rgba(192,96,36,.08);
    border-color:rgba(192,96,36,.16);
  }

  #outdoorMobileNightModeToast.is-light
  .outdoor-mobile-night-toast__moon{
    display:none;
  }

  #outdoorMobileNightModeToast.is-light
  .outdoor-mobile-night-toast__sun{
    display:block;
  }

  #outdoorMobileNightModeToast.is-light
  .outdoor-mobile-night-toast__title{
    color:#112431;
  }

  #outdoorMobileNightModeToast.is-light
  .outdoor-mobile-night-toast__text{
    color:rgba(17,36,49,.68);
  }
}


/* =========================================================
   09) KEYFRAMES
   ========================================================= */

@keyframes taqaMobileCardRevealFromEdge{
  0%{
    opacity:.96;
    transform:translate3d(-18%,0,0) scaleX(.16);
  }
  62%{
    opacity:1;
    transform:translate3d(-2%,0,0) scaleX(.96);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scaleX(1);
  }
}

@keyframes taqaMobileCardRevealFromRightEdge{
  0%{
    opacity:.96;
    transform:translate3d(18%,0,0) scaleX(.16);
  }
  62%{
    opacity:1;
    transform:translate3d(2%,0,0) scaleX(.96);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scaleX(1);
  }
}

@keyframes taqaMobileCardArrowGuide{
  0%,100%{opacity:.78;}
  50%{opacity:1;}
}


/* =========================================================
   10) REDUCED MOTION
   ========================================================= */

@media (max-width:900px), (orientation:portrait), (max-height:599px), (max-aspect-ratio:6/5){
  @media (prefers-reduced-motion:reduce){
    #outdoorHeroMobileSection.mobile-cards-awaiting-entrance
    .outdoor-mobile-glass-card,
    #outdoorHeroMobileSection.is-mobile-cards-animate
    .outdoor-mobile-glass-card{
      animation:none;
      transform:none;
      filter:none;
      opacity:1;
    }

    #outdoorHeroMobileSection .outdoor-mobile-card-arrow{
      animation:none;
      will-change:auto;
    }

    #outdoorHeroMobileSection .outdoor-mobile-card-zoom{
      transition:none;
    }
  }
}


/* =========================================================
   11) TRUE DESKTOP LANDSCAPE — MOBILE LAYERS OFF
   ========================================================= */

@media (min-width:901px) and (min-height:600px) and (min-aspect-ratio:6/5) and (orientation:landscape){
  #outdoorHeroMobileSection .outdoor-mobile-cards-layer,
  #outdoorHeroMobileSection .outdoor-mobile-front-layer,
  #outdoorMobileNightModeToast{
    display:none;
  }
}