:root{--navy:#0B3A75;--flame:#EE4E23;--cream:#F5F1EC;--roast:#3A2216}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:'Kanit',sans-serif;background:var(--cream);color:#1d1d1f;overflow-x:hidden}
h1,h2,h3,.font-display{font-family:'Kanit',sans-serif}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.reveal.left{transform:translateX(-48px)}
.reveal.right{transform:translateX(48px)}
.reveal.zoom{transform:scale(.92)}
.reveal.in{opacity:1;transform:none}

/* hero */
.hero-bg{background:radial-gradient(1200px 600px at 80% 20%,#1A5AA8 0%,transparent 60%),radial-gradient(800px 500px at 0% 100%,#EE4E2333 0%,transparent 60%),linear-gradient(160deg,#082B58,#0B3A75 55%,#051C3A)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.word{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.22em .04em .08em;margin:-.22em -.04em -.08em}
.word>span{display:inline-block;transform:translateY(110%);animation:wordUp 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes wordUp{to{transform:none}}
.fade-up{opacity:0;transform:translateY(24px);animation:fadeUp .9s ease forwards;animation-delay:var(--d,0s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
.float{animation:float 6s ease-in-out infinite}
.float-slow{animation:float 9s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(calc(var(--r,0deg) + 3deg))}}
.spin-slow{animation:spin 22s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bean{position:absolute;width:var(--s,26px);height:calc(var(--s,26px)*1.35);border-radius:50%;background:radial-gradient(circle at 30% 30%,#8a5a3a,#3A2216 70%);box-shadow:0 8px 14px #0006}
.bean::after{content:"";position:absolute;left:48%;top:8%;bottom:8%;width:2px;background:#1a0d07;border-radius:2px;transform:rotate(12deg)}

/* marquee */
.marquee{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* heat shimmer line */
.heat{background:linear-gradient(90deg,transparent,var(--flame),transparent);background-size:200% 100%;animation:heat 3s linear infinite}
@keyframes heat{to{background-position:-200% 0}}

/* cards */
.card-lift{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.card-lift:hover{transform:translateY(-10px);box-shadow:0 30px 60px -20px #0B3A7566}
.img-zoom{overflow:hidden}
.img-zoom img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.img-zoom:hover img{transform:scale(1.08)}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border-radius:999px;padding:.95rem 1.7rem;font-weight:600;font-family:'Kanit',sans-serif;overflow:hidden;transition:transform .3s,box-shadow .3s}
.btn:hover{transform:translateY(-3px)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.btn:hover::before{transform:translateX(120%)}
.btn-flame{background:var(--flame);color:#fff;box-shadow:0 12px 30px -10px #EE4E23aa}
.btn-line{background:#06C755;color:#fff;box-shadow:0 12px 30px -10px #06C755aa}
.btn-ghost{border:1.5px solid #ffffff66;color:#fff}
.btn-ghost:hover{background:#ffffff1a}

/* floating LINE */
.line-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:.6rem;background:#06C755;color:#fff;border-radius:999px;padding:.35rem .35rem .35rem 1.1rem;font-weight:600;font-family:'Kanit',sans-serif;box-shadow:0 14px 34px -8px #06C755cc,0 4px 10px #0003;transition:transform .3s}
.line-fab:hover{transform:translateY(-4px) scale(1.04)}
.line-fab .ico{width:52px;height:52px;border-radius:50%;background:#fff;display:grid;place-items:center;position:relative}
.line-fab .ico::before,.line-fab .ico::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #06C755;animation:ping 2.2s cubic-bezier(0,0,.2,1) infinite}
.line-fab .ico::after{animation-delay:1.1s}
@keyframes ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.9);opacity:0}}
@media (max-width:640px){.line-fab .txt{display:none}.line-fab{padding:.3rem}}

/* header */
.site-header{transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.site-header.scrolled{background:#0B3A75e6;backdrop-filter:blur(14px);box-shadow:0 10px 30px -12px #0008}
.nav-link{position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.nav-link:hover::after{transform:scaleX(1)}

/* progress */
#progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--flame);transform:scaleX(0);transform-origin:left;z-index:70}

details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .plus{transform:rotate(45deg)}
.plus{transition:transform .3s}

/* timeline line */
.tl-line{background:linear-gradient(var(--flame),var(--navy));transform-origin:top;transform:scaleY(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.tl.in .tl-line{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.word>span,.fade-up{opacity:1!important;transform:none!important}
  .tl-line{transform:none!important}
  .marquee{animation:none!important}
}

/* .btn display must not beat Tailwind responsive visibility */
.btn.hidden{display:none}
@media (min-width:640px){.btn.sm\:inline-flex{display:inline-flex}}

/* ภาษาไทย: วรรณยุกต์/สระบนล่างชนบรรทัดข้างเคียงถ้า line-height ต่ำ → บังคับหัวข้อ ≥1.5 (Kanit) */
body,h1,h2,h3,h4,.font-display,button,input,textarea{font-family:'Kanit',sans-serif}
h1,h2,h3,h4,.font-display{line-height:1.5!important}
h1{line-height:1.45!important}

/* roast / size pickers */
.roast-btn{display:flex;flex-direction:column;align-items:center;gap:.4rem;border-radius:1rem;border:2px solid #0B3A7526;background:#fff;padding:.8rem .5rem;font-family:'Kanit','Prompt',sans-serif;font-weight:600;color:#0B3A75;transition:transform .25s,border-color .25s,box-shadow .25s}
.roast-btn:hover{transform:translateY(-3px)}
.roast-btn[aria-checked=true]{border-color:#EE4E23;box-shadow:0 10px 24px -10px #EE4E23aa;background:#FFF6F2}
.roast-bean{width:22px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--c) 70%,#fff),var(--c));position:relative;box-shadow:0 4px 8px #0003}
.roast-bean::after{content:"";position:absolute;left:48%;top:10%;bottom:10%;width:2px;background:#0006;border-radius:2px;transform:rotate(12deg)}
.size-btn{display:flex;flex-direction:column;align-items:center;gap:.1rem;border-radius:1rem;border:2px solid #0B3A7526;background:#fff;padding:.8rem;color:#0B3A75;transition:transform .25s,border-color .25s,box-shadow .25s}
.size-btn:hover{transform:translateY(-3px)}
.size-btn[aria-checked=true]{border-color:#EE4E23;box-shadow:0 10px 24px -10px #EE4E23aa;background:#FFF6F2}
.size-link{display:flex;align-items:center;justify-content:space-between;gap:.4rem;border-radius:.9rem;background:#0B3A75;color:#fff;padding:.65rem .8rem;font-family:'Kanit','Prompt',sans-serif;transition:background .25s,transform .25s}
.size-link:hover{background:#EE4E23;transform:translateY(-2px)}
.size-link:only-child{grid-column:1/-1;justify-content:center;text-align:center}
:focus-visible{outline:3px solid #F2B53A;outline-offset:2px}
.size-link{flex-direction:column;justify-content:center;gap:0;text-align:center}
.size-link strong{white-space:nowrap}