/* ==========================================================
   Лена — с днём рождения
   Палитра: тёплый крем, пудровая роза, золото, мягкая сирень
   ========================================================== */

:root{
  --cream:      #fdf7f1;
  --cream-deep: #f7ebe0;
  --ink:        #3b2a31;
  --ink-soft:   #6b565e;
  --rose:       #d9738c;
  --rose-soft:  #f2c9d2;
  --gold:       #cf9a45;
  --gold-soft:  #f0dcb8;
  --lilac:      #b7a1d8;
  --white:      #fffcf9;

  --shadow-sm: 0 2px 10px rgba(90,55,65,.06);
  --shadow-md: 0 14px 40px rgba(90,55,65,.10);
  --shadow-lg: 0 30px 80px rgba(90,55,65,.16);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand:  'Caveat', cursive;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
}

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

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

body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(217,115,140,.12);
  text-rendering:optimizeLegibility;
}

/* мягкая «бумажная» текстура поверх всего */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; }

canvas#stardust{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
canvas#confetti{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:60; pointer-events:none;
}

.wrap{ width:min(1160px, 100% - 2.5rem); margin-inline:auto; position:relative; z-index:2; }
.wrap--narrow{ width:min(720px, 100% - 2.5rem); }

.section{ padding:clamp(4.5rem, 10vw, 8.5rem) 0; position:relative; z-index:2; }

/* ---------- типографика ---------- */
.kicker{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--rose); font-weight:600; margin:0 0 .9rem;
}
.h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.1rem, 5.6vw, 3.6rem);
  line-height:1.12; letter-spacing:-.01em;
  margin:0 0 1.6rem; color:var(--ink);
}
.lead{ font-size:1.05rem; color:var(--ink-soft); max-width:56ch; margin:0 0 2.6rem; }
.prose p{ font-size:1.08rem; color:var(--ink-soft); margin:0 0 1.15rem; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:calc(5rem + env(safe-area-inset-top)) 1.25rem 4rem;
  background:
    radial-gradient(120% 90% at 50% -10%, #fff9f4 0%, rgba(253,247,241,0) 60%),
    linear-gradient(180deg, #fdf3ec 0%, #fbeee6 45%, var(--cream) 100%);
}
.hero__glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; z-index:0; }
.hero__glow--a{ width:46vw; height:46vw; background:var(--rose-soft); top:-8vw; left:-8vw; animation:float 16s ease-in-out infinite; }
.hero__glow--b{ width:38vw; height:38vw; background:var(--gold-soft); bottom:-10vw; right:-6vw; animation:float 21s ease-in-out infinite reverse; }
.hero__glow--c{ width:30vw; height:30vw; background:#e6dcf5; top:35%; right:22%; opacity:.4; animation:float 26s ease-in-out infinite; }
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(3vw,-3vw,0) scale(1.08); }
}

.hero__inner{ position:relative; z-index:3; max-width:820px; }
.hero__eyebrow{
  font-size:.76rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin:0 0 1.4rem;
  animation:fadeUp .9s .1s both;
}
.hero__title{ margin:0; font-family:var(--serif); font-weight:300; line-height:1; }
.hero__line{
  display:block; font-size:clamp(1.6rem, 5vw, 2.7rem); color:var(--ink-soft);
  letter-spacing:.01em; animation:fadeUp 1s .25s both;
}
.hero__name{
  display:block; font-size:clamp(4.5rem, 18vw, 11rem); font-weight:400;
  letter-spacing:-.02em; margin-top:.06em;
  background:linear-gradient(120deg, var(--rose) 0%, var(--gold) 45%, var(--lilac) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fadeUp 1.1s .4s both;
}
.hero__sub{
  margin:1.6rem auto 0; max-width:44ch; color:var(--ink-soft);
  font-size:1.02rem; animation:fadeUp 1s .6s both;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

.scroll-hint{
  display:inline-flex; flex-direction:column; align-items:center; gap:.35rem;
  margin-top:2.6rem; color:var(--ink-soft); text-decoration:none;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  animation:fadeUp 1s 1.4s both;
}
.scroll-hint svg{ animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* ---------- полароид ---------- */
.polaroid{
  margin:2.8rem auto 0; padding:.85rem .85rem 3.4rem;
  background:var(--white); border-radius:6px;
  box-shadow:var(--shadow-lg);
  max-width:340px; position:relative;
  transform:rotate(-2deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.polaroid:hover{ transform:rotate(0deg) translateY(-6px); }
.polaroid img{ width:100%; border-radius:2px; aspect-ratio:4/5; object-fit:cover; }
.polaroid figcaption{
  position:absolute; left:0; right:0; bottom:1.05rem;
  font-family:var(--hand); font-size:1.35rem; color:var(--ink-soft); text-align:center;
}
.polaroid--hero{ animation:fadeUp 1.2s .8s both; }
.polaroid--job{ transform:rotate(2.5deg); max-width:360px; margin:0; }

/* ---------- письмо ---------- */
.section--letter{
  background:linear-gradient(180deg, var(--cream) 0%, #fbf1e9 100%);
}

/* ---------- качества ---------- */
.section--qualities{ background:#fbf1e9; }
.qualities{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  margin-top:2.4rem;
}
.q-card{
  background:var(--white); border-radius:var(--r-md);
  padding:1.7rem 1.6rem 1.5rem; position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(207,154,69,.13);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.q-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg, var(--rose), var(--gold));
  opacity:.7;
}
.q-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.q-card__num{
  font-family:var(--serif); font-size:.95rem; color:var(--gold);
  letter-spacing:.16em; display:block; margin-bottom:.5rem;
}
.q-card h3{
  font-family:var(--serif); font-weight:600; font-size:1.5rem;
  margin:0 0 .55rem; letter-spacing:-.01em;
}
.q-card p{ margin:0; font-size:.96rem; color:var(--ink-soft); line-height:1.6; }
.q-card--magic{
  background:linear-gradient(150deg, #fff6f8 0%, #fdf3e8 55%, #f6f0fb 100%);
}

/* ---------- самая сложная работа ---------- */
.section--job{
  background:linear-gradient(180deg, #fbf1e9 0%, #f6e7dc 100%);
}
.job{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:900px){
  .job{ grid-template-columns:1.25fr .75fr; }
}
.thanks{
  list-style:none; padding:0; margin:2rem 0 0;
  display:grid; gap:.7rem;
}
.thanks li{
  position:relative; padding-left:1.9rem;
  font-family:var(--serif); font-size:1.2rem; color:var(--ink);
}
.thanks li::before{
  content:"✦"; position:absolute; left:0; top:-.05em;
  color:var(--gold); font-size:.95rem;
}

/* ---------- коллаж ---------- */
.section--gallery{ background:linear-gradient(180deg, #f6e7dc 0%, var(--cream) 45%); }
.collage{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(2, 1fr);
  grid-auto-rows:190px;
}
@media (min-width:700px){
  .collage{ grid-template-columns:repeat(4, 1fr); grid-auto-rows:220px; gap:1.05rem; }
}
.tile{
  padding:0; border:none; cursor:pointer; overflow:hidden;
  border-radius:var(--r-md); background:var(--cream-deep);
  box-shadow:var(--shadow-sm); position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
}
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,240,230,0) 55%, rgba(80,45,55,.28) 100%);
  opacity:0; transition:opacity .45s;
}
.tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.tile:hover img{ transform:scale(1.06); }
.tile:hover::after{ opacity:1; }
.tile--big{ grid-column:span 2; grid-row:span 2; }

/* ---------- записка от Теоны ---------- */
.section--teona{ background:var(--cream); padding-top:0; }
.note{
  background:linear-gradient(160deg, #fffdf7 0%, #fdf3e4 100%);
  border-radius:var(--r-lg);
  padding:clamp(2.2rem, 6vw, 3.6rem);
  box-shadow:var(--shadow-md);
  border:1px solid rgba(207,154,69,.18);
  text-align:center; position:relative;
  transform:rotate(-.6deg);
}
.note::before{
  content:""; position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:110px; height:26px; background:rgba(240,220,184,.75);
  border-radius:3px; box-shadow:0 2px 8px rgba(90,55,65,.10);
}
.note__hand{
  font-family:var(--hand); font-size:clamp(1.6rem, 4.6vw, 2.35rem);
  line-height:1.5; color:var(--ink); margin:0;
}
.note__sign{
  font-family:var(--hand); font-size:clamp(2rem, 6vw, 3rem);
  color:var(--rose); margin:1.4rem 0 0;
}

/* ---------- конструктор подарка ---------- */
.section--gift{
  background:linear-gradient(180deg, var(--cream) 0%, #f8eee6 30%, #f6e9f0 100%);
}
.gift{ display:grid; gap:1.4rem; }
.group{
  border:1px solid rgba(207,154,69,.18);
  border-radius:var(--r-lg);
  background:rgba(255,252,249,.72);
  backdrop-filter:blur(8px);
  padding:1.7rem clamp(1.1rem, 3vw, 2rem) 1.9rem;
  margin:0;
  box-shadow:var(--shadow-sm);
}
/* legend делаем обычным блоком внутри карточки — иначе на мобиле
   он визуально «отрывается» от неё и висит над рамкой */
.group legend{
  float:left; width:100%; margin:0 0 .2rem; padding:0;
  font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,1.85rem);
  font-weight:600; display:flex; align-items:center; gap:.6rem;
}
.group legend + *{ clear:both; }
.group::after{ content:""; display:table; clear:both; }
.group__dot{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--rose), var(--gold));
  box-shadow:0 0 0 4px rgba(217,115,140,.13);
}
.group__hint{ margin:.2rem 0 1rem; font-size:.9rem; color:var(--ink-soft); }
.lg-self{ color:var(--rose); }
.lg-duo{ color:var(--gold); }

.chips{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; }
.chip{ position:relative; cursor:pointer; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block;
  padding:.62rem 1.05rem;
  border-radius:100px;
  background:var(--white);
  border:1px solid rgba(120,80,95,.16);
  font-size:.93rem; color:var(--ink-soft);
  transition:all .28s cubic-bezier(.2,.8,.2,1);
  user-select:none;
}
.chip:hover span{ border-color:var(--rose); color:var(--ink); transform:translateY(-2px); }
.chip input:checked + span{
  background:linear-gradient(120deg, var(--rose) 0%, #e0919f 100%);
  border-color:transparent; color:#fff; font-weight:500;
  box-shadow:0 8px 22px rgba(217,115,140,.28);
}
.chip input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:3px; }
.chip input:checked + span::before{ content:"✓  "; }

.group--wish textarea{
  width:100%; margin-top:.4rem;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:1rem 1.1rem; border-radius:var(--r-md);
  border:1px solid rgba(120,80,95,.16);
  background:var(--white); resize:vertical;
}
.group--wish textarea:focus{ outline:none; border-color:var(--rose); box-shadow:0 0 0 4px rgba(217,115,140,.12); }

/* сетка расписания */
.sched{
  display:grid; grid-template-columns:auto repeat(3, 1fr);
  gap:.4rem; margin-top:.4rem; font-size:.85rem;
}
.sched__h{ text-align:center; color:var(--ink-soft); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; padding-bottom:.2rem; }
.sched__day{ display:flex; align-items:center; color:var(--ink-soft); padding-right:.6rem; font-weight:500; }
.slot{
  border:1px solid rgba(120,80,95,.14); background:var(--white);
  border-radius:10px; height:40px; cursor:pointer;
  transition:all .22s ease; font-size:.72rem; color:transparent;
}
.slot:hover{ border-color:var(--rose); }
.slot[data-state="self"]{ background:linear-gradient(120deg,var(--rose),#e5a0b0); border-color:transparent; color:#fff; }
.slot[data-state="duo"]{ background:linear-gradient(120deg,var(--gold),#e6c079); border-color:transparent; color:#fff; }
.sched__legend{ display:flex; gap:1.2rem; margin-top:.9rem; font-size:.85rem; color:var(--ink-soft); }
.sched__legend span{ display:flex; align-items:center; gap:.4rem; }
.sw{ width:14px; height:14px; border-radius:5px; display:inline-block; }
.sw--self{ background:var(--rose); }
.sw--duo{ background:var(--gold); }

/* панель действий */
.gift__bar{
  position:sticky; bottom:calc(1rem + env(safe-area-inset-bottom)); z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
  padding:1rem 1.2rem;
  border-radius:100px;
  background:rgba(255,252,249,.9);
  backdrop-filter:blur(14px);
  border:1px solid rgba(207,154,69,.22);
  box-shadow:var(--shadow-md);
}
.counter{ font-size:.95rem; color:var(--ink-soft); padding-left:.6rem; }
.counter b{ font-family:var(--serif); font-size:1.5rem; color:var(--rose); }
.gift__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

.btn{
  border:none; cursor:pointer; border-radius:100px;
  padding:.8rem 1.6rem; font-size:.95rem; font-weight:600;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.btn--primary{
  background:linear-gradient(120deg, var(--rose) 0%, var(--gold) 100%);
  color:#fff; box-shadow:0 10px 26px rgba(217,115,140,.3);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(217,115,140,.36); }
.btn--ghost{
  background:transparent; color:var(--ink-soft);
  border:1px solid rgba(120,80,95,.2);
}
.btn--ghost:hover{ color:var(--ink); border-color:var(--rose); }

/* ---------- сертификат ---------- */
.section--cert{ background:linear-gradient(180deg, #f6e9f0 0%, #f7eee6 100%); text-align:center; }
.cert__frame{
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:var(--white);
  padding:.6rem; margin-bottom:1.6rem;
}
.cert__frame canvas{ width:100%; height:auto; border-radius:calc(var(--r-lg) - 10px); display:block; }
.cert__actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.cert__saved{ font-size:.85rem; color:var(--ink-soft); margin-top:1.4rem; }

/* ---------- финал ---------- */
.section--final{
  background:linear-gradient(180deg, #f7eee6 0%, #fbeef0 55%, #f6f0fb 100%);
  text-align:center; padding-bottom:clamp(5rem,12vw,9rem);
}
.final__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem, 7vw, 4.4rem); line-height:1.1; margin:0 0 1.2rem;
  background:linear-gradient(120deg, var(--rose), var(--gold) 60%, var(--lilac));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.final__text{ color:var(--ink-soft); max-width:46ch; margin:0 auto 2rem; }
.final__sign{
  font-family:var(--hand); font-size:clamp(2rem,6vw,3.1rem);
  color:var(--ink); margin:0 0 2.2rem;
}
.final__sign span{ color:var(--rose); font-size:.7em; }

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:80;
  background:rgba(45,28,34,.9); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  padding:clamp(1rem,4vw,3rem);
  animation:lbIn .3s ease both;
}
.lightbox[hidden]{ display:none; }
[hidden]{ display:none !important; }
@keyframes lbIn{ from{opacity:0} to{opacity:1} }
.lightbox img{
  max-width:min(92vw, 620px); max-height:78vh; object-fit:contain;
  border-radius:var(--r-md); box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.lightbox__cap{
  color:#f6e6dd; font-family:var(--hand); font-size:1.5rem; margin:1rem 0 0; text-align:center;
}
.lightbox__close{
  position:absolute; top:1.1rem; right:1.3rem;
  background:none; border:none; color:#f6e6dd; font-size:2.6rem;
  line-height:1; cursor:pointer; opacity:.75;
}
.lightbox__close:hover{ opacity:1; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.1); border:none; color:#fff;
  width:48px; height:48px; border-radius:50%; font-size:2rem; line-height:1;
  cursor:pointer; transition:background .25s;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.22); }
.lightbox__nav--prev{ left:clamp(.5rem,2vw,2rem); }
.lightbox__nav--next{ right:clamp(.5rem,2vw,2rem); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- печать ---------- */
@media print{
  body{ background:#fff; }
  canvas#stardust, canvas#confetti, .hero, .section--gift, .scroll-hint,
  .cert__actions, .lightbox, body::after{ display:none !important; }
  .section--cert{ padding:0; }
  .cert__frame{ box-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  /* без анимаций контент показываем сразу, а не по скроллу */
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---------- телефоны ---------- */
@media (max-width:600px){
  .wrap{ width:min(1160px, 100% - 2rem); }
  .wrap--narrow{ width:min(720px, 100% - 2rem); }

  .gift__bar{ border-radius:var(--r-lg); justify-content:center; text-align:center; gap:.7rem; }
  .counter{ padding-left:0; }
  .gift__actions{ width:100%; }
  .gift__actions .btn{ flex:1; padding:.85rem 1rem; }

  .polaroid--job{ margin-inline:auto; }
  .tile--big{ grid-column:span 2; grid-row:span 2; }

  /* тап-зоны не меньше 44px */
  .slot{ height:44px; }
  .chip span{ padding:.72rem 1.1rem; }
  .btn{ padding:.9rem 1.4rem; }

  .cert__actions .btn{ flex:1 1 45%; }
  .section--final{ padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }

  /* стрелки лайтбокса вниз, чтобы не лежали поверх фото */
  .lightbox__nav{ top:auto; bottom:calc(1.2rem + env(safe-area-inset-bottom)); transform:none; }
  .lightbox__nav--prev{ left:22%; }
  .lightbox__nav--next{ right:22%; }
  .lightbox__cap{ margin-bottom:4.5rem; }
}

/* на тач-устройствах вместо hover — отклик на нажатие */
@media (hover:none){
  .q-card:hover, .polaroid:hover, .tile:hover, .btn--primary:hover{ transform:none; }
  .tile:hover img{ transform:none; }
  .chip:hover span{ transform:none; }
  .chip:active span{ transform:scale(.97); }
  .btn:active{ transform:scale(.98); }
  .tile:active{ transform:scale(.98); }
  .slot:active{ transform:scale(.94); }
}