:root{--flip-cw: 1120px;--flip-radius: 16px;--flip-border: #eef2f6;--ink: #0f172a;--muted: #374151}.flipdeck{position:relative;min-height:100svh;padding:10vh 0 6vh;scroll-snap-align:start;background:#fff;border-bottom:1px solid var(--flip-border)}.flipdeck>*{width:min(100% - 40px,var(--flip-cw));margin:0 auto}.flipdeck__h0{margin:0 0 16px;font-weight:900;line-height:1.02;letter-spacing:-.01em;color:var(--ink);font-size:clamp(42px,5vw,88px)}.flipdeck__h0 .line{display:block;opacity:0;transform:translateY(12px)}.flipdeck__stack{position:relative;height:min(70vh,680px);margin-top:18px;perspective:1200px;transform-style:preserve-3d}.flipcard{position:absolute;top:0;right:0;bottom:0;left:0;width:min(100%,860px);margin:0 auto;background:#fff;border:1px solid var(--flip-border);border-radius:var(--flip-radius);box-shadow:0 18px 60px #00000014;display:grid;place-content:center;text-align:center;padding:28px;backface-visibility:hidden;transform:rotateY(90deg) translateZ(0);opacity:0;will-change:transform,opacity}.flipcard.is-front{transform:rotateY(0);opacity:1}.flipcard__title{margin:0 0 8px;font-weight:800;font-size:clamp(28px,3.2vw,48px);color:var(--ink)}.flipcard__body{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,20px)}.flipdeck__ctas{display:flex;gap:10px;justify-content:center;margin-top:20px}.btn{display:inline-block;padding:12px 16px;border-radius:10px;font-weight:700;cursor:pointer}.btn--primary{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn--ghost{background:#fff;color:var(--ink);border:1px solid var(--flip-border)}@media (prefers-reduced-motion:no-preference){.flipdeck.is-in .flipdeck__h0 .line{animation:rise .5s ease-out forwards}.flipdeck.is-in .flipdeck__h0 .line:nth-child(2){animation-delay:.1s}.flip-in{animation:flipIn .6s cubic-bezier(.2,.9,.2,1) forwards}.flip-out{animation:flipOut .5s cubic-bezier(.2,.9,.2,1) forwards}}@keyframes rise{to{opacity:1;transform:translateY(0)}}@keyframes flipIn{0%{transform:rotateY(90deg);opacity:0}to{transform:rotateY(0);opacity:1}}@keyframes flipOut{0%{transform:rotateY(0);opacity:1}to{transform:rotateY(-90deg);opacity:0}}@media (prefers-reduced-motion: reduce){.flipcard{transform:none!important}.flip-in{animation:fadeIn .35s ease-out forwards}.flip-out{animation:fadeOut .3s ease-out forwards}@keyframes fadeIn{to{opacity:1}}@keyframes fadeOut{to{opacity:0}}}
/*# sourceMappingURL=/cdn/shop/t/6/assets/flip-stack.css.map */