/* ===================================================================
   С днём рождения — мобильный сайт
   Тёмная тёплая тема, градиенты, огоньки
   =================================================================== */

:root{
  --bg:        #100a07;
  --bg-2:      #1a0f0a;
  --ink:       #f6e9dd;
  --ink-dim:   rgba(246,233,221,.55);
  --gold:      #ffd08a;
  --amber:     #ff9a52;
  --coral:     #ff5f6d;
  --rose:      #ff7aa2;
  --grad:      linear-gradient(115deg, var(--gold) 0%, var(--amber) 42%, var(--coral) 78%, var(--rose) 100%);
  --radius:    22px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* атрибут hidden должен побеждать любой display из стилей ниже */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Фон: мягкое тёплое свечение сверху и снизу */
body::before{
  content:'';
  position:fixed; inset:0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,140,70,.22), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(255,95,109,.16), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%, var(--bg) 100%);
  z-index:-3;
  pointer-events:none;
}

/* ─────────── Плывущие градиентные пятна ─────────── */
.blobs{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  opacity:.5;
  will-change:transform;
}
.b1{ width:64vw; height:64vw; left:-18vw; top:4vh;
     background:radial-gradient(circle, rgba(255,154,82,.75), transparent 68%);
     animation:drift1 26s var(--ease) infinite alternate; }
.b2{ width:58vw; height:58vw; right:-16vw; top:38vh;
     background:radial-gradient(circle, rgba(255,95,109,.6), transparent 68%);
     animation:drift2 32s var(--ease) infinite alternate; }
.b3{ width:70vw; height:70vw; left:6vw; bottom:-14vh;
     background:radial-gradient(circle, rgba(255,208,138,.45), transparent 70%);
     animation:drift3 38s var(--ease) infinite alternate; }

@keyframes drift1{ to{ transform:translate3d(14vw,10vh,0) scale(1.18); } }
@keyframes drift2{ to{ transform:translate3d(-12vw,-12vh,0) scale(1.22); } }
@keyframes drift3{ to{ transform:translate3d(10vw,-8vh,0) scale(.86); } }

/* ─────────── Огоньки (canvas) ─────────── */
#fireflies{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
}

/* ─────────── Зерно поверх всего ─────────── */
.grain{
  position:fixed; inset:-50%;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  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='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite;
}
@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%,3%)}
}

/* ─────────── Каркас ─────────── */
main{
  position:relative; z-index:2;
  max-width:560px;
  margin:0 auto;
  padding:0 22px calc(60px + env(safe-area-inset-bottom));
}

section{ padding:96px 0; }

/* ─────────── HERO ─────────── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:0;
  position:relative;
}

.eyebrow{
  margin:0 0 20px;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(246,233,221,.5);
  font-weight:400;
}

.title{
  position:relative;          /* чтобы offsetLeft букв считался от заголовка */
  margin:0;
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;
  font-size:clamp(3.6rem,20vw,6.4rem);
  line-height:1;
  letter-spacing:-.01em;
  color:transparent;
}

/* Градиент живёт на каждой букве, но растянут на всю ширину имени
   (--w — ширина заголовка, --x — сдвиг буквы), поэтому выглядит сплошным.
   Так побуквенная анимация не ломает background-clip:text. */
.title .ch{
  display:inline-block;
  background:var(--grad);
  background-size:calc(var(--w,100%) * 2) 100%;
  background-position:calc(-1 * var(--x,0px)) 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  opacity:0;
  transform:translateY(.5em) rotate(6deg);
  animation:chIn .9s var(--ease-out) forwards,
            shimmer 7s ease-in-out infinite;
}
@keyframes chIn{ to{ opacity:1; transform:none; } }
@keyframes shimmer{
  0%,100%{ background-position:calc(-1 * var(--x,0px)) 0; }
  50%    { background-position:calc(-1 * var(--x,0px) - var(--w,0px)) 0; }
}

.subtitle{
  margin:14px 0 0;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.5rem;
  color:rgba(246,233,221,.82);
}

.hero-line{
  width:64px; height:1px; margin:30px auto 0;
  background:var(--grad);
  transform-origin:center;
}
[data-reveal].hero-line{ transform:scaleX(0); }
[data-reveal].hero-line.in{ transform:scaleX(1); }

.hero-note{
  margin:22px 0 0;
  font-size:.86rem;
  color:rgba(246,233,221,.45);
  letter-spacing:.06em;
}

.scroll-hint{
  position:absolute;
  bottom:calc(34px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(246,233,221,.42);
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
}
[data-reveal].scroll-hint{ transform:translateX(-50%) translateY(12px); }
[data-reveal].scroll-hint.in{ transform:translateX(-50%); }
.wheel{ animation:wheel 1.9s var(--ease) infinite; }
@keyframes wheel{
  0%{ transform:translateY(0); opacity:0 }
  30%{ opacity:1 }
  100%{ transform:translateY(15px); opacity:0 }
}

/* ─────────── Разделители между секциями ─────────── */
.divider{
  display:flex;
  align-items:center;
  gap:16px;
  padding:6px 0;
}
.divider .line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,208,138,.32), transparent);
}
.divider .kb{
  width:52px;
  height:auto;
  flex:none;
  image-rendering:auto;
  filter:drop-shadow(0 6px 14px rgba(255,140,70,.35));
  animation:bob 2.8s var(--ease) infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* ─────────── Письмо ─────────── */
.card{
  position:relative;
  padding:34px 26px 28px;
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid rgba(255,208,138,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.9);
  font-family:'Cormorant Garamond',serif;
  font-size:1.22rem;
  line-height:1.75;
  color:rgba(246,233,221,.9);
}
.card p{ margin:0 0 16px; }
.card p:last-child{ margin-bottom:0; }
.quote-mark{
  font-size:4rem; line-height:.6;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 6px !important;
}
.sign{
  text-align:right; font-style:italic;
  color:rgba(246,233,221,.55); font-size:1rem;
  margin-top:22px !important;
}

/* ─────────── Заголовки секций ─────────── */
.sec-title,
.sec-sub{ text-align:center; }

.sec-title{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-weight:400;
  font-size:2.3rem;
  letter-spacing:.005em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-sub{
  margin:6px 0 30px;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,233,221,.4);
}

/* ─────────── Галерея ─────────── */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.shot{
  position:relative;
  margin:0;
  aspect-ratio:3/4;
  cursor:pointer;
  perspective:1000px;
  transform:translateY(26px) scale(.96);
  opacity:0;
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.shot.in{ opacity:1; transform:none; }
.shot:nth-child(3n){ grid-column:span 2; aspect-ratio:4/3; }

/* переворачивающаяся часть */
.shot-inner{
  position:relative;
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .95s cubic-bezier(.3,.9,.25,1);
}
.shot.flipped .shot-inner{ transform:rotateY(180deg); }

.face{
  position:absolute; inset:0;
  border-radius:16px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border:1px solid rgba(255,208,138,.16);
}

/* рубашка карточки */
.face.back{
  display:grid; place-items:center;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,154,82,.28), transparent 62%),
    linear-gradient(150deg,#2b1812,#1d100b 60%,#33170f);
}
.face.back::before{
  content:'';
  position:absolute; inset:9px;
  border-radius:11px;
  border:1px solid rgba(255,208,138,.18);
  pointer-events:none;
}
.face.back .bh{
  font-size:2rem;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:beat 2.4s var(--ease) infinite;
}
.shot:active .face.back{ filter:brightness(1.25); }

/* лицевая сторона с фото */
.face.front{ transform:rotateY(180deg); }
.face.front img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s var(--ease-out);
  filter:saturate(1.02) contrast(1.02);
}
.shot.flipped:active .face.front img{ transform:scale(1.05); }
.face.front::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(40,14,6,.5), transparent 55%);
  pointer-events:none;
}
.shot figcaption{
  position:absolute; left:12px; right:12px; bottom:10px;
  z-index:2;
  font-size:.78rem; letter-spacing:.04em;
  color:rgba(255,238,224,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* ─────────── Форма желаний ─────────── */
.wish-form{ display:flex; flex-direction:column; gap:16px; }

.field{ position:relative; }
.field textarea,
.field input{
  width:100%;
  padding:22px 16px 12px;
  font:inherit;
  font-size:1rem;
  color:var(--ink);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,208,138,.18);
  border-radius:16px;
  outline:none;
  resize:none;
  transition:border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea:focus,
.field input:focus{
  border-color:rgba(255,154,82,.65);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(255,154,82,.1);
}
.field label{
  position:absolute; left:17px; top:17px;
  font-size:1rem;
  color:rgba(246,233,221,.42);
  pointer-events:none;
  transform-origin:left top;
  transition:transform .28s var(--ease), color .28s var(--ease);
}
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
  transform:translateY(-10px) scale(.72);
  color:rgba(255,178,110,.9);
}

.btn{
  position:relative;
  margin-top:4px;
  padding:16px 24px;
  font:inherit; font-size:.92rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#2a1005;
  background:var(--grad);
  background-size:200% 100%;
  border:none; border-radius:16px;
  cursor:pointer;
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .35s var(--ease), background-position .6s var(--ease);
  box-shadow:0 14px 34px -16px rgba(255,120,80,.8);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:scale(.975); }
.btn:hover{ background-position:100% 0; }
.btn[disabled]{ opacity:.6; pointer-events:none; }

.btn-spinner{
  position:absolute; inset:0; margin:auto;
  width:20px; height:20px;
  border:2px solid rgba(42,16,5,.28);
  border-top-color:#2a1005;
  border-radius:50%;
  opacity:0;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.btn.loading .btn-label{ opacity:0; }
.btn.loading .btn-spinner{ opacity:1; }

.form-msg{
  min-height:1.2em; margin:2px 0 0;
  font-size:.84rem;
  color:var(--coral);
  text-align:center;
}

/* состояние «отправлено» */
.sent-state{
  position:relative;
  text-align:center;
  padding:46px 20px;
  border-radius:var(--radius);
  border:1px solid rgba(255,208,138,.18);
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:popIn .7s var(--ease-out) both;
}
@keyframes popIn{ from{ opacity:0; transform:translateY(18px) scale(.97);} }
.sent-kb{
  width:92px; height:auto;
  margin:0 auto 14px;
  display:block;
  filter:drop-shadow(0 8px 20px rgba(255,140,70,.4));
  animation:bob 2.4s var(--ease) infinite;
}
.sent-title{
  margin:0;
  font-family:'Cormorant Garamond',serif; font-size:2rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sent-sub{ margin:8px 0 22px; font-size:.92rem; color:rgba(246,233,221,.55); line-height:1.6; }
.link-btn{
  font:inherit; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,178,110,.9);
  background:none; border:none;
  border-bottom:1px solid rgba(255,178,110,.4);
  padding:0 0 3px; cursor:pointer;
}

/* ─────────── Футер ─────────── */
footer{ text-align:center; padding:46px 0 40px; }
.foot-note{
  margin:0 0 14px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:1.35rem;
  color:rgba(246,233,221,.72);
}
.heart{
  display:inline-block;
  font-size:2.4rem;
  line-height:1;
  padding:6px 14px;
  border:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  animation:beat 1.9s var(--ease) infinite;
  transition:transform .2s var(--ease);
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.heart:active{ transform:scale(1.3); }
.foot-hint{
  margin:6px 0 0;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,233,221,.3);
}
@keyframes beat{ 0%,100%{transform:scale(1)} 14%{transform:scale(1.22)} 28%{transform:scale(1)} 42%{transform:scale(1.16)} }

/* ─────────── Лайтбокс ─────────── */
.lightbox{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:18px;
  background:rgba(12,7,4,.93);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:fadeIn .3s var(--ease) both;
}
@keyframes fadeIn{ from{opacity:0} }
.lightbox img{
  max-width:100%; max-height:86svh;
  border-radius:14px;
  animation:popIn .45s var(--ease-out) both;
}
.lb-close{
  position:absolute; top:calc(12px + env(safe-area-inset-top)); right:16px;
  width:42px; height:42px;
  font-size:2rem; line-height:1;
  color:var(--ink);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  cursor:pointer;
}

/* ─────────── Появление при скролле ─────────── */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-reveal].in{ opacity:1; transform:none; }

/* ─────────── Уважение к настройкам ─────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal],.shot{ opacity:1 !important; transform:none !important; }
}

/* На больших экранах — телефонная колонка по центру (ПК не приоритет) */
@media (min-width:700px){
  main{ max-width:600px; }
}