/*
Theme Name: VolkovNikita.ru — Coming Soon
Theme URI: https://volkovnikita.ru
Author: Nikita Volkov
Description: Адаптивная анимированная заглушка для сайта volkovnikita.ru.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: volkovnikita-coming-soon
*/


:root {
  --ink: #f3f0e9;
  --muted: rgba(243, 240, 233, 0.5);
  --accent: #d7b273;
  --bg: #080908;
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
}

body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.055), transparent 29%),
    radial-gradient(circle at 12% 82%, rgba(215, 178, 115, 0.07), transparent 25%),
    linear-gradient(135deg, #0c0d0c 0%, #050605 54%, #0b0b0a 100%);
}

.coming-soon::before {
  position: absolute;
  inset: 24px;
  z-index: 8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  content: "";
  pointer-events: none;
}

.noise {
  position: absolute;
  inset: -100%;
  z-index: 20;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation: grain 0.22s steps(2) infinite;
}

.light-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -22%;
  width: 18%;
  z-index: 1;
  filter: blur(24px);
  opacity: 0;
  transform: rotate(13deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 218, 0.11), transparent);
  animation: sweep 9s ease-in-out infinite;
}

.edition,
.location {
  position: absolute;
  top: 48px;
  z-index: 10;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.edition { left: 48px; }
.location { right: 48px; }

.centerpiece {
  position: relative;
  z-index: 10;
  display: flex;
  width: min(88vw, 1040px);
  min-height: 280px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.eyebrow {
  margin: 0 0 20px;
  color: rgba(243, 240, 233, 0.58);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

h1 {
  position: relative;
  margin: 0;
  font-size: clamp(3rem, 9.3vw, 9rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.9;
  text-shadow: 0 0 42px rgba(255, 255, 255, 0.08);
  animation: title-in 1.2s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

h1::after {
  position: absolute;
  right: 0.02em;
  bottom: -0.16em;
  width: 0.33em;
  height: 2px;
  content: "";
  background: var(--accent);
  box-shadow: 0 0 20px rgba(215, 178, 115, 0.55);
  animation: accent-breathe 4s ease-in-out infinite;
}

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: rgba(243, 240, 233, 0.7);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(215, 178, 115, 0.45);
  animation: pulse 2.8s ease-out infinite;
}

.focus-box {
  position: absolute;
  inset: -70px -42px;
  opacity: 0.38;
  animation: focus 6s ease-in-out infinite;
}

.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: rgba(243, 240, 233, 0.65);
  border-style: solid;
}

.corner-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.corner-br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }

.aperture {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(66vw, 720px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 50%;
  animation: aperture-spin 38s linear infinite;
}

.aperture::before,
.aperture::after,
.aperture span {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255, 255, 255, 0.024);
  border-radius: 47% 53% 58% 42% / 43% 46% 54% 57%;
  content: "";
}

.aperture::after { inset: 23%; transform: rotate(62deg); }
.aperture span:nth-child(1) { inset: 17%; transform: rotate(22deg); }
.aperture span:nth-child(2) { inset: 31%; transform: rotate(96deg); }
.aperture span:nth-child(3) { inset: 39%; transform: rotate(143deg); }

.frames {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.frame {
  position: absolute;
  width: clamp(120px, 14vw, 220px);
  padding: 7px 7px 23px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(18, 18, 17, 0.62);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(7px);
  opacity: 0.48;
  animation: float 9s ease-in-out infinite;
}

.frame span {
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: rgba(255, 255, 255, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.frame-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #181918;
}

.frame-one { top: 14%; left: 4%; transform: rotate(-8deg); }
.frame-one .frame-image {
  background:
    radial-gradient(ellipse at 54% 69%, rgba(232, 176, 88, 0.72) 0 5%, transparent 6%),
    linear-gradient(130deg, transparent 33%, rgba(215, 178, 115, 0.28) 34% 38%, transparent 39%),
    radial-gradient(circle at 62% 52%, #2d2c29 0 13%, #111 14% 25%, transparent 26%),
    linear-gradient(145deg, #151614, #303027 47%, #0b0c0b 48%);
}

.frame-two { top: 11%; right: 6%; transform: rotate(7deg); animation-delay: -3s; }
.frame-two .frame-image {
  background:
    linear-gradient(90deg, transparent 36%, rgba(255, 255, 255, 0.18) 37% 39%, transparent 40%),
    radial-gradient(ellipse at 52% 61%, #42433f 0 11%, #181817 12% 27%, transparent 28%),
    linear-gradient(45deg, #090a09, #232421);
}

.frame-three { bottom: 10%; left: 9%; transform: rotate(6deg); animation-delay: -6s; }
.frame-three .frame-image {
  background:
    radial-gradient(ellipse at 48% 58%, rgba(187, 190, 174, 0.65) 0 12%, #1a1b19 13% 28%, transparent 29%),
    linear-gradient(115deg, #0c0d0c 25%, #34352e 26% 43%, #111210 44%);
}

.frame-four { right: 3%; bottom: 12%; transform: rotate(-6deg); animation-delay: -4.5s; }
.frame-four .frame-image {
  background:
    radial-gradient(circle at 55% 56%, rgba(215, 178, 115, 0.58) 0 8%, #1d1e1b 9% 22%, transparent 23%),
    linear-gradient(155deg, #121311, #39352b 49%, #090a09 50%);
}

.camera-data {
  position: absolute;
  right: 50%;
  bottom: 48px;
  z-index: 10;
  display: flex;
  gap: 26px;
  transform: translateX(50%);
  color: rgba(243, 240, 233, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.17em;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #f7f4ed;
  opacity: 0;
  pointer-events: none;
  animation: flash 10s ease-in-out infinite;
}

@keyframes title-in {
  from { opacity: 0; filter: blur(16px); transform: scale(0.97); letter-spacing: -0.1em; }
  to { opacity: 1; filter: blur(0); transform: scale(1); letter-spacing: -0.075em; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -18px; }
}

@keyframes focus {
  0%, 100% { opacity: 0.28; transform: scale(1.02); }
  48%, 58% { opacity: 0.55; transform: scale(0.97); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(215, 178, 115, 0.42); }
  65%, 100% { box-shadow: 0 0 0 10px rgba(215, 178, 115, 0); }
}

@keyframes accent-breathe {
  50% { width: 0.7em; opacity: 0.55; }
}

@keyframes aperture-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sweep {
  0%, 8% { left: -22%; opacity: 0; }
  18% { opacity: 1; }
  47%, 100% { left: 112%; opacity: 0; }
}

@keyframes flash {
  0%, 66%, 68%, 100% { opacity: 0; }
  66.35% { opacity: 0.11; }
  66.7% { opacity: 0; }
  67.05% { opacity: 0.045; }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(3%, -2%); }
  50% { transform: translate(-2%, 3%); }
  75% { transform: translate(2%, 2%); }
  100% { transform: translate(-3%, -1%); }
}

@media (max-width: 700px) {
  .coming-soon::before { inset: 12px; }
  .edition, .location { top: 29px; font-size: 7px; letter-spacing: 0.2em; }
  .edition { left: 28px; }
  .location { right: 28px; }
  .centerpiece { min-height: 205px; width: 91vw; }
  .eyebrow { margin-bottom: 15px; font-size: 8px; letter-spacing: 0.26em; }
  h1 { font-size: clamp(2.85rem, 14.2vw, 5rem); letter-spacing: -0.085em; }
  .focus-box { inset: -48px -12px; }
  .corner { width: 20px; height: 20px; }
  .frame { width: 106px; padding: 5px 5px 17px; opacity: 0.31; }
  .frame span { right: 5px; bottom: 5px; font-size: 5px; }
  .frame-one { top: 16%; left: -32px; }
  .frame-two { top: 15%; right: -39px; }
  .frame-three { bottom: 13%; left: -46px; }
  .frame-four { right: -34px; bottom: 14%; }
  .aperture { width: 108vw; }
  .camera-data { bottom: 28px; gap: 14px; font-size: 6px; }
  .status { margin-top: 23px; font-size: 8px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .frame-three, .frame-four { display: none; }
  .focus-box { inset: -38px -30px; }
  .edition, .location { top: 28px; }
  .camera-data { bottom: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

body.admin-bar .coming-soon { min-height: calc(100svh - 32px); }
@media (max-width: 782px) { body.admin-bar .coming-soon { min-height: calc(100svh - 46px); } }