/* Kit opening screens. Each is a fixed overlay (#intro.k-<type>); site.js adds .is-opening on click and .is-gone at data-dur. */
.intro[class*=k-]{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;overflow:hidden;text-align:center;color:var(--on-dark);background:radial-gradient(ellipse at 50% 35%,var(--dark),var(--dark2) 75%);transition:opacity 1s ease,visibility 0s 1s;padding:20px}
.intro[class*=k-].is-gone{opacity:0;pointer-events:none}
.intro .k-kick{font:600 clamp(10px,2.6vw,12px)/1.4 var(--font-head);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.intro .k-names{font:400 clamp(46px,13vw,104px)/1 var(--font-script);margin:0;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.35)}
.intro .k-names i{font-style:normal;color:var(--gold);font-size:.6em;padding:0 .1em}
.intro .k-date{font:500 clamp(13px,3.4vw,16px) var(--font-head);letter-spacing:.3em;text-transform:uppercase;color:var(--on-dark);margin:16px 0 0;opacity:.9}
.intro .k-mono{font:400 clamp(56px,16vw,92px)/1 var(--font-script);color:var(--gold)}
.intro .kbtn{margin-top:30px;font:600 12px var(--font-head);letter-spacing:.3em;text-transform:uppercase;color:var(--dark2);background:linear-gradient(135deg,#e8d28e,var(--gold) 55%,#a98532);border:0;padding:16px 34px;border-radius:999px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.5);position:relative;overflow:hidden;animation:kbPulse 2.6s ease-in-out 1.8s infinite;transition:transform .3s}
.intro .kbtn:hover{transform:translateY(-2px) scale(1.04)}
.intro .kbtn:focus-visible,.intro .sc-seal:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes kbPulse{0%,100%{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 0 rgba(201,164,76,.55)}50%{box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 14px rgba(201,164,76,0)}}
.intro .reveal-in{opacity:0;position:relative;z-index:2}
.intro.is-opening .kbtn{pointer-events:none}
.intro-hint{color:var(--gold);letter-spacing:.3em;text-transform:uppercase;font:600 11px var(--font-head);margin-top:30px}
.intro>*{animation:kIn 1.1s var(--ease) backwards}
@keyframes kIn{from{opacity:0;transform:translateY(14px)}}

/* ---- curtain ---- */
.k-curtain .spot{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 50% 45%,rgba(255,236,190,.28),transparent 70%);opacity:0;z-index:1}
.k-curtain.is-opening .spot{animation:fadeUp 1.4s ease .5s forwards}
.k-curtain .cur{position:absolute;top:0;bottom:0;width:51%;z-index:3;background:repeating-linear-gradient(90deg,var(--curtain,#5b1226) 0 22px,color-mix(in srgb,var(--curtain,#5b1226) 62%,#000) 22px 40px,var(--curtain,#5b1226) 40px 64px),linear-gradient(rgba(255,255,255,.06),rgba(0,0,0,.35));background-blend-mode:multiply;box-shadow:inset 0 0 90px rgba(0,0,0,.55);transition:transform 2.2s cubic-bezier(.7,0,.2,1) .35s}
.k-curtain .cur.l{left:0;transform-origin:left}.k-curtain .cur.r{right:0;transform-origin:right}
.k-curtain.is-opening .cur.l{transform:translateX(-102%) scaleX(.55)}.k-curtain.is-opening .cur.r{transform:translateX(102%) scaleX(.55)}
.k-curtain .valance{position:absolute;top:0;left:0;right:0;height:9vh;min-height:48px;z-index:4;background:linear-gradient(var(--curtain,#5b1226),color-mix(in srgb,var(--curtain,#5b1226) 55%,#000));border-bottom:3px solid var(--gold);box-shadow:0 12px 24px rgba(0,0,0,.5);border-radius:0 0 50% 50%/0 0 14px 14px}
.k-curtain .k-front{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;transition:opacity .6s .5s,transform .8s .5s}
.k-curtain.is-opening .k-front{opacity:0;transform:scale(.9);pointer-events:none}
.k-curtain .reveal-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.k-curtain.is-opening .reveal-in{animation:fadeUp 1.6s ease 1s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}

/* ---- monogram ---- */
.k-monogram .disc{position:absolute;left:50%;top:42%;width:40vmin;height:40vmin;margin:-20vmin 0 0 -20vmin;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 80%,#fff),var(--accent));transform:scale(0);z-index:0}
.k-monogram.is-opening .disc{animation:discOut 1.9s cubic-bezier(.65,0,.2,1) forwards}
@keyframes discOut{0%{transform:scale(0)}100%{transform:scale(7)}}
.k-monogram .k-mid{position:relative;width:min(48vw,220px);aspect-ratio:1;display:grid;place-items:center;z-index:2;margin-bottom:26px}
.k-monogram .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.k-monogram .ring circle{fill:none;stroke:var(--gold);stroke-width:.9;stroke-dasharray:100;stroke-dashoffset:100;animation:ringDraw 2.4s ease .3s forwards}
.k-monogram .ring .in{stroke-width:.4;animation-delay:.8s}
@keyframes ringDraw{to{stroke-dashoffset:0}}
.k-monogram .k-kick,.k-monogram .k-names,.k-monogram .k-date,.k-monogram .kbtn{position:relative;z-index:2}
.k-monogram.is-opening .k-mid{animation:monoGo 1.5s ease forwards}
@keyframes monoGo{to{transform:scale(1.6);opacity:0}}
.k-monogram.is-opening .k-names,.k-monogram.is-opening .k-date,.k-monogram.is-opening .k-kick{animation:namesPop 1.9s ease forwards}
@keyframes namesPop{0%{transform:none}35%{transform:scale(1.08)}100%{transform:scale(1.04);color:var(--dark2)}}
.k-monogram.is-opening .k-names,.k-monogram.is-opening .k-date{color:var(--accent-ink,#fff)}
.k-monogram.is-opening .kbtn{opacity:0;transition:opacity .4s}

/* ---- ticket ---- */
.k-ticket{background:radial-gradient(ellipse at 50% 20%,var(--dark),var(--dark2) 80%)}
.k-ticket .tk-wrap{display:grid;grid-template-columns:1fr 150px;width:min(92vw,720px);background:#f6efe0;color:#2a2a35;border-radius:16px;position:relative;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);transition:transform 1.4s cubic-bezier(.7,0,.2,1) 1.1s,opacity 1s ease 1.4s}
.k-ticket .tk-wrap::before,.k-ticket .tk-wrap::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:var(--dark2);right:134px}
.k-ticket .tk-wrap::before{top:-15px}.k-ticket .tk-wrap::after{bottom:-15px}
.k-ticket .tk-main{padding:clamp(20px,4vw,34px);text-align:left;border-right:2px dashed rgba(0,0,0,.25)}
.k-ticket .tk-top{display:flex;justify-content:space-between;margin:0 0 14px;font:700 11px var(--font-head);letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.k-ticket .tk-top b{font-size:18px;transform:rotate(0);display:inline-block}
.k-ticket .k-kick{color:#7a7a8a;margin-bottom:6px}
.k-ticket .k-names{color:var(--dark);text-shadow:none;font-size:clamp(38px,8.4vw,66px)}
.k-ticket .k-names i{color:var(--accent)}
.k-ticket .tk-row{display:flex;gap:26px;margin-top:20px;flex-wrap:wrap}
.k-ticket .tk-row small{display:block;font:700 9px var(--font-head);letter-spacing:.3em;text-transform:uppercase;color:#8a8a99}
.k-ticket .tk-row b{font:600 clamp(13px,3.4vw,17px) var(--font-head);letter-spacing:.04em;color:var(--dark)}
.k-ticket .tk-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px;transform-origin:50% 0;transition:transform 1.1s cubic-bezier(.6,0,.9,.4),opacity .8s}
.k-ticket .barcode{width:100%;height:60px;background:repeating-linear-gradient(90deg,#222 0 2px,transparent 2px 4px,#222 4px 5px,transparent 5px 9px,#222 9px 12px,transparent 12px 14px)}
.k-ticket .tk-stub .kbtn{margin:0;padding:12px 16px;font-size:10px;letter-spacing:.18em}
.k-ticket .tk-stamp{position:absolute;width:150px;left:42%;top:50%;margin:-75px 0 0 -75px;color:#b3261e;opacity:0;transform:scale(3) rotate(-18deg);pointer-events:none;mix-blend-mode:multiply;z-index:4}
.k-ticket.is-opening .tk-stamp{animation:stampIn .5s cubic-bezier(.3,1.6,.5,1) .55s forwards}
@keyframes stampIn{to{opacity:.88;transform:scale(1) rotate(-14deg)}}
.k-ticket.is-opening .tk-stub{transform:translate(40px,140px) rotate(14deg);opacity:0;transition-delay:1.3s}
.k-ticket.is-opening .tk-wrap{transform:translateY(-130vh) rotate(-2deg)}
@media(max-width:560px){.k-ticket .tk-wrap{grid-template-columns:1fr}.k-ticket .tk-wrap::before,.k-ticket .tk-wrap::after{display:none}.k-ticket .tk-main{border-right:0;border-bottom:2px dashed rgba(0,0,0,.25)}.k-ticket .barcode{height:36px}}

/* ---- candle ---- */
.k-candle{background:radial-gradient(ellipse at 50% 70%,#2b1a14,#0b0605 75%)}
.k-candle .glow{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;margin:-30vmin 0 0 -30vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,170,70,.38),transparent 65%);animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{50%{transform:scale(1.12);opacity:.8}}
.k-candle.is-opening .glow{animation:flood 2.6s ease forwards}
@keyframes flood{to{transform:scale(6);opacity:.9}}
.k-candle .flame-wrap{position:relative;width:34px;height:110px;margin-bottom:26px;z-index:2;transition:opacity 1s ease .8s,transform 1.2s}
.k-candle .flame{position:absolute;left:50%;top:0;width:22px;height:46px;margin-left:-11px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 75%,#fff7d6 0 18%,#ffcb5a 45%,#ff8a1f 80%);filter:blur(.4px) drop-shadow(0 0 16px rgba(255,160,60,.9));transform-origin:50% 100%;animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.94,1.08) rotate(1.5deg)}55%{transform:scale(1.04,.95) rotate(-2deg)}80%{transform:scale(.97,1.05) rotate(1deg)}}
.k-candle .wick{position:absolute;left:50%;top:44px;width:2px;height:12px;margin-left:-1px;background:#222}
.k-candle .wax{position:absolute;left:0;right:0;top:54px;bottom:0;border-radius:6px 6px 4px 4px;background:linear-gradient(90deg,#d9cdb6,#f7efdc 45%,#c7b99c)}
.k-candle.is-opening .flame-wrap{opacity:0;transform:translateY(20px) scale(.8)}
.k-candle .k-kick,.k-candle .k-names,.k-candle .k-date{text-shadow:0 0 30px rgba(255,160,60,.45)}
.k-candle.is-opening .reveal-in{animation:fadeUp 1.8s ease 1.1s forwards}
.k-candle .reveal-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.k-candle .kbtn{position:relative;z-index:3;margin-top:0}
.k-candle.is-opening .kbtn{opacity:0;transition:opacity .5s}

/* ---- book ---- */
.k-book{background:radial-gradient(ellipse at 50% 30%,var(--dark),var(--dark2) 80%)}
.k-book .bk{position:relative;width:min(66vw,300px);aspect-ratio:3/4;perspective:1600px;transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.6,0,.2,1) 1.4s,opacity 1s ease 1.8s}
.k-book .bk-page{position:absolute;inset:0;background:var(--paper,#f1ead9);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:2px 8px 8px 2px;padding:20px;box-shadow:inset 8px 0 14px -8px rgba(0,0,0,.35),0 30px 60px -16px rgba(0,0,0,.7)}
.k-book .bk-page .k-kick{color:var(--accent);font-size:9px}
.k-book .bk-page .k-names{color:var(--dark);text-shadow:none;font-size:clamp(34px,10vw,50px)}
.k-book .bk-page .k-names i{color:var(--accent)}
.k-book .bk-page .k-date{color:var(--dark);font-size:10px}
.k-book .bk-cover{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1.8s cubic-bezier(.6,0,.2,1) .35s;background:linear-gradient(105deg,color-mix(in srgb,var(--cover,#3b2a20) 85%,#fff),var(--cover,#3b2a20) 20%,color-mix(in srgb,var(--cover,#3b2a20) 70%,#000));border-radius:2px 8px 8px 2px;box-shadow:0 30px 60px -16px rgba(0,0,0,.7),inset 0 0 0 10px rgba(0,0,0,.08);display:grid;place-items:center;backface-visibility:hidden}
.k-book .bk-in{display:flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--gold);padding:34px 26px;outline:1px solid color-mix(in srgb,var(--gold) 50%,transparent);outline-offset:6px}
.k-book .bk-in i{width:40px;height:1px;background:var(--gold)}
.k-book .bk-in small{font:600 10px var(--font-head);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);max-width:200px}
.k-book .kbtn{margin-top:38px;transition:opacity .4s}
.k-book.is-opening .bk-cover{transform:rotateY(-168deg)}
.k-book.is-opening .bk{transform:scale(1.18) translateX(14%)}
.k-book.is-opening .kbtn{opacity:0}

@media(prefers-reduced-motion:reduce){.intro[class*=k-] *{animation-duration:.01s!important;transition-duration:.01s!important;transition-delay:0s!important}}

/* ---- heart button (shared) ---- */
.kheart{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:12px;background:none;border:0;cursor:pointer;color:var(--on-dark);padding:6px;font:600 11px var(--font-head);letter-spacing:.3em;text-transform:uppercase;z-index:5}
.kheart svg{width:92px;height:84px;fill:url(#none);fill:var(--heart,#c42d4d);filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 22px color-mix(in srgb,var(--heart,#c42d4d) 70%,transparent));animation:heartbeat 1.7s ease-in-out infinite;transform-origin:50% 60%}
.kheart .gloss{position:absolute;top:14px;left:calc(50% - 30px);width:26px;height:16px;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(2px);transform:rotate(-28deg);animation:heartbeat 1.7s ease-in-out infinite;pointer-events:none}
.kheart span{color:var(--gold)}
.kheart:hover svg{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)) drop-shadow(0 0 34px var(--heart,#c42d4d))}
.kheart:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
@keyframes heartbeat{0%,45%,100%{transform:scale(1)}12%{transform:scale(1.14)}24%{transform:scale(.97)}34%{transform:scale(1.09)}}
.intro.is-opening .kheart{pointer-events:none}

/* ---- curtain: gold tassel rope ---- */
.k-curtain .k-front .k-mono{margin-bottom:6px}
.tassel{position:relative;display:flex;flex-direction:column;align-items:center;background:none;border:0;cursor:pointer;color:var(--gold);padding:0 24px 8px;transform-origin:50% 0;animation:swing 3.2s ease-in-out infinite}
.tassel .rope{width:7px;height:clamp(70px,14vh,140px);background:repeating-linear-gradient(135deg,#e9d08a 0 3px,#a98532 3px 6px);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.tassel .cap{width:24px;height:18px;border-radius:50% 50% 30% 30%;background:linear-gradient(90deg,#a98532,#f0dc9a,#a98532)}
.tassel .ball{width:42px;height:42px;border-radius:50%;margin-top:-2px;background:radial-gradient(circle at 35% 30%,#fff3c4,#d4af5f 55%,#8d6a1f);box-shadow:0 8px 16px rgba(0,0,0,.45)}
.tassel .fringe{width:48px;height:70px;margin-top:-6px;background:repeating-linear-gradient(90deg,#d4af5f 0 3px,#8d6a1f 3px 4px);border-radius:2px 2px 14px 14px/2px 2px 30px 30px;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.tassel span{margin-top:14px;font:600 11px var(--font-head);letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.tassel:hover{animation-play-state:paused}
.tassel:focus-visible{outline:2px solid #fff;outline-offset:6px}
@keyframes swing{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.k-curtain.is-opening .tassel{animation:pull .7s ease forwards}
@keyframes pull{40%{transform:translateY(34px)}100%{transform:translateY(0)}}

/* ---- monogram: spinning-text medallion ---- */
.medal{position:relative;width:132px;height:132px;margin-top:26px;background:none;border:0;cursor:pointer;padding:0;z-index:2;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.medal svg{width:100%;height:100%;overflow:visible}
.medal .m-bg{fill:url(#none);fill:#caa24a}
.medal .m-in{fill:#2a2210;stroke:#f0dc9a;stroke-width:1.5}
.medal .m-txt{font:700 10.5px var(--font-head);letter-spacing:.2em;fill:#2a2210;animation:spinTxt 18s linear infinite;transform-origin:70px 70px}
.medal .m-heart{fill:#e6c46a;transform-box:fill-box}
@keyframes spinTxt{to{transform:rotate(360deg)}}
.medal:hover .m-in{fill:#3b2f17}.medal:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:50%}
.k-monogram.is-opening .medal{animation:medalGo .9s ease forwards}
@keyframes medalGo{to{transform:scale(1.7) rotate(120deg);opacity:0}}
.k-monogram .medal{animation:medalPulse 2.8s ease-in-out 2s infinite}
@keyframes medalPulse{50%{transform:scale(1.06)}}

/* ---- azulejo tiles ---- */
.k-azulejo{background:#f3e3cc}
.k-azulejo .az-view{position:absolute;inset:0;background:linear-gradient(#f6b48a,#f9d6a8 55%,#fbe7c8)}
.k-azulejo .sun{position:absolute;left:50%;top:44%;width:26vmin;height:26vmin;margin:-13vmin;border-radius:50%;background:radial-gradient(circle,#fff6d8,#ffd98c 60%,transparent 72%);box-shadow:0 0 120px 60px rgba(255,200,130,.6)}
.k-azulejo .hills{position:absolute;left:-5%;right:-5%;bottom:0;height:34%;background:radial-gradient(ellipse 60% 100% at 22% 100%,#b86a48 60%,transparent 61%),radial-gradient(ellipse 70% 90% at 78% 100%,#8f4c32 60%,transparent 61%)}
.k-azulejo .reveal-in{position:relative;z-index:2;color:#4a2216}
.k-azulejo .k-kick{color:#8a3d22}.k-azulejo .k-names{color:#5a2a1a;text-shadow:none}.k-azulejo .k-names i{color:#c4623c}.k-azulejo .k-date{color:#5a2a1a}
.k-azulejo.is-opening .reveal-in{animation:fadeUp 1.6s ease 1.2s forwards}
.az-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(8,1fr);z-index:3;perspective:900px}
.az-grid i{display:block;position:relative;transform-style:preserve-3d;backface-visibility:hidden;
  background:
   radial-gradient(circle at 0 0,#2f6f86 0 24%,transparent 25%),radial-gradient(circle at 100% 0,#2f6f86 0 24%,transparent 25%),
   radial-gradient(circle at 0 100%,#2f6f86 0 24%,transparent 25%),radial-gradient(circle at 100% 100%,#2f6f86 0 24%,transparent 25%),
   radial-gradient(ellipse 13% 34% at 50% 50%,#c4623c 0 96%,transparent 100%),radial-gradient(ellipse 34% 13% at 50% 50%,#c4623c 0 96%,transparent 100%),
   radial-gradient(circle at 50% 50%,#f3c76a 0 9%,transparent 10%),#fbf3e6;
  box-shadow:inset 0 0 0 2px rgba(47,111,134,.55),inset 0 0 0 4px #fbf3e6,inset 0 0 0 5px rgba(47,111,134,.25);transition:transform 1.1s cubic-bezier(.5,0,.2,1) var(--d),opacity .4s ease calc(var(--d) + .7s)}
.az-grid i:nth-child(3n){background-color:#f8ead2}.az-grid i:nth-child(5n+2){filter:hue-rotate(-8deg)}
.k-azulejo.is-opening .az-grid i{transform:rotate(100deg) scale(.1);opacity:0}
.az-plaque{position:relative;z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff8ec;padding:22px 34px 18px;border-radius:50% 50% 18px 18px/40% 40% 18px 18px;box-shadow:0 0 0 6px #fbf3e6,0 0 0 8px #c4623c,0 24px 50px rgba(74,34,22,.45);transition:opacity .6s,transform .8s}
.az-plaque .k-mono{font-size:clamp(44px,12vw,64px);color:#c4623c;line-height:1}
.az-plaque .kheart{--heart:#c4623c}.az-plaque .kheart span{color:#8a3d22}
.k-azulejo.is-opening .az-plaque{opacity:0;transform:scale(1.4)}
.k-azulejo.is-opening .az-view .sun{animation:sunUp 3s ease forwards}
@keyframes sunUp{from{transform:translateY(40px) scale(.7)}to{transform:none}}
@media(max-width:700px){.az-grid{grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(12,1fr)}}

/* ---- scroll with a heart wax seal ---- */
.k-scroll{background:radial-gradient(ellipse at 50% 30%,var(--dark),var(--dark2) 80%)}
.k-scroll .scroll{position:relative;width:min(86vw,460px);display:flex;flex-direction:column;align-items:stretch;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.k-scroll .roll{height:34px;border-radius:17px;background:linear-gradient(180deg,#d9cfae,#f8f1dc 35%,#e6dbb8 60%,#b7a77a);position:relative;z-index:2}
.k-scroll .roll::before,.k-scroll .roll::after{content:"";position:absolute;top:-4px;bottom:-4px;width:14px;border-radius:7px;background:linear-gradient(90deg,#7a5a2a,#c9a45c,#7a5a2a)}
.k-scroll .roll::before{left:-10px}.k-scroll .roll::after{right:-10px}
.k-scroll .paper{height:0;overflow:hidden;background:var(--paper,#f4f0e6);margin:0 14px;transition:height 2.2s cubic-bezier(.5,0,.2,1) .9s;box-shadow:inset 0 10px 14px -10px rgba(0,0,0,.3),inset 0 -10px 14px -10px rgba(0,0,0,.3)}
.k-scroll.is-opening .paper{height:min(54vh,380px)}
.k-scroll .paper-in{height:min(54vh,380px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;border:1px solid color-mix(in srgb,var(--toile,#5b7ba1) 55%,transparent);margin:10px;height:calc(min(54vh,380px) - 20px);opacity:0;transition:opacity 1s ease 2s}
.k-scroll.is-opening .paper-in{opacity:1}
.k-scroll .k-kick{color:var(--toile,#5b7ba1)}.k-scroll .k-names{color:var(--dark);text-shadow:none;font-size:clamp(36px,10vw,58px)}.k-scroll .k-names i{color:var(--toile,#5b7ba1)}.k-scroll .k-date{color:var(--dark)}
.k-scroll .p-orn{color:var(--accent2,#cdb27a);margin-top:14px;font-size:22px}
.k-scroll .ribbon{position:absolute;left:50%;top:-10px;bottom:-10px;width:26px;margin-left:-13px;z-index:3;background:linear-gradient(90deg,color-mix(in srgb,var(--toile,#5b7ba1) 70%,#000),var(--toile,#5b7ba1) 45%,color-mix(in srgb,var(--toile,#5b7ba1) 70%,#000));transition:transform 1s cubic-bezier(.6,0,.9,.4),opacity .6s ease .7s;box-shadow:0 0 8px rgba(0,0,0,.3)}
.k-scroll .seal-wrap{position:absolute;left:50%;top:17px;z-index:5;transform:translate(-50%,-50%) translateY(0)}
.k-scroll .wax{position:relative;width:96px;height:88px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center;animation:heartbeat 1.9s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.k-scroll .wax svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--waxc,#2f4c78)}
.k-scroll .wax svg{filter:drop-shadow(inset 0 0 3px #fff)}
.k-scroll .wax b{position:relative;font:400 30px var(--font-script);color:#e9dcc0;margin-top:-6px}
.k-scroll .wax:focus-visible{outline:2px solid #fff;outline-offset:6px}
.k-scroll.is-opening .wax{animation:waxBreak .9s ease forwards}
@keyframes waxBreak{30%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(.2) translateY(-60px) rotate(40deg);opacity:0}}
.k-scroll.is-opening .ribbon{transform:translateY(-120%);opacity:0}
.k-scroll .intro-hint{margin-top:34px;transition:opacity .4s}.k-scroll.is-opening .intro-hint{opacity:0}

/* ---- rose that unfurls ---- */
.k-rose{background:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--dark) 80%,#000),var(--dark2) 78%)}
.k-rose .rose-view{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(255,214,190,.28),transparent 55%);opacity:0}
.k-rose.is-opening .rose-view{animation:fadeUp 2s ease 1s forwards}
.k-rose .reveal-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.k-rose.is-opening .reveal-in{animation:fadeUp 1.8s ease 1.5s forwards}
.rose{--S:min(78vw,60vh,440px);position:relative;width:var(--S);height:var(--S);z-index:2;perspective:900px}
.rose .pt{position:absolute;left:50%;top:50%;width:calc(var(--S)*.46);height:calc(var(--S)*.56);margin:calc(var(--S)*-.56) 0 0 calc(var(--S)*-.23);transform-origin:50% 100%;border-radius:55% 55% 14% 14%/78% 78% 14% 14%;
  background:radial-gradient(ellipse at 50% 22%,color-mix(in srgb,var(--petal,#8a1c34) 55%,#fff) 0,var(--petal,#8a1c34) 38%,color-mix(in srgb,var(--petal,#8a1c34) 60%,#000) 100%);box-shadow:inset 0 -14px 24px rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.3);
  transform:rotate(var(--a)) translateY(var(--ty,0)) scale(var(--sc,1)) rotateX(var(--rx,0deg));transition:transform 2s cubic-bezier(.4,0,.2,1) var(--o),opacity 1.4s ease calc(var(--o) + .8s)}
.rose .r0{--sc:1;--rx:-12deg;--ty:2%;filter:brightness(.85)}
.rose .r1{--sc:.8;--rx:-20deg;--ty:3%;filter:brightness(.95)}
.rose .r2{--sc:.58;--rx:-28deg;--ty:4%}
.rose .r3{--sc:.36;--rx:-38deg;--ty:5%;filter:brightness(1.12)}
.k-rose.is-opening .rose .r0{transform:rotate(var(--a)) translateY(-8%) scale(1.9) rotateX(58deg);opacity:0}
.k-rose.is-opening .rose .r1{transform:rotate(var(--a)) translateY(-8%) scale(1.55) rotateX(58deg);opacity:0}
.k-rose.is-opening .rose .r2{transform:rotate(var(--a)) translateY(-8%) scale(1.2) rotateX(58deg);opacity:0}
.k-rose.is-opening .rose .r3{transform:rotate(var(--a)) translateY(-8%) scale(.8) rotateX(58deg);opacity:0}
.rose-core{position:absolute;z-index:4;display:grid;place-items:center;transition:opacity .5s,transform .8s}
.rose-core .kheart{--heart:#fff;gap:8px}.rose-core .kheart svg{width:60px;height:54px;fill:#f7d9d4;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.rose-core .kheart .gloss{top:10px;left:calc(50% - 18px);width:16px;height:10px}
.rose-core .kheart span{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.6);margin-top:2px}
.k-rose.is-opening .rose-core{opacity:0;transform:scale(1.6)}
.k-rose{perspective:none}
.k-candle .kheart,.k-book .kheart{margin-top:30px}
.k-book.is-opening .kheart,.k-candle.is-opening .kheart{opacity:0;transition:opacity .4s}
.k-candle .kheart{--heart:#d9561f}.k-book .kheart{--heart:#9b2335}

.intro [data-open]:focus-visible{outline:none}
.intro .kheart:focus-visible svg,.intro .medal:focus-visible,.intro .wax:focus-visible{filter:drop-shadow(0 0 14px #fff)}

/* ---- seal: a wax-sealed letter. The seal cracks in two, the flap lifts in 3D, the card slides out and settles ---- */
.k-seal{background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--dark) 88%,var(--accent)),var(--dark2) 78%)}
.k-seal::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.07),transparent 40%),radial-gradient(circle at 85% 90%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 45%);pointer-events:none}
.k-seal .sl-top{position:relative;margin:0 0 clamp(20px,5vh,40px);transition:opacity .5s}
.k-seal .sl-env{--w:min(90vw,460px);--envc:var(--envelope,var(--accent));--liner:var(--liner-c,var(--paper,#f6f0e4));position:relative;width:var(--w);height:calc(var(--w) * .68);perspective:1500px;filter:drop-shadow(0 34px 30px rgba(0,0,0,.55));animation:slFloat 5.5s ease-in-out infinite}
@keyframes slFloat{50%{transform:translateY(-7px) rotate(-.4deg)}}
.k-seal .sl-back{position:absolute;inset:0;z-index:1;border-radius:3px;background:radial-gradient(circle at 9px 9px,rgba(0,0,0,.09) 1.6px,transparent 2.4px) 0 0/18px 18px,linear-gradient(135deg,var(--liner),color-mix(in srgb,var(--liner) 88%,var(--envc)))}
.k-seal .sl-card{position:absolute;left:5%;right:5%;top:7%;bottom:5%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:clamp(18px,7%,30px) 6% 0;text-align:center;background:linear-gradient(170deg,#fffdf8,var(--paper,#f6f0e4));box-shadow:0 -6px 20px rgba(0,0,0,.22);border-radius:2px;animation:none}
.k-seal .sl-card::before{content:"";position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--gold) 70%,transparent);pointer-events:none}
.k-seal .sl-corner{position:absolute;width:16px;height:16px;border:2px solid var(--gold);opacity:.9}
.k-seal .sl-corner.a{left:12px;top:12px;border-right:0;border-bottom:0}.k-seal .sl-corner.b{right:12px;bottom:12px;border-left:0;border-top:0}
.k-seal .sl-card .k-kick{color:var(--waxc,var(--accent));font-size:clamp(8px,calc(var(--w) * .024),11px);margin:0 0 6px}
.k-seal .sl-card .k-names{color:var(--dark);text-shadow:none;font-size:calc(var(--w) * .105);line-height:1.02}
.k-seal .sl-card .k-names i{color:var(--waxc,var(--accent))}
.k-seal .sl-card .k-date{color:var(--dark);font-size:clamp(9px,calc(var(--w) * .03),13px);margin-top:10px}
.k-seal .sl-orn{color:var(--waxc,var(--accent));margin-top:8px;display:block;line-height:0}.k-seal .sl-orn svg{width:calc(var(--w) * .045);height:calc(var(--w) * .045)}
.k-seal .sl-front{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible}
.k-seal .sl-front polygon{stroke:rgba(255,255,255,.2);stroke-width:.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.k-seal .f-l{fill:color-mix(in srgb,var(--envc) 86%,#000)}.k-seal .f-r{fill:color-mix(in srgb,var(--envc) 78%,#000)}.k-seal .f-b{fill:var(--envc)}
.k-seal .sl-flap{position:absolute;left:0;right:0;top:0;height:54.4%;z-index:4;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--envc) 88%,#fff),var(--envc))}
.k-seal .sl-wax{position:absolute;left:50%;top:54.4%;width:calc(var(--w) * .24);aspect-ratio:1;transform:translate(-50%,-50%);z-index:6;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}
.k-seal .sl-wax::after{content:"";position:absolute;inset:-8%;border-radius:50%;border:2px solid color-mix(in srgb,var(--waxc,var(--accent)) 60%,#fff);opacity:0;animation:slRing 2.4s ease-out 1.6s infinite;pointer-events:none}
@keyframes slRing{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.55);opacity:0}}
.k-seal .sl-wax:focus-visible{outline:none}.k-seal .sl-wax:focus-visible .half{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),0 0 0 4px rgba(255,255,255,.35)}
.k-seal .half{position:absolute;inset:0;display:grid;place-items:center;border-radius:46% 54% 50% 50% / 52% 46% 54% 48%;background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--waxc,var(--accent)) 55%,#fff) 0,var(--waxc,var(--accent)) 44%,color-mix(in srgb,var(--waxc,var(--accent)) 58%,#000) 100%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12),inset 0 3px 5px rgba(255,255,255,.3);transform-origin:50% 50%}
.k-seal .half::before{content:"";position:absolute;inset:15%;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.22)}
.k-seal .half b{position:relative;font:400 calc(var(--w) * .085)/1 var(--font-script);color:color-mix(in srgb,var(--waxc,var(--accent)) 38%,#fff);text-shadow:0 -1px 0 rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.25)}
.k-seal .half.a{clip-path:polygon(0 0,52% 0,44% 30%,56% 52%,46% 76%,53% 100%,0 100%)}
.k-seal .half.b{clip-path:polygon(52% 0,100% 0,100% 100%,53% 100%,46% 76%,56% 52%,44% 30%)}
.k-seal .sl-hint{position:relative;margin-top:clamp(26px,6vh,48px);transition:opacity .4s}
.k-seal.is-opening .sl-hint,.k-seal.is-opening .sl-top{opacity:0}
.k-seal.is-opening .sl-wax{pointer-events:none}.k-seal.is-opening .sl-wax::after{display:none}
.k-seal.is-opening .half.a{animation:slHalfA .9s cubic-bezier(.5,0,.8,.5) forwards}
.k-seal.is-opening .half.b{animation:slHalfB .9s cubic-bezier(.5,0,.8,.5) forwards}
@keyframes slHalfA{0%{transform:none}18%{transform:translate(-5%,-4%) rotate(-5deg)}100%{transform:translate(-80%,190%) rotate(-38deg);opacity:0}}
@keyframes slHalfB{0%{transform:none}18%{transform:translate(5%,-4%) rotate(5deg)}100%{transform:translate(85%,210%) rotate(34deg);opacity:0}}
.k-seal.is-opening .sl-flap{animation:slFlap 1s cubic-bezier(.45,.05,.3,1) .5s forwards,slGhost .9s ease 3s forwards}
@keyframes slFlap{0%{transform:rotateX(0);z-index:4}49%{transform:rotateX(-89deg);z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--envc) 88%,#fff),var(--envc))}50%{transform:rotateX(-91deg);z-index:1;background:linear-gradient(0deg,var(--liner),color-mix(in srgb,var(--liner) 86%,var(--envc)))}100%{transform:rotateX(-179deg);z-index:1;background:linear-gradient(0deg,var(--liner),color-mix(in srgb,var(--liner) 86%,var(--envc)))}}
.k-seal.is-opening .sl-card{animation:slCard 2.8s cubic-bezier(.3,.7,.2,1) 1.3s forwards}
@keyframes slCard{0%{transform:none}42%{transform:translateY(-64%)}58%{transform:translateY(-64%)}100%{transform:translateY(-2%) scale(1.22);box-shadow:0 30px 60px rgba(0,0,0,.45)}}
.k-seal.is-opening .sl-back,.k-seal.is-opening .sl-front{animation:slGhost .9s ease 3s forwards}
@keyframes slGhost{to{opacity:0}}

/* seal refinements: paper grain on the flap, raised wax rim */
.k-seal .sl-flap{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='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,color-mix(in srgb,var(--envc) 88%,#fff),var(--envc))}
.k-seal .half{box-shadow:inset 0 0 0 calc(var(--w) * .007) rgba(255,255,255,.28),inset 0 0 0 calc(var(--w) * .015) rgba(0,0,0,.16),inset 0 4px 7px rgba(255,255,255,.38),inset 0 -5px 9px rgba(0,0,0,.4)}
.k-seal .half::before{inset:17%;border-width:2px;border-color:rgba(255,255,255,.34)}