/*
 * La noche de un cliente nuevo (NightScene, ADR 0034 y 0036): la tienda y un móvil que cuentan la historia
 * en cuatro fotogramas (`data-frame` de `PlayOnView`). El HTML trae el 4 (la mañana): es lo que ve quien
 * no tiene movimiento. Todo el movimiento va detrás de `html[data-motion]`, solo con opacidad, transform
 * y la máscara del círculo, y se pausa con `data-paused` (fuera de pantalla, pestaña oculta).
 *
 * El móvil es una interfaz replicada: sus colores (Google, iOS, el teclado, el mapa) son variables
 * `--g-*`/`--ios-*`/`--k-*`/`--m-*` dentro de `.ns-phone`, como las réplicas de los heros (ADR 0010).
 */

.ns-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}
.ns-pics {
  position: relative;
  justify-self: end;
  width: 100%;
  max-width: 28rem;
}
.ns-light,
.ns-day,
.ns-life {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
}
.ns-day {
  opacity: 0;
}
/* la luz de la mañana entra despacio; al volver a empezar, la noche está de golpe */
.night-scene[data-frame="4"] .ns-day {
  opacity: 1;
  transition: opacity 1.8s ease 0.5s;
}

/* ---------------------------------------------------------------- el teléfono */
.ns-phone {
  --ns-w: 252;
  --ns-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, Arial, sans-serif;
  --ns-body: #0d0e10;
  --ns-edge: #4b4e54;
  --ns-rim: #2a2c30;
  --g-text: #1f1f1f;
  --g-sub: #4d5156;
  --g-muted: #70757a;
  --g-line: #dadce0;
  --g-line-soft: #ebedef;
  --g-blue: #0b57d0;
  --g-caret: #1a73e8;
  --g-star: #fbbc04;
  --g-red: #c5221f;
  --g-pin: #ea4335;
  --g-pin-dot: #a50e0e;
  --g-field-shadow: rgb(32 33 36 / 0.26);
  --m-land: #f2efe9;
  --m-road: #ffffff;
  --m-major: #fde293;
  --m-park: #c8e6c0;
  --m-water: #aad3f6;
  --m-label: #3c4043;
  --k-bg: #d1d4db;
  --k-key: #ffffff;
  --k-fn: #abb0bc;
  --k-shadow: #898a8e;
  --k-go: #0a84ff;
  --k-icon: #50555c;
  --ios-notif: rgb(246 246 248 / 0.9);
  --ios-sub: rgb(60 60 67 / 0.62);
  --ios-btn: rgb(0 0 0 / 0.3);
  --ios-wa: #25d366;
  --wall-night-sky: #0c2620;
  --wall-night-far: #173a31;
  --wall-night-near: #0a1d18;
  --wall-night-ground: #12332b;
  --wall-day-near: #2f5d4f;

  position: relative;
  z-index: 1;
  margin-left: -3.5rem;
  padding: 9px;
  border-radius: 46px;
  background: var(--ns-body);
  box-shadow:
    inset 0 0 0 1.5px var(--ns-edge),
    0 0 0 1px var(--ns-rim);
}
/* botones laterales: acción y volumen a la izquierda, encendido a la derecha */
.ns-phone::before,
.ns-phone::after {
  content: "";
  position: absolute;
  width: 3px;
}
.ns-phone::before {
  left: -3.5px;
  top: 16%;
  height: 26%;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(var(--ns-rim) 0 12%, transparent 12% 25%, var(--ns-rim) 25% 55%, transparent 55% 67%, var(--ns-rim) 67%);
}
.ns-phone::after {
  right: -3.5px;
  top: 27%;
  height: 13%;
  border-radius: 0 2px 2px 0;
  background: var(--ns-rim);
}
.ns-screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(var(--ns-w) * 1px);
  height: calc(var(--ns-w) * 693 / 320 * 1px);
  border-radius: 37px;
  background: var(--m-road);
}
.ns-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 693px;
  transform: scale(calc(var(--ns-w) / 320));
  transform-origin: 0 0;
  font-family: var(--ns-font);
  color: var(--g-text);
  -webkit-font-smoothing: antialiased;
}
.ns-ui p {
  margin: 0;
}
.ns-f {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.night-scene:is([data-frame="0"], [data-frame="1"]) .ns-f1,
.night-scene[data-frame="2"] .ns-f2,
.night-scene[data-frame="3"] .ns-f3,
.night-scene[data-frame="4"] .ns-f4 {
  opacity: 1;
}
.ns-island {
  position: absolute;
  top: 11px;
  left: 110px;
  z-index: 3;
  width: 100px;
  height: 29px;
  border-radius: 15px;
  background: #000;
}
.ns-sleep {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.ns-home {
  position: absolute;
  bottom: 8px;
  left: 101px;
  z-index: 1;
  width: 118px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
}

/* barra de estado */
.ns-sb {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 4px 24px 0 38px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ns-sb-icons {
  display: flex;
  gap: 5px;
  align-items: center;
  fill: currentColor;
}
.ns-sb-signal {
  width: 17px;
}
.ns-sb-wifi {
  width: 15px;
}
.ns-sb-battery {
  width: 25px;
}

/* --------------------------------------------------------- 1 · la búsqueda */
.ns-ico {
  flex: none;
  width: 22px;
  height: 22px;
  fill: var(--g-muted);
}
.ns-field {
  position: absolute;
  top: 56px;
  right: 12px;
  left: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  border-radius: 23px;
  background: var(--m-road);
  box-shadow: 0 1px 6px var(--g-field-shadow);
  font-size: 16px;
}
.ns-field-q {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.ns-caret {
  flex: none;
  width: 2px;
  height: 20px;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--g-caret);
  opacity: 0;
}
.ns-sugg {
  position: absolute;
  top: 114px;
  right: 0;
  left: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ns-sugg li {
  display: flex;
  gap: 16px;
  align-items: center;
  height: 48px;
  padding: 0 18px 0 24px;
  font-size: 15.5px;
}
.ns-sugg-t {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ns-sugg b {
  font-weight: 700;
}
.ns-ico-fill {
  width: 17px;
  height: 17px;
}
.ns-kb {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 252px;
  padding: 8px 3px 0;
  background: var(--k-bg);
  color: #000;
}
.ns-kb-row {
  display: flex;
  gap: 5.4px;
  justify-content: center;
  margin-bottom: 10px;
}
.ns-key {
  display: grid;
  flex: 0 0 26.4px;
  place-items: center;
  height: 37px;
  border-radius: 5px;
  background: var(--k-key);
  box-shadow: 0 1px 0 var(--k-shadow);
  font-size: 21px;
  line-height: 1;
}
.ns-key svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}
.ns-key-fn {
  background: var(--k-fn);
}
.ns-key-wide {
  flex-basis: 37px;
}
.ns-kb-row:nth-child(3) .ns-key-wide:first-child {
  margin-right: 6px;
}
.ns-kb-row:nth-child(3) .ns-key-wide:last-child {
  margin-left: 6px;
}
.ns-key-num {
  flex-basis: 40px;
  font-size: 15px;
}
.ns-key-space {
  flex: 1;
  font-size: 15px;
}
.ns-key-go {
  flex-basis: 84px;
  background: var(--k-go);
  color: var(--m-road);
  font-size: 15px;
}
.ns-kb-foot {
  display: flex;
  justify-content: space-between;
  padding: 4px 22px 0;
}
.ns-kb-foot svg {
  width: 25px;
  height: 25px;
  fill: var(--k-icon);
}

/* --------------------------------------------------------- 2 · los resultados */
.ns-field-res {
  top: 54px;
  height: 44px;
}
.ns-tabs {
  position: absolute;
  top: 106px;
  right: 0;
  left: 0;
  display: flex;
  gap: 22px;
  height: 38px;
  padding: 0 20px;
  border-bottom: 1px solid var(--g-line-soft);
  font-size: 14px;
  color: var(--g-muted);
}
.ns-tabs span {
  position: relative;
  padding-top: 8px;
}
.ns-tabs .ns-tab-on {
  color: var(--g-text);
  font-weight: 600;
}
.ns-tab-on::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--g-text);
}
.ns-pack {
  position: absolute;
  top: 156px;
  right: 12px;
  left: 12px;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--m-road);
}
.ns-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px 13px 0 0;
}
/* El bloque no recorta (el círculo puede salir un poco por la izquierda); el mapa, sí, por sus esquinas. */
.ns-pack > :first-child {
  overflow: hidden;
  border-radius: 13px 13px 0 0;
}
.ns-map-land {
  fill: var(--m-land);
}
.ns-map-water {
  fill: var(--m-water);
}
.ns-map-park {
  fill: var(--m-park);
}
.ns-map-road-minor path {
  fill: none;
  stroke: var(--m-road);
  stroke-width: 4;
}
.ns-map-road path {
  fill: none;
  stroke: var(--m-major);
  stroke-width: 7;
}
.ns-map-label {
  font:
    600 10.5px var(--ns-font);
  fill: var(--m-label);
  paint-order: stroke;
  stroke: var(--m-road);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.ns-pin {
  fill: var(--g-pin);
}
.ns-pin-dot {
  fill: var(--g-pin-dot);
}
/* Aire a la izquierda y entre el texto y los botones: el círculo rodea el resultado sin tocar nada (ronda 6). */
.ns-place {
  padding: 16px 0 16px 22px;
}
.ns-place + .ns-place {
  border-top: 1px solid var(--g-line-soft);
}
.ns-place-txt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 176px;
  height: 84px;
  font-size: 13.5px;
  line-height: 18px;
  white-space: nowrap;
  color: var(--g-sub);
}
.ns-place-name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--g-text);
}
.ns-place-rate {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ns-stars {
  display: inline-flex;
}
.ns-stars svg {
  width: 12px;
  height: 12px;
  fill: var(--g-star);
}
.ns-muted {
  color: var(--g-muted);
}
.ns-closed {
  color: var(--g-red);
}
.ns-chips {
  display: flex;
  gap: 8px;
  margin-top: 48px;
  white-space: nowrap;
}
.ns-chip {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--g-blue);
}
.ns-chip-ico {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* --------------------------------------------------------- 3 y 4 · la pantalla bloqueada */
.ns-lock {
  position: absolute;
  inset: 0;
  color: var(--m-road);
}
.ns-lock-day {
  color: var(--pino);
}
.ns-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ns-lock-night .ns-wall-sky {
  fill: var(--wall-night-sky);
}
.ns-lock-night .ns-wall-sun {
  fill: var(--ocre-soft);
}
.ns-lock-night .ns-wall-far {
  fill: var(--wall-night-far);
}
.ns-lock-night .ns-wall-near {
  fill: var(--wall-night-near);
}
.ns-lock-night .ns-wall-ground {
  fill: var(--wall-night-ground);
}
.ns-lock-day .ns-wall-sky {
  fill: var(--cartulina);
}
.ns-lock-day .ns-wall-sun {
  fill: var(--ocre);
}
.ns-lock-day .ns-wall-far {
  fill: var(--pino-soft);
}
.ns-lock-day .ns-wall-near {
  fill: var(--wall-day-near);
}
.ns-lock-day .ns-wall-ground {
  fill: var(--pino);
}
.ns-lock-pad {
  position: absolute;
  top: 48px;
  left: 153px;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.ns-lock-date {
  position: absolute;
  top: 70px;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  opacity: 0.88;
}
.ns-lock-time {
  position: absolute;
  top: 90px;
  width: 100%;
  font-size: 86px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}
.ns-notif {
  position: absolute;
  top: 214px;
  right: 10px;
  left: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px 13px 12px;
  border-radius: 20px;
  background: var(--ios-notif);
  color: #000;
}
.ns-notif-app {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--ios-wa);
}
.ns-notif-app svg {
  width: 23px;
  height: 23px;
  fill: var(--m-road);
}
.ns-notif-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ns-notif-head {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}
.ns-notif-ago {
  font-size: 13px;
  font-weight: 400;
  color: var(--ios-sub);
}
.ns-notif-msg {
  font-size: 15px;
  line-height: 20px;
}
.ns-lock-btn {
  position: absolute;
  bottom: 42px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ios-btn);
}
.ns-lock-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--m-road);
}
.ns-lock-btn-l {
  left: 40px;
}
.ns-lock-btn-r {
  right: 40px;
}

/* ---------------------------------------------------------------- las horas */
.ns-step {
  position: relative;
  padding-left: 0.9rem;
}
.ns-step::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 2px;
  background: var(--ocre);
  opacity: 0;
  transform: scaleY(0.3);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.night-scene[data-frame="1"] .ns-step[data-step="1"]::before,
.night-scene[data-frame="2"] .ns-step[data-step="2"]::before,
.night-scene[data-frame="3"] .ns-step[data-step="3"]::before,
.night-scene[data-frame="4"] .ns-step[data-step="4"]::before {
  opacity: 1;
  transform: none;
}

@media (max-width: 47.99rem) {
  .ns-phone {
    --ns-w: 196;
    margin-left: -3rem;
    padding: 7px;
    border-radius: 36px;
  }
  .ns-screen {
    border-radius: 29px;
  }
}

/* ---------------------------------------------------------------- solo con movimiento */
html[data-motion] .night-scene[data-frame="0"] .ns-light {
  opacity: 0;
}
html[data-motion] .night-scene[data-frame="1"] .ns-light {
  animation: ns-flicker 1s ease 0.15s both;
}
html[data-motion] .night-scene[data-frame="0"] :is(.ns-q, .ns-sugg li) {
  opacity: 0;
}
html[data-motion] .night-scene[data-frame="1"] .ns-q {
  animation: ns-type 1.4s steps(17, end) 0.3s both;
}
html[data-motion] .night-scene[data-frame="1"] .ns-caret {
  animation: ns-blink 0.9s linear 1.7s 2 both;
}
html[data-motion] .night-scene[data-frame="1"] .ns-sugg li {
  animation: ns-settle 0.35s ease calc(0.75s + var(--i) * 0.12s) both;
}
html[data-motion] .night-scene[data-frame="1"] .ns-key-go {
  animation: ns-press 0.3s ease 2.25s both;
}
html[data-motion] .night-scene[data-frame="2"] .ns-in {
  animation: ns-settle 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.12s + var(--i) * 0.08s) both;
}
html[data-motion] .night-scene[data-frame="2"] .ns-ring .marker-ring-draw {
  animation: ns-draw 0.95s cubic-bezier(0.55, 0.1, 0.3, 1) 0.85s both;
}
html[data-motion] .night-scene[data-frame="3"] .ns-sleep {
  animation: ns-wake 0.9s ease both;
}
html[data-motion] .night-scene[data-frame="3"] .ns-notif {
  animation: ns-drop 0.75s cubic-bezier(0.25, 0.8, 0.3, 1) 0.55s both;
}
html[data-motion] .night-scene[data-frame="4"] .ns-sleep {
  animation: ns-night 1.7s ease both;
}
html[data-motion] .night-scene[data-frame="4"] :is(.ns-f3, .ns-f4) {
  transition-delay: 0.55s;
  transition-duration: 0.1s;
}
html[data-motion] .night-scene .ns-step {
  transition: opacity 0.35s ease;
}
html[data-motion] .night-scene[data-frame="0"] .ns-step,
html[data-motion] .night-scene[data-frame="1"] .ns-step:not([data-step="1"]),
html[data-motion] .night-scene[data-frame="2"] .ns-step:is([data-step="3"], [data-step="4"]),
html[data-motion] .night-scene[data-frame="3"] .ns-step[data-step="4"] {
  /* Lo que aún no ha pasado, apagado pero legible. gt11: al 82 % (antes 62 %), la hora en Ocre, también su «p.m.»
     pequeño, sigue por encima de 4,5:1 sobre Pino (4,9:1; el texto en Papel, 7,7:1). */
  opacity: 0.82;
}
/* Acabada la historia, lo único vivo: la marca de la hora, que respira muy despacio. */
html[data-motion] .night-scene[data-done] .ns-step[data-step="4"]::before {
  animation: ns-breathe 4.5s ease-in-out infinite alternate;
}
.night-scene[data-paused] :is(*, *::before) {
  animation-play-state: paused !important;
}

@keyframes ns-flicker {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.75;
  }
  26% {
    opacity: 0.15;
  }
  40% {
    opacity: 0.9;
  }
  48% {
    opacity: 0.55;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ns-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes ns-blink {
  0%,
  8% {
    opacity: 0;
  }
  10%,
  50% {
    opacity: 1;
  }
  52%,
  100% {
    opacity: 0;
  }
}
@keyframes ns-settle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes ns-press {
  50% {
    opacity: 0.6;
  }
}
@keyframes ns-draw {
  from {
    stroke-dashoffset: 1.02;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ns-wake {
  0%,
  40% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* el aviso nace justo encima de su sitio (sin cruzar la hora) y se asienta con un rebote corto */
@keyframes ns-drop {
  0% {
    opacity: 0;
    transform: translateY(-44px) scale(0.96);
  }
  35% {
    opacity: 1;
  }
  66% {
    transform: translateY(4px) scale(1);
  }
  84% {
    transform: translateY(-1.5px);
  }
  100% {
    transform: none;
  }
}
@keyframes ns-night {
  0% {
    opacity: 0;
  }
  30%,
  58% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ns-breathe {
  to {
    opacity: 0.35;
  }
}