@font-face{font-family:'Lilita One';src:url('assets/LilitaOne-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
/* A playful shop-window moment, scoped to the top of the menu. */
.intro{position:relative;isolation:isolate;overflow:hidden;background:var(--pink);border-bottom:2px solid var(--ink)}
.hero-pattern{position:absolute;inset:-100px;z-index:-1;background:url('assets/brand-stacked.webp') 0 0 / 260px auto repeat;opacity:.07;transform:rotate(-12deg);pointer-events:none}
.intro-inner{position:relative;max-width:var(--max);margin:auto;min-height:458px;padding:42px 44px 52px;display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:center}
.intro-heading{position:relative;z-index:2;padding-bottom:8px}
.intro h1{margin:0 0 25px;font:400 clamp(4.5rem,8.1vw,6rem)/.92 'Lilita One',Rubik,sans-serif;letter-spacing:-.025em;color:var(--cream);text-wrap:initial;transform:rotate(-3deg);transform-origin:0 50%;paint-order:stroke fill;-webkit-text-stroke:2px var(--ink);text-shadow:0 5px 0 var(--ink)}
.title-line,.title-punch{display:block;width:max-content;max-width:100%}.title-punch{padding-left:30px}.intro-copy{margin-bottom:22px;color:#21120f;font-size:1.125rem;font-weight:700}
.intro-link{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:52px;padding:12px 22px;background:var(--cream);border:2px solid var(--ink);border-radius:30px;font-size:.9375rem;font-weight:700;text-decoration:none;color:var(--ink)}
.intro-link svg{transition:transform 180ms var(--ease)}.intro-link:hover svg{transform:translateY(3px)}.intro-link:hover{background:var(--paper)}
.hero-scene{position:relative;z-index:3;isolation:isolate;min-width:0;height:352px;display:grid;place-items:center}
.mascot-orbit{position:absolute;width:310px;aspect-ratio:1;border:2px dashed var(--cream);border-radius:50%;opacity:.55;transform:rotate(0)}
.intro-mascot{position:relative;width:250px;height:326px;object-fit:contain;transform:translateY(0) rotate(5deg);transform-origin:50% 85%;pointer-events:none;filter:drop-shadow(0 12px 9px #64083126)}
.hero-flavor{position:absolute;z-index:2;display:flex;align-items:center;gap:15px;min-height:48px;padding:10px 19px;border-radius:9px;background:var(--cream);border:2px solid var(--ink);font-family:'Lilita One',Rubik,sans-serif;font-size:1.5rem;line-height:1;font-weight:400;box-shadow:0 5px 14px #64083126}
.flavor-sweet{left:0;top:25px;transform:rotate(-12deg)}.flavor-savory{right:-2px;bottom:20px;transform:rotate(9deg)}
.hero-flavor:active{scale:.96}.hero-flavor:hover{background:var(--ink);color:var(--cream)}
.hero-spark{position:absolute;fill:var(--cream);width:37px;height:37px;pointer-events:none}.spark-one{right:13px;top:21px;transform:rotate(12deg)}.spark-two{left:16px;bottom:32px;width:27px;height:27px;transform:rotate(-8deg)}
.hero-motion{position:absolute;right:30px;bottom:7px;min-height:44px;display:inline-flex;align-items:center;gap:7px;padding:9px 10px;background:transparent;font-size:.75rem;color:#21120f;font-weight:700;border-radius:24px}
.hero-motion[hidden]{display:none}.hero-motion:hover{background:#fffbd538}.motion-play{display:none}.hero-motion[aria-pressed=true] .motion-play{display:block}.hero-motion[aria-pressed=true] .motion-pause{display:none}
.hero-ribbon{overflow:hidden;background:var(--cream);border-top:2px solid var(--ink);padding:11px 0;transform:rotate(-1.5deg) scale(1.02);margin:0 -6px 13px}
.ribbon-track{display:flex;width:max-content;transform:translateX(0)}.ribbon-copy{flex:none;display:flex;align-items:center;gap:34px;padding-right:34px;font:400 1.35rem/1.2 'Lilita One',Rubik,sans-serif;color:var(--berry);white-space:nowrap;letter-spacing:.02em}.ribbon-copy i{width:9px;height:9px;background:var(--pink);border-radius:50%}
@keyframes mascot-float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-16px) rotate(-4deg)}}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@keyframes flavor-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes sparkle-turn{0%,100%{rotate:-12deg;scale:.9}50%{rotate:24deg;scale:1.1}}
@keyframes ribbon-travel{to{transform:translateX(-33.333333%)}}
@keyframes pattern-drift{0%,100%{transform:translate(0,0) rotate(-12deg)}50%{transform:translate(30px,-20px) rotate(-10deg)}}
@media(prefers-reduced-motion:no-preference){
.hero-live .intro-mascot{animation:mascot-float 4.8s ease-in-out infinite}
.hero-live .mascot-orbit{animation:orbit-turn 36s linear infinite}
.hero-live .hero-flavor{animation:flavor-float 4.2s ease-in-out infinite}.hero-live .flavor-savory{animation-delay:-2.1s}
.hero-live .hero-spark{animation:sparkle-turn 5s ease-in-out infinite}.hero-live .spark-two{animation-delay:-2.5s}
.hero-live .ribbon-track{animation:ribbon-travel 24s linear infinite}
.hero-live .hero-pattern{animation:pattern-drift 14s ease-in-out infinite}
.hero-still .intro-mascot,.hero-still .mascot-orbit,.hero-still .hero-flavor,.hero-still .hero-spark,.hero-still .ribbon-track,.hero-still .hero-pattern{animation-play-state:paused}
}
@media(max-width:1000px){.intro-inner{grid-template-columns:1.2fr 1fr;padding:40px 32px 52px;gap:16px}.intro h1{font-size:clamp(4rem,9vw,5.7rem)}.hero-scene{height:310px}.intro-mascot{width:220px;height:287px}.mascot-orbit{width:260px}.hero-flavor{font-size:1.25rem;padding:10px 15px}.flavor-sweet{left:-8px;top:14px}.flavor-savory{right:0;bottom:6px}.intro-copy{font-size:1rem}.intro-link{font-size:.875rem;min-height:50px}}
@media(max-width:600px){
.intro-inner{min-height:0;padding:26px 20px 48px;grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:0;align-items:start}
.intro-heading{grid-column:1/-1;grid-row:1;padding-bottom:0}
.intro h1{font-size:clamp(3.5rem,14vw,5rem);line-height:.95;width:66%;margin:0 0 24px;text-shadow:0 3px 0 var(--ink);-webkit-text-stroke:1.5px var(--ink)}
.title-punch{padding-left:8px}.intro-copy{font-size:.875rem;max-width:60%;margin-bottom:18px;line-height:1.5}.intro-link{font-size:.8125rem;padding:11px 16px;gap:14px;min-height:48px}.intro-link svg{width:17px}
.hero-scene{grid-column:2;grid-row:1;align-self:center;margin-top:8px;height:196px;pointer-events:none}.hero-scene button{pointer-events:auto}
.intro-mascot{width:139px;height:181px;max-width:none}.mascot-orbit{width:166px}.hero-flavor{min-height:40px;font-size:1rem;gap:8px;padding:8px 11px}.hero-flavor svg{width:13px;height:13px}.flavor-sweet{top:-9px;left:15px}.flavor-savory{bottom:-6px;right:-3px}.hero-spark{width:23px;height:23px}.spark-one{top:35px;right:-8px}.spark-two{left:0;bottom:26px;width:16px;height:16px}.hero-motion{right:12px;bottom:1px;font-size:.6875rem}.hero-ribbon{padding:9px 0;margin-bottom:10px}.ribbon-copy{font-size:1.05rem;gap:24px;padding-right:24px}.hero-pattern{background-size:180px}
}
@media(max-width:350px){.intro-inner{padding-left:16px;padding-right:16px}.intro h1{font-size:3.2rem}.intro-mascot{width:113px;height:148px}.mascot-orbit{width:135px}.hero-scene{height:164px;margin-top:25px}.hero-flavor{font-size:.875rem;min-height:36px;padding:7px 10px}.flavor-sweet{left:0;top:-6px}.intro-link{font-size:.75rem;gap:10px;padding:10px 12px}.intro-copy{font-size:.8125rem}}