@font-face{
  font-family:'Ekaterina';
  src:url('assets/fonts/ekaterina.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --black:#0A0A0A;
  --white:#FAFAFA;
  --red:#E01B1B;
  /* difference вычитает цвет из подложки. чтобы на белом (#FAFAFA) получился
     наш красный (#E01B1B), рисовать надо 250-224, 250-27, 250-27 → #1ADFDF */
  --dvd-src:#1ADFDF;
  --pink:#FF8FA8;
  --grey:#8C8C8C;
  --grotesk:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --shadow-white:2px 0 var(--white),-2px 0 var(--white),0 2px var(--white),0 -2px var(--white),
                 1.5px 1.5px var(--white),-1.5px 1.5px var(--white),1.5px -1.5px var(--white),-1.5px -1.5px var(--white);
  --pad:max(14px,env(safe-area-inset-left));
  --pad-b:max(14px,env(safe-area-inset-bottom));
  /* реальная видимая высота: dvh как база, JS уточняет в --vh */
  --vh:100vh;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

@supports (height:100dvh){:root{--vh:100dvh}}

html,body{
  height:var(--vh);
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--white);
  color:var(--black);
  font-family:var(--grotesk);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
body{position:fixed;top:0;left:0;width:100%;height:var(--vh);touch-action:none;user-select:none;-webkit-user-select:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ============ ЗАГРУЗКА ============ */
.loader{
  position:fixed;top:0;left:0;width:100%;height:var(--vh);z-index:100;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:var(--white);
  transition:opacity .5s ease,visibility .5s;
}
.loader.gone{opacity:0;visibility:hidden}
.loader-star{
  width:min(30vw,140px);aspect-ratio:1;fill:var(--black);
  animation:spin 1.9s cubic-bezier(.55,.1,.45,.9) infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader.ready .loader-star{animation-duration:1.1s}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ КАРКАС ============ */
.app{position:fixed;top:0;left:0;width:100%;height:var(--vh);overflow:hidden}
.screen{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .45s cubic-bezier(.6,0,.2,1),transform .45s cubic-bezier(.6,0,.2,1),visibility .45s;
  background:var(--white);
}
.screen.active{opacity:1;visibility:visible;transform:none}
.screen.past{opacity:0;visibility:hidden;transform:translateY(-26px)}
.screen-dark{background:var(--black);color:var(--white)}

/* точки-звёздочки */
.dots{
  position:absolute;left:0;right:0;bottom:calc(var(--pad-b) - 4px);z-index:30;
  display:flex;justify-content:space-between;align-items:flex-end;gap:2px;
  padding:0 var(--pad);
  pointer-events:none;
}
.dots .dot{
  flex:1 1 0;min-width:0;display:block;
  padding:8px 0 0;background:none;border:0;
  pointer-events:none;-webkit-tap-highlight-color:transparent;
}
.dots .dot.seen{pointer-events:auto;cursor:pointer}
.dots .dot.seen:active svg{opacity:.85}
.dots svg{
  display:block;width:100%;height:33px;fill:currentColor;opacity:.22;
  transition:opacity .35s,fill .35s;
}
.dots.on-dark{color:var(--white)}
.dots:not(.on-dark){color:var(--black)}
.dots .dot.seen svg{opacity:.55}
.dots .dot.now svg{opacity:1;fill:var(--red)}

/* кнопка звука — тот же шрифт, что у летающих «а — апупенная» */
.sound{
  position:absolute;z-index:40;top:max(12px,env(safe-area-inset-top));right:var(--pad);
  padding:4px 2px;background:none;border:0;
  font-size:clamp(13px,3.9vw,22px);line-height:1;white-space:nowrap;
  font-weight:800;letter-spacing:-.005em;color:var(--grey);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s;
}
.sound:active{opacity:.55}

/* «ещё раз» — та же звезда, что крутилась на загрузке */
.replay{
  position:absolute;left:50%;bottom:calc(var(--pad-b) + 122px);z-index:4;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.16em;color:var(--grey);
  opacity:0;pointer-events:none;
  transition:opacity .6s ease;
}
.screen.active .replay{opacity:1;pointer-events:auto;transition-delay:1.6s}
.replay svg{width:24px;height:24px;fill:var(--red);animation:spin 4.5s linear infinite}
.replay:active{color:var(--black)}

.hint{
  position:absolute;left:0;right:0;bottom:calc(var(--pad-b) + 50px);
  text-align:center;font-size:11px;letter-spacing:.16em;color:var(--grey);
  animation:breathe 2.6s ease-in-out infinite;
}

/* ============ 1 · ДОРОГАЯ / ФОТО / АИША ============ */
#s1{display:flex;align-items:center;justify-content:center;padding:0}
.s1-stack{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center}
.line{
  position:relative;width:100%;line-height:.82;
  font-weight:900;letter-spacing:-.01em;text-align:center;
  white-space:nowrap;
}
.line .ink-wrap{display:inline-block;position:relative;transform-origin:50% 50%;will-change:transform}
.line .ink{display:block}
.line .over{
  position:absolute;left:0;top:0;color:var(--white);
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
.line-a{font-size:15vw;z-index:2}
.line-b{font-size:28vw;z-index:2}
.s1-photo{position:relative;z-index:1;width:100%;margin:2.2vh 0}
.s1-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:55% 38%}

@media (min-width:760px) and (orientation:landscape){
  .s1-stack{max-width:min(1100px,92vw)}
  .line-a{font-size:min(9vw,7.6vh)}
  .line-b{font-size:min(17vw,15vh)}
  .s1-photo{margin:0;z-index:1}
  .line-a{margin-bottom:-.42em}
  .line-b{margin-top:-.44em}
  .s1-photo img{aspect-ratio:auto;max-height:52vh;object-fit:cover;object-position:center 32%}
}

/* DVD-надписи: все четыре одновременно, режим наложения difference */
.dvd{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  mix-blend-mode:difference;
}
.dvd-item{
  position:absolute;top:0;left:0;display:inline-flex;align-items:baseline;gap:.24em;
  font-size:clamp(13px,3.9vw,22px);font-weight:800;letter-spacing:-.005em;
  color:var(--dvd-src);white-space:nowrap;
  will-change:transform;
}
.dvd-item .key{position:relative}
.dvd-item .key::after{
  content:'';position:absolute;left:0;right:0;bottom:-.14em;height:.09em;background:var(--dvd-src);border-radius:2px;
}

/* ============ 2 · ПОЗДРАВЛЯЮ ============ */
#s2,#s5{display:flex;align-items:center;justify-content:center;padding:0 var(--pad)}
.bgvid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
  filter:brightness(1.22) contrast(1.04) saturate(1.05);
}
.scrim{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(125% 78% at 50% 46%,rgba(10,10,10,.26) 0%,rgba(10,10,10,.66) 60%,rgba(10,10,10,.9) 100%);
}
.type{
  position:relative;z-index:2;
  font-family:'Ekaterina',Georgia,serif;font-weight:400;
  font-size:clamp(34px,11.2vw,72px);line-height:1.06;letter-spacing:.005em;
  text-align:center;max-width:15ch;
  text-wrap:balance;
}
.caret{
  display:inline-block;vertical-align:.06em;
  width:.34em;height:.34em;fill:var(--red);margin-left:.1em;
  opacity:0;transition:opacity .2s;
}
.type.typing .caret,.type.done .caret{opacity:1}
.type.done .caret{animation:blink 1.15s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ============ 3 · ПОЛАРОИДЫ ============ */
#s3{display:flex;align-items:center;justify-content:center}
.deck{
  position:relative;
  width:min(74vw,300px);aspect-ratio:1/1.19;
  perspective:1000px;
}
.card{
  position:absolute;inset:0;
  background:var(--white);
  padding:10px 10px 44px;
  box-shadow:0 12px 34px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  transform-origin:50% 100%;
  transition:transform .55s cubic-bezier(.5,0,.2,1),opacity .5s ease;
  will-change:transform;
}
.card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#151515}
.card.placed{
  transform-origin:50% 50%;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  transition:transform .72s cubic-bezier(.34,.9,.3,1),box-shadow .72s ease;
}
/* собрались в сердце — оно бьётся и по нему же идёт переход дальше */
.deck.done{cursor:pointer;transform-origin:50% 58%;animation:heartbeat 1.7s ease-in-out infinite}
@keyframes heartbeat{
  0%,100%{transform:scale(1)}
  12%{transform:scale(1.055)}
  24%{transform:scale(1)}
  36%{transform:scale(1.032)}
  50%{transform:scale(1)}
}

/* ============ 4 · ЦВЕТЫ ============ */
#s4{display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) var(--pad) calc(var(--pad-b) + 78px)}
#s4 .s4-title,#s4 .garden,#s4 .hint{position:relative;z-index:2}
#s4 .hint{position:absolute}
/* лестница снята при дневном свете и слишком светлая: белые цветы на ней
   теряются, да и разметка приложения камеры проступает. Гасим сильнее, чем на 2 экране */
#s4 .bgvid{filter:brightness(.5) contrast(1.06) saturate(.85)}
#s4 .scrim{background:
  radial-gradient(130% 80% at 50% 46%,rgba(10,10,10,.3) 0%,rgba(10,10,10,.6) 60%,rgba(10,10,10,.85) 100%),
  rgba(10,10,10,.32);}
.s4-title{
  font-family:'Ekaterina',Georgia,serif;font-weight:400;
  font-size:clamp(30px,9.5vw,52px);line-height:1;text-align:center;
  margin-bottom:.34em;flex:0 0 auto;
}
.garden{
  flex:1 1 auto;display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:2px;place-items:center;min-height:0;
}
.bloom{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;
  background:none;
}
.bloom:nth-child(odd){transform:translateX(-3%)}
.bloom:nth-child(even){transform:translateX(3%)}
.bloom svg{width:min(100%,15.5vh);height:auto;aspect-ratio:1;overflow:visible}
.petal{
  fill:var(--white);stroke:none;
  transform-origin:50px 50px;
  transform:scale(.34);
  transition:transform .62s cubic-bezier(.3,1.35,.45,1);
}
.bloom.open .petal{transform:scale(1)}
.bloom:not(.open) svg{animation:bud-idle 3.2s ease-in-out infinite}
@keyframes bud-idle{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.bloom.open svg{animation:sway 4.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.bloom-word{
  position:absolute;z-index:2;left:0;right:0;text-align:center;
  font-size:clamp(11px,3.5vw,15px);font-weight:800;letter-spacing:-.01em;
  color:var(--red);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease .28s,transform .45s cubic-bezier(.3,1.4,.5,1) .28s;
  pointer-events:none;
  text-shadow:var(--shadow-white);
}
.bloom.open .bloom-word{opacity:1;transform:none}

/* ============ 5 · ФИНАЛ ============ */
#s5{background:var(--white);flex-direction:column;gap:0}
.type-final{color:var(--black)}
.type-final .caret{fill:var(--pink)}
.petals{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.petal-bit{
  position:absolute;top:-8%;
  border-radius:60% 40% 55% 45%/55% 60% 40% 45%;
  will-change:transform;
  animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes fall{
  0%{transform:translate3d(0,-10vh,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift,20px),112vh,0) rotate(var(--spin,320deg))}
}
.sign{
  position:absolute;left:0;right:0;bottom:calc(var(--pad-b) + 50px);z-index:3;
  text-align:center;font-size:clamp(11px,3.1vw,17px);line-height:1.3;
  padding:0 calc(var(--pad) + 6px);
  font-weight:800;letter-spacing:-.005em;color:var(--grey);
}

/* ============ ДОСТУПНОСТЬ ============ */
@media (prefers-reduced-motion:reduce){
  .loader-star{animation-duration:6s}
  .hint{animation:none}
  .bloom:not(.open) svg,.bloom.open svg,.replay svg{animation:none}
  .deck.done{animation:none}
  .petals{display:none}
  .type.done .caret{animation:none}
}