/* v5: envelope intro, flip-open cards, gentle 3D tilt. Transforms/opacity only (no layout animation). */
/* ---------- envelope intro (only when the head script added .env-on; never blocks content without JS) ---------- */
.env{display:none}
html.env-on .env{display:block;position:fixed;inset:0;z-index:9999;cursor:pointer;overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%,#f3e7d6 0,#e2cbb2 70%,#d3b596 100%);animation:envGone .45s ease 1.85s forwards}
html.env-off .env{display:none}
@keyframes envGone{to{opacity:0;visibility:hidden}}
.env-stage{position:absolute;left:50%;top:48%;width:min(90vw,640px);height:min(112vw,74vh);transform:translate(-50%,-50%);
  perspective:1500px;display:grid;place-items:center;border-radius:6px;box-shadow:0 30px 60px -18px rgba(70,35,15,.55),0 6px 14px rgba(70,35,15,.25)}
@media (min-aspect-ratio:1/1){.env-stage{width:min(80vw,760px);height:min(54vw,74vh)}}
.env-hint{position:absolute;left:0;right:0;bottom:4.5vh;text-align:center;font:600 .9rem system-ui,sans-serif;color:#7a5a45;letter-spacing:.04em}
.env-back{position:absolute;inset:0;border-radius:6px;background:radial-gradient(circle at 50% 50%,#c98a80 0,#a9625a 75%);
  box-shadow:inset 0 0 90px rgba(60,20,10,.45)}
.env-back::after{content:"";position:absolute;inset:0;opacity:.35;background:radial-gradient(circle,#fdf1e6 1.4px,transparent 1.8px) 0 0/16px 16px}
.env-letter{position:relative;width:84%;max-width:420px;aspect-ratio:4/3;
  background:#fffaf0 url(/img/j-tea.webp) center/300px;color:#4e301b;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border-radius:4px;box-shadow:0 18px 40px rgba(50,20,10,.45),0 2px 4px rgba(50,20,10,.3);transform:rotate(-2deg);
  animation:letterPop .7s cubic-bezier(.3,.6,.3,1) 1.45s forwards}
.env-letter::before{content:"";position:absolute;inset:10px;border:2px dashed #b9786f;border-radius:3px;pointer-events:none}
.env-l-s{font:600 .9rem system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9b4c43}
.env-l-t{font:700 clamp(1.9rem,8.4vw,2.9rem)/1.02 Caveat,cursive;margin:.12em .3em}
.env-l-k{font:700 1.3rem Caveat,cursive;color:#6b4425}
@keyframes letterPop{0%{transform:rotate(-2deg)}45%{transform:translate3d(0,-7vh,140px) rotate(0)}100%{transform:translate3d(0,-12vh,430px);opacity:0}}
.flap{position:absolute;inset:0;border-radius:6px;transform-style:preserve-3d;will-change:transform;animation:.5s cubic-bezier(.55,0,.3,1) forwards}
.flap i{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* front faces: dusty-pink top/bottom, kraft sides; shading darker toward the tip */
.f-t .fa,.f-b .fa{background:radial-gradient(ellipse at 50% 50%,rgba(90,30,20,.32),rgba(90,30,20,0) 55%),linear-gradient(#e0aba1,#cf9187)}
.f-l .fa,.f-r .fa{background:radial-gradient(ellipse at 50% 50%,rgba(70,40,10,.35),rgba(70,40,10,0) 60%),linear-gradient(90deg,#cfa677,#bf9363)}
.flap .fb{background:#f6ead8 radial-gradient(circle,#d9a59b 1.6px,transparent 2px) 0 0/14px 14px}
.f-t{z-index:4;transform-origin:50% 0;animation-name:fT;animation-delay:.28s}
.f-t .fa{clip-path:polygon(-1% 0,101% 0,50% 54%)}
.f-t .fb{clip-path:polygon(-1% 100%,101% 100%,50% 46%);transform:rotateX(180deg)}
.f-b{z-index:3;transform-origin:50% 100%;animation-name:fB;animation-delay:.6s}
.f-b .fa{clip-path:polygon(-1% 100%,101% 100%,50% 47%)}
.f-b .fb{clip-path:polygon(-1% 0,101% 0,50% 53%);transform:rotateX(180deg)}
.f-l{z-index:2;transform-origin:0 50%;animation-name:fL;animation-delay:.9s}
.f-l .fa{clip-path:polygon(0 -1%,0 101%,53% 50%)}
.f-l .fb{clip-path:polygon(100% -1%,100% 101%,47% 50%);transform:rotateY(180deg)}
.f-r{z-index:1;transform-origin:100% 50%;animation-name:fR;animation-delay:1.12s}
.f-r .fa{clip-path:polygon(100% -1%,100% 101%,47% 50%)}
.f-r .fb{clip-path:polygon(0 -1%,0 101%,53% 50%);transform:rotateY(180deg)}
@keyframes fT{to{transform:rotateX(178deg)}}
@keyframes fB{to{transform:rotateX(-178deg)}}
@keyframes fL{to{transform:rotateY(-178deg)}}
@keyframes fR{to{transform:rotateY(178deg)}}
.env-seal{position:absolute;left:50%;top:54%;width:84px;height:84px;margin:-42px 0 0 -42px;z-index:6;border-radius:47% 53% 50% 48%/52% 46% 54% 48%;
  background:radial-gradient(circle at 38% 34%,#c9564b,#8e2a23 62%,#6e1c17);box-shadow:0 4px 10px rgba(40,5,0,.45),inset 0 0 0 6px rgba(255,255,255,.06),inset 0 -4px 8px rgba(0,0,0,.3);
  display:grid;place-items:center;animation:sealGo .32s ease-in .05s forwards}
.env-seal span{width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,220,200,.35);display:grid;place-items:center;font:700 2.1rem/1 Caveat,cursive;color:#f6d7b8;text-shadow:0 -1px 0 rgba(0,0,0,.35)}
@keyframes sealGo{50%{transform:scale(1.12)}100%{transform:scale(.6) translateY(-12px);opacity:0}}
/* the page pops up out of the envelope, like a pop-up card standing up */
html.env-on .hero{perspective:1000px}
html.env-on .hero-text,html.env-on .hero .short{transform-origin:50% 100%;animation:popUp .8s cubic-bezier(.2,.9,.3,1.12) 1.7s backwards}
html.env-on .hero .short{animation-delay:1.85s}
html.env-on .hero h1{animation:popShadow 1.1s ease-out 1.7s backwards}
html.env-skip .hero-text,html.env-skip .hero .short,html.env-skip .hero h1{animation:none}
@keyframes popUp{0%{opacity:0;transform:translate3d(0,46px,-60px) rotateX(72deg) scale(.86)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes popShadow{0%{text-shadow:0 26px 22px rgba(60,25,10,.35)}100%{text-shadow:0 1px 0 rgba(255,255,255,.6)}}
@media (prefers-reduced-motion:reduce){html.env-on .env{display:none}html.env-on .hero-text,html.env-on .hero .short,html.env-on .hero h1{animation:none}}

/* ---------- gentle 3D depth ("virtual reality" feel): tilt vars --tx/--ty in -1..1 set by v5.js ---------- */
.hero .short{translate:calc(var(--tx,0)*-9px) calc(var(--ty,0)*-7px)}
.hero .deco{translate:calc(var(--tx,0)*16px) calc(var(--ty,0)*12px)}
.hero .hero-text{translate:calc(var(--tx,0)*4px) calc(var(--ty,0)*3px)}
/* sections rise in with depth instead of the curtain wipe */
@media (prefers-reduced-motion:no-preference){
  main>section.rv{clip-path:none;opacity:0;transform:perspective(1000px) translate3d(0,34px,-50px) rotateX(9deg);transform-origin:50% 0;
    transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.25,1)}
  main>section.rv.in{clip-path:none;opacity:1;transform:none}
}
.tilt-chip{display:block;margin:0 auto 6px;min-height:44px;padding:.4em 1.1em;border-radius:999px;border:2px dashed #9b4c43;background:#fdf8ee;color:#7a3a33;font:700 1rem system-ui,sans-serif;cursor:pointer}
.tilt-chip[hidden]{display:none}

/* ---------- flip-open cards ---------- */
/* Base (no JS / script failed): cover and inside simply stack, everything readable. */
.fcard .fc-back{display:none}
.fcard .fc-open{display:none}
.fcard .fc-close{display:none}
.fc-inside{padding:6px 6px 4px;border-top:2px dashed #d9b9a8;margin-top:12px}
.fc-kicker{font:700 .8rem system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9b4c43;margin:.5em 0 .1em}
.fc-inside h4{font:700 1.6rem/1.1 Caveat,cursive;color:#4e301b;margin:0 0 .3em;padding-right:44px}
.fc-lbl{font-weight:800;color:#4e301b;margin:.7em 0 .2em}
.fc-list{margin:0 0 .6em;padding:0;list-style:none}
.fc-list li{position:relative;padding:.18em 0 .18em 1.5em;line-height:1.35;color:#3a2a1e}
.fc-list li::before{content:"✓";position:absolute;left:.15em;top:.18em;color:#2f5a43;font-weight:800}
.fc-facts{display:grid;grid-template-columns:auto 1fr;gap:.25em .8em;margin:.2em 0 .8em;padding:.6em .7em;background:rgba(243,231,207,.7);border-left:4px solid #c98479;font-size:.95em}
.fc-facts dt{font-weight:800;color:#4e301b}
.fc-facts dd{margin:0;color:#3a2a1e}
.fc-inside .btn-watch.inline{width:100%;margin:.2em 0 .7em}
.fc-inside .btn-wa{width:100%}
/* spiral spine down the left edge (stays put while the cover turns) */
.grid.offers .fcard::after{display:none}
.fc-book{position:relative}
.fc-book::before{content:"";position:absolute;left:-11px;top:14px;bottom:14px;width:32px;z-index:6;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22' viewBox='0 0 32 22'%3E%3Cdefs%3E%3ClinearGradient id='g' y1='0' y2='1' x1='0' x2='0'%3E%3Cstop offset='0' stop-color='%236d6a66'/%3E%3Cstop offset='.45' stop-color='%23f2efe9'/%3E%3Cstop offset='1' stop-color='%235d5954'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='24' cy='11' rx='3.2' ry='3.6' fill='%232b1d14' opacity='.8'/%3E%3Cpath d='M24 8 C15 6.5 5 7.5 3 11 C5 14.5 15 15.5 24 14' fill='none' stroke='url(%23g)' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/32px 22px repeat-y}

/* Flip mode: v5.js adds html.flip-ready once it is running */
html.flip-ready .grid.offers{padding-left:22px;padding-right:22px;scroll-padding:0 22px}
html.flip-ready .grid.offers .fcard{display:flex;padding:0;background:none;box-shadow:none;--base:-1.2deg;
  transform:perspective(900px) rotateX(calc(var(--ty,0)*-5deg)) rotateY(calc(var(--tx,0)*7deg)) rotate(var(--base));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
html.flip-ready .grid.offers .fcard:nth-child(2n){--base:1.1deg}
html.flip-ready .grid.offers .fcard:nth-child(3n){--base:-.4deg}
html.flip-ready .grid.offers .fcard.tilting{transition:none}
html.flip-ready .grid.offers .fcard.open{--base:0deg;z-index:5}
html.flip-ready .fc-book{flex:1;display:grid;perspective:1800px;
  box-shadow:0 1px 2px rgba(40,20,5,.25),0 10px 18px rgba(40,20,5,.22),0 26px 40px -14px rgba(40,20,5,.45)}
html.flip-ready .fc-cover,html.flip-ready .fc-inside{grid-area:1/1;min-width:0}
html.flip-ready .fc-cover{position:relative;z-index:2;transform-origin:0 50%;transform-style:preserve-3d;cursor:pointer;
  transition:transform .85s cubic-bezier(.45,.05,.2,1)}
html.flip-ready .fcard.open .fc-cover{transform:rotateY(-176deg)}
html.flip-ready .fc-front,html.flip-ready .fc-back{-webkit-backface-visibility:hidden;backface-visibility:hidden}
html.flip-ready .fc-front{height:100%;display:flex;flex-direction:column;background:#fffdf7;padding:12px 12px 14px 24px;
  background-image:radial-gradient(circle,#5a4434 0 2.6px,transparent 3.2px);background-size:22px 22px;background-repeat:repeat-y;background-position:3px 14px}
html.flip-ready .fc-front .ph{border-radius:2px}
html.flip-ready .fc-front .body{display:flex;flex-direction:column;flex:1;padding:14px 4px 0}
html.flip-ready .fc-front .d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.8em}
html.flip-ready .fc-back{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;transform:rotateY(180deg);
  background:#c9a173 url(/img/j-coffee.webp) center/240px;box-shadow:inset -10px 0 18px rgba(60,30,10,.25);color:#4e301b;text-align:center}
.fc-back-t{font:700 2rem/1 Caveat,cursive}
.fc-back-s{font:700 1.3rem Caveat,cursive;color:#7a3a33}
html.flip-ready .fc-open{display:flex;align-items:center;justify-content:center;gap:.5em;margin-top:auto;width:100%;min-height:52px;padding:.5em 1em;
  border:0;border-radius:999px;background:#9b4c43;color:#fffdf7;font:800 1.05rem system-ui,sans-serif;cursor:pointer;box-shadow:0 3px 0 #6e2f29}
html.flip-ready .fc-open:hover{background:#86403a}
.fc-arrow{font-size:1.5em;line-height:.8;transition:transform .2s}
html.flip-ready .fc-cover:hover .fc-arrow{transform:translateX(3px)}
html.flip-ready .fc-inside{position:relative;z-index:1;margin:0;border:0;padding:14px 14px 16px 26px;
  background:#fffaf0 repeating-linear-gradient(transparent 0 29px,rgba(155,76,67,.13) 29px 30px);
  box-shadow:inset 12px 0 16px -10px rgba(60,30,10,.35)}
html.flip-ready .fc-close{display:grid;place-items:center;position:absolute;right:8px;top:8px;width:44px;height:44px;border-radius:50%;
  border:2px solid #9b4c43;background:#fdf8ee;color:#7a3a33;font:800 1.15rem system-ui,sans-serif;cursor:pointer}
html.flip-ready .fcard:not(.open) .fc-inside{visibility:hidden;transition:visibility 0s .85s}
html.flip-ready .fcard.open .fc-inside{visibility:visible}
html.flip-ready .fcard.open .fc-front{visibility:hidden;transition:visibility 0s .45s}
.fc-gloss{position:absolute;inset:-40%;pointer-events:none;z-index:1;opacity:.55;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  translate:calc(var(--tx,0)*-22%) calc(var(--ty,0)*-22%)}
.fc-open:focus-visible,.fc-close:focus-visible,.tilt-chip:focus-visible{outline:3px solid #2f5a43;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html.flip-ready .fc-cover{transition:none}
  html.flip-ready .grid.offers .fcard{transform:rotate(var(--base));transition:none}
  .fc-gloss{display:none}
}

/* v5.1: compact inside page so a card fits a phone screen */
html.flip-ready .fc-inside{font-size:16px;line-height:1.4;padding:12px 12px 14px 26px}
html.flip-ready .fc-inside h4{font-size:1.55rem;margin:.1em 0 .25em}
html.flip-ready .fc-inside .price{margin:.1em 0 .3em}
html.flip-ready .fc-lbl{margin:.5em 0 .15em;font-size:1rem}
html.flip-ready .fc-list{margin-bottom:.5em}
html.flip-ready .fc-list li{padding:.1em 0 .1em 1.4em}
html.flip-ready .fc-facts{margin:.1em 0 .7em;padding:.45em .6em;gap:.15em .7em}
html.flip-ready .fc-inside .btn-watch.inline{min-height:46px;margin:.1em 0 .55em}
html.flip-ready .fc-inside .btn-quote{margin-top:4px;min-height:44px;padding:.5em .3em}
html.flip-ready .fc-front .ph{aspect-ratio:1/1}
html.flip-ready .fc-front .body{padding-top:10px}
html.flip-ready .fc-front h3{font-size:1.7rem;margin:0 0 .15em}
html.flip-ready .fc-front .d{font-size:17px;line-height:1.45}
.fc-close:focus:not(:focus-visible){outline:0}
html.flip-ready .fc-front .d{display:block;-webkit-line-clamp:unset;overflow:visible;margin-bottom:.7em}
html.flip-ready .fc-open{margin-top:.2em}
html.flip-ready .fc-front .body::after{content:"♥ handmade by Val";display:block;margin-top:auto;padding-top:.8em;text-align:center;font:700 1.35rem Caveat,cursive;color:#9b4c43;opacity:.8}