/* Заставка на входе: 2,6 секунды, затем раскрывается в обложку.
   Кольцо-прогресс показывает, сколько осталось, тап пропускает. */
.splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #0E141C;
  color: #F4EDE1;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  -webkit-tap-highlight-color: transparent;
}
.splash::before {                       /* тёплое свечение за монограммой */
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(46% 34% at 50% 40%, rgba(201,162,74,.30), transparent 70%),
    radial-gradient(80% 60% at 50% 120%, rgba(201,162,74,.12), transparent 70%);
  animation: glowIn 2.2s cubic-bezier(.2,.8,.25,1) both;
}
.splash::after {                        /* зерно, чтобы фон не был пластиковым */
  content: ''; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
@keyframes glowIn { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }

.splash__in { position: relative; z-index: 2; text-align: center; padding: 0 24px; }

.splash__frame { position: absolute; inset: 22px; z-index: 2; pointer-events: none;
  animation: subIn 1.2s cubic-bezier(.16,1,.3,1) .3s both; }
.splash__frame i { position: absolute; width: 16px; height: 16px; border: 1px solid rgba(217,179,104,.5); }
.splash__frame i:nth-child(1) { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.splash__frame i:nth-child(2) { right: 0; top: 0;    border-left: 0;  border-bottom: 0; }
.splash__frame i:nth-child(3) { left: 0;  bottom: 0; border-right: 0; border-top: 0; }
.splash__frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0;  border-top: 0; }

/* кольцо с монограммой */
.splash__ring { position: relative; width: 138px; height: 138px; margin: 0 auto 34px; }
.splash__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.splash__ring circle { fill: none; stroke-width: 1.5; }
.splash__ring .tr { stroke: rgba(244,237,225,.14); }
.splash__ring .pr {
  stroke: #D9B368; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  animation: ringDraw 2.45s cubic-bezier(.5,.05,.25,1) .16s both;
  filter: drop-shadow(0 0 7px rgba(217,179,104,.55));
}
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
.splash__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 400 italic 62px/1 'Cormorant', Georgia, serif; color: #E7CB8E;
  animation: monoIn 1.15s cubic-bezier(.16,1,.3,1) .1s both;
}
@keyframes monoIn { from { opacity: 0; transform: scale(.72); filter: blur(9px); }
                    to   { opacity: 1; transform: none; filter: none; } }

/* HAYAT по буквам */
.splash__t {
  font: 800 clamp(30px, 8.6vw, 46px)/1 'Manrope', -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; white-space: nowrap;
}
.splash__t b { display: inline-block; font-weight: 800;
  animation: letterUp .95s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(.44s + var(--i) * .075s); }
@keyframes letterUp { from { opacity: 0; transform: translateY(34px) rotate(4deg); filter: blur(7px); }
                      to   { opacity: 1; transform: none; filter: none; } }

.splash__rule { width: 156px; height: 2px; margin: 26px auto 22px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #D9B368 22%, #F0DCAE 50%, #D9B368 78%, transparent);
  transform-origin: 50% 50%; animation: ruleGrow 1.1s cubic-bezier(.16,1,.3,1) .95s both; }
@keyframes ruleGrow { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

.splash__sub { font: 400 italic clamp(15px, 4.4vw, 19px)/1.5 'Cormorant', Georgia, serif;
  color: rgba(244,237,225,.82);
  animation: subIn 1.05s cubic-bezier(.16,1,.3,1) 1.08s both; }
.splash__city { margin-top: 12px; font: 600 11px/1 'Manrope', -apple-system, sans-serif;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(244,237,225,.5);
  animation: subIn 1.05s cubic-bezier(.16,1,.3,1) 1.26s both; }
@keyframes subIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.splash__by { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; text-align: center;
  font: 700 10.5px/1.5 'Manrope', -apple-system, sans-serif; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,237,225,.42);
  animation: subIn 1.1s cubic-bezier(.16,1,.3,1) 1.5s both; }
.splash__by span { display: block; letter-spacing: .1em; text-transform: none; font-weight: 500;
  font-size: 10px; color: rgba(244,237,225,.3); margin-top: 5px; }

/* уход: содержимое поднимается, шторка открывает презентацию */
.splash.out { animation: splashOut .95s cubic-bezier(.62,0,.17,1) both; }
.splash.out .splash__in, .splash.out .splash__by { animation: contentUp .8s cubic-bezier(.62,0,.17,1) both; }
@keyframes splashOut { to { clip-path: inset(0 0 100% 0); } }
@keyframes contentUp { to { opacity: 0; transform: translateY(-42px); } }

body.splashing { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .splash *, .splash::before { animation-duration: .01s !important; animation-delay: 0s !important; }
}