/* ==========================================================================
   Landing preview — a living little room (all CSS, loops forever)
   ========================================================================== */

.mock { transition: transform 0.6s var(--ease); }
.landing__preview:hover .mock { transform: rotateY(-1.5deg) rotateX(0.6deg) translateY(-4px); }

.mock__dot:nth-child(1) { background: #f08c84; }
.mock__dot:nth-child(2) { background: #f4c46a; }
.mock__dot:nth-child(3) { background: #7fcf8e; }
.mock__title { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); }
.mock__title .icon { width: 9px; height: 9px; color: var(--live); }
.mock__pill { display: inline-flex; align-items: center; gap: 5px; }
.mock__pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.25; } }

/* now playing strip */
.mock__eq { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.mock__eq i { width: 2px; border-radius: 2px; background: var(--live); animation: eq 0.9s ease-in-out infinite; }
.mock__eq i:nth-child(2) { animation-delay: -0.3s; }
.mock__eq i:nth-child(3) { animation-delay: -0.6s; }
.mock__eq i:nth-child(4) { animation-delay: -0.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }
.mock__sync {
  margin-left: auto;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 99px;
}

/* the film: stars, moon, clouds and the midnight train */
.mock__scene { background: linear-gradient(180deg, #0d1528 0%, #22395a 40%, #7a5163 70%, #e7a577 100%); }
.mock__scene .stars {
  position: absolute;
  inset: 0 0 45% 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent),
    radial-gradient(1px 1px at 61% 34%, #fff, transparent),
    radial-gradient(1px 1px at 8% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 86% 52%, #fff, transparent),
    radial-gradient(1px 1px at 52% 64%, #fff, transparent),
    radial-gradient(1px 1px at 36% 74%, #fff, transparent),
    radial-gradient(1px 1px at 92% 14%, #fff, transparent);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.45; } to { opacity: 1; } }
.mock__scene .shoot {
  position: absolute;
  top: 12%;
  left: 18%;
  width: 46px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  transform: rotate(18deg);
  opacity: 0;
  animation: shoot 7s ease-in infinite 2s;
}
@keyframes shoot {
  0%, 86% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  88% { opacity: 1; }
  96%, 100% { opacity: 0; transform: translate(110px, 36px) rotate(18deg); }
}
.mock__scene .moon { animation: moon-glow 5s ease-in-out infinite alternate; }
@keyframes moon-glow { to { box-shadow: 0 0 60px 20px rgba(248, 231, 194, 0.45); } }
.mock__scene .cloud {
  position: absolute;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 210, 0.22), transparent);
  filter: blur(3px);
  animation: drift 26s linear infinite;
}
.mock__scene .c1 { top: 30%; width: 70px; left: -20%; }
.mock__scene .c2 { top: 44%; width: 46px; left: -30%; animation-duration: 34s; animation-delay: -12s; opacity: 0.7; }
@keyframes drift { to { transform: translateX(560px); } }
.mock__scene .hills--front {
  height: 30%;
  background:
    radial-gradient(120% 100% at 30% 100%, #0b1218 0 60%, transparent 61%),
    radial-gradient(120% 100% at 95% 100%, #0a1016 0 55%, transparent 56%);
}
.mock__scene .train {
  position: absolute;
  bottom: 27%;
  left: -40%;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  animation: train 11s linear infinite;
  filter: drop-shadow(0 0 6px rgba(255, 210, 140, 0.55));
}
.mock__scene .train i,
.mock__scene .train b {
  display: block;
  height: 9px;
  width: 26px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 0 3px, #ffd98e 3px 7px, transparent 7px 10px, #ffd98e 10px 14px, transparent 14px 17px, #ffd98e 17px 21px, transparent 21px) 0 2px / 100% 3px no-repeat,
    #101820;
}
.mock__scene .train b { width: 18px; height: 11px; border-radius: 2px 6px 2px 2px; background: #101820; box-shadow: inset -4px 3px 0 -2px #ffe6a8; }
@keyframes train { to { transform: translateX(780px); } }

.mock__cc {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 7.5px;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 4px;
  animation: cc 8s ease-in-out infinite;
}
@keyframes cc { 0%, 12%, 62%, 100% { opacity: 0; } 18%, 56% { opacity: 1; } }

.mock__float {
  position: absolute;
  bottom: 18%;
  font-size: 14px;
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
  animation: react-rise 6s ease-out infinite;
}
.mock__float.f1 { right: 14%; animation-delay: 0.4s; }
.mock__float.f2 { right: 22%; animation-delay: 1.9s; font-size: 12px; }
.mock__float.f3 { right: 9%; animation-delay: 3.3s; }
.mock__float.f4 { right: 18%; animation-delay: 4.6s; font-size: 13px; }
@keyframes react-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  8% { opacity: 1; transform: translateY(-8px) scale(1.15); }
  40% { opacity: 0; transform: translateY(-70px) translateX(-8px) scale(1) rotate(-10deg); }
  100% { opacity: 0; }
}

/* scrubber with time */
.mock__scrub { gap: 6px; align-items: center; height: 26px; padding: 6px 9px 4px; }
.mock__scrub::before { display: none; }
.mock__time { font-size: 6.5px; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.mock__bar { flex: 1; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.mock__bar i { display: block; height: 100%; width: 44%; border-radius: 99px; background: var(--accent); animation: progress 22s linear infinite; }
@keyframes progress { from { width: 30%; } to { width: 78%; } }

/* call tiles that talk */
.mock__tile { transition: box-shadow 0.3s; }
.mock__tile .av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.mock__tile .av--milo { font-size: 15px; background: rgba(255, 214, 160, 0.25); }
.mock__tile i { font-size: 5.5px; }
.mock__tile .mic {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  gap: 1px;
  align-items: flex-end;
  height: 7px;
  opacity: 0;
}
.mock__tile .mic b { width: 1.5px; height: 2px; background: #7fe0a3; border-radius: 1px; animation: eq 0.6s ease-in-out infinite; }
.mock__tile .mic b:nth-child(2) { animation-delay: -0.2s; }
.mock__tile .mic b:nth-child(3) { animation-delay: -0.4s; }
.mock__tile { animation: speaking 12s infinite; }
.mock__tile .mic { animation: speaking-mic 12s infinite; }
.t1, .t1 .mic { animation-delay: 0s; }
.t2, .t2 .mic { animation-delay: -9s; }
.t3, .t3 .mic { animation-delay: -6s; }
.t4, .t4 .mic { animation-delay: -3s; }
@keyframes speaking {
  0%, 22% { box-shadow: inset 0 0 0 2px #7fe0a3, 0 0 12px -2px rgba(127, 224, 163, 0.6); }
  26%, 100% { box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes speaking-mic { 0%, 22% { opacity: 1; } 26%, 100% { opacity: 0; } }
.t4 { background: linear-gradient(145deg, #8a5a36, #3b2416); }

/* chat that fills in */
.mock__chathead { justify-content: space-between; }
.mock__chatdot { width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.mock__msgs { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.mock__bubble em { display: block; font-style: normal; font-size: 5.5px; font-weight: 700; opacity: 0.65; margin-bottom: 1px; }
.mock__bubble { animation: msg-in 10s var(--spring) infinite both; }
.mock__bubble.b1 { animation-delay: 0s; }
.mock__bubble.b2 { animation-delay: 1.2s; }
.mock__bubble.b3 { animation-delay: 2.6s; }
@keyframes msg-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.9); }
  4%, 86% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-4px); }
}
.mock__typing {
  display: inline-flex;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 7px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  align-self: flex-start;
  animation: msg-in 10s infinite both;
  animation-delay: 3.8s;
}
.mock__typing i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); animation: typing 1s infinite; }
.mock__typing i:nth-child(2) { animation-delay: 0.15s; }
.mock__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-2px); opacity: 1; } }

/* pocket browser with real-looking results and a tap */
.mock__phone-thumbs { position: relative; gap: 7px 6px; }
.pthumb { display: flex; flex-direction: column; gap: 3px; }
.pthumb > i { height: 3px; border-radius: 2px; background: var(--surface-3); }
.pthumb > i.short { width: 60%; }
.pthumb .thumb { position: relative; }
.pthumb .thumb b {
  position: absolute;
  right: 3px;
  bottom: 3px;
  font-size: 5px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 0.5px 3px;
  border-radius: 2px;
}
.th1 { background: linear-gradient(135deg, #f0b97e 0%, #c26a4f 60%, #3a2a3f 100%); }
.th2 { background: linear-gradient(180deg, #1d2f4d 0%, #46628a 60%, #e7a577 100%); }
.th3 { background: linear-gradient(135deg, #a9d3a6, #3d6346); }
.th4 { background: linear-gradient(135deg, #d4a2d6, #5d3a63); }
.mock__tap {
  position: absolute;
  left: 76%;
  top: 22%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: tap 5s ease-out infinite 1s;
}
@keyframes tap {
  0%, 70% { opacity: 0; transform: scale(0.4); }
  74% { opacity: 1; transform: scale(0.8); }
  90%, 100% { opacity: 0; transform: scale(2.2); }
}
.pthumb:nth-child(2) .thumb { animation: picked 5s ease-out infinite 1s; }
@keyframes picked { 0%, 72% { box-shadow: none; } 76%, 92% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: none; } }

@media (prefers-reduced-motion: reduce) {
  .mock *, .mock *::before, .mock *::after { animation: none !important; }
  .mock__bubble, .mock__typing { opacity: 1; }
}