/* ============================================================
   components.css — кнопки, карточки, печать, подарок, музыка
   ============================================================ */

/* ---------------- кнопки ---------------- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  min-height:56px;
  padding:1em 2em;
  border:0;
  border-radius:999px;
  font-family:var(--f-sans);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.015em;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--e-back), box-shadow .5s var(--e-out), color .35s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn .ico{ width:1.15em; height:1.15em; }

.btn--gold{
  color:#4A3410;
  background:linear-gradient(145deg, #F0D69C 0%, var(--gold-2) 32%, var(--gold) 68%, var(--gold-3) 100%);
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--gold::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(145deg,#FBECC9,var(--gold-2) 40%,#B98C33);
  opacity:0;
  transition:opacity .45s var(--e-out);
}
.btn--gold:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 70px -24px rgba(168,124,44,.75), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn--gold:hover::before{ opacity:1; }

/* блик, пробегающий по кнопке */
.btn::after{
  content:"";
  position:absolute;
  top:-60%; left:-30%;
  width:45%; height:220%;
  z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(14deg) translateX(-160%);
  transition:transform .95s var(--e-out);
}
.btn:hover::after{ transform:rotate(14deg) translateX(330%); }

.btn--ghost{
  min-height:52px;
  color:var(--wine);
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  box-shadow:var(--sh-xs);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  background:rgba(255,255,255,.9);
  box-shadow:var(--sh-sm);
}

.btn--sm{ min-height:46px; padding:.85em 1.5em; font-size:.92rem; }

/* ---------------- декоративный угол ---------------- */
.hero__corner,
.photo__decor,
.letter__corner{
  position:absolute;
  width:clamp(90px,13vw,170px);
  color:var(--gold);
  opacity:.42;
  pointer-events:none;
}

/* ---------------- «свечная печать» / восковая печать ---------------- */
.wax{
  position:relative;
  display:grid;
  place-items:center;
  width:78px; height:78px;
  flex:none;
  border-radius:50%;
  color:#F7E4CE;
  background:
    radial-gradient(120% 120% at 32% 26%, #A63B55 0%, var(--wine-2) 34%, var(--wine) 72%, #4C1220 100%);
  box-shadow:
    0 12px 26px -12px rgba(78,16,32,.65),
    inset 0 2px 5px rgba(255,255,255,.28),
    inset 0 -6px 12px rgba(0,0,0,.28);
}
.wax::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:conic-gradient(from 0deg, #7C2038, #A63B55, #6E1C2F, #8E2C44, #7C2038);
  filter:blur(.5px);
  z-index:-1;
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 62%);
          mask:radial-gradient(circle, transparent 60%, #000 62%);
}
.wax::after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:50%;
  border:1px solid rgba(247,228,206,.34);
}
.wax__inner{
  font-family:var(--f-display);
  font-size:1.32rem;
  font-weight:700;
  letter-spacing:.06em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* маленькая печать в hero */
.seal{
  position:relative;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  color:#F7E4CE;
  background:radial-gradient(120% 120% at 32% 26%, #A63B55, var(--wine) 70%, #4C1220);
  box-shadow:0 8px 18px -8px rgba(78,16,32,.6), inset 0 1px 3px rgba(255,255,255,.3);
  transform:rotate(-8deg);
}
.seal::after{
  content:"";
  position:absolute; inset:6px;
  border-radius:50%;
  border:1px solid rgba(247,228,206,.32);
}
.seal__inner{
  font-family:var(--f-display);
  font-size:1rem; font-weight:700; letter-spacing:.06em;
}

/* ---------------- карточки «Дякуємо за…» ---------------- */
.cards{
  display:grid;
  gap:clamp(16px,1.8vw,24px);
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:1040px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative;
  padding:clamp(26px,2.6vw,34px) clamp(22px,2.2vw,30px) clamp(28px,2.8vw,36px);
  border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,252,246,.86));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  isolation:isolate;
  transition:
    transform .6s var(--e-out),
    box-shadow .6s var(--e-out),
    border-color .6s var(--e-out);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(160deg, rgba(246,233,207,.9), rgba(255,255,255,0) 55%);
  opacity:0;
  transition:opacity .6s var(--e-out);
}
.card:hover,
.card:focus-within{
  transform:translateY(-10px);
  box-shadow:var(--sh-md), 0 0 0 1px var(--line);
}
.card:hover::before,
.card:focus-within::before{ opacity:1; }

.card__icon{
  display:grid;
  place-items:center;
  width:60px; height:60px;
  margin-bottom:20px;
  border-radius:18px;
  color:var(--gold-3);
  background:linear-gradient(150deg, #FBF1DC, var(--gold-soft));
  box-shadow:inset 0 0 0 1px rgba(200,162,80,.28), 0 8px 20px -12px rgba(168,124,44,.6);
  transition:transform .6s var(--e-back), color .5s, box-shadow .5s;
}
.card__icon .ico{ width:28px; height:28px; }
.card:hover .card__icon{
  transform:translateY(-2px) rotate(-4deg) scale(1.06);
  color:var(--wine);
  box-shadow:inset 0 0 0 1px rgba(110,28,47,.16), 0 14px 26px -12px rgba(168,124,44,.7);
}

.card__title{
  margin-bottom:9px;
  font-family:var(--f-display);
  font-size:clamp(1.28rem,1.7vw,1.5rem);
  font-weight:700;
  color:var(--wine);
  letter-spacing:-.01em;
}
.card__text{
  color:var(--ink-soft);
  font-size:.99rem;
  line-height:1.65;
}

/* мягкий блик, следующий за курсором */
.card__shine{
  position:absolute;
  inset:-40%;
  z-index:-1;
  background:radial-gradient(closest-side, rgba(255,255,255,.85), transparent 70%);
  opacity:0;
  transform:translate3d(var(--mx,50%), var(--my,50%),0);
  transition:opacity .5s var(--e-out);
  pointer-events:none;
}
@media (hover:hover){
  .card:hover .card__shine{ opacity:.6; }
}

/* ---------------- сюрприз: подарок ---------------- */
.gift-stage{
  display:grid;
  place-items:center;
  margin-block: clamp(10px,2vw,22px) clamp(24px,3vw,38px);
}

.gift{
  position:relative;
  display:grid;
  place-items:center;
  gap:14px;
  padding:clamp(18px,3vw,30px) clamp(28px,5vw,58px);
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gift__glow{
  position:absolute;
  top:6%; left:50%;
  width:min(340px,80vw); aspect-ratio:1;
  transform:translateX(-50%) scale(.6);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,229,163,.75), rgba(255,229,163,0) 62%);
  opacity:0;
  transition:opacity .9s var(--e-out), transform 1.2s var(--e-out);
  pointer-events:none;
}
.gift:hover .gift__glow{ opacity:.55; transform:translateX(-50%) scale(.85); }
.gift.is-open .gift__glow{ opacity:1; transform:translateX(-50%) scale(1.35); }

.gift__svg{
  width:clamp(170px,26vw,240px);
  color:var(--gold-3);
  filter:drop-shadow(0 18px 30px rgba(168,124,44,.28));
  transition:transform .7s var(--e-back), color .6s;
}
.gift:hover .gift__svg{ transform:translateY(-6px) scale(1.02); color:var(--gold); }

.gift__lid{
  transform-origin:200px 98px;
  transition:transform 1s var(--e-back);
}
.gift.is-open .gift__lid{ transform:translate(-58px,-70px) rotate(-26deg); }
.gift__rays{
  transform-origin:100px 96px;
  transform:scale(.6);
  transition:opacity .7s var(--e-out), transform .9s var(--e-out);
}
.gift.is-open .gift__rays{ opacity:.75; transform:scale(1); }
.gift__sparkles{ transition:opacity .6s var(--e-out); }
.gift.is-open .gift__sparkles{ opacity:.9; }
.gift.is-open .gift__box{ animation: giftShake .7s var(--e-out); }

@keyframes giftShake{
  0%{ transform:translateY(0); }
  30%{ transform:translateY(-6px); }
  60%{ transform:translateY(1px); }
  100%{ transform:translateY(0); }
}

.gift__hint{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-3);
  transition:opacity .5s;
}
.gift.is-open .gift__hint{ opacity:0; }

/* сообщение-сюрприз */
.surprise-msg{
  display:grid;
  justify-items:center;
}
.surprise-msg[hidden]{ display:none; }
.surprise-msg__card{
  position:relative;
  max-width:640px;
  padding:clamp(32px,4vw,52px) clamp(26px,4vw,54px);
  border-radius:var(--r-xl);
  text-align:center;
  background:linear-gradient(170deg, rgba(255,255,255,.98), rgba(253,246,236,.94));
  box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.9);
  opacity:0;
  transform:translate3d(0,26px,0) scale(.94);
  animation: msgIn .95s var(--e-back) .18s forwards;
}
.surprise-msg__card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:calc(var(--r-xl) - 10px);
  border:1px solid var(--line-soft);
  pointer-events:none;
}
@keyframes msgIn{
  to{ opacity:1; transform:none; }
}

.surprise-msg__heart{
  display:grid;
  place-items:center;
  width:62px; height:62px;
  margin:0 auto 22px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(150deg,#E8A0A8, var(--wine-2));
  box-shadow:0 14px 30px -14px rgba(142,44,68,.8);
}
.surprise-msg__heart .ico{ width:30px; height:30px; fill:currentColor; }
.surprise-msg__heart{ animation: heartBeat 2.6s var(--e-out) infinite; }
@keyframes heartBeat{
  0%,100%{ transform:scale(1); }
  12%{ transform:scale(1.09); }
  24%{ transform:scale(1); }
  36%{ transform:scale(1.05); }
}

.surprise-msg__text{
  font-family:var(--f-display);
  font-size:clamp(1.28rem,2.6vw,1.95rem);
  font-weight:600;
  font-style:italic;
  line-height:1.45;
  color:var(--wine);
  letter-spacing:-.012em;
}
.surprise-msg__sign{
  margin-top:18px;
  font-family:var(--f-hand);
  font-size:1.3rem;
  color:var(--gold-3);
}

/* ---------------- кнопка «наверх» ---------------- */
.to-top{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:calc(max(18px, env(safe-area-inset-bottom)) + 74px);
  z-index:40;
  display:grid;
  place-items:center;
  width:46px; height:46px;
  border-radius:50%;
  color:var(--wine);
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  cursor:pointer;
  backdrop-filter:blur(8px);
  opacity:0;
  transform:translateY(14px) scale(.9);
  pointer-events:none;
  transition:opacity .5s var(--e-out), transform .5s var(--e-back), border-color .4s, box-shadow .4s;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--gold); box-shadow:var(--sh-md); transform:translateY(-3px); }

/* ---------------- кнопка музыки ---------------- */
.music{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:41;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:52px;
  padding:0 18px;
  border-radius:999px;
  color:var(--wine);
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  box-shadow:var(--sh-sm);
  backdrop-filter:blur(10px);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--e-back), box-shadow .5s var(--e-out), border-color .4s, background .4s;
}
.music:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); border-color:var(--gold); }
.music[aria-pressed="true"]{
  color:#4A3410;
  background:linear-gradient(140deg,#FBEECF,var(--gold-soft));
  border-color:rgba(200,162,80,.6);
}

.music__icon{
  display:grid; place-items:center;
  width:22px; height:22px;
  position:relative;
}
.music__icon .ico{ position:absolute; transition:opacity .3s, transform .4s var(--e-back); }
.music__on{ opacity:0; transform:scale(.6) rotate(-20deg); }
.music__off{ opacity:1; transform:none; }
.music[aria-pressed="true"] .music__on{ opacity:1; transform:none; }
.music[aria-pressed="true"] .music__off{ opacity:0; transform:scale(.6) rotate(20deg); }

.music__bars{
  display:flex;
  align-items:flex-end;
  gap:2.5px;
  height:16px;
  opacity:0;
  transition:opacity .4s;
}
.music__bars > i{
  width:2.5px; height:5px;
  border-radius:2px;
  background:currentColor;
  transform-origin:bottom;
}
.music[aria-pressed="true"] .music__bars{ opacity:.9; }
.music[aria-pressed="true"] .music__bars > i{ animation: eq 1.1s var(--e-soft) infinite; }
.music[aria-pressed="true"] .music__bars > i:nth-child(2){ animation-delay:.16s; }
.music[aria-pressed="true"] .music__bars > i:nth-child(3){ animation-delay:.32s; }
.music[aria-pressed="true"] .music__bars > i:nth-child(4){ animation-delay:.48s; }
@keyframes eq{
  0%,100%{ height:5px; }
  50%{ height:16px; }
}

.music__label{
  font-size:.84rem;
  font-weight:600;
  letter-spacing:.06em;
}
@media (max-width:520px){
  .music__label{ display:none; }
  .music{ padding:0 16px; }
  .to-top{ bottom:calc(max(18px, env(safe-area-inset-bottom)) + 68px); }
}

/* ---------------- canvas с частицами ---------------- */
.fx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
/* слой салютов — поверх содержимого секции */
.fx-canvas--burst{ z-index:3; }