/* ============================================================================
   The commercial phone in the "Safety made social" stage: a phone held
   sideways playing the 3rd-i commercial, centred inside the sonar rings.
   The screen is exactly 16:9 so the video fills it with no bars.
   ========================================================================= */

.thirdi-cphone {
  position: relative;
  width: min(478px, 86vw);
  /* Upright until the scroll scrub turns it; no-JS and reduced motion see it
     already sideways (the script sets the angle when it takes over). */
  transform: rotate(var(--cph-rot, 0deg));
  will-change: transform;
  border-radius: clamp(28px, 5vw, 40px);
  padding: clamp(8px, 1.4vw, 11px);
  /* Titanium band: a metallic gradient rim drawn as a transparent border, the
     dark chassis painted on the padding box inside it - matches the silver
     edge on the official phone renders used elsewhere on the page. */
  border: clamp(2px, 0.4vw, 3px) solid transparent;
  background:
    linear-gradient(160deg, #23262d, #0c0e12 58%, #2a2d34) padding-box,
    linear-gradient(150deg, #f2f4f8, #aeb5bf 26%, #e7eaef 47%, #969da8 68%, #dfe3e9 88%, #f5f7fa) border-box;
  box-shadow:
    0 34px 80px -30px rgba(28, 48, 92, 0.45),
    0 10px 26px -14px rgba(28, 48, 92, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Side buttons along the top edge of the sideways phone. */
.thirdi-cphone::before,
.thirdi-cphone::after {
  content: "";
  position: absolute;
  top: -6px;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #eef1f5, #a7aeb8);
}
.thirdi-cphone::before { left: 16%; width: 7%; }
.thirdi-cphone::after { left: 26%; width: 12%; }

.thirdi-cphone__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(20px, 3.8vw, 30px);
  overflow: hidden;
  background: #000;
}

.thirdi-cphone__screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dynamic Island, on the left when the phone is held sideways. */
.thirdi-cphone__island {
  position: absolute;
  left: clamp(8px, 1.6vw, 13px);
  top: 50%;
  width: clamp(8px, 1.3vw, 11px);
  height: clamp(48px, 9vw, 76px);
  transform: translateY(-50%);
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* The shared .vid-sound pill anchors to the screen; on this small canvas it
   sits in the lower right so it never fights the island. */
.thirdi-cphone__screen .vid-sound {
  top: auto;
  right: 12px;
  bottom: 12px;
}

/* Pulse loader: sonar-style ping on the glass while the first frames buffer.
   Shown via .is-loading on the phone, dropped on the video's playing event. */
.thirdi-cphone__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.thirdi-cphone.is-loading .thirdi-cphone__loader { opacity: 1; }
.thirdi-cphone__loader::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
}
.thirdi-cphone__loader::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: thirdiCphPulse 1.25s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes thirdiCphPulse {
  0% { transform: scale(0.38); opacity: 0.85; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .thirdi-cphone__loader::after { animation: none; opacity: 0.35; }
}