/* ==========================================================================
   REV TORQ Customer PWA — Build 171 "Depth" (4D)
   Driven by js/depth.js: --tx / --ty (-1..1) = phone tilt (or desktop pointer),
   --o / --oa = promo slide offset, --px / --py = where a tile is pressed.
   Only active when <html> has .rt-depth (never under prefers-reduced-motion).
   ========================================================================== */

/* ---------- 1. Holographic points card ---------- */
html.rt-depth .app.rt-light .rt-id-card{transform:none!important;perspective:900px}
html.rt-depth .app.rt-light .rt-simple-rider-card{
  transform:
    rotateX(calc(var(--rx,0deg) + var(--ty,0) * -7deg))
    rotateY(calc(var(--ry,0deg) + var(--tx,0) * 9deg));
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    calc(var(--tx,0) * -10px) calc(14px + var(--ty,0) * -6px) 30px -12px rgba(155,31,46,.6)!important;
}
html.rt-motion-on .app.rt-light .rt-simple-rider-card{transition:box-shadow .25s ease}
.app.rt-light .rt-simple-rider-card>.rt-simple-rider-left,
.app.rt-light .rt-simple-rider-card>.rt-simple-rider-right,
.app.rt-light .rt-simple-rider-card>.rt-simple-rider-arrow,
.app.rt-light .rt-simple-rider-card>.rt-rider-progress{position:relative;z-index:2}
/* layers move by different amounts -> the numbers float above the card */
html.rt-depth .app.rt-light .rt-simple-points-copy,
html.rt-depth .app.rt-light .rt-simple-rider-right{translate:calc(var(--tx,0) * 5px) calc(var(--ty,0) * 4px)}
html.rt-depth .app.rt-light .rt-simple-point-icon{translate:calc(var(--tx,0) * 3px) calc(var(--ty,0) * 2px)}

.rt-card-foil,
.rt-card-glare{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
}
.rt-card-foil{
  background:linear-gradient(115deg,
    transparent 22%,
    rgba(255,214,140,.30) 36%,
    rgba(255,255,255,.42) 45%,
    rgba(255,134,160,.30) 54%,
    rgba(140,200,255,.18) 62%,
    transparent 74%);
  background-size:260% 260%;
  background-position:calc(50% + var(--tx,0) * 45%) calc(50% + var(--ty,0) * 45%);
  mix-blend-mode:soft-light;
  opacity:.95;
}
.rt-card-glare{
  background:radial-gradient(circle at calc(50% + var(--tx,0) * 45%) calc(25% + var(--ty,0) * 45%),rgba(255,255,255,.32),rgba(255,255,255,0) 46%);
  mix-blend-mode:overlay;
}
/* no tilt source (e.g. iPhone before opting in): the foil still drifts slowly */
html.rt-depth:not(.rt-motion-on) .rt-card-foil{animation:rtFoilDrift 7s ease-in-out infinite alternate}
@keyframes rtFoilDrift{from{background-position:20% 30%}to{background-position:80% 70%}}

/* ---------- 2. Promo coverflow + parallax ---------- */
/* 2D only: 3D transforms inside a scrolling container are what broke touch scrolling in 171 */
html.rt-depth .rt-v2-home-promo-slide{
  transform:scale(calc(1 - var(--oa,0) * .08));
  transform-origin:50% 50%;
}
html.rt-depth .rt-v2-home-promo-slide:not(.rt-poster)>img{
  scale:1.14;
  translate:calc(var(--o,0) * -16% + var(--tx,0) * -12px) calc(var(--ty,0) * -8px);
}
html.rt-depth .rt-v2-home-promo-slide .rt-v2-promo-copy{
  translate:calc(var(--o,0) * 26% + var(--tx,0) * 6px) calc(var(--ty,0) * 4px);
  opacity:calc(1 - var(--oa,0) * .9);
}
html.rt-depth .rt-food-rider-promo-art{translate:calc(var(--o,0) * -24% + var(--tx,0) * -14px) calc(var(--ty,0) * -8px)}

/* ---------- 3. Sections rise out of the page when scrolled into view ---------- */
html.rt-depth .app.rt-light .screen>.rt-reveal{
  opacity:0;
  /* 2D only — perspective()+rotateX()+scale() here stopped the page from touch-scrolling (Build 171 bug) */
  transform:translate3d(0,28px,0) scale(.97);
  transform-origin:50% 0;
}
html.rt-depth .app.rt-light .screen>.rt-reveal.rt-in{
  opacity:1;
  transform:none;
  transition:opacity .6s ease,transform .85s cubic-bezier(.16,1,.3,1);
}

/* ---------- 4. Liquid bottom-nav indicator ---------- */
.bottom-nav .nav{position:relative;z-index:1}
.rt-nav-blob{
  position:absolute;
  left:0;top:0;
  z-index:0;
  width:56px;height:30px;
  border-radius:999px;
  background:var(--rt-red-100);
  box-shadow:inset 0 0 0 1px rgba(185,37,54,.08);
  pointer-events:none;
  transform:translate3d(calc(var(--blob-x,-100px) - 28px),calc(var(--blob-y,0px) - 15px),0);
  transition:transform .5s cubic-bezier(.34,1.45,.64,1),opacity .2s ease;
}
.rt-nav-blob.rt-stretch{animation:rtBlobStretch .5s cubic-bezier(.3,.7,.3,1)}
@keyframes rtBlobStretch{0%{scale:1 1}35%{scale:1.5 .8}70%{scale:.94 1.06}100%{scale:1 1}}
html.rt-depth .app.rt-light .bottom-nav.rt-has-blob .nav.active .nav-icon{background:transparent!important}
html.rt-depth .app.rt-light .bottom-nav .nav.active .nav-icon svg{animation:rtIconPop .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes rtIconPop{0%{transform:scale(.8) translateY(2px)}100%{transform:none}}

/* ---------- 5. Tiles lean towards the finger ---------- */
html.rt-depth .app.rt-light :is(.rt-prime-quick-grid>button,.rt-service-tiles button,.rt-account-help-grid button):active{
  transform:perspective(520px) rotateX(calc(var(--py,0) * -16deg)) rotateY(calc(var(--px,0) * 16deg)) scale(.96)!important;
  transition:transform .08s ease-out!important;
}
html.rt-depth .app.rt-light .rt-prime-quick-grid>button:active .rt-prime-quick-icon{translate:calc(var(--px,0) * 3px) calc(var(--py,0) * 3px)}

/* ---------- 6. Login stage parallax ---------- */
html.rt-depth .rt-auth-logo{translate:calc(var(--tx,0) * -12px) calc(var(--ty,0) * -8px)}
html.rt-depth .rt-auth-title{translate:calc(var(--tx,0) * -6px) calc(var(--ty,0) * -4px)}
html.rt-depth .rt-auth-chips{translate:calc(var(--tx,0) * -3px) calc(var(--ty,0) * -2px)}
html.rt-depth .rt-auth-floor{translate:calc(var(--tx,0) * 26px) 0}
html.rt-depth .rt-auth-glow{translate:calc(var(--tx,0) * 18px) calc(var(--ty,0) * 12px)}

/* ---------- 7. Header: logo plate floats a touch ---------- */
html.rt-depth .app.rt-light .brand{translate:calc(var(--tx,0) * 2px) calc(var(--ty,0) * 1.5px)}