/* Kino Coffee Theme — Main CSS (see style.css for theme header) */
/* Complete luxury design system with Apple-style motion */

:root{--blk:#080706;--dk:#0e0d0b;--card:#131210;--edge:#1a1816;--warm:#242019;--au:#c2a24d;--au-h:#d9b85e;--au-lo:#8a7338;--au5:rgba(194,162,77,.05);--au10:rgba(194,162,77,.10);--au20:rgba(194,162,77,.20);--wh:#f0e9d8;--wh2:#c8bfa8;--gr:#7d7568;--gr2:#524c42;--gr3:#3a362e;--serif:'Instrument Serif',Georgia,serif;--sans:'Syne',system-ui,sans-serif;--mono:'Space Mono',monospace;--apple:cubic-bezier(.25,.1,.25,1);--apple-out:cubic-bezier(0,.55,.45,1);--apple-spring:cubic-bezier(.175,.885,.32,1.275)}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}body{background:var(--blk);color:var(--wh);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--au);color:var(--blk)}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}::-webkit-scrollbar{width:0}html{scrollbar-width:none}
.grain{position:fixed;inset:0;z-index:99999;pointer-events:none;opacity:.022;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}
#prog{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--au);z-index:90000;transform-origin:left;transform:scaleX(0)}
.nav{position:fixed;top:0;left:0;right:0;z-index:8000;height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,64px);background:transparent;transition:background .8s var(--apple),height .6s var(--apple)}.nav.s{height:64px;background:rgba(8,7,6,.88);backdrop-filter:blur(40px) saturate(1.8)}.nav.s::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--au5)}.nav-l,.nav-r{display:flex;align-items:center;gap:32px}.nlink{font-size:10px;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:var(--gr);transition:color .5s var(--apple);padding:8px 0;position:relative}.nlink::after{content:'';position:absolute;bottom:4px;left:0;width:100%;height:1px;background:var(--au);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--apple-out)}.nlink:hover{color:var(--au)}.nlink:hover::after{transform:scaleX(1);transform-origin:left}.nlink.active{color:var(--au)}.nav-c{position:absolute;left:50%;transform:translateX(-50%)}.nav-c span,.nav-c img{font-family:var(--serif);font-size:24px;letter-spacing:6px;color:var(--wh);max-height:40px;width:auto}.custom-logo-link img{max-height:40px;width:auto}.cart-btn{position:relative}.cart-btn svg{width:18px;height:18px;stroke:var(--gr);stroke-width:1.2;fill:none;transition:stroke .4s}.cart-btn:hover svg{stroke:var(--wh)}.cart-n{position:absolute;top:-4px;right:-8px;min-width:14px;height:14px;border-radius:7px;background:var(--au);color:var(--blk);font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;transform:scale(0);transition:transform .5s var(--apple-spring)}.cart-n.show{transform:scale(1)}.mob-tog{display:none;flex-direction:column;gap:5px}.mob-tog span{width:20px;height:1px;background:var(--wh)}
.hero-container{height:300vh;position:relative}.hero{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding:0 clamp(24px,4vw,64px)}.hero-glow{position:absolute;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(194,162,77,.05),transparent 65%);top:0;right:-15%;filter:blur(80px);pointer-events:none;transition:transform 2s cubic-bezier(.2,.8,.2,1)}.hero-inner{max-width:1440px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}.hero-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--au);margin-bottom:28px;opacity:0;transform:translateY(30px);transition:all 1s var(--apple)}.hero-h{font-family:var(--serif);font-size:clamp(64px,8vw,130px);font-weight:400;line-height:.9;color:var(--wh)}.hero-h em{font-style:italic;color:var(--au)}.h-line{display:block;overflow:hidden}.h-line-in{display:block;transform:translateY(110%);transition:transform 1.2s var(--apple-out)}.h-line-in.show{transform:translateY(0)}.hero-rule{width:0;height:2px;background:var(--au);margin:clamp(24px,3vw,40px) 0;transition:width 1.2s var(--apple-out)}.hero-rule.show{width:48px}.hero-p{font-family:var(--serif);font-size:clamp(17px,1.8vw,22px);font-style:italic;color:var(--wh2);line-height:1.7;max-width:420px;opacity:0;transform:translateY(24px);transition:all 1.2s var(--apple)}.hero-p.show{opacity:1;transform:none}.hero-ctas{margin-top:clamp(32px,4vw,48px);display:flex;gap:20px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:all 1s var(--apple)}.hero-ctas.show{opacity:1;transform:none}.btn-au{padding:18px 44px;background:var(--au);color:var(--blk);font-size:10px;font-weight:600;letter-spacing:4px;text-transform:uppercase;position:relative;overflow:hidden;transition:all .5s var(--apple);display:inline-block}.btn-au::before{content:'';position:absolute;inset:0;background:var(--au-h);transform:translateY(101%);transition:transform .5s var(--apple-out)}.btn-au:hover::before{transform:translateY(0)}.btn-au>*,.btn-au span{position:relative;z-index:1}.btn-au:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(194,162,77,.2)}.btn-line{padding:18px 32px;font-size:10px;font-weight:400;letter-spacing:3px;text-transform:uppercase;color:var(--gr);border-bottom:1px solid var(--gr3);transition:all .5s var(--apple)}.btn-line:hover{color:var(--au);border-color:var(--au)}
.hero-vis{position:relative;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all 1.8s var(--apple)}.hero-vis.show{opacity:1;transform:scale(1)}.orb-wrap{position:relative;width:clamp(300px,30vw,500px);aspect-ratio:1}#heroCanvas{position:absolute;inset:-20%;width:140%;height:140%;pointer-events:none}.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--au10);animation:spin 60s linear infinite}.orb-ring::before,.orb-ring::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--au);box-shadow:0 0 16px rgba(194,162,77,.6)}.orb-ring::before{top:-2.5px;left:50%;transform:translateX(-50%)}.orb-ring::after{bottom:-2.5px;left:50%;transform:translateX(-50%)}.orb-ring2{position:absolute;inset:10%;border-radius:50%;border:1px dashed var(--au5);animation:spin 80s linear infinite reverse}.orb-ring3{position:absolute;inset:20%;border-radius:50%;border:1px solid var(--au5);animation:spin 100s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.orb-core{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2c2518,#17140f 50%,#0c0b09);box-shadow:0 0 120px rgba(194,162,77,.08),0 0 50px rgba(194,162,77,.03),inset 0 0 60px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;animation:breathe 8s ease-in-out infinite}@keyframes breathe{0%,100%{box-shadow:0 0 120px rgba(194,162,77,.08),0 0 50px rgba(194,162,77,.03),inset 0 0 60px rgba(0,0,0,.7)}50%{box-shadow:0 0 160px rgba(194,162,77,.14),0 0 80px rgba(194,162,77,.06),inset 0 0 60px rgba(0,0,0,.7)}}.orb-icon{font-size:clamp(48px,5vw,80px);filter:saturate(.7) brightness(.85);animation:orbFloat 5s ease-in-out infinite}@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.02)}}.orb-tag{position:absolute;font-family:var(--mono);font-size:7px;letter-spacing:2px;text-transform:uppercase;color:var(--gr2);white-space:nowrap;opacity:0;transition:opacity 1s var(--apple)}.orb-tag.show{opacity:1}.orb-tag-t{top:-12px;left:50%;transform:translateX(-50%)}.orb-tag-b{bottom:-12px;left:50%;transform:translateX(-50%)}.orb-tag-l{left:-20px;top:50%;transform:translateY(-50%) rotate(-90deg)}.orb-tag-r{right:-20px;top:50%;transform:translateY(-50%) rotate(90deg)}
.stats{display:flex;justify-content:center;gap:clamp(32px,5vw,80px);flex-wrap:wrap;padding:clamp(48px,6vw,80px) clamp(24px,4vw,64px);border-top:1px solid var(--au5);border-bottom:1px solid var(--au5);background:var(--dk)}.stat{text-align:center;opacity:0;transform:translateY(30px);transition:all .8s var(--apple)}.stat.v{opacity:1;transform:none}.stat-n{font-family:var(--serif);font-size:clamp(36px,4vw,56px);color:var(--au)}.stat-l{font-family:var(--mono);font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--gr2);margin-top:6px}
.sec-head{text-align:center;margin-bottom:clamp(48px,6vw,80px)}.sec-label{font-family:var(--mono);font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--au);margin-bottom:16px;opacity:0;transform:translateY(20px);transition:all .8s var(--apple)}.sec-title{font-family:var(--serif);font-size:clamp(40px,5.5vw,72px);font-weight:400;color:var(--wh);opacity:0;transform:translateY(30px);transition:all 1s var(--apple)}.sec-title em{font-style:italic;color:var(--au)}.sec-head.v .sec-label,.sec-head.v .sec-title{opacity:1;transform:none}.sec-head.v .sec-title{transition-delay:.15s}
.hscroll-section{padding:clamp(80px,10vw,140px) 0}.hscroll{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 clamp(24px,4vw,64px) 24px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.cc{flex:0 0 clamp(300px,22vw,380px);scroll-snap-align:start;background:var(--card);border:1px solid var(--au5);transition:all .7s var(--apple);position:relative;opacity:0;transform:translateY(40px) scale(.96)}.cc.v{opacity:1;transform:none}.cc:hover{border-color:var(--au20);transform:translateY(-8px) scale(1.01);box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px var(--au10)}.cc-img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(145deg,var(--dk),var(--card));overflow:hidden}.cc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,var(--card));pointer-events:none}.cc-thumb{width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.cc-icon{font-size:64px;filter:saturate(.6) brightness(.85);transition:all .7s var(--apple)}.cc:hover .cc-icon{filter:saturate(.9) brightness(1);transform:scale(1.12) translateY(-6px)}.cc-badge{position:absolute;top:16px;left:16px;padding:5px 12px;font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;z-index:2}.cc-badge.rare{background:var(--au);color:var(--blk)}.cc-badge.ltd{background:rgba(100,30,30,.85);color:#e8c8c8}.cc-badge.best{border:1px solid var(--au20);color:var(--au)}.cc-body{padding:24px}.cc-origin{font-family:var(--mono);font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--au-lo);margin-bottom:10px}.cc-name{font-family:var(--serif);font-size:24px;color:var(--wh);margin-bottom:6px;line-height:1.2;transition:color .5s var(--apple)}.cc:hover .cc-name{color:var(--au-h)}.cc-notes{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--gr);line-height:1.6;margin-bottom:16px}.grinds{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.grind{padding:6px 12px;font-family:var(--mono);font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gr2);border:1px solid var(--au5);transition:all .4s var(--apple)}.grind:hover,.grind.sel{color:var(--blk);background:var(--au);border-color:var(--au)}.cc-foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--au5)}.cc-price{font-family:var(--serif);font-size:26px;color:var(--au)}.cc-cur{font-family:var(--mono);font-size:10px;color:var(--gr2);margin-right:4px}.cc-atc{padding:10px 20px;background:var(--au);color:var(--blk);font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;transition:all .4s var(--apple);position:relative;overflow:hidden}.cc-atc::before{content:'';position:absolute;inset:0;background:var(--au-h);transform:translateY(101%);transition:transform .4s var(--apple-out)}.cc-atc:hover::before{transform:translateY(0)}.cc-atc span{position:relative;z-index:1}
.tools-section{padding:clamp(80px,10vw,140px) clamp(24px,4vw,64px);max-width:1400px;margin:0 auto}.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.tcard{background:var(--card);border:1px solid var(--au5);padding:32px;transition:all .6s var(--apple);display:flex;flex-direction:column;gap:16px;opacity:0;transform:translateY(40px)}.tcard.v{opacity:1;transform:none}.tcard:hover{border-color:var(--au20);transform:translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.35)}.tcard-icon{font-size:40px;filter:saturate(.6) brightness(.85);transition:all .6s var(--apple)}.tcard:hover .tcard-icon{filter:saturate(.9) brightness(1);transform:scale(1.1)}.tcard-img img{width:60px;height:60px;object-fit:contain}.tcard-name{font-family:var(--serif);font-size:22px;color:var(--wh);transition:color .4s}.tcard:hover .tcard-name{color:var(--au-h)}.tcard-desc{font-family:var(--serif);font-size:13px;font-style:italic;color:var(--gr);line-height:1.6}.tcard-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--au5)}.tcard-price{font-family:var(--serif);font-size:22px;color:var(--au)}.tcard-atc{padding:8px 16px;background:var(--au);color:var(--blk);font-size:8px;font-weight:600;letter-spacing:3px;text-transform:uppercase;transition:all .4s var(--apple)}.tcard-atc:hover{background:var(--au-h)}
.courses-section{padding:clamp(80px,10vw,140px) clamp(24px,4vw,64px);border-top:1px solid var(--au5);background:var(--dk)}.courses-inner{max-width:1400px;margin:0 auto}.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px}.ccard{position:relative;padding:clamp(32px,3vw,48px);background:var(--card);border:1px solid transparent;transition:all .6s var(--apple);overflow:hidden;opacity:0;transform:translateY(40px)}.ccard.v{opacity:1;transform:none}.ccard::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--au);transition:height .8s var(--apple-out)}.ccard:hover{border-color:var(--au10)}.ccard:hover::before{height:100%}.ccard-num{font-family:var(--mono);font-size:10px;color:var(--au-lo);letter-spacing:2px;margin-bottom:20px}.ccard-title{font-family:var(--serif);font-size:clamp(24px,2.5vw,32px);color:var(--wh);margin-bottom:12px;line-height:1.2;transition:color .4s}.ccard:hover .ccard-title{color:var(--au-h)}.ccard-desc{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--gr);line-height:1.6;margin-bottom:24px}.ccard-meta{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}.ccard-tag{font-family:var(--mono);font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--gr2);padding:5px 10px;border:1px solid var(--au5)}.ccard-foot{display:flex;align-items:center;justify-content:space-between}.ccard-price{font-family:var(--serif);font-size:24px;color:var(--au)}.ccard-enroll{padding:10px 24px;font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--au);border:1px solid var(--au20);transition:all .5s var(--apple)}.ccard-enroll:hover{background:var(--au);color:var(--blk)}
.sub-section{padding:clamp(100px,14vw,200px) clamp(24px,4vw,64px);text-align:center;position:relative;overflow:hidden}.sub-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 40% 40% at 50% 50%,rgba(194,162,77,.03),transparent);pointer-events:none}.sub-section .sec-label,.sub-section .sub-title,.sub-section .sub-p,.sub-section .btn-au{opacity:0;transform:translateY(30px);transition:all 1s var(--apple)}.sub-section.v .sec-label,.sub-section.v .sub-title,.sub-section.v .sub-p,.sub-section.v .btn-au{opacity:1;transform:none}.sub-section.v .sub-title{transition-delay:.1s}.sub-section.v .sub-p{transition-delay:.2s}.sub-section.v .btn-au{transition-delay:.3s}.sub-title{font-family:var(--serif);font-size:clamp(36px,5vw,64px);color:var(--wh);margin-bottom:16px}.sub-title em{font-style:italic;color:var(--au)}.sub-p{font-family:var(--serif);font-size:17px;font-style:italic;color:var(--gr);max-width:460px;margin:0 auto 40px;line-height:1.7}
.foot{border-top:1px solid var(--au5);padding:64px clamp(24px,4vw,64px) 40px;background:var(--blk)}.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;max-width:1400px;margin:0 auto 56px}.foot-brand{font-family:var(--serif);font-size:24px;letter-spacing:4px;color:var(--wh);margin-bottom:12px}.foot-desc{font-family:var(--serif);font-size:14px;font-style:italic;color:var(--gr);line-height:1.7;max-width:260px}.foot-h{font-family:var(--mono);font-size:8px;letter-spacing:4px;text-transform:uppercase;color:var(--au);margin-bottom:20px}.foot ul,.foot .menu{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0}.foot a,.foot .menu a{font-size:12px;font-weight:300;color:var(--gr);transition:color .4s var(--apple)}.foot a:hover,.foot .menu a:hover{color:var(--au)}.foot li{list-style:none}.foot-bot{border-top:1px solid var(--au5);padding-top:24px;display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;flex-wrap:wrap;gap:12px}.foot-copy{font-family:var(--mono);font-size:9px;color:var(--gr2);letter-spacing:1px}.foot-socs{display:flex;gap:12px}.foot-soc{width:36px;height:36px;border:1px solid var(--au5);display:flex;align-items:center;justify-content:center;transition:all .4s var(--apple)}.foot-soc:hover{border-color:var(--au20);background:var(--au5)}.foot-soc svg{width:13px;height:13px;stroke:var(--gr);stroke-width:1.3;fill:none;transition:stroke .3s}.foot-soc:hover svg{stroke:var(--au)}
.kino-main{max-width:1200px;margin:120px auto 80px;padding:0 clamp(24px,4vw,64px)}.kino-post h2{font-family:var(--serif);font-size:clamp(32px,4vw,48px);color:var(--wh);margin-bottom:24px}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;text-align:center}.hero-vis{order:-1}.orb-wrap{width:220px;margin:0 auto}.hero-rule{margin-left:auto;margin-right:auto}.hero-p{margin-left:auto;margin-right:auto}.hero-ctas{justify-content:center}.nav-l,.nav-r .nlink{display:none}.mob-tog{display:flex}.nav-c{position:relative;left:auto;transform:none}.foot-grid{grid-template-columns:1fr 1fr}.hero-container{height:200vh}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}.cc{flex:0 0 85vw}}