/*
Theme Name: Rayven Velvet Heart
Version: 1.0.0
Author: Rayven Media
Description: Burgundy velvet heart-box cinematic invitation with Rayven RSVP and six-photo gallery.
Text Domain: rayven-velvet-heart
*/

:root{
  --wine:#2a050b; --garnet:#5c0d19; --scarlet:#94172a; --flame:#e7b56f; --cream:#f3e7df; --paper:#f8efe7;
  --ink:#2b0a0f; --soft:rgba(43,10,15,.72); --light:rgba(243,231,223,.8);
  --script:"Ballet",cursive; --serif:"Gilda Display",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--wine);color:var(--ink);font:300 16px/1.65 var(--sans);overflow-x:clip;overscroll-behavior-x:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== 0–1 · заставка и первый экран: один дубль на весь экран. Коробка-сердце, спичка, пролёт над столом,
   надписи держатся на экране в глубине зала ===== */
.first{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:#140205}
.film,.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.still{opacity:0;transition:opacity .6s}
.first.is-still .still{opacity:1}
.hint{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));z-index:2;text-align:center;color:var(--cream);pointer-events:none;transition:opacity .5s}
.hint p{display:inline-block;margin:0;padding:9px 18px;border-radius:999px;background:rgba(42,5,11,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:400 15px/1.4 var(--sans);letter-spacing:.05em}
.hint i,.cue i{display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--cream),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.first.is-go .hint{opacity:0}
.tap{position:absolute;inset:0;z-index:3;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.first.is-go .tap{display:none}

/* надписи на экране зала. Размер шрифта задан один раз под последний кадр, в полёте меняется только масштаб:
   так буквы не дрожат и не мылятся */
.proj{position:absolute;left:0;top:0;width:calc(var(--u,160px) * 1.9);height:var(--u,160px);z-index:2;pointer-events:none;color:#fff2ea;text-shadow:0 2px 10px rgba(40,0,8,.85),0 0 30px rgba(40,0,8,.6);
  transform-origin:50% 50%;transform:translate3d(var(--x,0px),var(--y,0px),0) translate(-50%,-50%) scale(var(--k,1))}
.proj span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;opacity:0;transition:opacity .8s ease}
.proj span.on{opacity:1}
.proj .s{font:400 calc(var(--u,160px) * .38)/1 var(--script);white-space:nowrap}
.proj .t{font:400 calc(var(--u,160px) * .17)/1.25 var(--serif)}
.proj .fin{gap:calc(var(--u,160px) * .04)}
.proj .fin b{font:400 calc(var(--u,160px) * .38)/1 var(--script)}
.proj .fin em{font:400 calc(var(--u,160px) * .13)/1.2 var(--serif);font-style:normal}
.proj .fin small{font:400 calc(var(--u,160px) * .078)/1.3 var(--sans);letter-spacing:.12em;margin-top:calc(var(--u,160px) * .03)}
.cue{position:absolute;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));z-index:2;text-align:center;color:var(--cream);opacity:0;transition:opacity 1s .4s}
.cue p{margin:0;font:400 14px/1.4 var(--sans);letter-spacing:.05em;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.first.is-end .cue{opacity:1}

.music{position:fixed;right:14px;top:calc(14px + env(safe-area-inset-top));z-index:30;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(42,5,11,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--cream);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .6s}
.music.is-on{opacity:1;pointer-events:auto}
.music svg{width:18px;height:18px}
.music[aria-pressed="false"] .on,.music[aria-pressed="true"] .off{display:none}

/* ===== общие блоки ===== */
.sec{position:relative;padding:clamp(72px,18vw,112px) 22px;overflow:hidden}
.wrap{max-width:520px;margin:0 auto;position:relative;z-index:1}
.velvet{background:#3a0610 url(media/velvet-hq.jpg) center/cover;color:var(--cream)}
.velvet::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(34,3,9,.42),rgba(34,3,9,.66))}
.paper{background:var(--paper) url(media/paper-fiber.jpg) center/420px;background-blend-mode:multiply;color:var(--ink)}
.paper::before{content:"";position:absolute;inset:0;background:rgba(249,241,234,.86);pointer-events:none}
.h{font:400 clamp(34px,9.6vw,50px)/1.08 var(--serif);margin:0 0 18px;text-align:center;letter-spacing:-.005em}
.lead{text-align:center;max-width:30em;margin:0 auto;opacity:.84}
.velvet .lead{color:var(--light);opacity:1}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid currentColor;background:none;
  font:400 15px/1 var(--sans);letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:background .3s,color .3s}
.btn--fill{background:var(--scarlet);border-color:var(--scarlet);color:var(--cream)}
.btn--fill:hover{background:var(--garnet)}
.velvet .btn--fill{background:var(--cream);border-color:var(--cream);color:var(--wine)}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}

/* ламбрекен с хрустальными подвесками над тёмным блоком */
.valance{position:absolute;left:50%;top:-2px;width:min(100%,900px);transform:translateX(-50%);z-index:2;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.valance img{width:100%}
.valance + .wrap{padding-top:clamp(40px,14vw,90px)}

/* появление: каскад строк и сдвиг заголовков при прокрутке (приёмы Webgency) */
.rv{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.rv.is-in{opacity:1;transform:none}

/* ===== 2 · письмо на хлопковой бумаге ===== */
.letter{position:relative;margin:0 auto;max-width:430px;padding:46px 34px 42px;color:var(--ink);transform:rotate(-.8deg)}
.letter::before{content:"";position:absolute;inset:0;z-index:-1;background:#f6ece2 url(media/paper-fiber.jpg) center/360px;background-blend-mode:multiply;
  box-shadow:0 26px 44px rgba(0,0,0,.5)}
.letter::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,252,247,.5),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(150,80,60,.1),transparent 55%),rgba(250,243,235,.7)}
.letter p{margin:0 0 14px}
.letter .dear{font:400 36px/1.2 var(--script);margin-bottom:18px}
.letter .sign{font:400 42px/1 var(--script);margin:24px 0 0;text-align:right}
/* поверх письма калька: сквозь неё текст едва виден, по касанию калька прогорает и открывает письмо */
.letter{cursor:pointer;-webkit-tap-highlight-color:transparent}
.letter canvas{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);z-index:2;pointer-events:none}
.letter p{transition:filter 1.4s ease}
.letter:not(.is-lit) p{filter:blur(1.6px)}
.letter.is-burnt{cursor:default}
.letter__hint{text-align:center;margin:22px 0 0;font:400 15px/1.4 var(--sans);color:var(--light);transition:opacity .4s}
.letter.is-lit + .letter__hint{opacity:0}

/* ===== 3 · дата под кружевом и бантом ===== */
.gift{position:relative;width:min(84vw,380px);aspect-ratio:4/5;margin:34px auto 0;touch-action:none;user-select:none;-webkit-user-select:none}
.gift__card{position:absolute;inset:0;overflow:hidden;background:#3a0610 url(media/velvet-hq.jpg) center/cover;color:var(--cream);box-shadow:0 24px 50px rgba(60,6,16,.32)}
.gift__card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(40,3,9,.15),rgba(40,3,9,.55))}
.gift__txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px}
.gift__txt p{margin:0}
.gift__txt .d1{font:400 17px/1.3 var(--sans);letter-spacing:.08em;color:var(--light)}
.gift__txt .d2{font:400 clamp(96px,30vw,140px)/.9 var(--serif);margin:6px 0 2px;color:var(--cream)}
.gift__txt .d3{font:400 24px/1.2 var(--serif)}
.gift__txt .d4{font:400 15px/1.4 var(--sans);color:var(--light);margin-top:10px}
.gift__txt p{opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.gift.is-open .gift__txt p{opacity:1;transform:none}
.gift.is-open .gift__txt p:nth-child(2){transition-delay:.15s}
.gift.is-open .gift__txt p:nth-child(3){transition-delay:.3s}
.gift.is-open .gift__txt p:nth-child(4){transition-delay:.45s}
/* кружевные ленты: точно через центр карточки, при развязывании уезжают за её край */
.lace{position:absolute;filter:drop-shadow(0 2px 4px rgba(20,0,4,.5));transition:transform 1.2s var(--ease)}
.lace--v{left:50%;top:0;bottom:0;width:58px;margin-left:-29px;background:url(media/lace-v.webp) center top/58px auto repeat-y}
.lace--h{top:50%;left:0;right:0;height:58px;margin-top:-29px;background:url(media/lace-h.webp) left center/auto 58px repeat-x}
.gift.is-open .lace--v{transform:translateY(-104%)}
.gift.is-open .lace--h{transform:translateX(104%);transition-delay:.12s}
/* бант: узел ровно в точке пересечения лент */
.bow{position:absolute;left:50%;top:50%;width:66%;transform:translate(-50%,-24.5%) translate(var(--bx,0px),var(--by,0px)) rotate(var(--br,0deg));cursor:grab;z-index:2;
  filter:drop-shadow(0 10px 14px rgba(20,0,4,.45));transition:transform .5s var(--ease),opacity .7s ease}
.bow.is-drag{transition:none;cursor:grabbing}
.gift.is-open .bow{transform:translate(-50%,-24.5%) translate(0,-26px) scale(.82);opacity:0;pointer-events:none}
.gift__hint{text-align:center;margin:20px 0 0;font:400 15px/1.4 var(--sans);opacity:.7;transition:opacity .4s}
.gift.is-open + .gift__hint{opacity:0}
.cal{margin-top:22px;text-align:center;opacity:0;pointer-events:none;transition:opacity .8s .6s}
.cal.is-on{opacity:1;pointer-events:auto}

/* ===== 4 · программа: тонкая линия наполняется при прокрутке, пункты загораются ===== */
.steps{list-style:none;margin:34px auto 0;padding:0 0 0 30px;position:relative;max-width:420px}
.steps::before,.steps::after{content:"";position:absolute;left:4px;top:8px;width:1px;bottom:20px}
.steps::before{background:rgba(243,231,223,.18)}
.steps::after{background:linear-gradient(var(--flame),rgba(231,181,111,.5));transform-origin:top;transform:scaleY(var(--p,0))}
.steps li{position:relative;padding:0 0 30px;opacity:.34;transition:opacity .8s ease}
.steps li::before{content:"";position:absolute;left:-30px;top:12px;width:9px;height:9px;border-radius:50%;background:rgba(243,231,223,.3);transition:background .6s,box-shadow .6s}
.steps li.on{opacity:1}
.steps li.on::before{background:var(--flame);box-shadow:0 0 12px rgba(231,181,111,.7)}
.steps time{display:block;font:400 30px/1.1 var(--serif);color:var(--flame)}
.steps b{display:block;font:400 18px/1.35 var(--sans);margin-top:4px}
.steps span{display:block;font-size:15px;color:var(--light)}

/* ===== 5 · таймер на бархате ===== */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:30px;text-align:center}
.count b{display:block;font:400 clamp(42px,13vw,64px)/1 var(--serif);font-variant-numeric:tabular-nums}
.count span{display:block;font-size:14px;color:var(--light);margin-top:8px}
.star{position:absolute;z-index:1;pointer-events:none;animation:twinkle 5.5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.86) rotate(0)}50%{opacity:1;transform:scale(1) rotate(8deg)}}

/* ===== 6 · место: карта картинкой, открывается сразу ===== */
.mapcard{position:relative;display:block;margin:30px auto 0;max-width:460px;aspect-ratio:880/700;overflow:hidden;box-shadow:0 20px 40px rgba(60,6,16,.18)}
.mapcard img{width:100%;height:100%;object-fit:cover}
.pin{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-30px 0 0 -15px;border-radius:50% 50% 50% 0;background:var(--scarlet);transform:rotate(-45deg);box-shadow:0 6px 12px rgba(40,0,8,.4)}
.pin::after{content:"";position:absolute;left:10px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--cream)}
.osm{position:absolute;right:6px;bottom:4px;font-size:10px;color:rgba(43,10,15,.7);background:rgba(248,239,231,.7);padding:0 4px}
.addr{text-align:center;margin-top:24px}
.addr b{display:block;font:400 26px/1.25 var(--serif)}
.addr span{display:block;color:var(--soft);margin-top:4px}

/* ===== 7 · дресс-код: ткань под пальцем ===== */
.fabric{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease}
.fabric.on{opacity:1}
.fabric::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(30,3,8,.4),rgba(30,3,8,.7))}
.swatches{display:flex;justify-content:center;gap:16px;margin-top:30px}
.sw{width:62px;height:62px;border-radius:50%;border:0;background-size:cover;background-position:center;cursor:pointer;padding:0;
  transition:transform .4s var(--ease),box-shadow .4s;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.sw[aria-pressed="true"]{transform:scale(1.18);box-shadow:0 14px 26px rgba(0,0,0,.6)}
.swname{text-align:center;margin-top:18px;font:400 22px/1.3 var(--serif);min-height:1.3em}

/* ===== 8 · детали ===== */
.notes{list-style:none;margin:30px 0 0;padding:0}
.notes li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:16px 0;border-top:1px solid rgba(43,10,15,.12)}
.notes li:last-child{border-bottom:1px solid rgba(43,10,15,.12)}
.notes img{width:22px;margin-top:3px}
.notes b{display:block;font:400 20px/1.3 var(--serif)}
.notes span{color:var(--soft)}

/* ===== 9 · анкета ===== */
.form{margin-top:28px;display:grid;gap:18px}
.field label,.field legend{display:block;font:400 15px/1.3 var(--sans);margin-bottom:8px;padding:0}
.field{border:0;margin:0;padding:0}
.in{width:100%;min-height:50px;border:0;border-bottom:1px solid rgba(43,10,15,.35);background:transparent;font:300 17px/1.4 var(--sans);color:var(--ink);padding:10px 2px;border-radius:0}
.in:focus{outline:none;border-bottom-color:var(--scarlet)}
.choice{display:flex;gap:10px;flex-wrap:wrap}
.choice label{flex:1 1 140px;display:flex;align-items:center;justify-content:center;min-height:50px;border:1px solid rgba(43,10,15,.3);border-radius:999px;cursor:pointer;margin:0;transition:background .3s,color .3s,border-color .3s}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked + span{color:var(--cream)}
.choice label:has(input:checked){background:var(--scarlet);border-color:var(--scarlet)}
.choice label:has(input:focus-visible){outline:2px solid var(--scarlet);outline-offset:3px}
.err{color:var(--scarlet);font-size:14px;margin:6px 0 0;display:none}
.field.is-err .err{display:block}
.form .btn{justify-self:center;margin-top:8px;min-width:220px}
.done{display:none;text-align:center;margin-top:30px}
.rsvp.is-sent .form{display:none}
.rsvp.is-sent .done{display:block}
.done .t{font:400 46px/1.1 var(--script);margin:0 0 10px}

/* ===== 10 · вопросы ===== */
.faq{margin-top:28px}
.faq details{border-top:1px solid rgba(243,231,223,.2)}
.faq details:last-child{border-bottom:1px solid rgba(243,231,223,.2)}
.faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font:400 19px/1.35 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1px solid var(--cream);border-bottom:1px solid var(--cream);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{margin:0 0 18px;color:var(--light)}

/* ===== 11 · финал: карточка сгорает от спички, как в ролике ===== */
.end{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
.burn{position:relative;width:min(84vw,380px);aspect-ratio:3/4;margin:34px auto 0;cursor:pointer;touch-action:manipulation}
.burn__under{position:absolute;inset:0;background:url(media/film-last-v3.jpg) center 48%/cover;color:#fff2ea;text-shadow:0 2px 10px rgba(40,0,8,.85),0 0 30px rgba(40,0,8,.6)}
/* надпись стоит на экране зала: место и размер считаются по кадру (как на первом экране) */
.burn__scr{position:absolute;left:50%;top:var(--sy,50%);width:calc(var(--sh,100px) * 1.8);height:var(--sh,100px);transform:translate(-50%,-50%);display:grid;place-content:center;text-align:center;gap:calc(var(--sh,100px) * .07)}
.burn__scr p{margin:0}
.burn__scr .s{font:400 calc(var(--sh,100px) * .34)/1.15 var(--script);white-space:nowrap}
.burn__scr .t{font:400 calc(var(--sh,100px) * .13)/1.2 var(--serif)}
.burn canvas{position:absolute;inset:0;width:100%;height:100%}
.burn__hint{text-align:center;margin:20px 0 0;font:400 15px/1.4 var(--sans);color:var(--light);transition:opacity .4s}
.burn.is-burnt + .burn__hint{opacity:0}
.sign-off{text-align:center;margin-top:44px;color:var(--light);font-size:14px}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  .hint i,.cue i,.star{animation:none}
}

/* Rayven RSVP and photo-gallery additions; original reference palette retained. */
.hv-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:40px}.hv-photo{display:block;padding:7px 7px 22px;background:#fffbf6;border:1px solid #bda08877;box-shadow:0 10px 22px #2a050b14;position:relative}.hv-photo:nth-child(even){transform:translateY(18px)}.hv-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}.hv-photo span{position:absolute;bottom:2px;right:9px;font-size:10px;letter-spacing:.15em;color:#875b54}#hv-viewer{width:min(92vw,800px);max-height:94dvh;padding:16px;border:1px solid #c5a184;background:var(--paper);color:var(--ink)}#hv-viewer::backdrop{background:#200006ed}#hv-viewer img{width:100%;height:70dvh;object-fit:contain}#hv-viewer nav{display:flex;align-items:center;justify-content:space-between;gap:12px}#hv-viewer button{background:transparent;color:var(--wine);border:1px solid #9c7d72;padding:8px 12px}.hv-close{display:block;margin:0 0 12px auto}.hv-credit{text-align:center;padding:20px;color:var(--cream);background:var(--wine);font-size:11px;letter-spacing:.1em}.sr-only,.cl-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#rsvp-form{margin-top:35px;display:grid;gap:22px}#rsvp-form .fl{display:grid;gap:8px}#rsvp-form input:not([type=radio]):not([type=hidden]),#rsvp-form textarea{width:100%;padding:13px 14px;border:1px solid #ad8c7e80;background:#fffbf480;color:var(--ink);font:inherit;border-radius:0}#rsvp-form .chs{border:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}#rsvp-form .chs label{display:flex;gap:9px;align-items:center;border:1px solid #ad8c7e80;padding:10px 15px}#rsvp-form input[type=radio]{accent-color:var(--scarlet)}#rsvp-form .cnt{display:flex;max-width:190px}#rsvp-form .cnt button{width:46px;background:transparent;border:1px solid #ad8c7e80}#rsvp-form .cnt input{text-align:center}#rsvp-form .send,.cl-voice-button{border:1px solid var(--scarlet);border-radius:30px;background:var(--scarlet);padding:14px 22px;color:var(--cream);cursor:pointer}.cl-voice-button{display:flex;gap:12px;align-items:center;justify-content:center;background:transparent;color:var(--wine)}.cl-voice-button svg{width:20px;height:20px}.cl-rsvp-feedback{color:#8c1325}.cl-voice-status{font-size:13px}.cl-receipt{margin-top:28px}#rsvp-form [hidden]{display:none!important}.hv-preview-note{padding:12px 16px;border:1px solid #ad8c7e80;font-size:13px;margin-top:25px}.hv-preview-note+form .cl-voice-button{display:none}