/* Ten-Go Tacos motion layer (v1.2.0). Visible without JS; all off for prefers-reduced-motion. */

/* Scroll progress bar */
.tg-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--tg-p,0));background:linear-gradient(90deg,#7cc6cd,#d9bf8c);z-index:60;pointer-events:none}

/* Reveal base */
.tg-motion .tg-r{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--tg-d,0ms)}
.tg-motion .tg-r.tg-left{transform:translateX(-46px)}
.tg-motion .tg-r.tg-right{transform:translateX(46px)}
.tg-motion .tg-r.tg-flip{transform:perspective(800px) rotateX(-28deg) translateY(30px);transform-origin:50% 0}
.tg-motion .tg-r.tg-pop{transform:scale(.8)}
.tg-motion .tg-r.is-in{opacity:1;transform:none}

/* Headlines rise out of a mask (the mask wraps the element, so EN/ES swaps never break it) */
.tg-mask{overflow:hidden;padding-bottom:.08em}
.tg-motion .tg-mask > .tg-rise{transform:translateY(110%) skewY(4deg);transition:transform 1.1s cubic-bezier(.16,.84,.3,1);transition-delay:var(--tg-d,0ms)}
.tg-motion .tg-mask.is-in > .tg-rise{transform:none}

/* Script line writes itself */
.tg-motion .tg-write{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.65,.05,.36,1);transition-delay:var(--tg-d,0ms)}
.tg-motion .tg-write.is-in{clip-path:inset(0 0 0 0)}

/* HERO */
.tg-motion .hero-logo{animation:tg-spin-in 1.1s cubic-bezier(.2,1.3,.4,1) both, tg-float 5s ease-in-out 1.2s infinite}
@keyframes tg-spin-in{from{opacity:0;transform:rotate(-200deg) scale(.3)}to{opacity:1;transform:none}}
@keyframes tg-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(3deg)}}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:.12em;border-radius:99px;background:var(--turquoise,#4fb3bd);transform:scaleX(0);transform-origin:0 50%;animation:tg-swoosh .9s cubic-bezier(.65,.05,.36,1) 1.5s forwards}
@keyframes tg-swoosh{to{transform:scaleX(1)}}
.hero{background-size:140% 140%!important;animation:tg-heat 14s ease-in-out infinite alternate}
@keyframes tg-heat{from{background-position:50% 0%}to{background-position:50% 100%}}
.tg-float-bits{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tg-float-bits span{position:absolute;bottom:-40px;font-size:var(--s,26px);opacity:.12;animation:tg-rise var(--t,14s) linear var(--dl,0s) infinite;filter:saturate(.9)}
@keyframes tg-rise{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-120vh) rotate(var(--rot,180deg))}}
.hero-inner{position:relative;z-index:1}
.btn-primary{animation:tg-glow 2.8s ease-in-out 2.4s infinite}
@keyframes tg-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.10)}}
.hours-badge{animation:tg-blink 2.2s ease-in-out infinite}
@keyframes tg-blink{0%,100%{opacity:1}50%{opacity:.75}}

/* Buttons + cards hover */
.btn-primary,.btn-ghost,.btn-callnow,.btn-inquiry,.cart-btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
.btn-primary:hover,.btn-ghost:hover,.btn-inquiry:hover{transform:translateY(-3px)}
.btn-callnow:hover{animation:tg-ring .5s ease-in-out 2}
@keyframes tg-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}
.sales-card,.feat-card,.rev-card,.info-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.sales-card:hover,.feat-card:hover,.rev-card:hover,.info-card:hover{transform:translateY(-7px) rotate(-.4deg);box-shadow:0 22px 40px rgba(0,0,0,.18)}
.feat-card{animation:tg-up .7s cubic-bezier(.2,.7,.2,1) both}
.feat-card:nth-child(2){animation-delay:.12s}.feat-card:nth-child(3){animation-delay:.24s}
@keyframes tg-up{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.feat-card img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.feat-card:hover img{transform:scale(1.08) rotate(-1deg)}
.logo-img{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .logo-img{transform:rotate(-14deg) scale(1.06)}

/* Catering band: slow color sweep */
.cater-band{background:linear-gradient(115deg,#7d3426,#94402f,#6d2c21,#7d3426)!important;background-size:300% 300%!important;animation:tg-sweep 18s ease infinite}
@keyframes tg-sweep{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Mobile menu links slide in one by one */
@media(max-width:899px){
  .site-header.nav-open .main-nav a{animation:tg-slide .4s cubic-bezier(.2,.7,.2,1) both}
  .site-header.nav-open .main-nav > *:nth-child(2) a,.site-header.nav-open .main-nav > a:nth-child(2){animation-delay:.04s}
  .site-header.nav-open .main-nav > *:nth-child(3) a,.site-header.nav-open .main-nav > a:nth-child(3){animation-delay:.08s}
  .site-header.nav-open .main-nav > *:nth-child(4) a,.site-header.nav-open .main-nav > a:nth-child(4){animation-delay:.12s}
  .site-header.nav-open .main-nav > *:nth-child(5) a,.site-header.nav-open .main-nav > a:nth-child(5){animation-delay:.16s}
  .site-header.nav-open .main-nav > *:nth-child(6) a,.site-header.nav-open .main-nav > a:nth-child(6){animation-delay:.2s}
  .site-header.nav-open .main-nav > *:nth-child(n+7) a,.site-header.nav-open .main-nav > a:nth-child(n+7){animation-delay:.24s}
}
@keyframes tg-slide{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .tg-motion .tg-r,.tg-motion .tg-mask > .tg-rise,.tg-motion .tg-write{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .hero,.hero-logo,.cater-band,.btn-primary,.hours-badge,.feat-card,.site-header.nav-open .main-nav a,.hero h1 em::after{animation:none!important}
  .hero h1 em::after{transform:scaleX(1)}
  .tg-float-bits,.tg-progress{display:none}
}

/* ---------- v1.2.1 calmer palette: less red, no bright yellow ---------- */
:root{--red:#b4503c;--red-dark:#8f3b2c;--gold:#d9bf8c;--turquoise:#6fbfc6;--turquoise-dark:#3f8c93}
.hero{background:radial-gradient(120% 110% at 50% 0%,#3b2b25 0%,#231a16 62%,#1d1714 100%)!important;background-size:140% 140%!important}
.hero .script{color:#d9bf8c}
.hero h1{color:#f6efe4}
.hero h1 em{color:#7cc6cd}
.hero h1 em::after{background:#b4503c}
.hero-sub{color:#e9ded0;opacity:1}
.btn-primary{background:#b4503c}
.btn-primary:hover{background:#8f3b2c}
.cart-count{background:#d9bf8c}
.hours-table td:last-child{color:#d9bf8c}
.sales-strip{background:#cfe7e9!important}

/* v1.3.0 coffee band motion */
.call-card{animation:tg-ringcard 2.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes tg-ringcard{0%,62%,100%{transform:none}66%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}74%{transform:rotate(-2deg)}78%{transform:rotate(1deg)}82%{transform:none}}
.call-card.is-declined,.call-card.is-accepted{animation:none}
.call-yes{animation:tg-callpulse 1.6s ease-out infinite}
@keyframes tg-callpulse{0%{box-shadow:0 0 0 0 rgba(47,158,91,.6)}80%,100%{box-shadow:0 0 0 14px rgba(47,158,91,0)}}
.call-avatar{animation:tg-cup 2.4s ease-in-out infinite}
@keyframes tg-cup{0%,60%,100%{transform:none}70%{transform:rotate(-10deg) scale(1.08)}80%{transform:rotate(8deg)}}
.coffee-steam{position:absolute;left:18%;bottom:44%;width:60%;height:20%;pointer-events:none}
.coffee-steam i{position:absolute;bottom:0;width:18px;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(255,255,255,0));filter:blur(4px);opacity:0;animation:tg-steam 4.5s ease-in-out infinite}
.coffee-steam i:nth-child(1){left:12%}
.coffee-steam i:nth-child(2){left:42%;animation-delay:1.4s}
.coffee-steam i:nth-child(3){left:72%;animation-delay:2.8s}
@keyframes tg-steam{0%{opacity:0;transform:translateY(10px) scaleX(.8)}30%{opacity:.8}100%{opacity:0;transform:translateY(-70px) scaleX(1.4) skewX(8deg)}}
.coffee-photo img{animation:tg-kb 20s ease-in-out infinite alternate}
@keyframes tg-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.thirsty.is-today{animation:tg-today 2s ease-in-out infinite}
@keyframes tg-today{0%,100%{border-color:#6fbfc6}50%{border-color:#2f9e5b}}
.coffee-list li{transition:background-color .25s,transform .25s}
.coffee-list li:hover{background:rgba(255,255,255,.55);transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){.call-card,.call-yes,.call-avatar,.coffee-steam i,.coffee-photo img,.thirsty.is-today{animation:none!important}}

/* v1.3.1 kitchen bubbles motion */
.bubble{animation:tg-bob 5.5s ease-in-out infinite;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease,scale .45s ease,rotate .45s ease,box-shadow .45s ease}
.bubble:nth-child(2){animation-delay:-1.4s}.bubble:nth-child(3){animation-delay:-2.8s}.bubble:nth-child(4){animation-delay:-4.2s}
@keyframes tg-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.bubble:hover{scale:1.07;rotate:-6deg;box-shadow:0 22px 40px rgba(29,23,20,.28)}
.tg-motion .bubble.tg-r{transform:scale(.5) rotate(-25deg)}
.tg-motion .bubble.tg-r.is-in{transform:none}
.open-dot{animation:tg-callpulse 1.8s ease-out infinite}
@media (prefers-reduced-motion: reduce){.bubble,.open-dot{animation:none!important}}

/* v1.3.1: slide-in elements must never cause sideways scrolling on phones */
html,body{overflow-x:clip}

/* v1.3.2 animated "Coffee is calling" photo: call banner on the photo, vibration, ring ripples, sheen, ice sparkles */
.coffee-photo .call-card.on-photo{position:absolute;top:14px;left:50%;width:calc(100% - 28px);max-width:380px;margin:0;z-index:3;translate:-50% 0;background:rgba(29,23,20,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tg-motion .coffee-photo .call-card.on-photo{opacity:0;translate:-50% -140%;transition:translate .8s cubic-bezier(.2,1.2,.4,1) .5s,opacity .5s ease .5s}
.tg-motion .coffee-photo.is-in .call-card.on-photo{opacity:1;translate:-50% 0}
.coffee-photo img{animation:tg-kb 20s ease-in-out infinite alternate}
.coffee-photo{animation:tg-vibrate 2.4s ease-in-out infinite}
@keyframes tg-vibrate{0%,62%,84%,100%{rotate:0deg}65%{rotate:-.6deg}68%{rotate:.6deg}71%{rotate:-.6deg}74%{rotate:.5deg}77%{rotate:-.3deg}}
.coffee-photo:has(.call-card.is-declined),.coffee-photo:has(.call-card.is-accepted){animation:none}
.cof-ripples{position:absolute;left:31%;top:74%;width:0;height:0;z-index:2;pointer-events:none}
.cof-ripples i{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.75);opacity:0;animation:tg-ripple 2.4s ease-out infinite}
.cof-ripples i:nth-child(2){animation-delay:.25s}.cof-ripples i:nth-child(3){animation-delay:.5s}
@keyframes tg-ripple{0%,58%{opacity:0;transform:scale(.4)}62%{opacity:.85}100%{opacity:0;transform:scale(2.6)}}
.coffee-photo:has(.call-card.is-declined) .cof-ripples,.coffee-photo:has(.call-card.is-accepted) .cof-ripples{display:none}
.cof-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);background-size:250% 100%;background-position:150% 0;animation:tg-sheen 6s ease-in-out 2s infinite}
@keyframes tg-sheen{0%,70%{background-position:150% 0}100%{background-position:-60% 0}}
.cof-sparks i{position:absolute;z-index:2;width:10px;height:10px;pointer-events:none;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,0) 70%);opacity:0;animation:tg-spark 3.2s ease-in-out infinite}
.cof-sparks i::before,.cof-sparks i::after{content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px}
.cof-sparks i::before{width:2px;height:18px;translate:-50% -50%}
.cof-sparks i::after{width:18px;height:2px;translate:-50% -50%}
.cof-sparks i:nth-child(1){left:20%;top:66%}
.cof-sparks i:nth-child(2){left:42%;top:70%;animation-delay:.8s}
.cof-sparks i:nth-child(3){left:27%;top:82%;animation-delay:1.6s}
.cof-sparks i:nth-child(4){left:48%;top:84%;animation-delay:2.4s}
@keyframes tg-spark{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.coffee-steam{display:none}
@media (prefers-reduced-motion: reduce){
  .coffee-photo,.cof-ripples i,.cof-sheen,.cof-sparks i{animation:none!important}
  .cof-ripples,.cof-sparks{display:none}
  .tg-motion .coffee-photo .call-card.on-photo{opacity:1;translate:-50% 0}
}