:root {
  --tnb-loader-cream: #fff8e9;
  --tnb-loader-turquoise: #5ab99d;
  --tnb-loader-orange: #d55538;
  --tnb-loader-brown: #584137;
  --tnb-loader-yellow: #e69e02;
}

.tnb-loader {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 100%;
  padding: 28px 20px;
  color: var(--tnb-loader-brown);
  background:
    radial-gradient(circle at 18% 14%, rgba(230, 158, 2, .16), transparent 32%),
    radial-gradient(circle at 84% 82%, rgba(90, 185, 157, .2), transparent 34%),
    var(--tnb-loader-cream);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  isolation: isolate;
  transition: opacity .38s ease, visibility .38s ease;
  animation: tnb-loader-failsafe .01s linear var(--tnb-loader-failsafe, 4200ms) forwards;
}

.tnb-loader,
.tnb-loader * {
  box-sizing: border-box;
}

.tnb-loader-was-seen .tnb-loader {
  display: none !important;
}

.tnb-loader.is-closing {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  animation: none;
}

.tnb-loader__content {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  text-align: center;
}

.tnb-loader__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(34px, 7vh, 66px);
  color: var(--tnb-loader-brown);
}

.tnb-loader__brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 14px 14px 14px 4px;
  font: 900 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.02em;
  transform: rotate(-3deg);
}

.tnb-loader__brand-name {
  max-width: 86px;
  text-align: left;
  font: 850 11px/1.05 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .075em;
}

.tnb-loader__foods {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(9px, 3vw, 18px);
  min-height: 88px;
  margin-bottom: clamp(30px, 6vh, 52px);
}

.tnb-loader__food {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(58px, 16vw, 74px);
  height: clamp(58px, 16vw, 74px);
  border: 1px solid rgba(88, 65, 55, .08);
  border-radius: 24px 24px 24px 8px;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 16px 36px rgba(88, 65, 55, .1),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transform-origin: 50% 100%;
  animation: tnb-loader-food-hop 1.35s cubic-bezier(.36, .07, .19, .97) infinite both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tnb-loader__food::after {
  position: absolute;
  right: 10px;
  bottom: -10px;
  left: 10px;
  height: 8px;
  border-radius: 50%;
  background: rgba(88, 65, 55, .14);
  filter: blur(4px);
  content: "";
  animation: tnb-loader-shadow 1.35s ease-in-out infinite both;
}

.tnb-loader__food svg {
  display: block;
  width: 78%;
  height: 78%;
  overflow: visible;
  filter: drop-shadow(0 4px 3px rgba(88, 65, 55, .08));
}

.tnb-loader__food--fries,
.tnb-loader__food--fries::after {
  animation-delay: .13s;
}

.tnb-loader__food--pizza,
.tnb-loader__food--pizza::after {
  animation-delay: .26s;
}

.tnb-loader__food--flame,
.tnb-loader__food--flame::after {
  animation-delay: .39s;
}

.tnb-loader__copy h2 {
  margin: 0;
  color: var(--tnb-loader-brown);
  font: 900 clamp(28px, 8vw, 46px)/1.02 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.tnb-loader__copy p {
  margin: 12px 0 0;
  color: rgba(88, 65, 55, .72);
  font: 650 clamp(14px, 3.8vw, 18px)/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

.tnb-loader__progress {
  position: relative;
  width: min(74%, 280px);
  height: 5px;
  margin: clamp(28px, 6vh, 46px) auto 0;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(88, 65, 55, .1);
}

.tnb-loader__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tnb-loader-turquoise), var(--tnb-loader-yellow), var(--tnb-loader-orange));
  animation: tnb-loader-progress 1.15s cubic-bezier(.65, 0, .35, 1) infinite;
}

.tnb-loader__glow {
  position: absolute;
  z-index: 0;
  width: min(52vw, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(88, 65, 55, .06);
  border-radius: 42% 58% 65% 35% / 42% 42% 58% 58%;
  background: rgba(255, 255, 255, .22);
  transform: rotate(18deg);
  animation: tnb-loader-float 7s ease-in-out infinite alternate;
}

.tnb-loader__glow--one {
  top: -15%;
  right: -10%;
}

.tnb-loader__glow--two {
  bottom: -18%;
  left: -12%;
  border-color: rgba(90, 185, 157, .13);
  transform: rotate(-28deg);
  animation-delay: -3.5s;
}

@keyframes tnb-loader-food-hop {
  0%, 45%, 100% { transform: translateY(0) rotate(0); }
  16% { transform: translateY(-18px) rotate(-4deg); }
  27% { transform: translateY(-20px) rotate(3deg); }
  36% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes tnb-loader-shadow {
  0%, 45%, 100% { opacity: 1; transform: scaleX(1); }
  20%, 30% { opacity: .35; transform: scaleX(.65); }
}

@keyframes tnb-loader-progress {
  0% { transform: translateX(-105%); }
  60%, 100% { transform: translateX(245%); }
}

@keyframes tnb-loader-float {
  to { transform: rotate(32deg) translate3d(0, 16px, 0); }
}

@keyframes tnb-loader-failsafe {
  to {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

.tnb-loader--club {
  padding: 8px;
  background:
    radial-gradient(circle at 8% 12%, rgba(230, 158, 2, .24), transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(90, 185, 157, .28), transparent 36%),
    #f9edda;
}

.tnb-loader__club-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) auto auto;
  width: min(calc(100vw - 16px), 560px);
  height: 88vh;
  height: min(var(--tnb-loader-club-mobile-height, 88svh), calc(100svh - 16px));
  overflow: hidden;
  border: 1px solid rgba(88, 65, 55, .08);
  border-radius: clamp(27px, 8vw, 42px);
  background:
    linear-gradient(152deg, rgba(255, 255, 255, .74), rgba(255, 248, 233, .96) 56%),
    var(--tnb-loader-cream);
  box-shadow:
    0 28px 90px rgba(88, 65, 55, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translateZ(0);
  animation: tnb-loader-club-arrive .55s cubic-bezier(.2, .8, .2, 1) both;
}

.tnb-loader__club-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 54%;
  background:
    linear-gradient(135deg, rgba(213, 85, 56, .98), rgba(230, 158, 2, .94)),
    var(--tnb-loader-orange);
  border-radius: inherit;
  content: "";
}

.tnb-loader__club-shell::after {
  position: absolute;
  z-index: 0;
  top: 31%;
  right: -12%;
  width: 52%;
  aspect-ratio: 1;
  border: 32px solid rgba(255, 248, 233, .13);
  border-radius: 50%;
  content: "";
}

.tnb-loader__club-top {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: clamp(16px, 3.8vh, 26px) clamp(18px, 5vw, 30px) 4px;
  color: var(--tnb-loader-cream);
  font: 900 10px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .1em;
}

.tnb-loader__club-logo {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border: 2px solid currentColor;
  border-radius: 13px 13px 13px 4px;
  font-size: 12px;
  letter-spacing: -.02em;
  transform: rotate(-3deg);
}

.tnb-loader__club-scene {
  position: relative;
  z-index: 3;
  min-height: 0;
  margin: 0 10px;
  isolation: isolate;
}

.tnb-loader__phone {
  position: absolute;
  z-index: 1;
  top: 5%;
  bottom: 2%;
  left: 14%;
  width: 45%;
  padding: 7px;
  overflow: hidden;
  border: 3px solid #241c18;
  border-radius: 28px;
  background: #15110f;
  box-shadow: 0 22px 32px rgba(49, 31, 23, .3);
  transform: rotate(-7deg);
  animation: tnb-loader-phone-float 2.8s ease-in-out infinite alternate;
}

.tnb-loader__phone-speaker {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 50%;
  width: 36%;
  height: 11px;
  border-radius: 0 0 8px 8px;
  background: #15110f;
  transform: translateX(-50%);
}

.tnb-loader__phone-screen {
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--tnb-loader-cream);
}

.tnb-loader__phone-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 18%;
  padding: 14px 9px 5px;
  color: var(--tnb-loader-brown);
}

.tnb-loader__phone-bar b {
  margin-right: auto;
  font: 950 10px/1 system-ui, sans-serif;
}

.tnb-loader__phone-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tnb-loader-orange);
}

.tnb-loader__phone-club {
  display: grid;
  place-items: center;
  height: 18%;
  color: var(--tnb-loader-cream);
  background: var(--tnb-loader-brown);
  font: 950 clamp(11px, 3vw, 16px)/1 system-ui, sans-serif;
  letter-spacing: .08em;
}

.tnb-loader__phone-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 37%;
  padding: 9px;
  color: var(--tnb-loader-brown);
  background: linear-gradient(135deg, var(--tnb-loader-yellow), #f4c34c);
}

.tnb-loader__phone-card span {
  font: 900 6px/1 system-ui, sans-serif;
  letter-spacing: .08em;
}

.tnb-loader__phone-card b {
  margin: 5px 0;
  font: 950 clamp(10px, 2.7vw, 15px)/1.02 system-ui, sans-serif;
  letter-spacing: -.04em;
}

.tnb-loader__phone-card i {
  font: 750 7px/1 system-ui, sans-serif;
}

.tnb-loader__phone-lines {
  display: grid;
  gap: 7px;
  padding: 12px 10px;
}

.tnb-loader__phone-lines i {
  height: 5px;
  border-radius: 10px;
  background: rgba(88, 65, 55, .12);
}

.tnb-loader__phone-lines i:nth-child(2) {
  width: 72%;
}

.tnb-loader__phone-lines i:nth-child(3) {
  width: 84%;
  background: var(--tnb-loader-turquoise);
}

.tnb-loader__club-product {
  position: absolute;
  z-index: 4;
  display: block;
  filter: drop-shadow(0 15px 11px rgba(61, 39, 29, .25));
  transform-origin: 50% 85%;
  animation: tnb-loader-club-product 1.7s cubic-bezier(.36, .07, .19, .97) infinite both;
}

.tnb-loader__club-product svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tnb-loader__club-burger {
  right: 1%;
  bottom: 0;
  width: 54%;
  height: auto;
  animation-delay: .18s;
}

.tnb-loader__club-fries {
  bottom: -2%;
  left: 0;
  width: 34%;
  height: auto;
  animation-delay: .36s;
}

.tnb-loader__club-cup {
  z-index: 2;
  top: 9%;
  right: 7%;
  width: 21%;
  animation-delay: .54s;
}

.tnb-loader__gift {
  position: absolute;
  z-index: 7;
  bottom: 3%;
  left: 50%;
  width: clamp(82px, 25vw, 116px);
  height: clamp(78px, 22vw, 104px);
  filter: drop-shadow(0 17px 13px rgba(59, 38, 28, .25));
  transform: translateX(-50%);
  animation: tnb-loader-gift-pulse 1.35s ease-in-out infinite;
}

.tnb-loader__gift-box {
  position: absolute;
  right: 7%;
  bottom: 0;
  left: 7%;
  height: 67%;
  overflow: hidden;
  border-radius: 7px 7px 15px 15px;
  background: linear-gradient(145deg, #68c9ad, var(--tnb-loader-turquoise));
}

.tnb-loader__gift-box::after,
.tnb-loader__gift-lid::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 18%;
  background: var(--tnb-loader-yellow);
  content: "";
  transform: translateX(-50%);
}

.tnb-loader__gift-lid {
  position: absolute;
  z-index: 2;
  top: 23%;
  right: 1%;
  left: 1%;
  height: 24%;
  overflow: hidden;
  border-radius: 9px;
  background: #75d2b8;
}

.tnb-loader__gift-bow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: 74%;
  height: 40%;
  transform: translateX(-50%);
}

.tnb-loader__gift-bow i {
  position: absolute;
  top: 3px;
  width: 48%;
  height: 85%;
  border: 10px solid var(--tnb-loader-yellow);
  border-radius: 50% 50% 14% 50%;
}

.tnb-loader__gift-bow i:first-child {
  left: 3%;
  transform: rotate(13deg);
}

.tnb-loader__gift-bow i:last-child {
  right: 3%;
  transform: scaleX(-1) rotate(13deg);
}

.tnb-loader__gift-count {
  position: absolute;
  z-index: 8;
  top: 18%;
  right: -7%;
  display: grid;
  place-items: center;
  min-width: 31px;
  height: 31px;
  padding: 0 7px;
  border: 3px solid var(--tnb-loader-cream);
  border-radius: 999px;
  color: #fff;
  background: var(--tnb-loader-orange);
  box-shadow: 0 7px 14px rgba(88, 65, 55, .2);
  font: 950 13px/1 system-ui, sans-serif;
}

.tnb-loader__gift-shine {
  position: absolute;
  z-index: 9;
  inset: -20%;
  border: 2px solid rgba(255, 248, 233, .68);
  border-radius: 50%;
  opacity: 0;
  animation: tnb-loader-gift-ring 1.35s ease-out infinite;
}

.tnb-loader--has-active .tnb-loader__gift-count {
  color: var(--tnb-loader-brown);
  background: var(--tnb-loader-yellow);
}

.tnb-loader--has-active .tnb-loader__gift,
.tnb-loader--has-upcoming .tnb-loader__gift {
  animation-duration: .9s;
}

.tnb-loader__club-copy {
  position: relative;
  z-index: 8;
  padding: clamp(12px, 2.5vh, 20px) clamp(22px, 6vw, 34px) 7px;
  text-align: center;
}

.tnb-loader__club-kicker {
  display: inline-block;
  margin-bottom: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--tnb-loader-brown);
  background: rgba(90, 185, 157, .2);
  font: 950 9px/1 system-ui, sans-serif;
  letter-spacing: .1em;
}

.tnb-loader--has-active .tnb-loader__club-kicker {
  background: rgba(230, 158, 2, .25);
}

.tnb-loader__club-copy h2 {
  max-width: 470px;
  margin: 0 auto;
  color: var(--tnb-loader-brown);
  font: 950 clamp(25px, 7.2vw, 42px)/.98 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.tnb-loader__club-copy p {
  max-width: 430px;
  margin: 9px auto 0;
  color: rgba(88, 65, 55, .72);
  font: 700 clamp(13px, 3.5vw, 17px)/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-wrap: balance;
}

.tnb-loader__club-progress {
  position: relative;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: clamp(13px, 2.3vh, 20px);
}

.tnb-loader__club-progress i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(88, 65, 55, .16);
  animation: tnb-loader-dot 1s ease-in-out infinite;
}

.tnb-loader__club-progress i:nth-child(2) {
  animation-delay: .16s;
}

.tnb-loader__club-progress i:nth-child(3) {
  animation-delay: .32s;
}

.tnb-loader-club-pulse {
  animation: tnb-loader-button-pulse .72s ease-in-out 3 !important;
}

@keyframes tnb-loader-club-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tnb-loader-phone-float {
  to { transform: rotate(-5deg) translateY(-7px); }
}

@keyframes tnb-loader-club-product {
  0%, 54%, 100% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-11px) rotate(-2deg); }
  30% { transform: translateY(-13px) rotate(2deg); }
  42% { transform: translateY(-3px); }
}

@keyframes tnb-loader-gift-pulse {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(0); }
  45% { transform: translateX(-50%) scale(1.055) rotate(-1.5deg); }
  68% { transform: translateX(-50%) scale(1.03) rotate(1deg); }
}

@keyframes tnb-loader-gift-ring {
  25% { opacity: .8; transform: scale(.75); }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes tnb-loader-dot {
  0%, 65%, 100% { transform: translateY(0); background: rgba(88, 65, 55, .16); }
  28% { transform: translateY(-5px); background: var(--tnb-loader-turquoise); }
}

@keyframes tnb-loader-button-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 10px 28px rgba(0, 0, 0, .16); }
  50% { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 11px rgba(230, 158, 2, .18), 0 14px 34px rgba(0, 0, 0, .22); }
}

@media (min-width: 700px) {
  .tnb-loader__club-shell {
    height: 82vh;
    height: min(var(--tnb-loader-club-desktop-height, 82vh), calc(100vh - 32px));
  }
}

@media (max-width: 430px) {
  .tnb-loader__brand {
    margin-bottom: 40px;
  }

  .tnb-loader__foods {
    gap: 8px;
  }

  .tnb-loader__food {
    border-radius: 19px 19px 19px 7px;
  }

  .tnb-loader__club-shell {
    grid-template-rows: auto minmax(245px, 1fr) auto auto;
  }

  .tnb-loader__club-top {
    padding-top: 15px;
  }
}

@media (max-height: 690px) {
  .tnb-loader__club-shell {
    grid-template-rows: auto minmax(218px, 1fr) auto auto;
  }

  .tnb-loader__club-copy {
    padding-top: 7px;
  }

  .tnb-loader__club-copy h2 {
    font-size: clamp(23px, 6vw, 34px);
  }

  .tnb-loader__club-progress {
    padding-top: 9px;
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tnb-loader,
  .tnb-loader__food,
  .tnb-loader__food::after,
  .tnb-loader__progress span,
  .tnb-loader__glow,
  .tnb-loader__club-shell,
  .tnb-loader__phone,
  .tnb-loader__club-product,
  .tnb-loader__gift,
  .tnb-loader__gift-shine,
  .tnb-loader__club-progress i,
  .tnb-loader-club-pulse {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }

  .tnb-loader {
    transition-duration: .12s;
  }
}
