/* ═══════════════════════════════════════════════
   wedding.css — Альмир & Эльза · 05.07.2026
   Все стили свадебного сайта
═══════════════════════════════════════════════ */

:root{
  --cream:#faf6f0;--milk:#f5efe4;--lace:#ede3d3;--warm:#e8dcc8;
  --brown:#5c3d2a;--bd:#3d2412;--bl:#7a5540;
  --gold:#c9a96e;--gl:#dfc08a;--gd:#a07840;
  --text:#3d2412;--ts:#6b4a2f;--orn:#b8956a;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  color:var(--text);
  font-family:'EB Garamond',Georgia,serif;
  overflow-x:hidden;
  /* Шёлковое полотно как глобальный фон */
  background-color:var(--cream);
  background-image: url('img/fon.png');
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-position:center;
}

/* ═══════════════════════════════════
   КОНВЕРТ — бежевый, настоящий конверт
   4 клапана, печать на кончике верхнего,
   анимация открытия с откидыванием клапана
═══════════════════════════════════ */
#env{
  position:fixed;inset:0;z-index:9999;
  background:#e8dcc8;
  overflow:hidden;
}

/* SVG конверта — весь рендеринг внутри */
#envSvg{z-index:1;pointer-events:none}

/* Цветочные узоры */
.env-flowers{
  position:absolute;inset:0;pointer-events:none;z-index:2;
}
.ef{position:absolute;width:clamp(70px,18vw,110px);height:clamp(70px,18vw,110px)}
.ef-tl{top:0;left:0}
.ef-tr{top:0;right:0}
.ef-bl{bottom:0;left:0}
.ef-br{bottom:0;right:0}

/* По текстуре */
#env{
  position:fixed;
  inset:0;
  z-index:9999;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.16), transparent 32%),
    radial-gradient(circle at 78% 74%, rgba(120,90,45,.06), transparent 30%),
    linear-gradient(180deg, #ede2cf 0%, #e5d8c1 55%, #ddd0b7 100%);
  overflow:hidden;
}

#env line{
  stroke: rgba(96,68,30,.20);
  stroke-width: 1.05;
  filter:
    drop-shadow(0 1px 0 rgba(255,248,235,.16));
}



/* SVG конверта */
#envSvg{
  z-index:1;
  pointer-events:none;
}

/* Бумажная текстура */
/* .env-paper-texture{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(rgba(237,228,209,.22), rgba(220,206,182,.18)),
    url("img/paper-texture.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.34;
  mix-blend-mode:multiply;
  filter:contrast(103%) brightness(103%) saturate(75%);
} */
.env-paper-texture{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(rgba(237,228,209,.20), rgba(220,206,182,.16)),

    /* центральный ряд */
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg"),

    /* верхний ряд */
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg"),

    /* нижний ряд */
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg"),
    url("img/paper-texture.jpg");

  background-position:
    center,

    -4% 50%,
    50% 50%,
    104% 50%,

    -4% 0%,
    50% 0%,
    104% 0%,

    -4% 100%,
    50% 100%,
    104% 100%;

  background-position:
    center,

    /* центральный ряд */
    0% 50%,
    50% 50%,
    100% 50%,

    /* верхний ряд */
    0% 0%,
    50% 0%,
    100% 0%,

    /* нижний ряд */
    0% 100%,
    50% 100%,
    100% 100%;

  background-repeat:
    no-repeat,

    no-repeat,
    no-repeat,
    no-repeat,

    no-repeat,
    no-repeat,
    no-repeat,

    no-repeat,
    no-repeat,
    no-repeat;

  opacity:.34;
  mix-blend-mode:multiply;
  filter:contrast(103%) brightness(103%) saturate(75%);
}



/* Лёгкая виньетка по краям */
#env::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 26%,
      rgba(255,249,238,.24) 0%,
      rgba(255,249,238,.14) 18%,
      rgba(255,249,238,0) 42%),
    linear-gradient(
      120deg,
      rgba(255,250,240,.12) 0%,
      rgba(255,250,240,.05) 22%,
      rgba(255,250,240,0) 44%
    );
}

#env::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(
      118deg,
      rgba(0,0,0,0) 0%,
      rgba(92,64,24,.03) 30%,
      rgba(82,56,20,.10) 58%,
      rgba(64,42,14,.18) 100%
      ),
    radial-gradient(circle at 86% 48%,
      rgba(88,58,20,.18) 0%,
      rgba(88,58,20,.10) 24%,
      rgba(88,58,20,0) 50%);
}

#envSvg line{
  filter:drop-shadow(0 1px 0 rgba(255,248,235,.22));
}

#env.opening .env-paper-texture{
  opacity:.24;
  transition:opacity .35s ease;
}



/* Восковая печать — точно на кончике верхнего треугольника (50%, 50%) */
/*.env-seal-wrap{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s, filter .25s;
}
.env-seal-wrap:hover{
  transform:translate(-50%,-50%) scale(1.1);
  filter:brightness(1.08);
}*/

/* Печать исчезает при открытии */
/*#env.opening .env-seal-wrap{
  opacity:0;
  transform:translate(-50%,-50%) scale(.1);
  pointer-events:none;
}*/



.env-seal-wrap:hover{
  transform:translate(-50%,-50%) scale(1.06);
  filter:brightness(1.04);
}

.env-seal-wrap{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:12;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  padding:0;
  will-change:transform,left,top,opacity;
  transition:
    left .08s linear,
    top .08s linear,
    transform .08s linear,
    opacity .22s ease,
    filter .22s ease;
}

/* Главная тень печати на бумаге */
.env-seal-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:176px;
  height:66px;
  transform:translate(-58%, 10%) rotate(-10deg);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(60,38,12,.34) 0%,
      rgba(60,38,12,.25) 34%,
      rgba(60,38,12,.12) 62%,
      transparent 100%
    );
  filter:blur(14px);
  opacity:1;
}

.env-seal-wrap::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:118px;
  height:36px;
  transform:translate(-74%, 2%) rotate(-18deg);
  border-radius:50%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(
      ellipse at center,
      rgba(56,34,10,.26) 0%,
      rgba(56,34,10,.16) 50%,
      transparent 100%
    );
  filter:blur(10px);
  opacity:1;
}

.env-seal-img{
  display:block;
  width:148px;
  height:auto;
  user-select:none;
  pointer-events:none;
  transform-origin:center center;
  filter:
    drop-shadow(-14px 10px 14px rgba(70,44,14,.28))
    drop-shadow(0 18px 22px rgba(52,32,10,.30))
    drop-shadow(3px -2px 0 rgba(255,249,240,.36));
}

/* След от отлипания */
.env-seal-mark{
  position:fixed;
  top:50%;
  left:50%;
  width:82px;
  height:82px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  z-index:11;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 44% 44%,
      rgba(120,86,44,.18) 0%,
      rgba(120,86,44,.11) 34%,
      rgba(120,86,44,.05) 58%,
      transparent 78%);
  filter:blur(2.6px);
  transition:opacity .18s ease;
}

#env.opening .env-seal-mark{
  opacity:.92;
}

/* ВАЖНО: печать не скрываем мгновенно */
/* #env.opening .env-seal-img{
  opacity:1;
} */

/* Момент "отлипания" печати */

#envLeft{
  opacity:.52;
  filter:
    drop-shadow(-6px -2px 8px rgba(255,248,235,.82))
    drop-shadow(1px 2px 3px rgba(76,54,22,.86));
}

#envRight{
  opacity:.94;
  filter:
    drop-shadow(18px 12px 22px rgba(64,40,14,.52))
    drop-shadow(4px 2px 4px rgba(84,58,24,.52));
}

#envBottom{
  opacity:.82;
  filter:
    drop-shadow(0 4px 7px rgba(70,48,18,.08));
}

#envFlapTop{
  stroke: rgba(108,74,30,.22);
  stroke-width: 1.15;
  vector-effect: non-scaling-stroke;
  paint-order: stroke fill markers;
  filter:
    drop-shadow(0 12px 16px rgba(70,46,18,.58))
    drop-shadow(0 -1px 0 rgba(255,248,235,.58));
}

#env.opening #envFlapTop{
  stroke: rgba(96,64,24,.80);
  stroke-width: 1.25;
}

#envFlapSheen{
  opacity:.12;
  filter:blur(1px);
}

#envFlapShadow{
  filter:blur(16px);
}

/* #env.opening .env-seal-wrap{
  pointer-events:none;
} */

.env-seal-hint{
  font-family:'EB Garamond',serif;
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(110,75,25,.55);
  white-space:nowrap;
  animation:hintPulse 2s ease infinite;
  transition:opacity .25s ease, transform .35s ease;
}

#env.opening .env-seal-hint{
  opacity:0;
  transform:translateY(6px);
}

.env-seal-hint{
  font-family:'EB Garamond',serif;
  font-size:11px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(110,75,25,.55);
  white-space:nowrap;
  animation:hintPulse 2s ease infinite;
}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:.9}}

/* Текст-приглашение вверху */
.env-invite-block{
  position:absolute;
  top:clamp(50px,12vw,200px);
  left:50%;transform:translateX(-50%);
  z-index:5;text-align:center;
  width:80%;pointer-events:none;
}
@media(max-width:480px){
  .env-invite-block{top:35%}
}
.env-invite-script{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(17px,4.5vw,26px);
  font-style:italic;font-weight:300;
  color:rgba(100,70,30,.68);
  line-height:1.45;
  text-shadow:0 1px 4px rgba(255,248,235,.5);
}

/* Появление */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.env-flowers svg{animation:fadeUp .7s ease both}
.ef-tl{animation-delay:.05s!important}
.ef-tr{animation-delay:.1s!important}
.ef-bl{animation-delay:.15s!important}
.ef-br{animation-delay:.2s!important}
.env-invite-block .env-invite-script:first-child{animation:fadeUp .9s .45s ease both}
.env-invite-block .env-invite-script:last-child{animation:fadeUp .9s .6s ease both}
.env-seal-wrap{animation:sealIn .7s .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes sealIn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* Выход конверта — сдвиг вверх */
#env.hide{
  animation:envExit .55s ease both;
  pointer-events:none;
}
@keyframes envExit{
  0%  {opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-6%)}
}
@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(6px)}}

/* Сайт скрыт изначально */
#site{display:none}
#site.on{display:block}

/*======== Орнамент ========*/
.ornament{
  width: 320px;
  opacity: .9;
  transform: rotate(0deg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
  position:absolute;inset:0;pointer-events:none;z-index:2;
  fill: #a07840;
}




/* ═══════════════════════════════════
   NAV DOTS
═══════════════════════════════════ */
.ndots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:200;display:flex;flex-direction:column;gap:9px}
.ndot{width:7px;height:7px;border-radius:50%;background:transparent;border:1.5px solid rgba(184,149,106,.6);cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1)}
.ndot.on{background:var(--orn);border-color:var(--orn);transform:scale(1.55);box-shadow:0 0 8px rgba(201,169,110,.5)}

/* ═══════════════════════════════════
   SECTIONS — шёлковый фон просвечивает,
   поверх полупрозрачное наложение
═══════════════════════════════════ */
section{
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:70px 22px 60px;
  position:relative;overflow:hidden;
}
/* Тёплое молочное покрытие поверх шёлка — нечётные */
section:nth-child(odd){background:rgba(250,246,240,.82);}
/* Чуть теплее — чётные */
section:nth-child(even){background:rgba(245,239,228,.88);}

/* ── общие ── */
.ol{display:flex;align-items:center;gap:12px;width:100%;max-width:300px;margin:16px auto}
.ol::before,.ol::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--orn),transparent)}
.od{width:7px;height:7px;background:var(--orn);transform:rotate(45deg);flex-shrink:0}
.lbl{font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--orn);margin-bottom:20px}
.stitle{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,7vw,38px);font-weight:400;color:var(--brown);text-align:center;margin-bottom:6px}

/* угловые кружева */
.cl{position:absolute;width:120px;height:120px;opacity:.35;pointer-events:none}
.cl.tl{top:0;left:0}.cl.tr{top:0;right:0;transform:scaleX(-1)}
.cl.bl{bottom:0;left:0;transform:scaleY(-1)}.cl.br{bottom:0;right:0;transform:scale(-1)}

/* ── S1: HERO ── */
#s1{
  text-align:center;gap:0;
  background:transparent !important;
  /* Фон — кружевная текстура */
}
#s1::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image: url('img/s1.png');
  background-size:cover;background-position:center;
  opacity:.8;
  mix-blend-mode:multiply;
}
#s1::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(250,246,240,.78) 0%,rgba(250,246,240,.55) 60%,rgba(250,246,240,.18) 100%);
}
#s1 > *{position:relative;z-index:1}

.hero-eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--orn);margin-bottom:14px}
.hero-names{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,12vw,80px);font-weight:300;letter-spacing:2px;color:var(--bd);line-height:1;margin-bottom:4px}
.hero-names em{font-style:italic;color:var(--orn)}
.hero-tatar{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,3.8vw,20px);font-style:italic;font-weight:300;color:var(--bl);margin-bottom:26px}
.hero-date{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,6vw,40px);font-weight:300;color:var(--brown);letter-spacing:8px;margin:20px 0 18px}
.hero-phrase{font-family:'Cormorant Garamond',serif;font-size:clamp(15px,4vw,20px);font-style:italic;font-weight:300;color:var(--ts);max-width:300px;line-height:1.7;margin:0 auto}

/* ── DIPTYCH ── */
#s-dip{min-height:auto;padding:0;background:rgba(61,36,18,.92)!important;overflow:hidden;position:relative}
.dip{display:grid;grid-template-columns:1fr 1fr;width:100%;height:clamp(280px,62vw,460px)}
.dc{position:relative;overflow:hidden}
.dc img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:sepia(18%) saturate(82%) brightness(.88);transition:transform .8s ease,filter .8s ease;display:block}
.dc:hover img{transform:scale(1.06);filter:sepia(8%) saturate(95%) brightness(.95)}
.dco{position:absolute;inset:0;background:linear-gradient(to top,rgba(40,18,6,.65) 0%,transparent 55%)}
.dcl{position:absolute;bottom:14px;left:14px;right:14px;font-family:'Cormorant Garamond',serif;font-size:clamp(15px,4.5vw,21px);font-style:italic;color:rgba(255,255,255,.9);font-weight:300;line-height:1.3}
.dip-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;background:var(--cream);border:1px solid rgba(201,169,110,.7);width:clamp(58px,12vw,80px);height:clamp(58px,12vw,80px);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 22px rgba(40,18,6,.35)}
.dip-badge span{font-family:'Cormorant Garamond',serif;font-size:clamp(14px,3.2vw,20px);color:var(--orn);font-style:italic}

/* ── S2: GUEST ── */
#s2{text-align:center;overflow:hidden}
.big-q{font-family:'Cormorant Garamond',serif;font-size:160px;line-height:.5;color:var(--orn);opacity:.08;font-style:italic;position:absolute;top:50px;left:50%;transform:translateX(-50%);pointer-events:none;letter-spacing:-10px;white-space:nowrap}
.gtitle{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,7vw,42px);font-weight:400;color:var(--brown);margin-bottom:22px}
.gtxt{font-size:clamp(16px,4vw,18px);line-height:2;color:var(--ts);max-width:340px;font-style:italic}
.gtxt p{margin-bottom:14px}

#s2::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('img/ae.jpg');
  background-size: cover;
  background-position: center 85%;
  opacity: .3;
  mix-blend-mode: multiply;
}
#s2::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(250,246,240,.78) 0%,rgba(250,246,240,.55) 60%,rgba(250,246,240,.18) 100%);
}
#s2 > *{position:relative;z-index:1}

/* ── S3: VENUE ── */
/* ── S3: CALENDAR ── */
#s3{text-align:center;gap:0}

/* ── S4: VENUE ── */
#s4{text-align:center;gap:0}
#s4::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image: url('img/loft.jpg');
  background-size:cover;background-position:center;
  opacity:.2;
  mix-blend-mode:multiply;
}
#s4::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 75% 70% at 50% 50%,rgba(250,246,240,.78) 0%,rgba(250,246,240,.55) 60%,rgba(250,246,240,.18) 100%);
}
#s4 > *{position:relative;z-index:1}

.vname{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,8vw,48px);font-weight:500;color:var(--brown);letter-spacing:3px;margin-bottom:4px}
.vsub{font-size:clamp(11px,3vw,14px);color:var(--bl);letter-spacing:3px;margin:3px 0}
.vaddr{font-size:clamp(13px,3.5vw,15px);color:var(--ts);font-style:italic;margin-bottom:22px}
.mapw{width:100%;max-width:420px;border:1px solid var(--lace);box-shadow:0 6px 30px rgba(74,47,26,.1);overflow:hidden;margin:0 auto 12px}
.mapw iframe{width:100%;height:220px;border:none;display:block}
.mlnk{display:inline-block;font-size:11px;color:var(--orn);text-decoration:none;letter-spacing:2px;border-bottom:1px solid var(--gl);padding-bottom:2px;transition:color .2s}
.mlnk:hover{color:var(--brown)}

/* ── S5: TIMELINE ── */
#s5{text-align:left}
.tl{width:100%;max-width:360px;margin:24px auto 0;position:relative}
.tl::before{content:'';position:absolute;left:58px;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,var(--orn) 10%,var(--orn) 90%,transparent)}
.ti{display:flex;align-items:flex-start;gap:16px;margin-bottom:26px;position:relative}
.tt{font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:500;color:var(--orn);min-width:50px;text-align:right;padding-top:2px}
.td{width:10px;height:10px;background:rgba(250,246,240,.9);border:2px solid var(--orn);border-radius:50%;flex-shrink:0;margin-top:5px;position:relative;z-index:1;transition:background .3s,transform .3s}
.ti:hover .td{background:var(--orn);transform:scale(1.4)}
section:nth-child(even) .td{background:rgba(245,239,228,.9)}
.tx{font-size:clamp(14px,3.8vw,16px);line-height:1.6;color:var(--ts);font-style:italic;padding-top:1px}

/* ── S5: PALETTE ── */
#s6{text-align:center}
.ps{width:100%;max-width:380px;margin:0 auto 16px}
.pg{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--orn);margin-bottom:10px}
.pr{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;gap:5px}
.swc{width:46px;height:46px;border-radius:50%;border:1px solid rgba(74,47,26,.15);box-shadow:0 3px 12px rgba(0,0,0,.09);transition:transform .35s cubic-bezier(.34,1.56,.64,1);cursor:default}
.swc:hover{transform:scale(1.22) translateY(-4px)}
.swn{font-size:9px;color:var(--ts);font-style:italic}

/* ── S7: DRESSCODE editorial ── */
#s7{padding:0;min-height:auto!important;background:rgba(250,246,240,.9)!important}
.dcmag{width:100%;display:flex;flex-direction:column}
.dch{padding:55px 22px 22px;text-align:center}
.dct{display:flex;max-width:420px;width:100%;margin:0 auto;border-top:1px solid var(--lace);border-bottom:1px solid var(--lace)}
.dtb{flex:1;padding:13px 8px;font-family:'EB Garamond',serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;background:transparent;color:var(--ts);border:none;cursor:pointer;transition:all .3s;position:relative}
.dtb::after{content:'';position:absolute;bottom:0;left:50%;right:50%;height:2px;background:var(--orn);transition:all .3s}
.dtb.on{color:var(--brown);background:rgba(201,169,110,.09)}
.dtb.on::after{left:0;right:0}
.dp{display:none;animation:panelIn .45s ease}
.dp.on{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.dcp-carousel{position:relative;width:100%;height:clamp(260px,68vw,400px);overflow:hidden}
.dcp-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.dcp-slide{flex:0 0 100%;position:relative;height:100%}
.dcp-slide img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:sepia(12%) saturate(88%) brightness(.88);display:block}
.dcpv{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(250,246,240,.97) 100%)}
.dcp-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(250,246,240,.72);border:1px solid rgba(184,149,106,.35);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:24px;line-height:1;color:var(--brown);transition:all .25s;backdrop-filter:blur(4px);padding:0}
.dcp-btn:hover{background:rgba(250,246,240,.95);border-color:var(--orn)}
.dcp-prev{left:10px}
.dcp-next{right:10px}
.dcp-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:4}
.dcp-dot{width:7px;height:7px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.65);cursor:pointer;transition:all .25s}
.dcp-dot.on{background:var(--orn);border-color:var(--orn)}
.dcs{display:flex;height:6px;width:100%}
.dcs div{flex:1}
.dcb{padding:22px 22px 28px;max-width:420px;margin:0 auto}
.dcb p{font-size:clamp(14px,3.8vw,16px);line-height:1.9;color:var(--ts);font-style:italic;margin-bottom:10px}
.dctag{display:inline-block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--orn);border:1px solid rgba(184,149,106,.45);padding:3px 9px;margin-top:12px}

/* ── S7b: ACCESSORIES ── */
#s7b{text-align:center;background:rgba(245,240,233,.95)!important;padding-bottom:60px}
.acc-sep{display:flex;align-items:center;gap:14px;max-width:420px;width:100%;margin:0 auto;padding:28px 22px 0}
.acc-sep-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--lace),transparent)}
.acc-sep-orn{font-size:9px;color:var(--orn);letter-spacing:3px;white-space:nowrap}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;width:100%;margin:22px auto 0;padding:0 18px}
.acc-card{background:rgba(255,252,247,.85);overflow:hidden;transition:box-shadow .3s}
.acc-card:hover{box-shadow:0 5px 22px rgba(160,120,60,.13)}
.acc-wide{grid-column:span 2}
.acc-img-wrap{position:relative;width:100%;aspect-ratio:16/9;background:rgba(212,191,196,.18);overflow:hidden;display:flex;align-items:center;justify-content:center}
.acc-wide .acc-img-wrap{aspect-ratio:16/7}
.acc-img-wrap::before{content:'✦';font-size:20px;color:rgba(184,149,106,.22);position:absolute}
.acc-img-wrap img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;filter:sepia(10%) saturate(85%) brightness(.9)}
.acc-body{padding:11px 13px 15px;border:1px solid var(--lace);border-top:none;text-align:left}
.acc-cat{display:block;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--orn);margin-bottom:5px}
.acc-title{font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:500;letter-spacing:.8px;color:var(--brown);margin-bottom:5px}
.acc-text{font-family:'EB Garamond',serif;font-size:12px;line-height:1.7;color:var(--ts);font-style:italic}

/* ── S8: FORM ── */
#s8{text-align:center}
.fc{width:100%;max-width:400px;margin:0 auto}
.fdl{font-size:12px;color:var(--orn);letter-spacing:1.5px;margin-bottom:22px;font-style:italic}
.fg{margin-bottom:16px;text-align:left}
.fl{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--bl);margin-bottom:6px}
.finp{
  width:100%;padding:11px 13px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--lace);
  font-family:'EB Garamond',serif;font-size:16px;
  color:var(--text);outline:none;
  transition:border-color .2s,background .2s;
  -webkit-appearance:none;border-radius:0;
}
.finp:focus{border-color:var(--orn);background:rgba(255,255,255,.95)}
.finp::placeholder{color:var(--warm);font-style:italic}
.rg,.cg{display:flex;flex-direction:column;gap:7px;overflow:visible}
.rl,.cl{
  position:static;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  pointer-events:auto;
  font-size:15px;color:var(--ts);font-style:italic;
  padding:8px 13px;
  border:1px solid var(--lace);
  background:rgba(255,255,255,.45);transition:all .2s;
  width:auto;height:auto;opacity:1;
}
.rl:hover,.cl:hover{background:rgba(255,255,255,.85);border-color:var(--orn)}
.rl input,.cl input{display:none}
.rc{width:13px;height:13px;border:1.5px solid var(--orn);border-radius:50%;flex-shrink:0;position:relative;transition:all .2s}
.cc{width:13px;height:13px;border:1.5px solid var(--orn);border-radius:2px;flex-shrink:0;position:relative;transition:all .2s}
.rl input:checked~.rc{background:var(--orn)}
.rl input:checked~.rc::after{content:'';position:absolute;inset:2.5px;background:white;border-radius:50%}
.cl input:checked~.cc{background:var(--orn)}
.cl input:checked~.cc::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font-size:9px;line-height:13px;text-align:center}
.partner-toggle{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  pointer-events:auto;
  font-size:14px;color:var(--orn);font-style:italic;font-family:'Cormorant Garamond',serif;
  letter-spacing:1px;margin:4px 0;background:none;border:none;padding:0;
}
.partner-toggle::before{content:'＋';font-style:normal;font-size:16px}
.partner-toggle.open::before{content:'－'}
.partner-block{display:none;border-top:1px solid var(--lace);padding-top:18px;margin-top:4px}
.partner-block.on{display:block}
.partner-sep{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--orn);
  letter-spacing:2px;text-align:center;margin-bottom:14px;opacity:.75}
.bsub{
  width:100%;padding:15px;background:transparent;
  border:1px solid var(--orn);color:var(--brown);
  font-family:'Cormorant Garamond',serif;font-size:15px;
  letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:all .35s;margin-top:20px;
  border-radius:0;display:block;position:relative;z-index:2;
  clear:both;
}
.bsub:hover{background:var(--orn);color:var(--cream)}
.fsuc{display:none;text-align:center;padding:30px;border:1px solid var(--lace);background:rgba(255,255,255,.6)}
.fsuc.on{display:block}
.fsuc p{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--brown);font-style:italic}
.ob{
  margin-top:22px;padding:18px;
  border:1px solid var(--lace);
  background:rgba(255,255,255,.4);
  font-size:14px;color:var(--ts);
  font-style:italic;line-height:1.8;
}
.ob a{color:var(--orn);text-decoration:none;font-style:normal;font-weight:500}

/* ── S9: FINAL ── */
#s9{
  text-align:center;
  background:transparent!important;
}
#s9::before {
  content:'';position:absolute;inset:0;z-index:0;
  background-image: url('img/s1.png');
  background-size:cover;background-position:center;
  opacity:.15;mix-blend-mode:multiply;
}
#s9::after{
  content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(250,246,240,.8) 0%,rgba(250,246,240,.6) 70%,rgba(250,246,240,.2) 100%);
}
#s9>*{position:relative;z-index:1}
.fnm{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,8vw,48px);font-weight:300;color:var(--brown);line-height:1.3;margin-bottom:10px}
.fnt{font-family:'Cormorant Garamond',serif;font-size:clamp(17px,5vw,26px);font-style:italic;font-weight:300;color:var(--bl);margin-bottom:26px}
.fnn{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,7vw,38px);letter-spacing:3px;color:var(--brown)}
.fnd{font-size:12px;letter-spacing:4px;color:var(--orn);text-transform:uppercase;margin-top:8px}

/* ── fade animations ── */
.fie{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.fie.vis{opacity:1;transform:translateY(0)}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}
.d4{transition-delay:.48s}.d5{transition-delay:.60s}

/* ═══════════════════════════════════
   CALENDAR
═══════════════════════════════════ */
.cal-wrap{
  width:100%;max-width:340px;margin:0 auto;
  background:rgba(255,255,255,.7);
  border:1px solid var(--lace);
  box-shadow:0 8px 32px rgba(74,47,26,.09);
  padding:0 0 18px;
  border-radius:2px;
}
.cal-header{
  padding:18px 20px 14px;
  text-align:center;
  border-bottom:1px solid var(--lace);
}
.cal-month-name{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:400;
  color:var(--brown);letter-spacing:2px;
  text-transform:lowercase;
}
.cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:0;padding:14px 14px 8px;
}
.cal-dow{
  text-align:center;font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--orn);
  padding:4px 0 8px;font-weight:500;
}
.cal-dow-we{color:var(--bl);opacity:.7}
.cal-day{
  text-align:center;
  font-family:'EB Garamond',serif;
  font-size:15px;color:var(--ts);
  padding:6px 2px;cursor:default;
  border-radius:50%;
  transition:background .2s;
}
.cal-day:hover{background:rgba(201,169,110,.1)}
.cal-we{color:var(--bl);opacity:.75}
.cal-empty{padding:6px 2px}
.cal-wedding{
  position:relative;
  background:var(--orn) !important;
  color:white !important;
  font-weight:500;
  border-radius:50%;
  box-shadow:0 3px 14px rgba(184,149,106,.45);
  opacity:1 !important;
}
.cal-wedding:hover{background:var(--gold) !important}
.cal-ring{
  position:absolute;top:-2px;left:50%;
  transform:translateX(-50%);
  font-size:25px;color:var(--orn);
  pointer-events:none;
}
.cal-wedding .cal-ring{color:rgba(255,255,255,.8)}
.cal-legend{
  display:flex;align-items:center;gap:9px;
  justify-content:center;
  padding:0 16px;margin-top:10px;
}
.cal-legend-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--orn);flex-shrink:0;
}
.cal-legend span{font-size:12px;color:var(--ts);font-style:italic}
.cal-countdown{
  margin-top:20px;
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(14px,3.8vw,17px);
  font-style:italic;color:var(--bl);
  text-align:center;
}

/* ═══════════════════════════════════
   MUSIC PLAYER — iPhone стиль, секция
═══════════════════════════════════ */

/* Секция плеера — идёт после s1 */
.mp-section{
  min-height:auto;
  padding:60px 28px 56px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:0;
  background:rgba(245,239,228,.96);
}

.mp-label{
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--orn);margin-bottom:28px;
}

/* Обложка — большой квадрат с тенью */
.mp-art{
  width:clamp(180px,55vw,260px);
  height:clamp(180px,55vw,260px);
  border-radius:16px;
  background:linear-gradient(145deg,var(--warm),var(--lace));
  box-shadow:0 24px 60px rgba(90,55,20,.22), 0 6px 16px rgba(90,55,20,.14);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  margin-bottom:28px;
  flex-shrink:0;
}
.mp-art img{
  width:100%;height:100%;object-fit:cover;border-radius:16px;
}

/* Мета */
.mp-meta{
  text-align:center;
  margin-bottom:20px;
  width:100%;
  max-width:320px;
}
.mp-track-name{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,5.5vw,26px);
  color:var(--brown);
  font-weight:500;
  line-height:1.2;
  margin-bottom:5px;
}
.mp-track-sub{
  font-size:11px;color:var(--orn);letter-spacing:2px;
  text-transform:uppercase;
}

/* Прогресс-бар — толстый, как в iOS */
.mp-progress-wrap{
  width:100%;max-width:320px;
  margin-bottom:8px;
}
.mp-progress{
  width:100%;height:4px;
  background:rgba(180,149,106,.25);
  cursor:pointer;
  border-radius:4px;
  position:relative;
  overflow:visible;
}
.mp-progress-fill{
  height:100%;background:var(--brown);border-radius:4px;
  width:0%;pointer-events:none;
}
/* Ползунок-кружок */
.mp-progress::after{
  content:'';position:absolute;top:50%;
  left:var(--pct,0%);
  width:14px;height:14px;border-radius:50%;
  background:var(--brown);
  transform:translate(-50%,-50%);
  pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

/* Тайминги */
.mp-times{
  display:flex;justify-content:space-between;
  width:100%;max-width:320px;
  margin-bottom:28px;
}
.mp-time{
  font-size:11px;color:var(--ts);font-family:monospace;opacity:.65;
}

/* Кнопки управления — крупные */
.mp-controls{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,8vw,44px);
  width:100%;max-width:320px;
}
.mp-btn{
  background:transparent;border:none;cursor:pointer;
  color:var(--brown);padding:4px;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .2s, transform .18s;
  flex-shrink:0;
}
.mp-btn:active{opacity:.5;transform:scale(.9)}
.mp-play{
  width:clamp(56px,16vw,68px);
  height:clamp(56px,16vw,68px);
  background:var(--brown);
  color:var(--cream);
  border-radius:50%;
  box-shadow:0 6px 24px rgba(92,61,42,.35);
  flex-shrink:0;
}
.mp-play:active{transform:scale(.93);opacity:.85}