/* =========================================================
   RUSHD MOBILE / PORTRAIT FRAME 01 — CINEMATIC DEPTH LAYER
   Phone + Portrait only
========================================================= */

.rushd-mp-depth{
  position:absolute;
  inset:0;
  z-index:4;

  display:none;

  overflow:hidden;
  pointer-events:none;

  isolation:isolate;
}


/* =========================================================
   PHONE + PORTRAIT ONLY
========================================================= */

@media (max-width:767px),
       (min-width:768px) and (orientation:portrait){

  .rushd-mp-depth.is-visible{
    display:block;
  }


  /* =======================================================
     BACKGROUND DEPTH
  ======================================================= */

  .rushd-mp-depth__back{
    position:absolute;
    inset:0;
    z-index:1;
  }


  /* BIG HALO / ORBIT — behind character */

  .rushd-mp-depth__orbit{
    position:absolute;

    left:50%;
    top:68%;

    width:min(96vw,720px);
    aspect-ratio:1/1;

    transform:
      translate(-50%,-50%)
      rotate(-8deg);

    border-radius:50%;

    border:
      clamp(1px,.22vw,2px)
      solid rgba(228,48,54,.18);

    box-shadow:
      0 0 0 16px rgba(228,48,54,.018),
      0 0 0 38px rgba(14,31,61,.012),
      inset 0 0 60px rgba(228,48,54,.025);

    opacity:.95;

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .38s ease,
      filter .38s ease;

    will-change:transform,opacity,filter;
  }

  .rushd-mp-depth__orbit::before,
  .rushd-mp-depth__orbit::after{
    content:"";

    position:absolute;

    border-radius:50%;
    border:1px solid rgba(14,31,61,.08);
  }

  .rushd-mp-depth__orbit::before{
    inset:8%;
  }

  .rushd-mp-depth__orbit::after{
    inset:22%;
    border-style:dashed;
    border-color:rgba(228,48,54,.12);
  }


  /* AURA */

  .rushd-mp-depth__aura{
    position:absolute;

    left:50%;
    top:69%;

    width:min(92vw,690px);
    aspect-ratio:1/1;

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

    border-radius:50%;

    background:
      radial-gradient(
        circle at 50% 50%,
        rgba(228,48,54,.15) 0%,
        rgba(228,48,54,.08) 24%,
        rgba(14,31,61,.035) 46%,
        transparent 70%
      );

    filter:blur(5px);

    opacity:.9;

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .38s ease,
      filter .38s ease;

    will-change:transform,opacity,filter;
  }


  /* WEB NETWORK */

  .rushd-mp-depth__web{
    position:absolute;

    left:50%;
    top:68%;

    width:min(88vw,660px);
    aspect-ratio:1/1;

    transform:
      translate(-50%,-50%)
      rotate(-12deg);

    opacity:.30;

    background:
      repeating-conic-gradient(
        from 3deg at 50% 50%,
        rgba(228,48,54,.28) 0deg 1deg,
        transparent 1deg 22deg
      ),
      repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0 8.5%,
        rgba(14,31,61,.13) 8.8% 9.3%,
        transparent 9.7% 17%
      );

    -webkit-mask:
      radial-gradient(
        circle at center,
        #000 0 68%,
        transparent 82%
      );

    mask:
      radial-gradient(
        circle at center,
        #000 0 68%,
        transparent 82%
      );

    filter:
      drop-shadow(
        0 0 8px
        rgba(228,48,54,.07)
      );

    transition:
      transform .78s cubic-bezier(.2,.8,.2,1),
      opacity .36s ease,
      filter .36s ease;

    will-change:transform,opacity,filter;
  }


  /* =======================================================
     HUGE TYPE BEHIND CHARACTER
  ======================================================= */

  .rushd-mp-depth__title-back{
    position:absolute;

    left:50%;
    top:62%;

    z-index:2;

    width:120vw;

    margin:0;

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

    text-align:center;

    font-family:
      Arial Black,
      Arial,
      sans-serif;

    font-size:
      clamp(5.8rem,24vw,12rem);

    font-weight:900;
    line-height:.78;

    letter-spacing:-.085em;

    white-space:nowrap;

    background:
      linear-gradient(
        115deg,
        #081327 0%,
        #0E1F3D 28%,
        #E43036 58%,
        #991C32 77%,
        #081327 100%
      ),
      repeating-linear-gradient(
        28deg,
        rgba(255,255,255,.34) 0 1px,
        transparent 1px 12px
      ),
      repeating-radial-gradient(
        circle at 48% 50%,
        transparent 0 9px,
        rgba(255,255,255,.22) 10px 11px,
        transparent 12px 24px
      );

    background-blend-mode:
      normal,
      screen,
      overlay;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
    color:transparent;

    -webkit-text-stroke:
      1px rgba(14,31,61,.16);

    opacity:.82;

    filter:
      drop-shadow(
        0 8px 20px
        rgba(14,31,61,.05)
      );

    transition:
      transform .78s cubic-bezier(.2,.8,.2,1),
      opacity .38s ease,
      filter .38s ease;

    will-change:transform,opacity,filter;
  }


  /* =======================================================
     MICRO COPY BEHIND / SIDE
  ======================================================= */

  .rushd-mp-depth__eyebrow{
    position:absolute;

    left:7vw;
    top:47%;

    z-index:2;

    color:rgba(14,31,61,.48);

    font-size:
      clamp(.55rem,2.2vw,.78rem);

    font-weight:800;
    letter-spacing:.26em;

    direction:ltr;

    transform:
      rotate(-90deg)
      translateX(-50%);

    transform-origin:left top;

    white-space:nowrap;

    opacity:.85;

    transition:
      transform .68s cubic-bezier(.2,.8,.2,1),
      opacity .32s ease;
  }


  .rushd-mp-depth__index{
    position:absolute;

    right:6vw;
    top:49%;

    z-index:2;

    color:rgba(228,48,54,.66);

    font-size:
      clamp(.6rem,2.4vw,.85rem);

    font-weight:900;
    letter-spacing:.16em;

    direction:ltr;

    white-space:nowrap;

    opacity:.92;

    transition:
      transform .68s cubic-bezier(.2,.8,.2,1),
      opacity .32s ease;
  }


  /* =======================================================
     CHARACTER — exact 1080×1920 canvas
  ======================================================= */

  .rushd-mp-depth__character{
    position:absolute;
    inset:0;

    z-index:6;

    width:100%;
    height:100%;

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

    display:block;

    pointer-events:none;
    user-select:none;

    opacity:1;

    transition:none !important;
    animation:none !important;

    filter:
      drop-shadow(
        0 14px 24px
        rgba(14,31,61,.08)
      );
  }


  /* =======================================================
     FOREGROUND UI — IN FRONT OF CHARACTER
  ======================================================= */

  .rushd-mp-depth__front{
    position:absolute;
    inset:0;

    z-index:8;

    pointer-events:none;
  }


  /* glass label overlapping scene */

  .rushd-mp-depth__badge{
    position:absolute;

    left:10vw;
    top:76%;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:
      7px 11px;

    border:
      1px solid rgba(14,31,61,.09);

    border-radius:999px;

    background:
      rgba(255,255,255,.48);

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.78),
      0 8px 22px rgba(14,31,61,.05);

    color:rgba(14,31,61,.62);

    font-size:
      clamp(.50rem,2vw,.7rem);

    font-weight:800;
    letter-spacing:.12em;

    direction:ltr;

    transform:
      rotate(-5deg);

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .34s ease,
      filter .34s ease;
  }

  .rushd-mp-depth__badge::before{
    content:"";

    width:6px;
    height:6px;

    border-radius:50%;

    background:#E43036;

    box-shadow:
      0 0 10px rgba(228,48,54,.38);
  }


  /* front number / editorial marker */

  .rushd-mp-depth__number{
    position:absolute;

    right:8vw;
    top:80%;

    color:rgba(14,31,61,.12);

    font-family:
      Arial Black,
      Arial,
      sans-serif;

    font-size:
      clamp(3rem,15vw,6.4rem);

    font-weight:900;
    line-height:.8;

    letter-spacing:-.08em;

    transform:
      rotate(5deg);

    -webkit-text-stroke:
      1px rgba(228,48,54,.10);

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .34s ease,
      filter .34s ease;
  }


  /* tiny front copy */

  .rushd-mp-depth__front-copy{
    position:absolute;

    left:50%;
    bottom:5.5vh;

    transform:
      translateX(-50%);

    color:rgba(14,31,61,.34);

    font-size:
      clamp(.48rem,1.9vw,.68rem);

    font-weight:800;
    letter-spacing:.18em;

    direction:ltr;

    white-space:nowrap;

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .34s ease,
      filter .34s ease;
  }


  /* =======================================================
     EXIT
     Character disappears instantly.
     Back + front UI split in opposite directions.
  ======================================================= */

  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__character{
    display:none !important;
    opacity:0 !important;
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__title-back{
    transform:
      translate(-50%,-50%)
      translateX(-50vw)
      rotate(-3deg);

    opacity:0;
    filter:blur(8px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__orbit,
  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__aura{
    transform:
      translate(-50%,-50%)
      translateX(42vw)
      scale(1.12);

    opacity:0;
    filter:blur(10px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__web{
    transform:
      translate(-50%,-50%)
      translateX(46vw)
      rotate(18deg)
      scale(1.10);

    opacity:0;
    filter:blur(7px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__eyebrow{
    transform:
      rotate(-90deg)
      translateX(-50%)
      translateY(-20vw);

    opacity:0;
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__index{
    transform:
      translateX(35vw);

    opacity:0;
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__badge{
    transform:
      translateX(-42vw)
      rotate(-12deg);

    opacity:0;
    filter:blur(5px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__number{
    transform:
      translateX(42vw)
      rotate(12deg);

    opacity:0;
    filter:blur(5px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__front-copy{
    transform:
      translateX(-50%)
      translateY(12vh);

    opacity:0;
    filter:blur(4px);
  }
}


/* =========================================================
   DESKTOP LANDSCAPE — NEVER SHOW
========================================================= */

@media (min-width:768px) and (orientation:landscape){

  .rushd-mp-depth{
    display:none !important;
  }
}


/* =========================================================
   V3 COMPOSITION REFINEMENT
   Brand-first / stronger foreground depth
========================================================= */

@media (max-width:767px),
       (min-width:768px) and (orientation:portrait){

  /* Better placement around the 1080x1920 character canvas */
  .rushd-mp-depth__title-back{
    top:62.8%;
    width:128vw;
    font-size:clamp(6.1rem,25vw,12.4rem);
    opacity:.80;
  }

  .rushd-mp-depth__orbit{
    top:68.5%;
    width:min(98vw,730px);
  }

  .rushd-mp-depth__aura{
    top:69%;
    width:min(94vw,700px);
  }

  .rushd-mp-depth__web{
    top:68.2%;
    width:min(90vw,675px);
    opacity:.34;
  }

  .rushd-mp-depth__eyebrow{
    left:5.8vw;
    top:48%;
    opacity:.70;
  }

  /* Replaces the meaningless RUSHD / 01 marker */
  .rushd-mp-depth__side-copy{
    position:absolute;
    right:5.5vw;
    top:48.5%;
    z-index:2;

    color:rgba(228,48,54,.66);

    font-size:clamp(.62rem,2.5vw,.86rem);
    font-weight:900;
    line-height:1;
    letter-spacing:.01em;

    direction:rtl;
    white-space:nowrap;

    transform:rotate(90deg) translateX(50%);
    transform-origin:right top;

    opacity:.88;

    transition:
      transform .68s cubic-bezier(.2,.8,.2,1),
      opacity .32s ease;
  }

  /* Hide old decorative pieces completely if old markup survives cache */
  .rushd-mp-depth__index,
  .rushd-mp-depth__number,
  .rushd-mp-depth__badge{
    display:none !important;
  }


  /* =======================================================
     MAIN FOREGROUND BAND
     Sits ABOVE character and cuts across lower legs.
  ======================================================= */

  .rushd-mp-depth__front-band{
    position:absolute;

    left:-9vw;
    top:81.5%;

    z-index:10;

    width:118vw;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:0 18px;

    transform:
      rotate(-2.2deg)
      translateZ(0);

    border-top:1px solid rgba(255,255,255,.60);
    border-bottom:1px solid rgba(14,31,61,.10);

    background:
      linear-gradient(
        90deg,
        rgba(8,19,39,.92) 0%,
        rgba(14,31,61,.88) 26%,
        rgba(228,48,54,.90) 62%,
        rgba(14,31,61,.90) 100%
      );

    box-shadow:
      0 10px 28px rgba(14,31,61,.12),
      inset 0 1px 0 rgba(255,255,255,.16);

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

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

    overflow:hidden;

    transition:
      transform .72s cubic-bezier(.2,.8,.2,1),
      opacity .34s ease,
      filter .34s ease;

    will-change:transform,opacity,filter;
  }


  .rushd-mp-depth__front-band::before{
    content:"";

    position:absolute;
    inset:0;

    opacity:.23;

    background:
      repeating-linear-gradient(
        115deg,
        rgba(255,255,255,.24) 0 1px,
        transparent 1px 13px
      ),
      repeating-radial-gradient(
        circle at 45% 50%,
        transparent 0 11px,
        rgba(255,255,255,.18) 12px 13px,
        transparent 14px 28px
      );

    pointer-events:none;
  }


  .rushd-mp-depth__front-band-text{
    position:relative;
    z-index:2;

    color:rgba(255,255,255,.93);

    font-size:clamp(.56rem,2.25vw,.78rem);
    font-weight:900;
    letter-spacing:.18em;

    direction:ltr;
    white-space:nowrap;

    text-shadow:
      0 1px 8px rgba(8,19,39,.22);
  }


  .rushd-mp-depth__front-band-line{
    position:relative;
    z-index:2;

    width:34px;
    height:1px;

    background:
      rgba(255,255,255,.48);

    flex:0 0 auto;
  }


  /* =======================================================
     SMALL FOREGROUND CHIPS
  ======================================================= */

  .rushd-mp-depth__front-chip{
    position:absolute;
    z-index:11;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:28px;
    padding:0 10px;

    border-radius:999px;

    border:
      1px solid rgba(14,31,61,.10);

    background:
      rgba(255,255,255,.58);

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.86),
      0 8px 20px rgba(14,31,61,.05);

    color:rgba(14,31,61,.62);

    font-size:clamp(.46rem,1.85vw,.64rem);
    font-weight:900;
    letter-spacing:.12em;

    direction:ltr;
    white-space:nowrap;

    transition:
      transform .68s cubic-bezier(.2,.8,.2,1),
      opacity .32s ease,
      filter .32s ease;
  }


  .rushd-mp-depth__front-chip::before{
    content:"";

    width:5px;
    height:5px;

    margin-right:6px;

    border-radius:50%;

    background:#E43036;

    box-shadow:
      0 0 9px rgba(228,48,54,.30);
  }


  .rushd-mp-depth__front-chip--left{
    left:7vw;
    top:73.5%;
    transform:rotate(-4deg);
  }


  .rushd-mp-depth__front-chip--right{
    right:6vw;
    top:86%;
    transform:rotate(4deg);
  }


  .rushd-mp-depth__front-copy{
    bottom:3.8vh;
    width:90vw;
    text-align:center;

    color:rgba(14,31,61,.38);

    font-size:clamp(.48rem,1.95vw,.68rem);
    font-weight:900;
    letter-spacing:.03em;

    direction:rtl;
  }


  /* =======================================================
     EXIT — split front and back in opposite directions
  ======================================================= */

  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__side-copy{
    transform:
      rotate(90deg)
      translateX(50%)
      translateY(-24vw);

    opacity:0;
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__front-band{
    transform:
      translateX(-120vw)
      rotate(-6deg);

    opacity:0;
    filter:blur(5px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__front-chip--left{
    transform:
      translateX(-44vw)
      rotate(-10deg);

    opacity:0;
    filter:blur(4px);
  }


  .rushd-mp-depth.is-exiting
  .rushd-mp-depth__front-chip--right{
    transform:
      translateX(44vw)
      rotate(10deg);

    opacity:0;
    filter:blur(4px);
  }
}


/* =========================================================
   LAPTOP / DESKTOP — ABSOLUTE HARD LOCK
   This mobile/portrait depth layer must never appear on
   fine-pointer laptop/desktop devices, regardless of viewport.
========================================================= */

@media (hover:hover) and (pointer:fine){
  .rushd-mp-depth,
  .rushd-mp-depth.is-visible,
  .rushd-mp-depth.is-exiting,
  .rushd-mp-depth *{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}