/*
 * The homepage phone: one handset that launches all three demos. phone.js builds the markup
 * and fits the stage to its container, so a layout only has to give [data-snor-phone] a size.
 *
 * Logical geometry (CSS px, before the stage is scaled to fit):
 *   handset 434x902 with an 11px bezel around a 412x880 screen
 *   wide    stage 1258x902: handset left, Apple TV (760 wide) to its right
 *   stacked stage 434x1200: Apple TV above the handset
 * True Remote's embed.css mirrors these numbers.
 */
[data-snor-phone] {
  --sp-bezel: 11px;
  --sp-screen-radius: 46px;
  --sp-ink: #f4f4f1;
  --sp-glow: #6b7280;
  --sp-dx: 0px;
  --sp-dy: 0px;
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
@supports not (overflow: clip) {
  [data-snor-phone] {
    overflow: hidden;
  }
}
[data-snor-phone] *,
[data-snor-phone] *::before,
[data-snor-phone] *::after {
  box-sizing: border-box;
}
[data-snor-phone] [hidden] {
  display: none !important;
}
[data-snor-phone] button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---- stage ------------------------------------------------------------------------- */
.sp-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 434px;
  height: 902px;
  transform-origin: 0 0;
  transition: transform var(--sp-motion-duration, 520ms) cubic-bezier(0.22, 0.85, 0.25, 1);
  will-change: transform;
  pointer-events: none;
}
[data-snor-phone][data-layout='wide'] .sp-stage {
  width: 1258px;
}
[data-snor-phone][data-layout='stacked'] .sp-stage {
  height: 1200px;
}
[data-snor-phone][data-layout='stacked'] {
  --sp-dy: 298px;
}
[data-snor-phone][data-fitting] .sp-stage {
  transition: none;
}

/* ---- handset ----------------------------------------------------------------------- */
.sp-device {
  position: absolute;
  left: var(--sp-dx);
  top: var(--sp-dy);
  width: 434px;
  height: 902px;
  border-radius: 58px;
  background: linear-gradient(150deg, #5a5e62 0%, #26282b 22%, #131416 55%, #2c2e31 100%);
  box-shadow:
    0 0 0 1px #0b0c0d,
    inset 0 0 0 1.5px #6d7175,
    inset 0 0 0 5px #101113,
    var(--sp-shadow, 0 50px 70px -34px #0b0d1070, 0 24px 34px -20px #0b0d1055);
  pointer-events: auto;
}
.sp-device::before,
.sp-device::after {
  content: '';
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #35383b, #6a6e72);
}
.sp-device::before {
  left: -4px;
  top: 150px;
  height: 52px;
}
.sp-device::after {
  right: -4px;
  top: 118px;
  height: 84px;
  background: linear-gradient(90deg, #6a6e72, #35383b);
}

/* ---- screen ------------------------------------------------------------------------ */
.sp-screen {
  position: absolute;
  left: calc(var(--sp-dx) + var(--sp-bezel));
  top: calc(var(--sp-dy) + var(--sp-bezel));
  width: 412px;
  height: 880px;
  border-radius: var(--sp-screen-radius);
  overflow: hidden;
  overflow: clip;
  background: #0b0c0f;
  isolation: isolate;
  transform: translateZ(0);
  pointer-events: auto;
}

/* ---- home screen ------------------------------------------------------------------- */
.sp-home {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* overflow:hidden still allows focus to scroll the launcher and its glows.
     clip keeps the icons fixed inside the screen during opening/closing. */
  overflow: clip;
  background:
    radial-gradient(120% 60% at 80% 0%, #2a1f2f 0%, #0000 60%),
    radial-gradient(100% 55% at 0% 100%, #112a24 0%, #0000 62%),
    linear-gradient(180deg, #14151a 0%, #0c0d10 100%);
  transition:
    transform 200ms ease-out,
    opacity 160ms ease-out;
}
.sp-home::before {
  /* fine grain so the gradients never band */
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}
[data-snor-phone][data-state='app'] .sp-home {
  transform: scale(0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 200ms ease-out,
    opacity 160ms ease-out,
    visibility 0s 200ms;
}

.sp-tile {
  position: absolute;
  left: 0;
  width: 100%;
  height: 264px;
  top: calc(58px + var(--i) * 264px);
  text-align: left;
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  animation: sp-arrive 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.11s);
}
@keyframes sp-arrive {
  to {
    opacity: 1;
    transform: none;
  }
}
.sp-glow {
  position: absolute;
  left: var(--gx);
  top: 50%;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), #0000);
  opacity: 0.34;
  pointer-events: none;
  transition: opacity 0.4s;
}
.sp-tile:hover .sp-glow,
.sp-tile:focus-visible .sp-glow {
  opacity: 0.55;
}
.sp-icon {
  position: absolute;
  top: 30px;
  left: var(--ix);
  width: 204px;
  height: 204px;
  border-radius: 46px;
  overflow: hidden;
  background: var(--c);
  box-shadow:
    0 26px 38px -16px color-mix(in srgb, var(--c) 70%, #000),
    0 0 0 1px #ffffff1c,
    inset 0 0 0 1px #ffffff14;
  transition:
    transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1),
    box-shadow 0.35s;
}
.sp-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-icon::after {
  /* soft top-left sheen */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, #ffffff2e 0%, #ffffff00 38%);
  pointer-events: none;
}
.sp-tile:hover .sp-icon {
  transform: translateY(-4px) scale(1.015);
}
.sp-tile:active .sp-icon {
  transform: scale(0.95);
  transition-duration: 0.12s;
}
.sp-tile:focus-visible {
  outline: none;
}
.sp-tile:focus-visible .sp-icon {
  box-shadow:
    0 0 0 3px #0b0c0f,
    0 0 0 6px #f4f4f1;
}
.sp-label {
  position: absolute;
  top: 50%;
  left: var(--lx);
  width: var(--lw, 148px);
  transform: translateY(-50%);
  color: var(--sp-ink);
  letter-spacing: -0.02em;
}
.sp-label strong {
  display: block;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.15;
  white-space: nowrap;
}
.sp-label small {
  display: block;
  margin-top: 5px;
  color: #ffffff8c;
  font-size: 14px;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}
.sp-tile:nth-child(odd) {
  --ix: 28px;
  --lx: 248px;
  --gx: 130px;
}
.sp-tile:nth-child(even) {
  --ix: 180px;
  --lx: 28px;
  --lw: 140px;
  --gx: 282px;
}

/* ---- apps -------------------------------------------------------------------------- */
.sp-app {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 180ms ease-out,
    visibility 0s 180ms;
  pointer-events: none;
}
.sp-app.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.sp-app iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color-scheme: light;
}
/* Retain each iframe's viewport while it warms up or is closed. Opacity fades
   replace animated clipping and icon-sized layout changes around nested frames. */
[data-snor-phone] .sp-app[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.sp-launch {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #0b0c0f;
  color: #f4f4f1;
  font-size: 17px;
  pointer-events: none;
}
.sp-launch img {
  border-radius: 26px;
}
/* True Remote spans the stage so its TV can sit outside the handset. Its
   uninitialized document stays invisible until the ready/load handshake. */
.sp-remote-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* ---- status bar, camera, navigation bar ------------------------------------------- */
.sp-status,
.sp-camera {
  position: absolute;
  left: calc(var(--sp-dx) + var(--sp-bezel));
  width: 412px;
  z-index: 6;
  pointer-events: none;
}
.sp-status {
  top: calc(var(--sp-dy) + var(--sp-bezel));
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 30px 0 34px;
  color: var(--sp-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.35s;
  user-select: none;
}
[data-snor-phone][data-ink='dark'] .sp-status,
[data-snor-phone][data-ink='dark'] .sp-nav {
  --sp-ink: #1e211d;
}
.sp-status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-status-icons svg {
  display: block;
  height: 12px;
  width: auto;
  fill: currentColor;
}
.sp-camera {
  top: calc(var(--sp-dy) + 25px);
  height: 14px;
}
.sp-camera::before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #050506;
  box-shadow:
    inset 0 0 0 3px #17181a,
    0 0 0 1px #0000004d;
}
/* Android's three-button navigation bar, over the bottom 48px of the screen. The demos
   leave the same 48px free and paint it in their own background. */
.sp-nav {
  position: absolute;
  left: calc(var(--sp-dx) + var(--sp-bezel));
  top: calc(var(--sp-dy) + var(--sp-bezel) + 832px);
  width: 412px;
  height: 48px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 28px;
  color: var(--sp-ink);
  transition: color 0.35s;
  pointer-events: auto;
}
.sp-nav-btn {
  display: grid;
  place-items: center;
  width: 72px;
  height: 48px;
}
.sp-nav-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
  transition:
    opacity 0.2s,
    transform 0.2s;
}
.sp-nav-btn:hover svg {
  opacity: 1;
}
.sp-nav-btn:active svg {
  transform: scale(0.88);
}
.sp-nav-btn:focus-visible {
  outline: none;
}
.sp-nav-btn:focus-visible svg {
  opacity: 1;
  filter: drop-shadow(0 0 0 currentColor) drop-shadow(0 0 3px currentColor);
}
[data-snor-phone][data-state='home'] .sp-nav {
  pointer-events: none;
}
[data-snor-phone][data-state='home'] .sp-nav-btn svg {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .sp-stage,
  .sp-home,
  .sp-app,
  .sp-icon {
    transition: none;
  }
  .sp-tile {
    animation: none;
    opacity: 1;
    transform: none;
  }
}