:root{
  --bg:#ffd9e4;
  --bg-2:#ffeef3;
  --rose:#ff6f9c;
  --rose-deep:#e04a76;
  --ink:#5a2a3c;
  --white:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Jost',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bg-2) 0%, var(--bg) 55%, #ffc6d7 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.svg-defs{position:absolute}

.stage{
  width:100%;
  padding:8px;
  display:flex;
  justify-content:center;
}

/* ---------- сердце ---------- */
.heart-wrap{
  position:relative;
  height:min(96vh, calc(96vw * 0.94), 1000px);
  width:auto;
  aspect-ratio:1/0.94;
  animation:beat 3.4s ease-in-out infinite;
}
@keyframes beat{
  0%,100%{transform:scale(1)}
  8%{transform:scale(1.035)}
  16%{transform:scale(1)}
  24%{transform:scale(1.02)}
  32%{transform:scale(1)}
}

.heart{
  position:absolute;
  inset:0;
  background:var(--white);
  -webkit-clip-path:url(#heartClip);
  clip-path:url(#heartClip);
  filter:drop-shadow(0 24px 50px rgba(180,60,100,.28));
}

/* мозаика из фото — пока пустая, сердце белое */
.mosaic{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-auto-rows:1fr;
  gap:2px;
}
.mosaic img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- окно ввода ---------- */
.gate{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  width:min(62%,420px);
  text-align:center;
  z-index:2;
}
.gate-form{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,111,156,.35);
  border-radius:999px;
  padding:7px 7px 7px 20px;
  box-shadow:0 10px 26px rgba(190,70,110,.18);
}
.gate-input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  outline:none;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(18px,3.4vmin,26px);
  letter-spacing:.14em;
  color:var(--ink);
  text-align:center;
}
.gate-input::placeholder{
  font-style:italic;
  letter-spacing:.05em;
  color:#cf8fa6;
}
.gate-btn{
  flex:none;
  width:clamp(38px,7vmin,50px);
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  background:var(--rose);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.gate-btn:hover{background:var(--rose-deep);transform:scale(1.08)}
.gate-btn:active{transform:scale(.94)}
.gate-btn:focus-visible,.gate-input:focus-visible{outline:2px solid var(--rose-deep);outline-offset:3px}
.gate-btn svg{width:52%}

.gate-hint{
  margin:14px 0 0;
  font-size:clamp(12px,2.2vmin,15px);
  letter-spacing:.16em;
  text-transform:lowercase;
  color:#b5687f;
  min-height:1.2em;
  transition:color .2s ease;
}
.gate-hint.error{color:var(--rose-deep)}

/* тряска при ошибке */
.shake{animation:shake .45s ease}
@keyframes shake{
  0%,100%{transform:translate(-50%,-50%)}
  20%{transform:translate(calc(-50% - 9px),-50%)}
  40%{transform:translate(calc(-50% + 9px),-50%)}
  60%{transform:translate(calc(-50% - 6px),-50%)}
  80%{transform:translate(calc(-50% + 6px),-50%)}
}

/* уход страницы после верного пароля */
body.leaving .heart-wrap{
  animation:none;
  transform:scale(1.35);
  opacity:0;
  transition:transform .9s cubic-bezier(.6,0,.3,1), opacity .9s ease;
}

@media (prefers-reduced-motion:reduce){
  .heart-wrap{animation:none}
  .shake{animation:none}
}