/* ================================================================
   PC SHOWCASE — Cinematic Desktop Login Presentation
   Activates only on screens >= 769px via [data-pc-active] on body
   Zero impact on mobile — all rules scoped to media query
   ================================================================ */

/* Default hidden (mobile) */
#pcDecoCanvas   { display: none; }
#pcPhoneWrapper { display: none; }
.phone-notch    { display: none; }
.phone-home-bar { display: none; }
.pc-side-card   { display: none; }

/* ────────────────────────────────────────────────
   DESKTOP SHOWCASE
   ──────────────────────────────────────────────── */
@media screen and (min-width: 769px) {

  /* === BODY TRANSFORMATION === */
  body[data-pc-active="true"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
    position: relative;
  }

  /* === FULL-SCREEN CANVAS BEHIND EVERYTHING === */
  #pcDecoCanvas {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* === PHONE OUTER WRAPPER === */
  #pcPhoneWrapper {
    display: flex !important;
    position: relative !important;
    z-index: 10 !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* ── Phone Body (Metallic chassis) — iPhone 16 Pro Max 440×956px ── */
  #pcPhoneFrame {
    position: relative;
    width: 440px;
    height: 956px;
    /* Multi-stop metallic gradient mimicking brushed aluminum */
    background: linear-gradient(
      158deg,
      #404044 0%,
      #303033 8%,
      #242427 18%,
      #1a1a1d 32%,
      #131315 50%,
      #181819 65%,
      #202023 80%,
      #2c2c30 92%,
      #383840 100%
    );
    border-radius: 56px;
    padding: 14px;
    /* Deep 3-D shadow + dynamic glow (controlled by JS) */
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.22),
      inset 0 -1px 0 rgba(0,0,0,0.70),
      inset 1.5px 0 0 rgba(255,255,255,0.09),
      inset -1.5px 0 0 rgba(0,0,0,0.45),
      0 0 0 1.5px rgba(0,0,0,0.55),
      0 35px 90px rgba(0,0,0,0.90),
      0 15px 35px rgba(0,0,0,0.65),
      0 5px 12px rgba(0,0,0,0.45),
      /* Ambient glow (updated by JS) */
      0 0 90px var(--pc-glow, rgba(184,134,11,0.28)),
      0 0 180px var(--pc-glow-far, rgba(184,134,11,0.10));
    transition: box-shadow 1.2s ease;
  }

  /* Power button — right side */
  #pcPhoneFrame::before {
    content: '';
    position: absolute;
    right: -5px;
    top: 240px;
    width: 5px;
    height: 88px;
    background: linear-gradient(to bottom,
      #282830 0%, #38383f 18%,
      #42424a 50%, #38383f 82%, #282830 100%);
    border-radius: 0 4px 4px 0;
    box-shadow:
      3px 0 8px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.6);
  }

  /* Volume + silence buttons — left side (stacked via multiple shadows, spread=0 to avoid bleed) */
  #pcPhoneFrame::after {
    content: '';
    position: absolute;
    left: -5px;
    top: 175px;
    width: 5px;
    height: 38px; /* silence toggle */
    background: linear-gradient(to bottom, #282830, #38383f, #282830);
    border-radius: 4px 0 0 4px;
    box-shadow:
      /* vol+ button: 56px below */
      0 56px 0 0 #38383f,
      /* vol- button: 112px below */
      0 112px 0 0 #38383f,
      /* left-side ambient shadow only */
      -2px 0 6px rgba(0,0,0,0.50);
  }

  /* ── Dynamic Island / Notch ── */
  .phone-notch {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 128px;
    height: 37px;
    background: #040405;
    border-radius: 22px;
    z-index: 60;
    box-shadow:
      0 3px 14px rgba(0,0,0,0.96),
      0 0 0 1px rgba(255,255,255,0.025);
  }

  /* TrueDepth sensor (dot) */
  .phone-notch-sensor {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #1f4570, #0b2338, #040e18);
    border: 1px solid rgba(255,255,255,0.04);
    box-shadow: inset 0 0 5px rgba(0,50,120,0.3);
  }

  /* Front camera (circle) */
  .phone-notch-cam {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #1e1e22, #0a0a0d);
    border: 2.5px solid #0f0f12;
    box-shadow:
      inset 0 0 7px rgba(0,0,0,0.9),
      0 0 0 1px rgba(255,255,255,0.02);
  }

  /* ── Screen Glass / Bezel ── */
  .phone-screen-bezel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 44px;
    background: #000;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.7);
  }

  /* Subtle screen reflection highlight */
  .phone-screen-bezel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.005) 60%,
      transparent 100%);
    pointer-events: none;
    z-index: 100;
    border-radius: 40px 0 0 40px;
  }

  /* ── authScreen inside the phone ── */
  #pcPhoneWrapper #authScreen {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: 100% !important;
    min-height: unset !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* ── Home indicator bar ── */
  .phone-home-bar {
    display: block !important;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 132px;
    height: 5px;
    background: rgba(255,255,255,0.22);
    border-radius: 3px;
    z-index: 70;
  }

  /* ── Floating stat cards (left/right of phone) ── */
  .pc-side-card {
    display: block !important;
    position: fixed;
    z-index: 8;
    pointer-events: none;
    min-width: 162px;
    /* Glass morphism */
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 18px 22px;
    /* Fade-in then float */
    animation: pcCardFadeIn 0.8s ease forwards, pcFloat 7s ease-in-out infinite;
    animation-delay: var(--pc-card-delay, 0s), calc(var(--pc-card-delay, 0s) + 0.8s);
    opacity: 0;
  }

  @keyframes pcCardFadeIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1);    }
  }

  @keyframes pcFloat {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-11px); }
  }

  .pc-card-icon {
    font-size: 20px;
    display: block;
    margin-bottom: 10px;
  }

  .pc-card-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
  }

  .pc-card-value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--pc-accent, #d4a830);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.1;
    margin-bottom: 5px;
    transition: color 0.8s ease;
  }

  .pc-card-sub {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.28);
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
  }

  /* Progress bar variant */
  .pc-card-bar {
    margin-top: 10px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
  }

  .pc-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--pc-accent, #d4a830);
    box-shadow: 0 0 8px var(--pc-accent, #d4a830);
    transition: background 0.8s ease;
    animation: pcBarPulse 3s ease-in-out infinite;
  }

  @keyframes pcBarPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
  }

  /* Hide side cards on narrower desktop screens */
  @media screen and (max-width: 960px) {
    .pc-side-card { display: none !important; }
  }

  /* === THEME-AWARE SIDE CARD BORDERS (via JS custom props) === */
  .pc-side-card {
    border-color: var(--pc-border, rgba(184,134,11,0.15));
  }

}