* { scroll-behavior: smooth; }
body { font-family: 'Space Grotesk', sans-serif; }

/* neo brutalism - reuse portfolio-web */
.neo-card {
  background: white;
  border: 3px solid #111;
  box-shadow: 8px 8px 0px #111;
  transition: all 0.15s cubic-bezier(0,0,0.2,1);
}
.neo-card:hover {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px #111;
}
.neo-btn {
  border: 3px solid #111;
  box-shadow: 4px 4px 0px #111;
  transition: all 0.1s ease;
}
.neo-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #111;
}
.neo-btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}
.section-divider { height: 4px; background: linear-gradient(90deg, #FF4D8D, #0038FF, #FACC15, #FF5500); }

/* header - more jarak + anim responsive */
#brutalStickyNav {
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  animation: headerSlide 0.7s cubic-bezier(0.16,1,0.3,1);
}
@keyframes headerSlide { from { transform: translateY(-100%); opacity:0; } to { transform: translateY(0); opacity:1; } }
#brutalStickyNav.scrolled {
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 #111;
}
#brutalNavMenu { transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1); transform-origin: top right; }
#brutalNavMenu.hidden { opacity: 0; transform: scale(0.96) translateY(-8px); pointer-events: none; }
#brutalNavMenu:not(.hidden) { opacity: 1; transform: scale(1) translateY(0); }
#brutalHamburger[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
#brutalHamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#brutalHamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* menu grid — full redesign rounded */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 768px) { .menu-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.menu-grid .neo-card { content-visibility: auto; contain-intrinsic-size: 340px 420px; }
.menu-card-in { animation: cardIn 0.45s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes cardIn { from { opacity:0; transform: translateY(14px) scale(0.97); } to { opacity:1; transform: none; } }
.menu-card-premium { position: relative; border-radius: 24px; overflow: hidden; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border: 3px solid #111; box-shadow: 8px 8px 0 #111; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.menu-card-premium:hover { transform: translate(2px,2px); box-shadow: 4px 4px 0 #111; }
.menu-card-accent { display: none; }
.menu-card-promo { background: #FEF3C7; box-shadow: 8px 8px 0 #FF4D8D; }
.menu-promo-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: #FF4D8D; color: #fff; border: 3px solid #111; border-radius: 9999px; padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; box-shadow: 3px 3px 0 #111; transform: rotate(-6deg); }
.menu-card-img { border-radius: 18px; overflow: hidden; border: 3px solid #111; }
.menu-card-price { display: inline-flex; align-items: center; background: #FACC15; border: 2px solid #111; border-radius: 9999px; padding: 4px 10px; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; box-shadow: 2px 2px 0 #111; }
.menu-card-desc { background: #f3f4f6; border: 2px solid #111; border-radius: 9999px; padding: 3px 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #374151; display: inline-block; }
.menu-card-btn { border-radius: 9999px !important; font-size: 13px; letter-spacing: 0.04em; }

.headline-underline { transition: width 0.5s cubic-bezier(0.16,1,0.3,1); }
.group:hover .headline-underline { width: 100%; }

/* glitch - samakan IKI MARCO portfolio-web - x2 gede + CAKE warna ganti */
.brutal-headline {
  line-height: 0.9;
  letter-spacing: -0.03em;
}
@keyframes glitch {
  0%, 92.9%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  93% { clip-path: inset(0 0 55% 0); transform: translate(-4px, 1px); }
  95% { clip-path: inset(30% 0 30% 0); transform: translate(4px, -1px); }
  97% { clip-path: inset(60% 0 0 0); transform: translate(-3px, 2px); }
}
.glitch-text { position: relative; display: inline-block; line-height: 0.9; }
.glitch-text::before, .glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #FAFAFA;
  line-height: 0.9;
}
.glitch-text::before {
  color: #FF4D8D;
  animation: glitch 6s infinite steps(1);
  z-index: -1;
}
.glitch-text::after {
  color: #0038FF;
  animation: glitch 6s infinite steps(1);
  animation-delay: 0.1s;
  z-index: -2;
}
.brutal-headline .glitch-text { color: #111; }
.glitch-outline { line-height: 0.9; }
/* CAKE warna ganti pink matcha kuning tiap glitch */
.cake-word {
  display: inline-block;
  animation: cakeColor 6s infinite steps(1);
}
@keyframes cakeColor {
  0%, 92.9% { color: #111; }
  93% { color: #FF4D8D; }
  95% { color: #22C55E; }
  97% { color: #FACC15; }
  100% { color: #111; }
}
.topi-hat {
  position: absolute !important;
  left: 74% !important;
  top: -0.32em !important;
  transform: translateX(-50%) rotate(-6deg) !important;
  width: 5.1em !important;
  height: auto;
  pointer-events: none;
  z-index: 10 !important;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.15));
}
.brutal-headline { overflow: visible !important; }
#heroHeadline { overflow: visible !important; }
#home { overflow: visible !important; }
@media (max-width: 640px) {
  .brutal-headline .glitch-outline { -webkit-text-stroke-width: 2px !important; }
  .topi-hat { top: -0.28em !important; width: 5.4em !important; left: 72% !important; }
}

/* cart bar sweet */
#cartBar { transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease; }
#cartBar.hidden { transform: translateY(100%); opacity:0; pointer-events:none; }
#cartBar.visible-pop { animation: cartPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes cartPop { 0% { transform: translateY(100%) scale(0.96); } 60% { transform: translateY(-4px) scale(1.01); } 100% { transform: translateY(0) scale(1); } }
.cart-bump { animation: bump 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes bump { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* drawer sweet */
#cartDrawer { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); will-change: transform; }
#cartDrawer.closed { transform: translateX(100%); }
#cartDrawer.open { transform: translateX(0); }
#drawerOverlay { transition: opacity 0.35s ease, backdrop-filter 0.35s ease; backdrop-filter: blur(0px); }
#drawerOverlay.hidden { opacity: 0; pointer-events: none; }
#drawerOverlay.visible { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }
.drawer-item { animation: drawerItem 0.35s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes drawerItem { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform: none; } }
.qty-pop { animation: qtyPop 0.25s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes qtyPop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.btn-added { animation: btnAdded 0.4s ease; }
@keyframes btnAdded { 0% { transform: scale(1); } 30% { transform: scale(0.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* modal sweet */
.modal.hidden { display: none; }
.modal.visible { display: flex; }
.modal.visible .modal-box { animation: modalIn 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes modalIn { from { opacity:0; transform: translateY(12px) scale(0.97); } to { opacity:1; transform: none; } }
@keyframes variantShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.shake { animation: variantShake 0.35s ease !important; }
.variant-error { background:#FF4D8D; color:white; border:3px solid #111; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; padding:8px 10px; display:none; margin-bottom:10px; box-shadow:3px 3px 0 #111; }
.variant-error.show { display:block; }

/* header full screen helper - mobile gedean */
#home { min-height: 100vh; min-height: 100dvh; }
@media (max-width: 768px) {
  #home { min-height: 105dvh; padding-top: 88px; padding-bottom: 32px; }
  #home .brutal-headline { font-size: clamp(72px, 20vw, 110px); }
}
@media (min-width: 768px) {
  #home .brutal-headline { font-size: clamp(96px, 11vw, 216px); }
  #home .glitch-outline { -webkit-text-stroke-width: 3.5px !important; }
}
@keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.animate-scroll-bounce { animation: scrollBounce 1.4s ease-in-out infinite; }
.parallax-shape { will-change: transform; transition: transform 0.1s linear; }
.floating-cake { animation: floating 2.2s ease-in-out infinite; }
.floating-love { animation: floating 2.6s ease-in-out infinite 0.7s; }
@keyframes floating { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.floating-cake.flt-glitch, .floating-love.flt-glitch { animation: floating 2.2s ease-in-out infinite, fltGlitch 0.3s steps(1); }
@keyframes fltGlitch { 0%{ transform: translate(0,0) } 20%{ transform: translate(-3px,1px) } 40%{ transform: translate(3px,-1px) } 60%{ transform: translate(-2px,2px) } 100%{ transform: translate(0,0) } }
.floating-cake.flt-tilt, .floating-love.flt-tilt { animation: floating 2.2s ease-in-out infinite, fltTilt 0.35s ease; }
@keyframes fltTilt { 0%{ transform: rotate(0) } 30%{ transform: rotate(-5deg) } 70%{ transform: rotate(5deg) } 100%{ transform: rotate(0) } }
.floating-cake.flt-pop, .floating-love.flt-pop { animation: floating 2.2s ease-in-out infinite, fltPop 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes fltPop { 0%{ transform: scale(1) } 50%{ transform: scale(1.08) } 100%{ transform: scale(1) } }
#heroGrid, #heroHeadline { will-change: transform; }

/* deskripsi desktop interaktif - hanya desktop anim */
.desc-anim { position: relative; }
.desc-hl { position: relative; display: inline-block; padding: 0 3px; z-index: 0; cursor: default; transition: transform 0.15s ease; }
.desc-hl::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  top: -2px; bottom: -2px;
  z-index: -1;
  border: 2px solid #111;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.desc-hl-1::after { background: #FACC15; }
.desc-hl-2::after { background: #22C55E; }
.desc-hl-3::after { background: #FF4D8D; }
@media (min-width: 768px) {
  .desc-hl::after { animation: hlDraw 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
  .desc-hl-1::after { animation-delay: 0.4s; }
  .desc-hl-2::after { animation-delay: 0.7s; }
  .desc-hl-3::after { animation-delay: 1s; }
  .desc-anim:hover .desc-hl { transform: translateY(-1px); }
  .desc-anim:hover .desc-hl::after { transform: scaleX(1); filter: brightness(1.05); }
  .desc-hl:hover { transform: translateY(-2px) scale(1.02); }
  .desc-hl:hover::after { transform: scaleX(1); box-shadow: 2px 2px 0px #111; }
}
@media (max-width: 767px) {
  .desc-hl::after { transform: scaleX(1); opacity: 0.9; }
}
@keyframes hlDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* menu carousel fade */
.menu-carousel { position: relative; }
.menu-carousel img.carousel-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.menu-carousel img.carousel-img.active { opacity: 1; }

/* QR idle C — pop/tilt/glitch + border flicker */
.qr-card { will-change: transform, box-shadow, border-color; }
.qr-card.qr-pop { animation: qrPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes qrPop { 0%{transform:scale(1)} 50%{transform:scale(1.03)} 100%{transform:scale(1)} }
.qr-card.qr-tilt { animation: qrTilt 0.32s ease; }
@keyframes qrTilt { 0%{transform:rotate(0)} 25%{transform:rotate(-1.2deg)} 75%{transform:rotate(1.2deg)} 100%{transform:rotate(0)} }
.qr-card.qr-glitch { animation: qrGlitch 0.32s steps(1); }
@keyframes qrGlitch { 0%{transform:translate(0,0); filter:none} 20%{transform:translate(-2px,1px); filter:brightness(1.05)} 40%{transform:translate(2px,-1px)} 60%{transform:translate(-1px,2px)} 80%{transform:translate(1px,-1px)} 100%{transform:translate(0,0)} }
.qr-card.qr-border { animation: qrBorder 0.4s steps(1); }
@keyframes qrBorder { 0%{border-color:#111; box-shadow:8px 8px 0 #111} 33%{border-color:#FF4D8D; box-shadow:8px 8px 0 #FF4D8D} 66%{border-color:#22C55E; box-shadow:8px 8px 0 #22C55E} 100%{border-color:#111; box-shadow:8px 8px 0 #111} }

/* variant rasa topping — per warna */
.variant-rasa-coklat{ background:#8B4513 !important; color:white !important; }
.variant-rasa-strawberry{ background:#FF4D8D !important; color:white !important; }
.variant-rasa-matcha{ background:#16A34A !important; color:white !important; }
.variant-rasa-pandan{ background:#16A34A !important; color:white !important; }
.variant-rasa-vanila{ background:#FEF3C7 !important; color:#111 !important; border-color:#111 !important; }
.variant-topping-oreo{ background:#111 !important; color:white !important; }
.variant-topping-meses-warna{ background:linear-gradient(90deg,#EF4444 0% 16%,#F59E0B 16% 32%,#FACC15 32% 48%,#22C55E 48% 64%,#3B82F6 64% 80%,#A855F7 80% 100%) !important; color:white !important; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.variant-topping-meses-coklat{ background:repeating-linear-gradient(45deg,#fff 0 6px,#8B4513 6px 12px) !important; color:#111 !important; }
.variant-topping-keju{ background:#FACC15 !important; color:#111 !important; }
.variant-topping-mix{ background:conic-gradient(from 180deg,#EF4444,#F59E0B,#FACC15,#22C55E,#3B82F6,#A855F7,#EF4444) !important; color:white !important; text-shadow:0 1px 3px rgba(0,0,0,0.7); }
.variant-card { border:3px solid #111; box-shadow:4px 4px 0 #111; transition:all 0.12s ease; }
.variant-card:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #111; }
/* selfie preview */
#selfiePreview img { border: 3px solid #111; box-shadow: 4px 4px 0px #111; }

#loader { transition: opacity 0.6s ease, visibility 0.6s ease; }
#loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
body:not(.loaded) { overflow: hidden; }
body.loaded #brutalStickyNav { animation: headerSlide 0.7s cubic-bezier(0.16,1,0.3,1); }
body:not(.loaded) #home { opacity: 0; transform: translateY(12px); }
body.loaded #home { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
body.loaded #heroHeadline { animation: heroEntrance 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
@keyframes heroEntrance { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
/* ghost loader + landing wandering */
#ghost { position: relative; scale: 0.8; --ghost: #FF4D8D; }
#ghost.landing-ghost { position: absolute; scale: 0.5; opacity: 1; pointer-events: none; z-index: 1; transition: left 1.2s ease, top 1.2s ease, transform 0.25s ease; will-change: left, top, transform; }
#ghost.landing-ghost.facing-right { scale: -0.5 0.5; }
#home .max-w-6xl { position: relative; z-index: 2; }
#heroGrid { z-index: 0; }
#red { animation: upNDown infinite 0.5s; position: relative; width: 140px; height: 140px; display: grid; grid-template-columns: repeat(14, 1fr); grid-template-rows: repeat(14, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; grid-template-areas: "a1 a2 a3 a4 a5 top0 top0 top0 top0 a10 a11 a12 a13 a14" "b1 b2 b3 top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14" "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14" "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14" "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14" "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4" "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5" "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18"; }
@keyframes upNDown { 0%,49%{transform:translateY(0px)} 50%,100%{transform:translateY(-10px)} }
#top0,#top1,#top2,#top3,#top4,#st0,#st1,#st2,#st3,#st4,#st5{ background-color: var(--ghost); }
#top0{grid-area:top0} #top1{grid-area:top1} #top2{grid-area:top2} #top3{grid-area:top3} #top4{grid-area:top4}
#st0{grid-area:st0} #st1{grid-area:st1} #st2{grid-area:st2} #st3{grid-area:st3} #st4{grid-area:st4} #st5{grid-area:st5}
#an1{grid-area:an1;animation:flicker0 infinite 0.5s} #an18{grid-area:an18;animation:flicker0 infinite 0.5s}
#an2{grid-area:an2;animation:flicker1 infinite 0.5s} #an17{grid-area:an17;animation:flicker1 infinite 0.5s}
#an3{grid-area:an3;animation:flicker1 infinite 0.5s} #an16{grid-area:an16;animation:flicker1 infinite 0.5s}
#an4{grid-area:an4;animation:flicker1 infinite 0.5s} #an15{grid-area:an15;animation:flicker1 infinite 0.5s}
#an6{grid-area:an6;animation:flicker0 infinite 0.5s} #an12{grid-area:an12;animation:flicker0 infinite 0.5s}
#an7{grid-area:an7;animation:flicker0 infinite 0.5s} #an13{grid-area:an13;animation:flicker0 infinite 0.5s}
#an9{grid-area:an9;animation:flicker1 infinite 0.5s} #an10{grid-area:an10;animation:flicker1 infinite 0.5s}
#an8{grid-area:an8;animation:flicker0 infinite 0.5s} #an11{grid-area:an11;animation:flicker0 infinite 0.5s}
@keyframes flicker0{ 0%,49%{background-color:var(--ghost)} 50%,100%{background-color:transparent} }
@keyframes flicker1{ 0%,49%{background-color:transparent} 50%,100%{background-color:var(--ghost)} }
#eye{ width:40px;height:50px;position:absolute;top:30px;left:10px }
#eye::before{ content:"";background-color:white;width:20px;height:50px;transform:translateX(10px);display:block;position:absolute }
#eye::after{ content:"";background-color:white;width:40px;height:30px;transform:translateY(10px);display:block;position:absolute }
#eye1{ width:40px;height:50px;position:absolute;top:30px;right:30px }
#eye1::before{ content:"";background-color:white;width:20px;height:50px;transform:translateX(10px);display:block;position:absolute }
#eye1::after{ content:"";background-color:white;width:40px;height:30px;transform:translateY(10px);display:block;position:absolute }
#pupil{ width:20px;height:20px;background-color:#0038FF;position:absolute;top:50px;left:10px;z-index:1;animation:eyesMovement infinite 3s }
#pupil1{ width:20px;height:20px;background-color:#0038FF;position:absolute;top:50px;right:50px;z-index:1;animation:eyesMovement infinite 3s }
@keyframes eyesMovement{ 0%,49%{transform:translateX(0px)} 50%,99%{transform:translateX(10px)} 100%{transform:translateX(0px)} }
#shadow{ background-color:black;width:140px;height:140px;position:absolute;border-radius:50%;transform:rotateX(80deg);filter:blur(20px);top:80%;animation:shadowMovement infinite 0.5s }
@keyframes shadowMovement{ 0%,49%{opacity:0.5} 50%,100%{opacity:0.2} }

/* pacman loader JkHuger + morph success */
#pacmanContainer { position: relative; width: 300px; height: 120px; overflow: hidden; }
.circle { position: absolute; left: -100px; top: 10px; width: 0; height: 0; border: 30px solid #FDD835; border-radius: 50%; border-right-color: transparent; animation: pacmanMove 2.5s linear infinite; }
.circle:before { content:""; position:absolute; top:-30px; left:-30px; width:0; height:0; border:30px solid #FDD835; border-radius:50%; border-right-color:transparent; animation: pacmanChomp1 0.25s ease-in-out infinite; }
.circle:after { content:""; position:absolute; top:-30px; left:-30px; width:0; height:0; border:30px solid #FDD835; border-radius:50%; border-right-color:transparent; animation: pacmanChomp2 0.25s ease-in-out infinite; }
.dots, .dots2 { position: absolute; top: 35px; display:flex; }
.dots { left: 60px; } .dots2 { left: 70px; }
.dot, .dot2 { width:8px; height:8px; margin:0 8px; border-radius:50%; }
.dot { background:#1E88E5; animation: pacmanDot1 2.5s linear infinite; }
.dot2 { background:#F44336; animation: pacmanDot2 2.5s linear infinite; opacity:0; }
.dot:nth-child(1){animation-delay:0s} .dot:nth-child(2){animation-delay:0.12s} .dot:nth-child(3){animation-delay:0.24s} .dot:nth-child(4){animation-delay:0.36s} .dot:nth-child(5){animation-delay:0.48s} .dot:nth-child(6){animation-delay:0.6s} .dot:nth-child(7){animation-delay:0.72s} .dot:nth-child(8){animation-delay:0.84s} .dot:nth-child(9){animation-delay:0.96s} .dot:nth-child(10){animation-delay:1.08s}
.dot2:nth-child(1){animation-delay:1.25s} .dot2:nth-child(2){animation-delay:1.37s} .dot2:nth-child(3){animation-delay:1.49s} .dot2:nth-child(4){animation-delay:1.61s} .dot2:nth-child(5){animation-delay:1.73s} .dot2:nth-child(6){animation-delay:1.85s} .dot2:nth-child(7){animation-delay:1.97s} .dot2:nth-child(8){animation-delay:2.09s} .dot2:nth-child(9){animation-delay:2.21s} .dot2:nth-child(10){animation-delay:2.33s}
@keyframes pacmanChomp1{0%{transform:rotate(0)}50%{transform:rotate(35deg)}100%{transform:rotate(0)}}
@keyframes pacmanChomp2{0%{transform:rotate(0)}50%{transform:rotate(-35deg)}100%{transform:rotate(0)}}
@keyframes pacmanMove{0%{left:-60px; transform:rotateY(0)}48%{transform:rotateY(0)}50%{left:100%; transform:rotateY(180deg)}100%{left:-60px; transform:rotateY(180deg)}}
@keyframes pacmanDot1{0%,4%{opacity:1}5%,94%{opacity:0}95%,100%{opacity:1}}
@keyframes pacmanDot2{0%,4%{opacity:1}5%,94%{opacity:0}95%,100%{opacity:1}}
#orderLoader.morph-out { animation: loaderMorphOut 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes loaderMorphOut{ from{opacity:1; transform:scale(1)} to{opacity:0; transform:scale(0.96)} }
#orderDetail.morph-in { animation: detailMorphIn 0.45s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes detailMorphIn{ from{opacity:0; transform:translateY(8px) scale(0.98)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  #loader { display:none !important; }
  body:not(.loaded) #home { opacity:1; transform:none; }
}