/* Grub Monkeys — premium hanging OPEN sign intro
   Homepage-only splash. No image mockup is used: the sign is built in CSS
   and uses the real Grub Monkeys logo asset already in /images/img-002.jpg. */

.gm-entry {
  --entry-red: #EB0000;
  --entry-cream: #F0EFE9;
  --entry-ink: #171717;
  --entry-teal: #00DDC2;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  isolation: isolate;
  background: rgba(19, 19, 19, .42);
  -webkit-backdrop-filter: blur(2.8px) saturate(.72) brightness(.54);
  backdrop-filter: blur(2.8px) saturate(.72) brightness(.54);
  animation: gm-entry-overlay-out .4s cubic-bezier(.65,0,.22,1) 1.6s forwards;
}

.gm-entry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 44%, rgba(240,239,233,.055), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.42));
  opacity: 0;
  animation: gm-entry-vignette-in .26s ease-out .03s forwards;
}

.gm-entry::after {
  content: "";
  position: absolute;
  inset: -24%;
  z-index: 8;
  pointer-events: none;
  opacity: .15;
  background-image:
    repeating-radial-gradient(circle at 30% 20%, rgba(240,239,233,.16) 0 0.55px, transparent .65px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 5px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
  transform: rotate(.001deg);
  animation: gm-entry-grain .22s steps(2,end) infinite;
}

.gm-entry__rig {
  position: relative;
  width: min(71vw, 840px);
  transform-origin: 50% -34vh;
  will-change: transform, opacity;
  animation:
    gm-entry-arrive .83s cubic-bezier(.16,.88,.24,1) both,
    gm-entry-leave .37s cubic-bezier(.66,.01,.25,1) 1.51s forwards;
}

.gm-entry__cord {
  position: absolute;
  z-index: 0;
  bottom: calc(100% - 14px);
  width: 2px;
  height: min(44vh, 410px);
  opacity: .92;
  background:
    repeating-linear-gradient(
      180deg,
      #151515 0 3px,
      #4b463e 3px 5px,
      #0f0f0f 5px 8px
    );
  box-shadow: 1px 0 0 rgba(240,239,233,.18);
  transform-origin: 50% 100%;
}

.gm-entry__cord::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 22px;
  height: 22px;
  border: 4px solid #171717;
  border-radius: 50%;
  background: radial-gradient(circle, #111 0 34%, #6a6257 35% 43%, #151515 44% 100%);
  box-shadow: inset 0 0 0 2px rgba(240,239,233,.2), 0 2px 3px rgba(0,0,0,.42);
  transform: translateX(-50%);
}

.gm-entry__cord--left {
  left: 15.5%;
  transform: rotate(1.2deg);
}

.gm-entry__cord--right {
  right: 15.5%;
  transform: rotate(-1.2deg);
}

.gm-entry__sign {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  padding: clamp(24px, 3.6vw, 46px) clamp(26px, 5vw, 66px) clamp(26px, 3.5vw, 42px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.035)),
    var(--entry-red);
  border: clamp(5px, .55vw, 8px) solid var(--entry-cream);
  border-radius: 19px;
  outline: 2px solid rgba(23,23,23,.9);
  box-shadow:
    11px 14px 0 rgba(17,17,17,.92),
    0 28px 42px rgba(0,0,0,.38),
    inset 0 0 0 1px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.gm-entry__sign::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,255,255,.23) 0 .7px, transparent .9px),
    radial-gradient(circle at 70% 68%, rgba(0,0,0,.28) 0 .65px, transparent .9px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.06) 49% 50%, transparent 51% 100%);
  background-size: 11px 11px, 13px 13px, 100% 100%;
  mix-blend-mode: soft-light;
}

.gm-entry__sign::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(15,15,15,.18);
  border-radius: 11px;
  pointer-events: none;
}

.gm-entry__eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 610px);
  gap: 18px;
  margin: 0 0 clamp(8px, 1vw, 14px);
  color: var(--entry-cream);
  font-family: "Lexend", sans-serif;
  font-size: clamp(.62rem, .82vw, .82rem);
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(7px);
  animation: gm-entry-copy-in .21s ease-out .34s forwards;
}

.gm-entry__eyebrow::before,
.gm-entry__eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: rgba(240,239,233,.88);
  transform: scaleX(0);
  animation: gm-entry-rule-in .28s cubic-bezier(.22,.8,.3,1) .37s forwards;
}
.gm-entry__eyebrow::before { transform-origin: 100% 50%; }
.gm-entry__eyebrow::after { transform-origin: 0 50%; }

.gm-entry__title {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: 100%;
  font-family: "Jaro", Impact, sans-serif;
  text-transform: uppercase;
  line-height: .82;
  text-align: center;
}

.gm-entry__title-small {
  color: var(--entry-ink);
  font-size: clamp(2.3rem, 5.25vw, 5rem);
  font-weight: 400;
  letter-spacing: .02em;
  opacity: 0;
  transform: translateY(14px);
  animation: gm-entry-copy-in .24s cubic-bezier(.22,.8,.3,1) .42s forwards;
}

.gm-entry__title-open {
  position: relative;
  display: block;
  margin-top: clamp(5px, .7vw, 10px);
  color: var(--entry-cream);
  font-size: clamp(6.7rem, 14vw, 13.6rem);
  font-weight: 400;
  letter-spacing: -.015em;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(18px) scale(.985);
  animation: gm-entry-open-in .31s cubic-bezier(.15,.85,.26,1) .49s forwards;
}

.gm-entry__brand-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 17px;
  width: min(88%, 590px);
  margin-top: clamp(10px, 1.1vw, 15px);
  opacity: 0;
  transform: translateY(8px);
  animation: gm-entry-brand-in .24s ease-out .64s forwards;
}

.gm-entry__brand-row::before,
.gm-entry__brand-row::after {
  content: "";
  height: 2px;
  background: rgba(240,239,233,.86);
}

.gm-entry__logo-wrap {
  width: clamp(42px, 5vw, 62px);
  height: clamp(42px, 5vw, 62px);
  overflow: hidden;
  border: 3px solid var(--entry-ink);
  border-radius: 50%;
  background: var(--entry-red);
  box-shadow: 0 0 0 2px rgba(240,239,233,.18);
}

.gm-entry__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.gm-entry__micro {
  position: absolute;
  left: 50%;
  bottom: max(23px, 3.2vh);
  z-index: 4;
  transform: translateX(-50%);
  color: rgba(240,239,233,.72);
  font-family: "Lexend", sans-serif;
  font-size: clamp(.54rem, .7vw, .7rem);
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: gm-entry-micro-in .22s ease-out .79s forwards,
             gm-entry-micro-out .18s ease-in 1.44s forwards;
}

.gm-entry.is-skip {
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.gm-entry-lock,
html.gm-entry-lock body {
  overflow: hidden;
}

@keyframes gm-entry-vignette-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gm-entry-arrive {
  0% {
    opacity: 0;
    transform: translateY(-24vh) rotate(-4.4deg) scale(.985);
  }
  34% {
    opacity: 1;
    transform: translateY(0) rotate(2.35deg) scale(1);
  }
  55% { transform: rotate(-1.2deg); }
  70% { transform: rotate(.58deg); }
  82% { transform: rotate(-.24deg); }
  91% { transform: rotate(.10deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes gm-entry-copy-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gm-entry-rule-in {
  to { transform: scaleX(1); }
}

@keyframes gm-entry-open-in {
  0% { opacity: 0; transform: translateY(18px) scale(.985); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.006); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gm-entry-brand-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gm-entry-micro-in {
  to { opacity: 1; }
}

@keyframes gm-entry-micro-out {
  to { opacity: 0; }
}

@keyframes gm-entry-leave {
  0% { opacity: 1; transform: rotate(0deg) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(.8deg) translateY(-7vh) scale(.985); }
}

@keyframes gm-entry-overlay-out {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes gm-entry-grain {
  0% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(1.2%, -.8%, 0); }
  50% { transform: translate3d(-.8%, 1%, 0); }
  75% { transform: translate3d(.6%, .7%, 0); }
  100% { transform: translate3d(-.6%, -.5%, 0); }
}

@media (max-width: 700px) {
  .gm-entry {
    -webkit-backdrop-filter: blur(2px) saturate(.72) brightness(.5);
    backdrop-filter: blur(2px) saturate(.72) brightness(.5);
  }

  .gm-entry__rig {
    width: min(84vw, 520px);
    transform-origin: 50% -25vh;
  }

  .gm-entry__cord {
    height: 39vh;
  }

  .gm-entry__cord--left { left: 17%; }
  .gm-entry__cord--right { right: 17%; }

  .gm-entry__sign {
    border-radius: 11px;
    padding: 25px 18px 24px;
    border-width: 5px;
    box-shadow:
      8px 10px 0 rgba(17,17,17,.94),
      0 22px 30px rgba(0,0,0,.38),
      inset 0 0 0 1px rgba(0,0,0,.17);
  }

  .gm-entry__sign::after {
    inset: 7px;
    border-radius: 6px;
  }

  .gm-entry__eyebrow {
    width: 92%;
    gap: 10px;
    letter-spacing: .27em;
  }

  .gm-entry__title-small {
    font-size: clamp(2.1rem, 10.7vw, 3.3rem);
  }

  .gm-entry__title-open {
    font-size: clamp(6.1rem, 28vw, 9rem);
    line-height: .74;
  }

  .gm-entry__brand-row {
    width: 82%;
    gap: 12px;
  }

  .gm-entry__micro {
    bottom: 9vh;
    max-width: 86vw;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .3em;
  }
}

@media (max-width: 390px) {
  .gm-entry__rig { width: 86vw; }
  .gm-entry__title-open { font-size: 24vw; }
  .gm-entry__eyebrow { font-size: .54rem; }
  .gm-entry__brand-row { margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-entry {
    animation: gm-entry-overlay-out .15s ease .82s forwards;
  }

  .gm-entry::after { animation: none; }
  .gm-entry__rig {
    animation: gm-entry-reduced-in .13s ease-out both,
               gm-entry-reduced-out .15s ease .74s forwards;
  }
  .gm-entry__eyebrow,
  .gm-entry__title-small,
  .gm-entry__title-open,
  .gm-entry__brand-row,
  .gm-entry__micro {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .gm-entry__eyebrow::before,
  .gm-entry__eyebrow::after { animation: none; transform: scaleX(1); }
}

@keyframes gm-entry-reduced-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes gm-entry-reduced-out {
  to { opacity: 0; }
}