/* Tactile details reuse the storefront's colors, type, and spacing. */
.campaign-copy{position:relative;overflow:hidden}
.campaign-copy .eyebrow{border:1px solid currentColor;border-radius:2rem;padding:.75rem 1rem;transform:rotate(-3deg)}
.campaign-cta span{display:inline-block;transition:transform .3s}
.campaign-cta:hover span{transform:translate(4px,-4px)}
.product-line>span:first-child{letter-spacing:.08em}
.mood-ticket{border-style:dashed;position:relative;border-radius:2px 2px 16px 2px}
.ticket-symbol{transform-origin:center;width:max-content}
#feeling{display:inline-block}
.original-card{transition:transform .35s,box-shadow .35s;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transform-style:preserve-3d}
.original-number{width:max-content;border:1px solid currentColor;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}
.original-art{transition:transform .4s cubic-bezier(.2,.8,.2,1);transform:rotate(var(--card-angle))}
.original-card:hover .original-art,.original-card:focus-within .original-art{transform:translateY(-10px) rotate(0deg) scale(1.04)}
.original-card:focus-within{outline:2px solid var(--brand);outline-offset:4px}
.original-try{transition:padding .25s}
.original-try:hover{padding-left:.5rem}
.velcro-photo{overflow:visible;transform:rotate(-2deg)}
.velcro-photo img{border-radius:3px}
.velcro-photo>span{transform:rotate(3deg);bottom:-12px;left:5%;box-shadow:3px 4px 0 var(--brand);font-weight:700}
.swap-copy li{transition:padding-left .25s}
.swap-copy li:hover{padding-left:.5rem}
.footer-logo .brand-symbol{display:inline-block;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.footer-logo:hover .brand-symbol{transform:rotate(180deg)}
.how-steps details[open] p{animation:answer-in .3s ease-out}
@keyframes answer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.original-card:hover{box-shadow:0 14px 24px #38251e15}.patch-option:hover .sprite{transform:translateY(-8px) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.original-card,.original-art,.velcro-photo,.campaign-copy .eyebrow{transform:none!important}*,*:before,*:after{animation:none!important;transition:none!important}}