/* ============================================================
   ROAD DAWG — 3D phone.
   Pure CSS transforms, rim and camera plateau extruded by js/phone3d.js.
   All device classes are prefixed p3- so nothing collides with the design system.
   Every dimension is in design px times --s; the screen is 402 x 874 design px.
   ============================================================ */
.p3-stage{
  position:relative;
  overflow-x:clip;   /* the phone's glow can reach past the viewport on tablets; never a horizontal scroll */
  --s:min(0.72px, calc(34vw / 420), calc((100vh - 160px) / 920));   /* only very short windows shrink the phone */
  --screen-w:402;--screen-h:874;--bezel:9;--depth:30;--r-body:55;--r-screen:44;--rim-l:64;
  --plateau-h:90;--plateau-z:5;
  --body-w:calc((var(--screen-w) + 2 * var(--bezel)) * var(--s));
  --body-h:calc((var(--screen-h) + 2 * var(--bezel)) * var(--s));
  --d3:calc(var(--depth) * var(--s));
}
@media (max-width:860px){.p3-stage{--s:min(0.6px, calc(58vw / 420));}}
/* the device travels between two empty slots: A in the hero, B in the features grid */
.p3-slot{width:var(--body-w);height:var(--body-h);margin:0 auto;}
.p3-scene{
  position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  --angle:-28;                                    /* current rotateY, written by the script */
  --lit:sin(calc(var(--angle) * 1deg));
  --hue:calc(38 - var(--angle) * 0.18);
}
.p3-scene.is-docked{position:relative;left:auto;top:auto;transform:none;}
  /* ---------- scene ---------- */
.p3-scene {
  width: var(--body-w); height: var(--body-h);
  perspective: calc(1500 * var(--s));
  perspective-origin: 50% 42%;
}
.p3-glow {
  position: absolute; inset: -20% -40%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(45% 40% at 40% 35%, rgba(134,207,237,.16), transparent 70%),
    radial-gradient(40% 35% at 65% 75%, rgba(239,69,111,.14), transparent 70%);
}
/* long soft shadow: stretches the way the phone leans */
.p3-shadow-soft, .p3-shadow-ground { display: none; }
.p3-shadow-soft {
  position: absolute; left: -10%; right: -10%; top: 6%; bottom: -2%; z-index: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,.25) 50%, transparent);
  transform-origin: 50% 90%;
  will-change: transform, opacity;
  pointer-events: none;
}
/* contact shadow: tight, dark, just under the bottom edge */
.p3-shadow-ground {
  position: absolute; left: -6%; width: 112%; bottom: calc(-18 * var(--s)); height: calc(34 * var(--s)); z-index: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,.35) 45%, transparent);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- PHONE ---------- */
.p3-phone {
  position: absolute; inset: 0; z-index: 1;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(8deg) rotateY(35deg);
}
.p3-phone > * { transform-style: preserve-3d; }

/* rim: JS fills .p3-rim with .p3-slice elements from +d/2 to -d/2, each with its own --dl */
.p3-rim { position: absolute; inset: 0; }
.p3-slice {
  --dl: 0;                                       /* lightness offset by depth, from JS: brightest at the middle, so the frame reads rounded */
  --L: calc(var(--rim-l) + var(--dl));
  position: absolute; inset: 0;
  border-radius: calc(var(--r-body) * var(--s));
  background:
    /* along the edge: a soft top light and a broad satin band that drifts with the angle, no hard specular */
    linear-gradient(180deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0) 9%,
      rgba(255,255,255,0) calc(34% - var(--angle) * 0.2%),
      rgba(255,255,255,.16) calc(46% - var(--angle) * 0.2%),
      rgba(255,255,255,0) calc(60% - var(--angle) * 0.2%),
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,.2) 100%),
    /* across: the side that faces the light is brighter */
    linear-gradient(90deg,
      hsl(var(--hue) 9% calc((var(--L) + 14 * var(--lit)) * 1%)),
      hsl(var(--hue) 6% calc(var(--L) * 1%)) 50%,
      hsl(var(--hue) 9% calc((var(--L) - 14 * var(--lit)) * 1%)));
}
.p3-slice.p3-spec {                                    /* the chamfer where glass meets metal: a fine bright line, not a mirror */
  background:
    linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6) 50%, rgba(255,255,255,.45)),
    linear-gradient(90deg, hsl(var(--hue) 8% 82%), hsl(var(--hue) 8% 82%));
}
.p3-slice.p3-dark {                                    /* shadow line at the back edge */
  background:
    linear-gradient(180deg, hsl(var(--hue) 8% 46%), hsl(var(--hue) 8% 34%));
}

.p3-face {
  position: absolute; inset: 0;
  border-radius: calc(var(--r-body) * var(--s));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.p3-face.p3-front {
  background: #07070b;
  transform: translateZ(calc(var(--d3) / 2));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62),
    inset 0 0 0 2px rgba(0,0,0,.6),
    inset 0 0 calc(6 * var(--s)) rgba(0,0,0,.6);
}
/* anodised back: warm alabaster, fine vertical brushing, a sheen that follows the angle */
.p3-face.p3-back {
  transform: rotateY(180deg) translateZ(calc(var(--d3) / 2));
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.013) 0 1px, rgba(255,255,255,.008) 1px 2px),
    radial-gradient(55% 42% at calc(50% + var(--angle) * 0.45%) 26%, rgba(255,255,255,.34), transparent 72%),
    linear-gradient(165deg, #F1EADC, #E4DCCF 55%, #D8CFC0);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.7),
    inset -1px -1px 0 rgba(0,0,0,.14),
    inset 0 0 0 2px rgba(0,0,0,.05);
}

/* screen */
.p3-screen {
  position: absolute;
  left: calc(var(--bezel) * var(--s)); top: calc(var(--bezel) * var(--s));
  width: calc(var(--screen-w) * var(--s)); height: calc(var(--screen-h) * var(--s));
  border-radius: calc(var(--r-screen) * var(--s));
  overflow: hidden;
  clip-path: inset(0 round calc(var(--r-screen) * var(--s)));
  background: linear-gradient(180deg, #5C3360 2.4%, #3A2C60 33.3%, #31284B 47.6%, #23192B 100%);
  transform: translateZ(0);
}
.p3-shot {
  position: absolute; left: 0; top: 0;
  width: calc(var(--screen-w) * var(--s)); height: calc(var(--screen-h) * var(--s));
  object-fit: cover; object-position: top; display: block;
}
.p3-island {
  position: absolute; left: 50%; top: calc(11 * var(--s));
  width: calc(125 * var(--s)); height: calc(37 * var(--s));
  transform: translateX(-50%); border-radius: 999px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.p3-island::after {
  content: ""; position: absolute; right: calc(9 * var(--s)); top: 50%;
  width: calc(11 * var(--s)); height: calc(11 * var(--s)); transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1d1a2a, #05050a 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
/* glass reflection: one broad, soft light from the top-left, like a window on the glass.
   It drifts a little with the angle; no band, no stripe. */
.p3-gloss {
  position: absolute; inset: -20%; 
  background:
    radial-gradient(70% 55% at 18% 8%, rgba(255,255,255,.10), rgba(255,255,255,.035) 40%, rgba(255,255,255,0) 70%),
    linear-gradient(118deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 45%);
  will-change: transform;
  pointer-events: none;
}
.p3-glass-edge {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(255,255,255,.04));
}

/* back: camera plateau, a raised full-width bar. JS extrudes it with .p3-pslice layers. */
.p3-plateau {
  position: absolute; left: calc(12 * var(--s)); right: calc(12 * var(--s)); top: calc(12 * var(--s));
  height: calc(var(--plateau-h) * var(--s));
  transform-style: preserve-3d;
}
.p3-pshadow, .p3-pslice, .p3-ptop {
  position: absolute; inset: 0; border-radius: calc((var(--r-body) - 12) * var(--s));   /* concentric with the body corner: body radius minus the 12 unit inset */
}
.p3-pshadow {                                       /* soft shadow it casts on the back */
  inset: calc(2 * var(--s)) calc(-2 * var(--s)) calc(-8 * var(--s)) calc(2 * var(--s));
  background: rgba(0,0,0,.34);
  filter: blur(calc(7 * var(--s)));
  transform: translateZ(0.2px);
}
.p3-pslice {
  --dl: 0;
  background: linear-gradient(90deg,
    hsl(var(--hue) 8% calc((60 + var(--dl) + 10 * var(--lit)) * 1%)),
    hsl(var(--hue) 7% calc((60 + var(--dl)) * 1%)) 50%,
    hsl(var(--hue) 8% calc((60 + var(--dl) - 10 * var(--lit)) * 1%)));
}
.p3-ptop {
  transform: translateZ(calc(var(--plateau-z) * var(--s)));
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.012) 0 1px, rgba(255,255,255,.007) 1px 2px),
    radial-gradient(70% 90% at calc(30% + var(--angle) * 0.3%) 0%, rgba(255,255,255,.38), transparent 60%),
    linear-gradient(160deg, #EDE5D7, #DDD4C5 60%, #D2C8B8);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.8),
    inset -1px -1px 0 rgba(0,0,0,.16),
    inset 0 0 0 2px rgba(0,0,0,.04);
}
.p3-lens {
  position: absolute; left: calc(16 * var(--s)); top: 50%; transform: translateY(-50%);
  width: calc(58 * var(--s)); height: calc(58 * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #3c4158, #0c0d16 52%, #000 70%);
  box-shadow:
    inset 0 0 0 calc(4 * var(--s)) hsl(var(--hue) 7% 58%),
    inset 0 0 0 calc(5 * var(--s)) #15151a,
    inset calc(1 * var(--s)) calc(1 * var(--s)) 0 calc(4 * var(--s)) rgba(255,255,255,.35),
    0 0 0 1px rgba(0,0,0,.3),
    calc(1 * var(--s)) calc(2 * var(--s)) calc(3 * var(--s)) rgba(0,0,0,.35);
}
.p3-lens::after {
  content: ""; position: absolute; left: 28%; top: 22%; width: 22%; height: 13%;
  border-radius: 50%; background: rgba(255,255,255,.55); transform: rotate(-22deg);
}
.p3-flash {
  position: absolute; left: calc(92 * var(--s)); top: calc(20 * var(--s));
  width: calc(15 * var(--s)); height: calc(15 * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff6dc, #dcc9a0 55%, #8b8066);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 1px 1px rgba(255,255,255,.5);
}
.p3-mic {
  position: absolute; left: calc(96 * var(--s)); bottom: calc(22 * var(--s));
  width: calc(6 * var(--s)); height: calc(6 * var(--s)); border-radius: 50%;
  background: #26262b; box-shadow: 0 1px 0 rgba(255,255,255,.5);
}

/* side buttons: extruded pills, lit from the top-left */
.p3-btn { position: absolute; width: calc(3 * var(--s)); transform-style: preserve-3d; }
.p3-btn.p3-left  { left: calc(-3 * var(--s)); }
.p3-btn.p3-right { right: calc(-3 * var(--s)); }
.p3-btn.p3-action   { top: calc(150 * var(--s)); height: calc(36 * var(--s)); }
.p3-btn.p3-vol-up   { top: calc(215 * var(--s)); height: calc(66 * var(--s)); }
.p3-btn.p3-vol-down { top: calc(295 * var(--s)); height: calc(66 * var(--s)); }
.p3-btn.p3-power    { top: calc(240 * var(--s)); height: calc(104 * var(--s)); }
.p3-btn i { position: absolute; display: block; border-radius: 999px; }
.p3-btn .p3-bf, .p3-btn .p3-bb { inset: 0; }
.p3-btn { --bw: calc(var(--d3) * .5); }               /* a slim pill, half the frame's depth, centred on the edge */
.p3-btn .p3-bf {
  background: linear-gradient(180deg, hsl(var(--hue) 8% 80%), hsl(var(--hue) 6% 66%));
  transform: translateZ(calc(var(--bw) / 2));
}
.p3-btn .p3-bb {
  background: linear-gradient(180deg, hsl(var(--hue) 6% 62%), hsl(var(--hue) 6% 52%));
  transform: translateZ(calc(-1 * var(--bw) / 2));
}
.p3-btn .p3-bo {
  top: 0; bottom: 0; width: var(--bw);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12) 18%, rgba(255,255,255,0) 45%, rgba(0,0,0,0) 70%, rgba(0,0,0,.22)),
    linear-gradient(90deg,
      hsl(var(--hue) 8% calc((72 + 10 * var(--lit)) * 1%)),
      hsl(var(--hue) 10% 84%) 50%,
      hsl(var(--hue) 8% calc((68 - 8 * var(--lit)) * 1%)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.28), 0 calc(1.5 * var(--s)) calc(2.5 * var(--s)) rgba(0,0,0,.18);
}
.p3-btn.p3-left .p3-bo  { left: calc(-1.2 * var(--s));  transform-origin: left center;  transform: translateZ(calc(var(--bw) / 2)) rotateY(90deg); }
.p3-btn.p3-right .p3-bo { right: calc(-1.2 * var(--s)); transform-origin: right center; transform: translateZ(calc(var(--bw) / 2)) rotateY(-90deg); }


/* ---- stickers on the back: three finishes. Holographic (Road Dawg), glossy vinyl (I love NY),
   matte paper (Paris). The holo sheen and the gloss sweep move with --angle, so they shimmer
   as the phone turns. ---- */
.p3-sticker{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  border-radius:calc(22 * var(--s));}
.p3-sticker img{display:block;width:100%;height:auto;position:relative;z-index:1;}

/* 1 · holographic foil: silver base, a rainbow conic sheen that rotates with the angle, a
   specular sweep on top, a chrome edge. The logo sits on it with a faint emboss. */
.p3-sticker--rd{left:calc(44 * var(--s));top:calc(330 * var(--s));width:calc(160 * var(--s));padding:calc(14 * var(--s)) calc(12 * var(--s));
  transform:rotate(-9deg);border-radius:calc(28 * var(--s));
  background:
    linear-gradient(calc(120deg + var(--angle) * 1deg), rgba(255,255,255,0) 30%, rgba(255,255,255,.75) 46%, rgba(255,255,255,0) 58%),
    conic-gradient(from calc(var(--angle) * 3deg) at calc(50% + var(--angle) * 0.2%) 40%,
      #ffd3e6, #d3ecff, #fff1c2, #d2ffe4, #e6d3ff, #ffd3e6),
    linear-gradient(160deg, #e9e9ee, #c9c9d2);
  background-blend-mode:screen, normal, normal;
  box-shadow:0 0 0 calc(3 * var(--s)) #dcdce3, inset 0 0 0 1px rgba(255,255,255,.7), 0 calc(2 * var(--s)) calc(5 * var(--s)) rgba(0,0,0,.28);}
.p3-sticker--rd img{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 -1px 0 rgba(0,0,0,.15));}
.p3-sticker--rd::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.18) 6px 7px);opacity:.6;}

/* 2 · glossy vinyl: bright white, a curved highlight that slides with the angle, deeper shadow */
.p3-sticker--ny{right:calc(40 * var(--s));top:calc(470 * var(--s));width:calc(168 * var(--s));height:calc(118 * var(--s));
  transform:rotate(7deg);font-family:'Barlow',system-ui,sans-serif;font-weight:800;color:#111;line-height:0.88;letter-spacing:-.02em;
  background:#fff;
  box-shadow:0 0 0 calc(3 * var(--s)) #fff, 0 calc(3 * var(--s)) calc(7 * var(--s)) rgba(0,0,0,.34), inset 0 -1px 0 rgba(0,0,0,.06);}
.p3-sticker--ny::before{content:"";position:absolute;left:-30%;right:-30%;top:-60%;height:80%;border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(0,0,0,.05) 100%);
  transform:translateX(calc(var(--angle) * 0.4%));pointer-events:none;}
.p3-sticker--ny::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(calc(110deg + var(--angle) * 0.5deg), rgba(255,255,255,0) 35%, rgba(255,255,255,.0) 44%, rgba(120,120,140,.14) 50%, rgba(255,255,255,0) 56%);}
.p3-ny{display:block;font-size:calc(46 * var(--s));position:relative;z-index:1;}
.p3-ny b{color:#E11D2E;font-weight:800;font-size:calc(38 * var(--s));vertical-align:0.06em;}
.p3-ny--b{font-size:calc(50 * var(--s));}

/* 3 · matte paper: warm alabaster, a touch of grain, no gloss, softer shadow, slightly worn corners */
.p3-sticker--paris{left:calc(70 * var(--s));top:calc(630 * var(--s));width:calc(110 * var(--s));padding:calc(10 * var(--s)) calc(12 * var(--s)) calc(8 * var(--s));
  transform:rotate(-5deg);border-radius:calc(20 * var(--s)) calc(16 * var(--s)) calc(22 * var(--s)) calc(14 * var(--s));gap:calc(4 * var(--s));
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(160deg, #F7F1E5, #EDE5D6);
  box-shadow:0 0 0 calc(3 * var(--s)) #F4EDDF, 0 calc(1 * var(--s)) calc(3 * var(--s)) rgba(0,0,0,.22);}
.p3-sticker--paris img{width:calc(62 * var(--s));}
.p3-sticker--paris span{font-family:'Mitr','Barlow',sans-serif;font-weight:500;color:#2b2622;font-size:calc(18 * var(--s));letter-spacing:.14em;text-transform:uppercase;position:relative;z-index:1;}

/* ---- Small screens: the phone lives in the hero and spins under a finger ---- */
@media (max-width:860px){
  .showit__grid .p3-slot--b{display:none;}
  .p3-slot--a{position:relative;}
  /* the scene is normally not hit testable (it only rides over the page); here it takes the finger */
  .p3-slot--a .p3-scene{pointer-events:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;translate:0 var(--float,0px);}
  .p3-slot--a .p3-scene img{-webkit-user-drag:none;pointer-events:none;}
  .p3-slot--a .p3-scene:active{cursor:grabbing;}
}

/* antenna lines: the thin breaks in the metal near the corners. Planes standing on the rim surface. */
.p3-ant { position: absolute; background: hsl(var(--hue) 10% 40%); opacity: .55; }
.p3-ant.p3-ant-l, .p3-ant.p3-ant-r { top: var(--y); left: 0; right: 0; height: calc(1.6 * var(--s)); }
.p3-ant.p3-ant-l { right: auto; width: var(--d3); transform-origin: left center; transform: translateZ(calc(var(--d3) / 2)) rotateY(90deg) translateX(0); }
.p3-ant.p3-ant-r { left: auto; width: var(--d3); transform-origin: right center; transform: translateZ(calc(var(--d3) / 2)) rotateY(-90deg); }
.p3-ant.p3-ant-t, .p3-ant.p3-ant-b { left: var(--x); width: calc(1.6 * var(--s)); height: var(--d3); }
.p3-ant.p3-ant-t { top: 0; transform-origin: center top; transform: translateZ(calc(var(--d3) / 2)) rotateX(-90deg); }
.p3-ant.p3-ant-b { bottom: 0; transform-origin: center bottom; transform: translateZ(calc(var(--d3) / 2)) rotateX(90deg); }