/* Shared motion + responsive layer for The Coffee Store pages (from the design's site.css). */
.tcs-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--acc,#FF6A2B);z-index:200;pointer-events:none}
header{transition:box-shadow .3s ease,background-color .3s ease}
header>div{transition:padding .3s ease}
header.tcs-scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
header.tcs-scrolled>div{padding-top:10px!important;padding-bottom:10px!important}

/* scroll reveal (replaces the Chromium-only view-timeline) */
.reveal{animation:none!important}
.tcs-r{opacity:0;translate:0 32px;transition:opacity .8s cubic-bezier(.2,.7,.2,1),translate .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.tcs-r.in{opacity:1;translate:0 0}

/* card tilt + magnetic buttons (use `translate`/`rotate` vars so the existing hover transforms still apply) */
.card{transform-style:preserve-3d}
.card.tcs-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)!important}
.btn-solid{position:relative;overflow:hidden;translate:var(--mx,0) var(--my,0)}
.btn-solid::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn-solid:hover::after{transform:translateX(120%)}

/* home hero */
.tcs-home h1{animation:tcs-clip 1.1s cubic-bezier(.2,.7,.2,1) .1s both}
.tcs-home h1>span{display:inline-block;animation:tcs-loud .9s cubic-bezier(.3,1.6,.4,1) .9s both;transform-origin:20% 80%}
.tcs-home .zoom img{transition:transform .25s ease-out!important;will-change:transform}
.tcs-home .zoom{transform-style:preserve-3d}
.tcs-steam{position:absolute;bottom:38%;right:16%;width:10px;height:70px;border-radius:10px;background:linear-gradient(to top,rgba(245,239,232,.0),rgba(245,239,232,.35),rgba(245,239,232,0));filter:blur(4px);animation:tcs-steam 3.2s ease-in-out infinite;pointer-events:none}
.tcs-steam:nth-of-type(2){right:20%;animation-delay:1s;height:56px}
.tcs-steam:nth-of-type(3){right:12%;animation-delay:2s;height:62px}
@keyframes tcs-clip{from{clip-path:inset(0 0 100% 0);translate:0 40px;opacity:.2}to{clip-path:inset(0 0 -10% 0);translate:0 0;opacity:1}}
@keyframes tcs-loud{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:none}}
@keyframes tcs-steam{0%{transform:translateY(20px) scaleX(1);opacity:0}40%{opacity:1}100%{transform:translateY(-60px) scaleX(1.8);opacity:0}}

/* mobile menu */
.tcs-burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid #3A302B;background:transparent;color:#F5EFE8;cursor:pointer;align-items:center;justify-content:center;padding:0}
.tcs-burger span,.tcs-burger span::before,.tcs-burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .3s ease,background-color .2s ease}
.tcs-burger span::before,.tcs-burger span::after{content:"";position:absolute;left:0}
.tcs-burger span::before{top:-6px}.tcs-burger span::after{top:6px}
.tcs-burger[aria-expanded="true"] span{background:transparent}
.tcs-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.tcs-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.tcs-drawer{position:fixed;left:0;right:0;bottom:0;top:var(--hb,72px);z-index:49;background:#0E0C0B;color:#F5EFE8;font-family:'DM Sans',system-ui,sans-serif;padding:20px 20px 32px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;opacity:0;translate:0 -12px;pointer-events:none;transition:opacity .3s ease,translate .3s ease}
.tcs-drawer.open{opacity:1;translate:0 0;pointer-events:auto}
.tcs-drawer a.tcs-link{display:flex;justify-content:space-between;align-items:center;padding:16px 4px;border-bottom:1px solid #2E2622;color:#F5EFE8;text-decoration:none;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;opacity:0;translate:0 14px;transition:opacity .4s ease,translate .4s ease,color .2s ease}
.tcs-drawer.open a.tcs-link{opacity:1;translate:0 0}
.tcs-drawer a.tcs-link:hover{color:var(--acc,#FF6A2B)}
.tcs-drawer .tcs-cta{margin-top:24px;min-height:52px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--acc,#FF6A2B);color:#0E0C0B!important;font-weight:700;text-decoration:none}
body.tcs-lock{overflow:hidden}

@media (max-width:1100px){
  header nav{display:none!important}
  .tcs-burger{display:inline-flex}
  header>div{flex-wrap:nowrap!important;gap:12px!important}
  header>div>div:last-child{margin-left:auto}
}
@media (min-width:1101px){.tcs-drawer{display:none}}
@media (max-width:720px){
  aside{position:static!important}
  .tcs-steam{display:none}
}
@media (max-width:400px){
  header>div>a:first-child span:last-child{font-size:15px!important}
  header a[aria-label="My account"]{display:none!important}
}
@media (prefers-reduced-motion:reduce){.tcs-r{opacity:1;translate:none}.tcs-progress{display:none}}