*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 50% 15%,rgba(95,0,130,.25),transparent 38%),#050505;color:#fff;font-family:"Arial Narrow",Impact,Arial,sans-serif;overflow-x:hidden}button,select{font:inherit}:root{--yellow:#ffbf00;--purple:#8d35b6;--black:#050505}.site-header{height:86px;width:100%;display:flex;align-items:center;gap:34px;padding:10px 4%;position:fixed;top:0;left:0;z-index:1000;background:linear-gradient(to bottom,rgba(0,0,0,.97),rgba(0,0,0,.80));border-bottom:1px solid rgba(255,191,0,.25);backdrop-filter:blur(12px)}.brand-mini img{height:67px}.desktop-nav{flex:1;display:flex;justify-content:center;gap:32px}.desktop-nav a{color:#eee;text-decoration:none;font-weight:900;font-size:16px}.desktop-nav a:hover{color:var(--yellow)}.order-top-btn{background:transparent;border:2px solid var(--yellow);color:var(--yellow);padding:14px 20px;font-weight:900;cursor:pointer;border-radius:5px}.mobile-menu-btn,.mobile-nav{display:none}.hero{min-height:100vh;position:relative;padding-top:110px;overflow:hidden;background:radial-gradient(ellipse at center,rgba(95,0,130,.30) 0%,rgba(0,0,0,0) 50%)}.hero-title{position:absolute;top:125px;left:50%;transform:translateX(-50%);z-index:20;white-space:nowrap;font-style:italic;font-weight:900;font-size:clamp(22px,3vw,42px)}.hero-title strong{color:var(--yellow);margin-left:8px}.solar-system{position:relative;width:min(1200px,100vw);height:760px;margin:10px auto 0}.orbit-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.ring-one{width:740px;height:440px;border:2px solid rgba(144,49,190,.55)}.ring-two{width:880px;height:530px;border:1px solid rgba(255,191,0,.18)}.ring-three{width:1000px;height:610px;border:1px solid rgba(144,49,190,.18)}.center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:360px;height:360px;display:flex;align-items:center;justify-content:center}.center-glow{position:absolute;width:115%;height:115%;border-radius:50%;background:radial-gradient(circle,rgba(118,15,165,.60),rgba(118,15,165,.13) 45%,transparent 70%);filter:blur(15px);animation:pulseGlow 3s ease-in-out infinite}@keyframes pulseGlow{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.08);opacity:1}}.logo-video,.logo-fallback{position:relative;width:100%;height:100%;object-fit:contain;z-index:2}.logo-fallback{position:absolute;inset:0}.orbit-system{position:absolute;left:50%;top:50%;width:900px;height:550px;transform:translate(-50%,-50%);animation:orbitSpin 55s linear infinite;z-index:8}@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.orbit-system:hover{animation-play-state:paused}.orbit-item{position:absolute;width:180px;padding:0;border:0;background:transparent;cursor:pointer;color:#fff;animation:keepFoodStraight 55s linear infinite}@keyframes keepFoodStraight{from{transform:rotate(0)}to{transform:rotate(-360deg)}}.orbit-system:hover .orbit-item{animation-play-state:paused}.food-image-wrap{width:180px;height:130px;display:flex;align-items:center;justify-content:center;transition:.25s}.orbit-item img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 13px 8px rgba(0,0,0,.65))}.orbit-item span{display:inline-block;padding:6px 10px;margin-top:3px;font-size:18px;font-style:italic;font-weight:900}.orbit-item:hover .food-image-wrap{transform:scale(1.2);filter:drop-shadow(0 0 16px rgba(255,191,0,.55))}.orbit-item:hover span{color:var(--yellow)}.orbit-1{left:50%;top:-25px;margin-left:-90px}.orbit-2{right:-15px;top:70px}.orbit-3{right:-65px;top:285px}.orbit-4{right:90px;bottom:-70px}.orbit-5{left:50%;bottom:-115px;margin-left:-90px}.orbit-6{left:80px;bottom:-70px}.orbit-7{left:-65px;top:285px}.orbit-8{left:-15px;top:70px}.hero-instruction{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:#aaa;font-size:15px;letter-spacing:2px;white-space:nowrap}.motto-section{min-height:390px;position:relative;display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden;border-top:1px solid rgba(141,53,182,.30);border-bottom:1px solid rgba(141,53,182,.30)}.motto-brush{position:absolute;width:760px;height:150px;background:var(--yellow);transform:rotate(-2deg);clip-path:polygon(3% 14%,98% 0,94% 19%,100% 29%,95% 39%,99% 58%,91% 61%,100% 84%,82% 77%,94% 100%,7% 87%,0 68%,5% 52%,0 37%,8% 31%)}.motto-content{position:relative;z-index:3;color:#050505}.motto-top{font-size:clamp(24px,3vw,40px);font-weight:900}.motto-main,.motto-bottom{font-size:clamp(40px,6vw,78px);font-weight:1000;line-height:.9}.motto-content span{color:#5f137e;text-shadow:2px 2px 0 #fff}.order-section{min-height:700px;display:flex;justify-content:center;align-items:center;padding:80px 20px;background:radial-gradient(circle at center,rgba(118,24,155,.28),transparent 55%)}.order-card{width:min(650px,100%);padding:50px;text-align:center;background:linear-gradient(145deg,rgba(18,18,18,.96),rgba(6,6,6,.98));border:1px solid rgba(141,53,182,.70);border-radius:15px}.order-logo img{width:145px;margin-bottom:20px}.eyebrow{color:var(--yellow);font-weight:900;letter-spacing:2px;margin-bottom:10px}.order-card h2{font-size:clamp(40px,6vw,70px);line-height:.9;font-style:italic}.order-description{color:#bbb;font-family:Arial,sans-serif;margin:20px auto 30px}.order-card label{display:block;text-align:left;font-size:16px;margin-bottom:8px;font-weight:900}#locationSelect{width:100%;padding:18px;background:#090909;color:#fff;border:2px solid var(--purple);border-radius:5px;margin-bottom:15px}.doordash-btn,.modal-order-btn{width:100%;border:0;padding:19px;color:#000;background:var(--yellow);font-size:22px;font-weight:1000;cursor:pointer}.location-note{color:#777;margin-top:20px;font-family:Arial,sans-serif}.about-section{width:min(1100px,90%);margin:auto;min-height:500px;display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.about-section>img{width:100%;max-width:380px;justify-self:center}.about-section h2{font-size:clamp(45px,6vw,80px);line-height:.9;margin-bottom:20px}.about-section p:last-child{max-width:600px;color:#aaa;font:18px/1.7 Arial,sans-serif}.menu-modal{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:20px}.menu-modal.active{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(8px)}.modal-panel{width:min(760px,96vw);max-height:90vh;overflow-y:auto;position:relative;z-index:2;padding:35px;background:linear-gradient(145deg,#111,#050505);border:2px solid var(--purple);border-radius:15px}.modal-close{position:absolute;top:13px;right:18px;border:0;background:transparent;color:#fff;font-size:40px;cursor:pointer}.modal-header{display:flex;align-items:center;gap:30px;padding-right:35px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:20px;margin-bottom:15px}.modal-header img{width:190px;height:140px;object-fit:contain}.modal-header h2{font-size:clamp(34px,5vw,58px);line-height:.9}.menu-item{padding:19px 5px;display:grid;grid-template-columns:1fr auto;gap:20px;border-bottom:1px solid rgba(255,255,255,.09)}.menu-item h3{color:var(--yellow);font-size:22px;margin-bottom:5px}.menu-item p{color:#aaa;font:14px/1.4 Arial,sans-serif}.menu-price{font-size:22px;font-weight:900}footer{min-height:170px;border-top:1px solid rgba(141,53,182,.4);display:flex;align-items:center;padding:30px 5%;gap:25px}footer img{width:90px}footer div{display:flex;flex-direction:column}footer strong{color:var(--yellow);font-size:20px}footer span{color:#888}footer p{margin-left:auto;font-family:Arial,sans-serif;color:#666}@media(max-width:900px){.desktop-nav,.order-top-btn{display:none}.mobile-menu-btn{display:block;margin-left:auto;border:0;background:transparent;color:var(--yellow);font-size:30px}.mobile-nav{position:fixed;top:86px;left:0;width:100%;z-index:999;padding:20px;background:#050505;flex-direction:column;gap:15px}.mobile-nav.active{display:flex}.mobile-nav a,.mobile-nav button{width:100%;color:#fff;background:#0b0b0b;border:1px solid #333;padding:14px;text-decoration:none;text-align:center;font-weight:900}.solar-system{height:760px}.orbit-ring{display:none}.center-logo{top:280px;width:250px;height:250px}.orbit-system{width:100%;height:680px;left:0;top:120px;transform:none;animation:none}.orbit-item{animation:mobileFloat 3.5s ease-in-out infinite;width:130px}@keyframes mobileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.food-image-wrap{width:130px;height:95px}.orbit-item span{font-size:14px}.orbit-1{left:10px;top:50px;margin:0}.orbit-2{right:10px;top:50px}.orbit-3{left:0;top:250px}.orbit-4{right:0;top:250px}.orbit-5{left:8px;bottom:80px;margin:0}.orbit-6{right:8px;left:auto;bottom:80px}.orbit-7{left:25%;top:auto;bottom:-35px}.orbit-8{left:75%;top:auto;bottom:-35px}.about-section{grid-template-columns:1fr;padding:70px 0;text-align:center}.modal-header{flex-direction:column;text-align:center}footer{flex-direction:column;text-align:center}footer p{margin-left:0}}



/* =========================================================
   FINAL ORBIT FIX
   ALL 8 ITEMS USE ONE SHARED CIRCLE
   Motion is controlled by script.js for reliability.
========================================================= */

.hero {
  min-height: 1030px;
  padding-top: 105px;
  overflow: hidden;
}

.hero-title {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  margin: 8px auto 0;
  text-align: center;
  white-space: nowrap;
  z-index: 40;
  font-size: clamp(30px, 3.8vw, 52px);
}

.solar-system {
  position: relative;
  width: min(1300px, 100vw);
  height: 850px;
  margin: 0 auto;
  left: auto;
  transform: none;
}

/* One visible circular path, with faint depth rings */
.ring-one {
  display: block;
  width: 720px;
  height: 720px;
  border: 2px solid rgba(144,49,190,.62);
}

.ring-two {
  display: block;
  width: 790px;
  height: 790px;
  border: 1px solid rgba(255,191,0,.18);
}

.ring-three {
  display: none;
}

.center-logo {
  left: 50%;
  top: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  z-index: 20;
}

/* No rotating parent box. JS moves each item around the same circle. */
.orbit-system {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: none !important;
  animation: none !important;
  z-index: 10;
  pointer-events: none;
}

.orbit-system:hover {
  animation-play-state: initial;
}

.orbit-item,
.orbit-system:hover .orbit-item {
  position: absolute;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;

  width: 170px;
  margin: 0 !important;
  padding: 0;

  transform: translate(-50%, -50%) !important;
  animation: none !important;
  rotate: none !important;

  pointer-events: auto;
  will-change: left, top;
}

.food-image-wrap {
  width: 170px;
  height: 118px;
}

.orbit-item span {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 2px 1px;
  text-align: center;
  font-size: 17px;
  line-height: 1.03;
}

/* Kill every old per-item desktop position */
.orbit-1,
.orbit-2,
.orbit-3,
.orbit-4,
.orbit-5,
.orbit-6,
.orbit-7,
.orbit-8 {
  left: 0;
  right: auto;
  top: 0;
  bottom: auto;
  margin: 0;
}

.hero-instruction {
  bottom: 18px;
}

/* Header switches before it can run off-screen */
@media (max-width: 1180px) {
  .desktop-nav,
  .order-top-btn {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--yellow);
    font-size: 30px;
    cursor: pointer;
  }

  .mobile-nav {
    position: fixed;
    top: 86px;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 20px;
    background: #050505;
    border-bottom: 2px solid var(--purple);
    flex-direction: column;
    gap: 15px;
  }

  .mobile-nav.active {
    display: flex;
  }

  .mobile-nav a,
  .mobile-nav button {
    width: 100%;
    color: #fff;
    background: #0b0b0b;
    border: 1px solid #333;
    padding: 14px;
    text-decoration: none;
    text-align: center;
    font-weight: 900;
  }
}

/* TABLET */
@media (min-width: 701px) and (max-width: 1180px) {
  .hero {
    min-height: 900px;
    padding-top: 100px;
  }

  .solar-system {
    width: 100%;
    height: 760px;
  }

  .ring-one {
    width: 610px;
    height: 610px;
  }

  .ring-two {
    width: 670px;
    height: 670px;
  }

  .center-logo {
    width: 315px;
    height: 315px;
  }

  .orbit-item,
  .orbit-system:hover .orbit-item {
    width: 145px;
  }

  .food-image-wrap {
    width: 145px;
    height: 102px;
  }

  .orbit-item span {
    font-size: 14px;
  }
}

/* PHONE — still ONE circle, just smaller */
@media (max-width: 700px) {
  .site-header {
    height: 72px;
    padding: 8px 14px;
  }

  .brand-mini img {
    height: 54px;
  }

  .mobile-nav {
    top: 72px;
  }

  .hero {
    min-height: 720px;
    padding-top: 80px;
  }

  .hero-title {
    width: calc(100% - 20px);
    margin: 4px auto 0;
    white-space: normal;
    font-size: clamp(23px, 7.8vw, 33px);
    line-height: .95;
  }

  .solar-system {
    width: 100%;
    height: 590px;
    margin: 0 auto;
  }

  .ring-one {
    display: block;
    width: min(82vw, 330px);
    height: min(82vw, 330px);
  }

  .ring-two {
    display: block;
    width: min(92vw, 370px);
    height: min(92vw, 370px);
    opacity: .45;
  }

  .center-logo {
    width: min(43vw, 180px);
    height: min(43vw, 180px);
    top: 50%;
  }

  .orbit-system {
    width: 100%;
    height: 100%;
    inset: 0;
  }

  .orbit-item,
  .orbit-system:hover .orbit-item {
    width: 82px;
  }

  .food-image-wrap {
    width: 82px;
    height: 58px;
  }

  .orbit-item span {
    font-size: 9.5px;
    line-height: 1;
    margin-top: 1px;
  }

  .hero-instruction {
    bottom: 5px;
    width: 100%;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1px;
  }
}

@media (max-width: 390px) {
  .hero {
    min-height: 680px;
  }

  .solar-system {
    height: 550px;
  }

  .center-logo {
    width: 160px;
    height: 160px;
  }

  .orbit-item,
  .orbit-system:hover .orbit-item {
    width: 72px;
  }

  .food-image-wrap {
    width: 72px;
    height: 51px;
  }

  .orbit-item span {
    font-size: 8.5px;
  }
}
/* Logo MP4 sizing */
.brand-mini video {
  height: 67px;
  width: auto;
  display: block;
}

.order-logo video {
  width: 145px;
  height: auto;
}

.about-section > video {
  width: 100%;
  max-width: 380px;
  justify-self: center;
}

footer > video {
  width: 90px;
  height: auto;
  display: block;
}

@media (max-width: 700px) {
  .brand-mini video {
    height: 54px;
  }

  .about-section > video {
    max-width: 250px;
  }
}
/* CENTER LOGO — circular fade, no square edges */
.center-logo .logo-video {
  mix-blend-mode: screen;

  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.95) 58%,
    rgba(0,0,0,.75) 64%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.20) 65%,
    rgba(0,0,0,.06) 79%,
    transparent 83%
  );

  mask-image: radial-gradient(
    circle at center,
    #000 0%,
    #000 52%,
    rgba(0,0,0,.95) 58%,
    rgba(0,0,0,.75) 64%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.20) 65%,
    rgba(0,0,0,.06) 79%,
    transparent 83%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
/* =========================================
   DIRTY PECKER SAUCE VIDEO BANNER
========================================= */

.sauce-banner {
  width: 100%;
  background: #050505;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(141,53,182,.35);
  border-bottom: 1px solid rgba(141,53,182,.35);
}

.sauce-banner video {
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  object-fit: contain;
}

/* PHONE */
@media (max-width: 700px) {
  .sauce-banner {
    width: 100%;
  }

  .sauce-banner video {
    width: 100%;
    height: auto;
  }
  .sauce-banner {
  background: #08000d;
}

.sauce-banner video {
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  object-fit: contain;

  
}
}
/* =========================================================
   FINAL MOBILE + iPHONE / iOS SAFARI FIX
========================================================= */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Prevent iOS from creating weird video sizing */
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SAUCE BANNER */
.sauce-banner {
  width: 100%;
  overflow: hidden;
}

.sauce-banner video {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* FINAL DIRTY PECKER ANIMATION */
.about-section > video {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  justify-self: center;
}

/* ORDER LOGO */
.order-logo video {
  width: 145px;
  height: auto;
  margin: 0 auto 20px;
}

/* FOOTER LOGO */
footer > video {
  width: 90px;
  height: auto;
  object-fit: contain;
}

/* =========================================================
   PHONE
========================================================= */

@media (max-width: 700px) {

  .hero {
    width: 100%;
    overflow: hidden;
  }

  .sauce-banner {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .sauce-banner video {
    width: 100%;
    max-width: none;
    height: auto;
  }

  .order-section {
    width: 100%;
    padding: 55px 14px;
  }

  .order-card {
    width: 100%;
    padding: 32px 18px;
  }

  .about-section {
    width: 100%;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 50px 18px;
    text-align: center;
  }

  .about-section > video {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }

  .about-section h2 {
    font-size: clamp(42px, 13vw, 65px);
    line-height: .9;
  }

  .about-section p:last-child {
    font-size: 16px;
    line-height: 1.55;
    margin: 0 auto;
  }

  footer {
    width: 100%;
    padding: 30px 16px;
  }
}

/* =========================================================
   SMALL iPHONES
========================================================= */

@media (max-width: 430px) {

  .sauce-banner video {
    width: 100%;
  }

  .about-section > video {
    max-width: 340px;
  }

  .order-card h2 {
    font-size: 42px;
  }

  .order-logo video {
    width: 125px;
  }
}
/* =========================================================
   DIRTY PECKER ELECTRIC ORBIT
========================================================= */

.ring-one {
  border: 2px solid #9228c9;

  box-shadow:
    0 0 5px rgba(177, 44, 255, .95),
    0 0 12px rgba(143, 31, 210, .75),
    0 0 25px rgba(112, 0, 170, .45),
    inset 0 0 10px rgba(150, 40, 220, .35);

  animation: electricOrbit 1.8s ease-in-out infinite alternate;
}

@keyframes electricOrbit {
  0% {
    filter: brightness(.9);
    box-shadow:
      0 0 4px rgba(177, 44, 255, .7),
      0 0 10px rgba(143, 31, 210, .5);
  }

  100% {
    filter: brightness(1.5);
    box-shadow:
      0 0 8px rgba(210, 90, 255, 1),
      0 0 20px rgba(160, 35, 255, .9),
      0 0 38px rgba(115, 0, 190, .65);
  }
}

/* second ring stays darker but alive */
.ring-two {
  border-color: rgba(255, 191, 0, .28);

  box-shadow:
    0 0 8px rgba(255, 191, 0, .12),
    inset 0 0 8px rgba(255, 191, 0, .08);
}
/* =========================================================
   FINAL MOBILE FIX
========================================================= */

@media (max-width: 700px) {

  /* HERO / ORBIT */
  .hero {
    min-height: 720px !important;
    padding-top: 80px !important;
    overflow: hidden;
  }

  .solar-system {
    position: relative !important;
    width: 100% !important;
    height: 590px !important;
    margin: 0 auto !important;
  }

  .ring-one {
    display: block !important;
    width: min(82vw, 330px) !important;
    height: min(82vw, 330px) !important;
  }

  .ring-two {
    display: block !important;
    width: min(92vw, 370px) !important;
    height: min(92vw, 370px) !important;
  }

  .center-logo {
    display: flex !important;
    width: min(43vw, 180px) !important;
    height: min(43vw, 180px) !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 30 !important;
  }

  .center-logo .logo-video {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .center-logo .logo-fallback {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    z-index: 1 !important;
  }

  .orbit-system {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20 !important;
  }

  .orbit-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* SAUCE VIDEO — NO BLEND MODE */
  .sauce-banner {
    background: #08000d !important;
  }

  .sauce-banner video {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
  }
}