/* ════════════════════════════════════════════════════════════════
   desktop-phone.css — Persistent hero phone overlay
   On sections 1–4 the #deco-phone element appears fixed in the
   EXACT SAME position and size as the hero showcase stage.
   It reuses .showcase-phone / .showcase-screen from hero-showcase.css
   so it looks identical to the hero phone.
   JS (page-scroll.js) measures the hero stage and sets:
     --dp-left  --dp-top  --dp-w  --dp-h
   ════════════════════════════════════════════════════════════════ */

/* Hidden until page-scroll activates */
#deco-phone { display: none; }

html.page-scroll-ready #deco-phone {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0;
  position:       fixed;
  /* JS sets these from the hero showcase stage getBoundingClientRect() */
  left:           var(--dp-left, 50%);
  top:            var(--dp-top,  50%);
  width:          var(--dp-w,    300px);
  height:         var(--dp-h,    auto);
  z-index:        90;
  pointer-events: none;
  perspective:    1200px;   /* same as .hero-showcase */
  isolation:      isolate;

  /* ALWAYS visible — deco phone replaces hero phone instantly.
     No opacity transition: zero chance of seeing two phones at once. */
  opacity:    1;
  visibility: visible;
}


/* ─────────────────────────────────────────────────────────────────
   STAGE — mirrors .showcase-stage: centered grid + circular glow
────────────────────────────────────────────────────────────────── */
.dp-stage {
  position:    relative;
  display:     grid;
  place-items: center;
  width:       100%;
  height:      100%;
}

/* Glow ring — mirrors .showcase-stage::before */
.dp-stage::before {
  content:       '';
  position:      absolute;
  width:         min(92%, 380px);
  aspect-ratio:  1;
  border:        1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow:    0 0 80px rgba(240, 61, 28, .1);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────
   HERO PHONE HANDOFF
   The instant snap-scroll activates, the deco phone (fixed, same
   position/size) takes over. We hide both the hero phone AND the
   showcase-stage ring so there is never a double-phone or double-
   circle moment — the deco phone (with its own dp-stage::before
   ring) is the ONLY phone the user ever sees.
────────────────────────────────────────────────────────────────── */
html.page-scroll-ready .hero-showcase .showcase-phone,
html.page-scroll-ready .hero-showcase .showcase-stage::before {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────────
   OVERRIDE / ISOLATE the hero phone inside #deco-phone
   .showcase-phone already gives us the exact body, notch, button
   and tilt. We only need to:
   • suppress the hover transition during spin
   • add RTL mirror tilt
   • apply spin-out / spin-in animations
────────────────────────────────────────────────────────────────── */
#deco-phone .showcase-phone {
  /* kill the 300ms hover-driven transition so spin keyframes are instant */
  transition: box-shadow .3s ease;
}

/* RTL: mirror the Y tilt */
[dir="rtl"] #deco-phone .showcase-phone {
  transform: rotateX(4deg) rotateY(12deg) rotateZ(-2deg);
}

/* ── Spin-out (phone turns away from viewer) ── */
#deco-phone .showcase-phone.dp-spin-out {
  animation: dp-spin-out .3s ease-in forwards;
}
@keyframes dp-spin-out {
  /* start = .showcase-phone default transform */
  from { transform: rotateX(4deg) rotateY(-12deg) rotateZ(2deg); }
  to   { transform: rotateX(4deg) rotateY(-192deg) rotateZ(2deg); }
}

[dir="rtl"] #deco-phone .showcase-phone.dp-spin-out {
  animation: dp-spin-out-rtl .3s ease-in forwards;
}
@keyframes dp-spin-out-rtl {
  from { transform: rotateX(4deg) rotateY(12deg)  rotateZ(-2deg); }
  to   { transform: rotateX(4deg) rotateY(192deg) rotateZ(-2deg); }
}

/* ── Spin-in (phone returns with new content) ── */
#deco-phone .showcase-phone.dp-spin-in {
  animation: dp-spin-in .3s ease-out forwards;
}
/* Final keyframe MUST equal .showcase-phone default → no snap on class removal */
@keyframes dp-spin-in {
  from { transform: rotateX(4deg) rotateY(168deg) rotateZ(2deg); }
  to   { transform: rotateX(4deg) rotateY(-12deg) rotateZ(2deg); }
}

[dir="rtl"] #deco-phone .showcase-phone.dp-spin-in {
  animation: dp-spin-in-rtl .3s ease-out forwards;
}
@keyframes dp-spin-in-rtl {
  from { transform: rotateX(4deg) rotateY(-168deg) rotateZ(-2deg); }
  to   { transform: rotateX(4deg) rotateY(12deg)   rotateZ(-2deg); }
}


/* ─────────────────────────────────────────────────────────────────
   SCREENS — stack inside .showcase-screen; only .dp-s-on visible
────────────────────────────────────────────────────────────────── */
.dp-s {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity .22s ease;
  overflow:   hidden;
}
.dp-s.dp-s-on { opacity: 1; }


/* ─────────────────────────────────────────────────────────────────
   SUB-SCREENS — horizontal slide within each section screen.
   Three .dp-ss per section (pain / builds / process), cycling
   automatically every 3.5 s. The Y-axis flip is for section-to-
   section transitions; horizontal slide is for sub-screen changes.
────────────────────────────────────────────────────────────────── */
.dp-ss {
  position:   absolute;
  inset:      0;
  overflow:   hidden;
  /* start off-screen to the right */
  transform:  translateX(100%);
  transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.dp-ss.dp-ss-on   { transform: translateX(0); }     /* current */
.dp-ss.dp-ss-prev { transform: translateX(-100%); }  /* exiting left */


/* ─────────────────────────────────────────────────────────────────
   LABEL — centred below the stage
────────────────────────────────────────────────────────────────── */
.dp-label {
  font-size:      .6rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(140, 155, 175, .5);
  text-align:     center;
  white-space:    nowrap;
  margin:         10px 0 0;
  min-height:     14px;
  transition:     opacity .35s ease;
}


/* ─────────────────────────────────────────────────────────────────
   SUB-SCREEN DOTS — 3 small dots below the phone indicating which
   sub-screen is currently active within a section (1–3 only).
────────────────────────────────────────────────────────────────── */
.dp-sub-dots {
  display:         flex;
  gap:             5px;
  justify-content: center;
  margin-top:      5px;
}
.dp-sub-dot {
  display:          block;
  width:            5px;
  height:           5px;
  border-radius:    50%;
  background:       rgba(140, 155, 175, .28);
  transition:       background .25s ease, transform .25s ease;
  flex-shrink:      0;
}
.dp-sub-dot.on {
  background: #F03D1C;
  transform:  scale(1.35);
}


/* ─────────────────────────────────────────────────────────────────
   COPY-PASTE SUB-SCREEN (dp-s1 sub 2)
────────────────────────────────────────────────────────────────── */
.dp-cp-apps {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        8px 10px;
  background:     #fff;
}
.dp-cp-app {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    #f5f5f5;
  border-radius: 6px;
  padding:       6px 8px;
}
.dp-cp-arrow {
  text-align:   center;
  font-size:    8px;
  color:        #bbb;
  font-weight:  700;
  letter-spacing: .04em;
}
.dp-cp-label {
  text-align:     center;
  font-size:      6px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          #F03D1C;
  padding:        6px 0;
  background:     #fff;
}


/* ─────────────────────────────────────────────────────────────────
   MOBILE SCALE — phone 30 % smaller on narrow viewports (≤ 700px)
   so section content beside / below the phone has more breathing room.
────────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  html.has-deco-phone.page-scroll-ready #deco-phone {
    transform:        scale(0.7);
    transform-origin: bottom center;
  }
}


/* ─────────────────────────────────────────────────────────────────
   SCREEN 0 — Hero placeholder (visible while on hero section)
   Mirrors the .showcase-placeholder skeleton so the phone looks
   the same on section 0 as the original hero phone.
────────────────────────────────────────────────────────────────── */
.dp-s0 {
  background: #161C26;  /* matches hero phone's dark screen */
  padding:    38px 10px 10px;   /* clear notch */
  display:    flex;
  flex-direction: column;
  gap:        7px;
}
.dp-s0-bar {
  display:       block;
  height:        7px;
  width:         42%;
  background:    rgba(255,255,255,.09);
  border-radius: 4px;
}
.dp-s0-title {
  display:       block;
  height:        11px;
  width:         68%;
  background:    rgba(255,255,255,.13);
  border-radius: 5px;
  margin-bottom: 3px;
}
.dp-s0-card {
  display:       block;
  flex-shrink:   0;
  height:        44px;
  background:    rgba(255,255,255,.05);
  border-radius: 8px;
  border:        1px solid rgba(255,255,255,.06);
}
.dp-s0-card-wide { height: 60px; }
.dp-s0-nav {
  display:       block;
  height:        22px;
  background:    rgba(255,255,255,.05);
  border-radius: 5px;
  margin-top:    auto;
}


/* ═══════════════════════════════════════════════════════════════
   SHARED AVATAR DOTS
═══════════════════════════════════════════════════════════════ */
.dp-av {
  flex-shrink:     0;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       8px;
  font-weight:     700;
  color:           #fff;
}
.dp-av-o { background: #F97316; }
.dp-av-b { background: #3B82F6; }
.dp-av-p { background: #8B5CF6; }
.dp-av-g { background: #10B981; }
.dp-av-r { background: #EF4444; }


/* ═══════════════════════════════════════════════════════════════
   SCREEN 1 — Pain: WhatsApp chaos + spreadsheet  (white bg)
═══════════════════════════════════════════════════════════════ */
.dp-s1 {
  background:  #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dp-s1-hdr {
  display:     flex;
  align-items: center;
  gap:         6px;
  height:      34px;
  padding:     0 10px;
  background:  #075E54;
  margin-top:  32px; /* clear notch */
}
.dp-s1-hdr::before {
  content:       '';
  display:       block;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    rgba(255,255,255,.35);
  flex-shrink:   0;
}
.dp-s1-hdr-title {
  flex:          1;
  height:        7px;
  border-radius: 3px;
  background:    rgba(255,255,255,.45);
}
.dp-s1-hdr-badge {
  flex-shrink:   0;
  background:    #F03D1C;
  color:         #fff;
  font-size:     6px;
  font-weight:   700;
  border-radius: 9px;
  padding:       1px 5px;
  min-width:     16px;
  text-align:    center;
}

.dp-s1-row {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 8px;
  border-bottom: 1px solid #f0f0f0;
}
.dp-s1-row.dp-read { opacity: .5; }

.dp-s1-txt {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}
.dp-s1-txt span:first-child {
  height:        7px;
  border-radius: 4px;
  background:    #1a1a1a;
  width:         62%;
}
.dp-s1-txt span:last-child {
  height:        6px;
  border-radius: 3px;
  background:    #c8c8c8;
  width:         85%;
}

.dp-bdg {
  flex-shrink:   0;
  background:    #25D366;
  color:         #fff;
  font-size:     6px;
  font-weight:   700;
  border-radius: 9px;
  padding:       2px 5px;
  min-width:     16px;
  text-align:    center;
}
.dp-bdg-r { background: #F03D1C; }

.dp-s1-div {
  display:        flex;
  align-items:    center;
  gap:            6px;
  padding:        6px 8px 3px;
  font-size:      6px;
  font-weight:    700;
  letter-spacing: .05em;
  color:          #888;
  text-transform: uppercase;
}
.dp-s1-div::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: #e0e0e0;
}

.dp-s1-sht { padding: 0 6px 6px; }

.dp-s1-shd,
.dp-s1-shr {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   3px;
  padding:               3px 4px;
  font-size:             6px;
}
.dp-s1-shd {
  background:     #f0f0f0;
  color:          #666;
  font-weight:    700;
  border-radius:  3px;
  text-transform: uppercase;
}
.dp-s1-shr {
  color:         #333;
  border-bottom: 1px solid #f0f0f0;
}
.dp-s1-shr.dp-alt { background: #fafafa; }

.dp-no { color: #ef4444; font-weight: 700; }
.dp-q  { color: #f97316; font-weight: 700; }
.dp-ok { color: #22c55e; font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════
   SCREEN 2 — Builds: Clean app dashboard  (dark bg)
═══════════════════════════════════════════════════════════════ */
.dp-s2 {
  background:  #0D1117;
  color:       #E6EDF3;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dp-s2-hdr {
  display:        flex;
  align-items:    center;
  height:         38px;
  padding:        0 10px;
  background:     #F03D1C;
  margin-top:     32px;
  font-size:      9px;
  font-weight:    700;
  color:          #fff;
  letter-spacing: .04em;
  gap:            7px;
}
.dp-s2-hdr::before {
  content:       '';
  width:         16px;
  height:        16px;
  border-radius: 4px;
  background:    rgba(255,255,255,.3);
  flex-shrink:   0;
}

.dp-s2-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     6px;
  padding: 10px 8px 6px;
}
.dp-s2-stat {
  background:    #161B22;
  border-radius: 9px;
  padding:       7px 8px;
  display:       flex;
  flex-direction: column;
  gap:           3px;
  border:        1px solid rgba(255,255,255,.05);
}
.dp-s2-stat strong {
  font-size:   12px;
  font-weight: 700;
  color:       #fff;
  line-height: 1;
}
.dp-s2-stat span {
  font-size:   6px;
  color:       #8B949E;
  line-height: 1;
}

.dp-s2-row {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       6px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.dp-s2-txt {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  min-width:      0;
}
.dp-s2-txt span:first-child {
  height:        7px;
  border-radius: 4px;
  background:    rgba(230,237,243,.8);
  width:         60%;
}
.dp-s2-txt span:last-child {
  height:        5px;
  border-radius: 3px;
  background:    #4a525e;
  width:         78%;
}

.dp-s2-st {
  flex-shrink:    0;
  font-size:      6px;
  font-weight:    700;
  border-radius:  8px;
  padding:        2px 5px;
  letter-spacing: .02em;
}
.dp-s2-on  { background: rgba(76,175,130,.18); color: #4CAF82; }
.dp-s2-off { background: rgba(255,255,255,.06); color: #8B949E; }

.dp-s2-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  height:          34px;
  background:      #161B22;
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  border-top:      1px solid rgba(255,255,255,.07);
}
.dp-s2-ni {
  width:         20px;
  height:        20px;
  border-radius: 6px;
  background:    rgba(255,255,255,.1);
}
.dp-s2-ni-a { background: #F03D1C; }


/* ═══════════════════════════════════════════════════════════════
   SCREEN 3 — Process: Build timeline  (cream bg)
═══════════════════════════════════════════════════════════════ */
.dp-s3 {
  background:  #F6F5F2;
  color:       #0D1117;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.dp-s3-hdr {
  display:     flex;
  align-items: center;
  height:      34px;
  padding:     0 10px;
  background:  #EDECE9;
  margin-top:  32px;
  gap:         9px;
}
.dp-s3-hdr-icon {
  width:         16px;
  height:        16px;
  border-radius: 4px;
  background:    #c8c6c1;
  flex-shrink:   0;
}
.dp-s3-hdr-bar {
  flex:          1;
  height:        7px;
  border-radius: 4px;
  background:    #bbb;
}

.dp-s3-step {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  padding:     10px 8px 5px;
  position:    relative;
}
.dp-s3-step + .dp-s3-step::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       calc(8px + 11px);
  width:      1px;
  height:     10px;
  background: #ccc;
}

.dp-s3-num {
  flex-shrink:     0;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       6.5px;
  font-weight:     700;
  background:      #d5d3cf;
  color:           #666;
}
.dp-s3-done { background: #4CAF82; color: #fff; }
.dp-s3-live {
  background: #F03D1C;
  color:      #fff;
  animation:  dp-pulse-ring 1.8s ease-in-out infinite;
}
@keyframes dp-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0   rgba(240, 61, 28, .45); }
  50%       { box-shadow: 0 0 0 6px rgba(240, 61, 28, 0);   }
}

.dp-s3-txt {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding-top:    3px;
}
.dp-s3-txt span:first-child {
  height:        7px;
  border-radius: 4px;
  background:    #333;
  width:         72%;
}
.dp-s3-txt span:last-child {
  height:        5px;
  border-radius: 3px;
  background:    #c0bdb7;
  width:         90%;
}
.dp-s3-step:first-child .dp-s3-txt span:first-child { background: #888; }
.dp-s3-step:first-child .dp-s3-txt span:last-child  { background: #ccc; }

.dp-s3-chk {
  font-size:   11px;
  color:       #4CAF82;
  padding-top: 3px;
  flex-shrink: 0;
}
.dp-s3-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #F03D1C;
  margin-top:    8px;
  flex-shrink:   0;
  animation:     dp-blink 1.4s ease-in-out infinite;
}
@keyframes dp-blink {
  0%, 100% { opacity: 1;  transform: scale(1);   }
  50%       { opacity: .4; transform: scale(.6); }
}

.dp-s3-bar-wrap {
  height:        5px;
  background:    #ddd;
  border-radius: 3px;
  margin:        5px 8px 4px;
  overflow:      hidden;
}
.dp-s3-bar-fill {
  height:        100%;
  width:         55%;
  background:    #F03D1C;
  border-radius: 3px;
}

.dp-s3-eta { padding: 2px 8px; }
.dp-s3-eta span {
  display:       block;
  height:        5px;
  width:         46%;
  border-radius: 3px;
  background:    #c0bdb7;
}


/* ═══════════════════════════════════════════════════════════════
   SCREEN 4 — Contact: Success state  (dark bg)
═══════════════════════════════════════════════════════════════ */
.dp-s4 {
  background:  #0D1117;
  color:       #E6EDF3;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
}
.dp-s4-inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
}

.dp-s4-chk {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    #4CAF82;
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 0 0 8px rgba(76, 175, 130, .14);
  animation:     dp-chk-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.dp-s4-chk svg { width: 26px; height: 26px; }

@keyframes dp-chk-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.dp-s4-t1 {
  height:        9px;
  width:         100px;
  border-radius: 4px;
  background:    #E6EDF3;
}
.dp-s4-t2 {
  height:        6px;
  width:         78px;
  border-radius: 3px;
  background:    #4a525e;
}
.dp-s4-btn {
  height:        26px;
  width:         88px;
  border-radius: 13px;
  background:    #F03D1C;
  margin-top:    4px;
}


/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dp-s3-live { animation: none; }
  .dp-s3-dot  { animation: none; }
  .dp-s4-chk  { animation: none; }
  #deco-phone .showcase-phone.dp-spin-out,
  #deco-phone .showcase-phone.dp-spin-in { animation: none; }
}