/* =============================================================================
   phonehero.css — #gwPhone: the iPhone-framed mini-app nav video slab on the
   landing (built by phonehero.js, inserted right after .gw-hero inside
   #gwLanding). Pure-CSS phone chrome: rounded bezel, dynamic island, side
   buttons — no image assets besides the video/poster itself. The section is
   [hidden] until the video can actually play (see phonehero.js).

   Themes: surfaces/ink ride the shared theme.css variables so both wtf and
   dark modes work for free; the phone hardware itself stays near-black in
   both modes (it is an object, not a panel).
   ========================================================================== */

#gwPhone{
  margin:56px auto 64px;
  padding:0 20px;
  max-width:980px;
}

/* two-column slab: features copy next to the phone (founder directive);
   stacks phone-first on small screens */
#gwPhone .ph-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:48px;
}
#gwPhone .ph-copy{ text-align:left; }
#gwPhone .ph-title{
  margin:0 0 18px;
  font-size:30px;
  font-weight:800;
  line-height:1.15;
  color:var(--ink-hi,#f6f1fa);
}
#gwPhone .ph-feats{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
#gwPhone .ph-feat{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15.5px;
  color:var(--ink-mid,#cfc4e4);
}
#gwPhone .ph-feat-ic{
  flex:0 0 34px;
  width:34px;height:34px;
  display:grid;place-items:center;
  font-size:17px;
  border-radius:10px;
  background:var(--raised,rgba(255,255,255,.05));
  border:1px solid var(--hairline,rgba(255,255,255,.09));
}
@media (max-width:760px){
  #gwPhone .ph-grid{ grid-template-columns:1fr; gap:28px; }
  #gwPhone .ph-copy{ text-align:center; order:2; }
  #gwPhone .ph-feat{ justify-content:flex-start; text-align:left; }
  #gwPhone .ph-title{ font-size:24px; }
}

/* stage supplies the perspective for the resting 3D tilt */
#gwPhone .ph-stage{
  display:flex;
  justify-content:center;
  perspective:1100px;
}

/* ---- the phone -------------------------------------------------------- */
#gwPhone .ph-phone{
  position:relative;
  width:300px;
  aspect-ratio:9 / 19;
  border-radius:48px;
  background:linear-gradient(160deg,#1c1c22 0%,#0b0b0f 55%,#15151b 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.10),   /* polished frame edge   */
    inset 0 0 0 5px #000,                    /* inner bezel ring      */
    0 34px 60px -22px rgba(15,8,35,.55),     /* soft floor shadow     */
    0 10px 24px -12px rgba(15,8,35,.40);
  transform:rotateX(6deg) rotateY(-11deg) rotateZ(.4deg);
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.22,.68,.35,1);
  will-change:transform;
}
#gwPhone .ph-stage:hover .ph-phone,
#gwPhone .ph-stage:focus-within .ph-phone{
  transform:rotateX(0) rotateY(0) rotateZ(0);
}

/* ---- screen + video --------------------------------------------------- */
#gwPhone .ph-screen{
  position:absolute;
  inset:10px;
  border-radius:40px;
  overflow:hidden;
  background:#000;
}
#gwPhone .ph-screen video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

/* ---- dynamic island --------------------------------------------------- */
#gwPhone .ph-island{
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:24px;
  border-radius:999px;
  background:#000;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 1px 4px rgba(0,0,0,.55);
  z-index:2;
  pointer-events:none;
}
/* camera dot inside the island */
#gwPhone .ph-island::after{
  content:"";
  position:absolute;
  right:14%;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #2e3a52 0%, #10131c 60%, #000 100%);
}

/* ---- side buttons ------------------------------------------------------ */
#gwPhone .ph-btn{
  position:absolute;
  width:3px;
  border-radius:2px;
  background:linear-gradient(90deg,#2a2a31,#101014);
  pointer-events:none;
}
#gwPhone .ph-btn-mute { left:-3px; top:15%;   height:24px; }
#gwPhone .ph-btn-volup{ left:-3px; top:22%;   height:44px; }
#gwPhone .ph-btn-voldn{ left:-3px; top:30.5%; height:44px; }
#gwPhone .ph-btn-power{ right:-3px; top:24%;  height:70px; }

/* ---- caption + CTA ----------------------------------------------------- */
#gwPhone .ph-cap{
  margin:26px 0 14px;
  font-size:17px;
  font-weight:700;
  color:var(--ink-hi);
  letter-spacing:.01em;
}
#gwPhone .ph-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 26px;
  border-radius:999px;
  background:var(--p400);
  color:var(--on-accent);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 8px 22px -8px rgba(224,57,43,.45);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
#gwPhone .ph-cta:hover{
  background:var(--p500);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -8px rgba(224,57,43,.55);
}
#gwPhone .ph-cta::after{
  content:"\2197";                          /* ↗ outbound marker */
  font-size:12px;
  opacity:.85;
}

/* ---- mobile ------------------------------------------------------------ */
@media (max-width:640px){
  #gwPhone{ margin:40px auto 48px; }
  #gwPhone .ph-phone{ width:240px; border-radius:42px; }
  #gwPhone .ph-screen{ inset:8px; border-radius:35px; }
  #gwPhone .ph-island{ top:10px; height:20px; }
  #gwPhone .ph-cap{ font-size:15px; }
}

/* ---- reduced motion: phone sits flat, no transitions ------------------- */
@media (prefers-reduced-motion: reduce){
  #gwPhone .ph-phone{ transform:none; transition:none; }
  #gwPhone .ph-cta{ transition:none; }
}