/* Общее для всех прототипов: сброс, заглушки фото, переключатель вариантов */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- Заглушки фото ----------
   .ph + data-tone="gold|blush|sage|stage|crowd|night|mono|linen"
   data-label — подпись, что здесь должно быть за кадр */
.ph {
  position: relative;
  overflow: hidden;
  background: #444;
  isolation: isolate;
}
.ph::before { /* плёночное зерно */
  content: "";
  position: absolute; inset: 0;
  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%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}
.ph[data-label]::after {
  content: attr(data-label);
  position: absolute; left: 10px; bottom: 10px;
  z-index: 2;
  font: 500 10px/1.2 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
  padding: 5px 7px;
  border-radius: 3px;
  max-width: calc(100% - 20px);
}
.ph[data-tone="gold"] {
  background:
    radial-gradient(60% 50% at 72% 28%, #ffe2a8 0%, rgba(255,214,150,0) 70%),
    radial-gradient(50% 60% at 18% 85%, #5a3320 0%, rgba(90,51,32,0) 70%),
    linear-gradient(160deg, #d3a370 0%, #8a5a36 55%, #2e1c12 100%);
}
.ph[data-tone="blush"] {
  background:
    radial-gradient(55% 45% at 30% 30%, #fff1ea 0%, rgba(255,241,234,0) 70%),
    radial-gradient(60% 60% at 80% 80%, #b77a78 0%, rgba(183,122,120,0) 70%),
    linear-gradient(200deg, #e9c3b6 0%, #c99a92 60%, #6e4a48 100%);
}
.ph[data-tone="sage"] {
  background:
    radial-gradient(50% 40% at 65% 20%, #f1f0dc 0%, rgba(241,240,220,0) 70%),
    radial-gradient(70% 60% at 20% 90%, #2f3c2c 0%, rgba(47,60,44,0) 70%),
    linear-gradient(170deg, #a9b49a 0%, #66745c 55%, #233020 100%);
}
.ph[data-tone="stage"] {
  background:
    radial-gradient(30% 45% at 28% 12%, rgba(255,70,150,.95) 0%, rgba(255,70,150,0) 70%),
    radial-gradient(30% 45% at 74% 10%, rgba(70,110,255,.95) 0%, rgba(70,110,255,0) 70%),
    radial-gradient(60% 30% at 50% 100%, rgba(255,170,60,.55) 0%, rgba(255,170,60,0) 70%),
    conic-gradient(from 200deg at 50% -10%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.12) 8deg, rgba(255,255,255,0) 16deg, rgba(255,255,255,0) 30deg, rgba(255,255,255,.1) 36deg, rgba(255,255,255,0) 44deg),
    #0c0a14;
}
.ph[data-tone="crowd"] {
  background:
    radial-gradient(45% 35% at 50% 18%, #ffc46b 0%, rgba(255,196,107,0) 70%),
    radial-gradient(90% 40% at 50% 100%, #000 0%, rgba(0,0,0,0) 80%),
    linear-gradient(180deg, #8c4b1e 0%, #3a1d0c 60%, #0d0704 100%);
}
.ph[data-tone="night"] {
  background:
    radial-gradient(35% 30% at 70% 30%, #9fb6ff 0%, rgba(159,182,255,0) 70%),
    radial-gradient(60% 50% at 25% 80%, #1b1440 0%, rgba(27,20,64,0) 70%),
    linear-gradient(170deg, #34407a 0%, #161a38 60%, #07080f 100%);
}
.ph[data-tone="mono"] {
  background:
    radial-gradient(50% 45% at 60% 30%, #e8e8e8 0%, rgba(232,232,232,0) 70%),
    linear-gradient(165deg, #9a9a9a 0%, #4a4a4a 60%, #141414 100%);
}
.ph[data-tone="linen"] {
  background:
    radial-gradient(60% 50% at 35% 25%, #fffaf0 0%, rgba(255,250,240,0) 70%),
    radial-gradient(60% 60% at 85% 90%, #b9a58a 0%, rgba(185,165,138,0) 70%),
    linear-gradient(190deg, #e8dcc8 0%, #cbb89a 60%, #8d7a5f 100%);
}

/* ---------- Переключатель вариантов ---------- */
.proto-bar {
  position: fixed; left: 12px; bottom: 12px; z-index: 9999;
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  background: rgba(20,20,20,.82);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.proto-bar a {
  color: #ddd; text-decoration: none;
  padding: 7px 10px; border-radius: 999px;
}
.proto-bar a:hover { background: rgba(255,255,255,.12); }
.proto-bar a[aria-current="page"] { background: #fff; color: #111; }
.proto-bar .lbl { color: #888; padding: 0 6px 0 8px; }
@media (max-width: 560px) { .proto-bar .lbl { display: none; } }

/* Тост для демо-действий */
.proto-toast {
  position: fixed; left: 50%; bottom: 72px; z-index: 10000;
  transform: translate(-50%, 20px);
  opacity: 0;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  background: #111; color: #eee;
  border-radius: 10px;
  font: 400 14px/1.4 system-ui, sans-serif;
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.proto-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Появление при скролле: только где поддерживается и движение не отключено */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *, html:not([data-motion="full"]) *::before, html:not([data-motion="full"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}