@font-face{font-family:"Monigue";src:url(fonts/Monigue.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Himneu";src:url(fonts/Himneu-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Himneu";src:url(fonts/Himneu-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Himneu";src:url(fonts/Himneu-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Himneu";src:url(fonts/Himneu-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Himneu";src:url(fonts/Himneu-Black.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --green:#395614; --green-d:#2b420d; --lime:#CAD83B; --pink:#ECA6C0; --cream:#FFFEEC; --cream-d:#F1EFD6;
  --display:"Monigue","Himneu",Impact,sans-serif;
  --body:"Himneu","Arial Narrow",sans-serif;
  --pad:clamp(18px,4vw,64px);
  --r:clamp(22px,2.6vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--body);font-weight:500;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);line-height:1.35;color:var(--green);background:var(--green);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.14;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
em{font-style:normal}
svg{display:block}
::selection{background:var(--pink);color:var(--green)}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}

.logo-mask,.foot__logo{display:block;background:currentColor;-webkit-mask:url(img/logo.svg) center/contain no-repeat;mask:url(img/logo.svg) center/contain no-repeat}

/* horné logá: čistý nápis GOSIPP bez podtitulu, päta má plné logo */
.logo-mask{-webkit-mask-image:url(img/logo-word.svg);mask-image:url(img/logo-word.svg)}

/* ---------- NAV ---------- */
.nav{position:fixed;z-index:50;top:14px;left:50%;translate:-50% 0;width:min(1100px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 22px;border-radius:999px;color:var(--cream);background:rgba(43,66,13,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,254,236,.12) inset;transition:background .4s,color .4s,box-shadow .4s}
.nav.is-light{background:rgba(255,254,236,.8);color:var(--green);box-shadow:0 0 0 1px rgba(57,86,20,.12) inset,0 10px 30px -18px rgba(57,86,20,.5)}
.nav__logo .logo-mask{width:104px;aspect-ratio:1000/217.52}
.nav__links{display:flex;gap:clamp(14px,2.4vw,34px);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.nav__links a{position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;scale:0 1;transform-origin:left;transition:scale .35s var(--ease)}
.nav__links a:hover::after{scale:1 1}
.status{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border-radius:999px;background:var(--lime);color:var(--green);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
[data-status] i{width:9px;height:9px;border-radius:50%;background:var(--green);position:relative;flex:none}
[data-status].is-open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s ease-out infinite}
[data-status].is-closed i{background:#b0486c}
@keyframes ping{to{scale:3;opacity:0}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;padding:clamp(96px,13vh,150px) var(--pad) clamp(70px,9vh,110px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;color:var(--cream);overflow:hidden;
  background:radial-gradient(90% 70% at 78% 62%,#4d7220 0%,rgba(77,114,32,0) 60%),radial-gradient(60% 50% at 0% 0%,#476a1b 0%,rgba(71,106,27,0) 70%),var(--green)}
.hero__eyebrow{display:flex;flex-wrap:wrap;gap:8px 12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem}
.hero__eyebrow span{padding:7px 14px;border:1.5px solid rgba(255,254,236,.4);border-radius:999px}
.hero__eyebrow span:first-child{background:var(--pink);border-color:var(--pink);color:var(--green)}
.hero__title{position:relative;z-index:2;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(4rem,13.4vw,17rem);line-height:.8;white-space:nowrap;letter-spacing:-.005em;margin-block:auto}
.hero__title .line{display:block;overflow:hidden;padding-top:.06em}
.hero__title .line>span{display:inline-block}
.hero__title em{color:var(--lime)}
.hero__bottom{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px}
.hero__lead{max-width:30ch;font-size:clamp(1.15rem,1rem + .6vw,1.6rem);line-height:1.25}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-right:clamp(0px,34vw,520px)}

.hero__mascot{position:absolute;z-index:2;right:clamp(8px,5vw,90px);bottom:clamp(60px,9vh,120px);width:clamp(190px,26vw,430px)}
.maskot{width:100%;height:auto;overflow:visible;fill:var(--lime);animation:bob 4.5s ease-in-out infinite}
.maskot .arm{transform-box:view-box;animation:wave 2.2s ease-in-out infinite alternate}
.maskot .arm--l{transform-origin:100px 108px;--a:-9deg}
.maskot .arm--r{transform-origin:338px 108px;--a:9deg;animation-delay:-1.1s}
@keyframes bob{50%{translate:0 -2.2%}}
@keyframes wave{from{rotate:0deg}to{rotate:var(--a)}}
.badge{position:absolute;z-index:3;left:-34%;top:40%;width:40%;aspect-ratio:1;border-radius:50%;background:var(--pink);color:var(--green);display:grid;place-items:center;rotate:-10deg;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
.badge svg{position:absolute;inset:0;animation:spin 18s linear infinite}
.badge text{font-family:var(--body);font-weight:700;font-size:17.5px;letter-spacing:.14em;fill:currentColor}
.badge b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,3.4rem);line-height:.78;text-align:center}
@keyframes spin{to{rotate:360deg}}

/* load-in: slide only, everything is visible in place from the first frame */
.rise{animation:rise .9s var(--ease) both;animation-delay:calc(var(--d)*90ms + 2650ms)}
@keyframes rise{from{transform:translateY(34px);opacity:0}}
.hero__title .rise{animation-name:riseLine}
@keyframes riseLine{from{transform:translateY(105%)}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1rem;line-height:1;transition:translate .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s var(--ease)}
.btn:hover{translate:0 -3px}
.btn:hover svg{translate:4px 0}
.btn--lime{background:var(--lime);color:var(--green);box-shadow:0 6px 0 #8f9a1f}
.btn--lime:hover{box-shadow:0 9px 0 #8f9a1f}
.btn--ghost{border:1.5px solid rgba(255,254,236,.5)}
.btn--ghost:hover{background:var(--cream);color:var(--green)}
.btn--green{background:var(--green);color:var(--cream);box-shadow:0 6px 0 var(--green-d)}
.btn--green:hover{box-shadow:0 9px 0 var(--green-d)}

/* ---------- MARQUEE ---------- */
.marquee{position:relative;z-index:5;background:var(--lime);color:var(--green);rotate:-1.6deg;margin:-34px -3vw;padding:8px 0;overflow:hidden}
.marquee__track{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);width:max-content;animation:marquee 34s linear infinite;font-family:var(--display);text-transform:uppercase;font-size:clamp(2rem,4.4vw,4rem);line-height:1;white-space:nowrap}
/* verzálky Monigue sedia v riadku vyššie než jeho stred, toto ich opticky vycentruje s maskotom */
.marquee__track span{padding-top:.21em}
.marquee__track i{flex:none;width:.72em;aspect-ratio:438.67/460.08;background:var(--green);-webkit-mask:url(img/maskot.svg) center/contain no-repeat;mask:url(img/maskot.svg) center/contain no-repeat}
@keyframes marquee{to{translate:-50% 0}}

/* ---------- SECTION HEADS ---------- */
.tag{display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;padding:6px 13px;border-radius:999px;background:var(--green);color:var(--cream)}
.sec-head{text-align:center;display:grid;justify-items:center;gap:clamp(26px,3.4vw,48px)}
.sec-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3.4rem,11vw,11rem);line-height:.82}
.sec-head h2 em{position:relative;white-space:nowrap}
.sec-head h2 em::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.08em;top:.12em;bottom:.02em;background:var(--lime);border-radius:.12em;rotate:-1.5deg}
.sec-head--light{color:var(--cream)}
.sec-head--light .tag{background:var(--pink);color:var(--green)}
.sec-head--light h2 em{color:var(--green)}

/* ---------- MENU ---------- */
.menu{position:relative;z-index:1;background:var(--cream);padding:clamp(90px,12vw,170px) var(--pad) clamp(70px,9vw,130px);border-radius:0 0 var(--r) var(--r);isolation:isolate}

.picker{position:relative;margin-top:clamp(20px,3vw,40px);outline-offset:-6px;--tile:clamp(150px,19vw,250px);--gap:clamp(170px,23vw,330px)}
.picker__stage{position:relative;height:calc(var(--tile)*1.95);margin-inline:calc(var(--pad)*-1);overflow:hidden;touch-action:pan-y;cursor:grab}
.picker__stage:active{cursor:grabbing}
.pick{position:absolute;left:50%;top:calc(var(--tile)*.2);width:var(--tile);aspect-ratio:1;margin-left:calc(var(--tile)/-2);padding:0;border:0;border-radius:30%;background:var(--cream-d);cursor:pointer;display:grid;place-items:center;
  transform:translate(calc(var(--o)*var(--gap)),calc(var(--o)*var(--o)*var(--tile)*.2)) rotate(calc(var(--o)*11deg)) scale(var(--s,.86));opacity:var(--op,1);
  transition:transform .8s var(--ease),opacity .5s,background .5s,box-shadow .5s}
.pick svg{width:52%;height:auto;overflow:visible;transition:transform .8s var(--ease)}
.pick:hover svg{transform:translateY(-5%) rotate(-3deg)}
.pick.is-active{--s:1.12;background:var(--cream);box-shadow:0 0 0 clamp(8px,1vw,14px) var(--lime),0 0 0 clamp(16px,2vw,28px) rgba(202,216,59,.3),0 40px 50px -30px rgba(57,86,20,.55)}
.pick.is-active svg{transform:scale(1.08)}
.picker__arrow{position:absolute;z-index:4;top:calc(var(--tile)*1.5);width:60px;height:60px;border-radius:50%;border:0;background:var(--green);color:var(--cream);cursor:pointer;display:grid;place-items:center;transition:scale .25s var(--ease),background .25s,color .25s}
.picker__arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.picker__arrow:hover{background:var(--lime);color:var(--green);scale:1.08}
.picker__arrow--prev{left:max(0px,calc(50% - 420px))}
.picker__arrow--next{right:max(0px,calc(50% - 420px))}
.picker__info{position:relative;z-index:3;margin-top:calc(var(--tile)*-.42);text-align:center;display:grid;justify-items:center;gap:10px;min-height:11.5em}
.picker__info h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.86}
.picker__info p{max-width:34ch;opacity:.85}
.picker__meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin-top:6px}
.price{font-weight:900;font-size:1.6rem;line-height:1;padding:10px 20px;border-radius:999px;background:var(--lime);box-shadow:0 5px 0 #8f9a1f}
.chips{display:flex;gap:8px}
.chips span{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:7px 13px;border-radius:999px;border:1.5px solid currentColor}
.picker__info.swap>*{animation:swap .5s var(--ease) both}
.picker__info.swap>*:nth-child(2){animation-delay:.05s}
.picker__info.swap>*:nth-child(3){animation-delay:.1s}
@keyframes swap{from{transform:translateY(14px);opacity:0}}
.picker__dots{display:flex;justify-content:center;gap:7px;margin-top:22px}
.picker__dots i{width:8px;height:8px;border-radius:99px;background:var(--green);opacity:.22;transition:width .4s var(--ease),opacity .4s}
.picker__dots i.on{width:30px;opacity:1}

.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px);max-width:1320px;margin:clamp(60px,8vw,120px) auto 0}
.card{position:relative;border-radius:var(--r);padding:clamp(22px,3vw,44px);overflow:hidden}
.card header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:clamp(14px,2vw,26px)}
.card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,6.5vw,6rem);line-height:.82}
.card header span{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;opacity:.8}
.card--matcha{grid-column:span 12;background:var(--green);color:var(--cream)}
.card--matcha h3{color:var(--lime)}
.card--matcha .cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px)}
.card--coffee{grid-column:span 7;background:var(--cream-d)}
.card--extra{grid-column:span 5;background:var(--pink);padding-bottom:clamp(60px,8vw,110px)}
.list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-top:1.5px solid color-mix(in srgb,currentColor 22%,transparent)}
.list b{font-weight:700;font-size:1.25em;line-height:1.1;display:block}
.list small{font-size:.86em;opacity:.72;font-weight:500}
.list span{font-weight:900;font-size:1.3em;line-height:1;white-space:nowrap}
.card--matcha .list span{color:var(--lime)}
.card--coffee .list{columns:2;column-gap:clamp(24px,4vw,56px)}
.card--coffee .list li{break-inside:avoid}
.note{margin-top:18px;font-size:.9em;opacity:.75}
.card__mascot{position:absolute;right:6%;bottom:-9%;width:28%;aspect-ratio:438.67/460.08;background:var(--green);rotate:8deg;-webkit-mask:url(img/maskot.svg) center/contain no-repeat;mask:url(img/maskot.svg) center/contain no-repeat;transition:translate .5s var(--ease),rotate .5s var(--ease)}
.card--extra:hover .card__mascot{translate:0 -14%;rotate:-4deg}

/* ---------- INFO ---------- */
.info{padding:clamp(80px,11vw,160px) var(--pad) clamp(50px,6vw,90px)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,20px);max-width:1320px;margin:clamp(36px,5vw,70px) auto 0}
.tile{border-radius:var(--r);padding:clamp(22px,3vw,44px);position:relative;overflow:hidden}
.tile .tag{margin-bottom:18px}
.tile h3,.tile .big{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.8rem,5.4vw,5rem);line-height:.84;display:block}
.tile--map{grid-column:span 12;background:var(--lime);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,3vw,44px);padding:clamp(12px,1.4vw,20px)}
.tile__text{padding:clamp(12px,2vw,28px);display:flex;flex-direction:column;align-items:flex-start}
.tile--map address{font-style:normal;font-weight:600;font-size:1.3em;line-height:1.15;margin-top:16px}
.tile--map .small{margin:10px 0 28px;opacity:.8}
.tile--map .btn{margin-top:auto}
.map{border-radius:calc(var(--r) - 8px);overflow:hidden;min-height:clamp(260px,34vw,440px);background:var(--green)}
.map iframe{width:100%;height:100%;min-height:inherit;border:0;display:block;filter:grayscale(1) contrast(1.05) sepia(.35) hue-rotate(45deg) saturate(1.5)}
.tile--hours{grid-column:span 7;background:var(--cream)}
.hours__now{display:flex;align-items:center;gap:12px;font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,3.2vw,2.9rem);line-height:.95;margin-bottom:20px}
.hours__now i{width:.3em;height:.3em}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:9px 14px;border-radius:14px;font-weight:600}
.hours li+li{margin-top:2px}
.hours li.today{background:var(--green);color:var(--cream)}
.hours li.today span:first-child::after{content:"dnes";margin-left:10px;font-size:.72em;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:99px;background:var(--lime);color:var(--green);vertical-align:.12em}
.tile--contact{grid-column:span 5;background:var(--pink);display:flex;flex-direction:column;align-items:flex-start}
.tile--contact .big{transition:translate .35s var(--ease)}
.tile--contact .big:hover{translate:8px 0}
.contact{margin-top:auto;padding-top:28px;width:100%}
.contact li{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1.5px solid rgba(57,86,20,.25);font-weight:600}
.contact span{opacity:.7;text-transform:uppercase;letter-spacing:.1em;font-size:.82em;font-weight:700}
.contact a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- FOOTER ---------- */
.foot{padding:0 var(--pad) 28px;color:var(--lime)}
.foot__logo{width:100%;aspect-ratio:193.2/53.77}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:26px;padding-top:18px;border-top:1.5px solid rgba(202,216,59,.3);color:var(--cream);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.foot__row a{display:inline-flex;align-items:center;gap:6px}
.foot__row svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- SCROLL REVEAL ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
/* ---------- VYŠPERKOVANIE ---------- */
.hero{--mx:0;--my:0}
.hero__title{translate:calc(var(--mx)*10px) calc(var(--my)*6px);transition:translate .6s var(--ease)}
.hero__mascot{translate:calc(var(--mx)*-34px) calc(var(--my)*-20px);transition:translate .6s var(--ease)}
.badge{translate:calc(var(--mx)*-26px) calc(var(--my)*-18px);transition:translate .8s var(--ease)}
.maskot{cursor:pointer}
.maskot.hop{animation:hop .8s var(--ease)}
@keyframes hop{0%{translate:0 0;rotate:0deg}35%{translate:0 -16%;rotate:-7deg}60%{translate:0 0;rotate:5deg}80%{translate:0 -4%;rotate:0deg}100%{translate:0 0}}
.spark{position:absolute;z-index:1;fill:var(--lime);width:clamp(22px,3vw,46px);animation:twinkle 5s ease-in-out infinite;translate:calc(var(--mx)*var(--k,20)*1px) calc(var(--my)*var(--k,20)*1px);transition:translate .9s var(--ease)}
.spark--1{left:46%;top:19%;--k:-40}
.spark--2{right:7%;top:24%;fill:var(--pink);width:clamp(30px,4.4vw,70px);animation-delay:-1.6s;--k:30}
.spark--3{left:38%;bottom:17%;fill:var(--cream);width:clamp(16px,2vw,30px);animation-delay:-3.2s;--k:-22}
@keyframes twinkle{50%{rotate:45deg;scale:.8}}

.marquee__track{transform:skewX(var(--skew,0deg))}
.marquee--pink{background:var(--pink);rotate:1.6deg;margin:calc(clamp(80px,11vw,160px)*-1 - 26px) -6vw clamp(70px,9vw,130px)}
.marquee--pink .marquee__track{animation-direction:reverse;animation-duration:26s}

.picker{--mood:var(--lime)}
.menu{overflow-x:clip}
.menu .sec-head{position:relative;z-index:2}
.picker__blob{position:absolute;left:50%;top:calc(var(--tile)*.95);width:calc(var(--tile)*2.8);aspect-ratio:1.5;translate:-50% -50%;border-radius:50%;background:var(--mood);filter:blur(70px);opacity:.55;transition:background .8s var(--ease);pointer-events:none}
.picker__ghost{position:absolute;left:50%;top:calc(var(--tile)*.9);translate:-50% -50%;font-family:var(--display);text-transform:uppercase;font-size:clamp(6rem,21vw,24rem);line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--green) 11%,transparent);pointer-events:none;user-select:none}
.pick{box-shadow:0 18px 30px -24px rgba(57,86,20,.6)}
.pick svg{width:56%}
.pick.is-active{box-shadow:0 0 0 clamp(8px,1vw,14px) var(--mood),0 0 0 clamp(16px,2vw,28px) color-mix(in srgb,var(--mood) 35%,transparent),0 40px 50px -30px rgba(57,86,20,.55)}
.pick.is-active svg{animation:sip 3.6s ease-in-out infinite}
@keyframes sip{50%{translate:0 -4%;rotate:2deg}}
.steam path{animation:steam 2.4s ease-in-out infinite}
.steam path+path{animation-delay:-1.2s}
@keyframes steam{50%{translate:0 -4px;opacity:.4}0%,100%{opacity:1}}
.picker__count{font-weight:700;letter-spacing:.16em;font-size:.85rem;opacity:.6}
.price{background:var(--mood);box-shadow:0 5px 0 color-mix(in srgb,var(--mood) 70%,#000);transition:background .6s,box-shadow .6s}
.picker__dots i.on{background:var(--green)}

.list li{position:relative;transition:padding .35s var(--ease)}
.list li::before{content:"";position:absolute;inset:3px -12px;border-radius:14px;background:currentColor;opacity:0;transition:opacity .3s;pointer-events:none}
.list li:hover{padding-inline:6px}
.list li:hover::before{opacity:.08}
.card,.tile{transition:translate .5s var(--ease),box-shadow .5s var(--ease)}
.tile--hours:hover,.tile--contact:hover,.card--coffee:hover,.card--extra:hover{translate:0 -6px;box-shadow:0 26px 40px -30px rgba(0,0,0,.7)}


.drag-tip{position:fixed;z-index:120;left:0;top:0;width:86px;height:86px;margin:-43px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:var(--cream);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;pointer-events:none;opacity:0;scale:.4;transition:opacity .25s,scale .35s var(--ease)}
.drag-tip.on{opacity:1;scale:1}
@media not ((hover:hover) and (pointer:fine)){.drag-tip{display:none}}

/* ---------- LOADER: stránka sa naleje ako matcha, maskot kráča po hladine ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--lime);color:var(--green);overflow:hidden;animation:ldOut .5s ease 2.6s both}
.ld__top{position:absolute;inset:clamp(18px,3vw,34px) var(--pad) auto;display:flex;justify-content:space-between;align-items:center;gap:16px;animation:ldIn .6s var(--ease) both}
.ld__logo{width:clamp(110px,12vw,170px);aspect-ratio:1000/217.52}
.ld__say{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;padding:9px 16px;border-radius:999px;background:var(--green);color:var(--lime)}
.ld__spark{position:absolute;fill:var(--green);animation:twinkle 2.4s ease-in-out infinite}
.ld__spark--1{left:18%;top:24%;width:clamp(26px,3.4vw,52px)}
.ld__spark--2{right:14%;top:34%;width:clamp(16px,2vw,30px);fill:var(--pink);animation-delay:-1.1s}
.ld__liquid{position:absolute;left:0;top:0;width:100%;height:130%;background:linear-gradient(#456a19,var(--green) 40vh);animation:ldPour 2.65s both}
.ld__wave{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='36'%3E%3Cpath d='M0 18Q40-6 80 18T160 18V36H0Z' fill='%23395614'/%3E%3C/svg%3E") repeat-x 0 0/160px 36px;animation:ldWave 1.1s linear infinite}
.ld__wave--back{opacity:.45;height:46px;background-size:230px 46px;animation:ldWaveBack 1.9s linear infinite}
.ld__walk{position:absolute;left:0;bottom:calc(100% + 20px);width:clamp(120px,21vh,220px);animation:ldWalk 2.25s cubic-bezier(.3,0,.7,1) both}
.walker{display:block;width:100%;height:auto;overflow:visible;fill:var(--green)}
.wk-leg{animation:wkLeg .52s infinite}
.wk-leg--b{transform-origin:70px 171px;--o:-24deg}
.wk-leg--f{transform-origin:128px 171px;--o:24deg;animation-delay:-.26s}
.wk-all{animation:wkBob .26s ease-in-out infinite}
.wk-arm{transform-origin:27px 96px;animation:wkArm .52s ease-in-out infinite}
.ld__liquid i{position:absolute;aspect-ratio:1;border-radius:50%;background:var(--lime);opacity:0;animation:ldBubble 1.5s ease-in infinite}
.ld__count{position:absolute;left:var(--pad);bottom:clamp(6px,1.5vw,24px);font-weight:900;letter-spacing:-.03em;font-size:clamp(6.5rem,23vw,21rem);line-height:.8;color:var(--lime);font-variant-numeric:tabular-nums;animation:ldCount .45s ease 2.25s both}
.ld__count sup{font-size:.28em;vertical-align:top;margin-left:.08em;color:var(--pink);line-height:1.5}
@keyframes ldPour{0%{transform:translateY(100vh);animation-timing-function:cubic-bezier(.2,.8,.3,1)}26%{transform:translateY(60vh);animation-timing-function:ease-in-out}48%{transform:translateY(63vh);animation-timing-function:ease-in-out}70%{transform:translateY(57vh);animation-timing-function:cubic-bezier(.7,0,.2,1)}100%{transform:translateY(-16vh)}}
@keyframes ldWave{to{background-position-x:-160px}}
@keyframes ldWaveBack{to{background-position-x:230px}}
@keyframes ldWalk{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}
/* krok: noha je polovicu času na zemi a ide dozadu, potom sa zdvihne a prenesie dopredu */
@keyframes wkLeg{0%{transform:translateY(0) rotate(calc(var(--o) - 30deg));animation-timing-function:linear}50%{transform:translateY(0) rotate(calc(var(--o) + 30deg));animation-timing-function:ease-in}75%{transform:translateY(-8px) rotate(var(--o));animation-timing-function:ease-out}100%{transform:translateY(0) rotate(calc(var(--o) - 30deg))}}
@keyframes wkBob{0%,100%{transform:translateY(2.5px)}50%{transform:translateY(0)}}
@keyframes wkArm{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-12deg)}}
@keyframes ldBubble{0%{transform:translateY(40px) scale(.5);opacity:0}30%{opacity:.4}100%{transform:translateY(-70px) scale(1);opacity:0}}
@keyframes ldIn{from{opacity:0;transform:translateY(-14px)}}
@keyframes ldCount{to{opacity:0;transform:translateY(-30px)}}
@keyframes ldOut{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.loader{display:none}}

@media (max-width:900px){
  .nav__links{display:none}
  .card--matcha .cols{grid-template-columns:1fr}
  .card--matcha .cols .list+.list li:first-child{border-top:1.5px solid color-mix(in srgb,currentColor 22%,transparent)}
  .card--coffee,.card--extra,.tile--hours,.tile--contact{grid-column:span 12}
  .tile--map{grid-template-columns:1fr}
  .picker__arrow{top:auto;bottom:-8px;width:52px;height:52px}
  .picker__arrow--prev{left:0}.picker__arrow--next{right:0}
}
@media (max-width:640px){
  .spark--1{left:auto;right:8%;top:17%}.spark--3{display:none}
  .picker__blob{filter:blur(46px)}
  .hero{justify-content:flex-start;gap:20px}
  .hero__title{margin-block:8px 0;font-size:17.5vw}
  .hero__mascot{position:relative;right:auto;bottom:auto;align-self:center;width:min(58vw,260px);margin:8px 0 -4px 12%}
  .hero__cta{margin-right:0}
  .hero__eyebrow span:last-child{display:none}
  .card--coffee .list{columns:1}
  .status{font-size:.8rem;padding:8px 13px 8px 11px}
  .picker{--tile:44vw;--gap:50vw}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

.tile--contact .small{margin-top:14px;max-width:26ch;opacity:.85}
@media (max-width:640px){.badge{left:-30%;top:8%;width:44%}}