/* High-end animated mode.

   Layered on top of main.css, loaded only on the home page when the mode is
   selected. It changes no markup and no content — every rule here is presentation
   only, so the page degrades to the classic look if this file never arrives.

   Anyone who has asked their system to reduce motion gets the calm version: all
   of it is disabled at the bottom of this file, not merely slowed down. */

/* --- animated hero ground --- */

.gkk-anim .gkk-hero {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  padding-top: 4rem;
  padding-bottom: 3.5rem;
}

.gkk-anim .gkk-hero::before,
.gkk-anim .gkk-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

.gkk-anim .gkk-hero::before {
  width: 46rem; height: 46rem;
  top: -22rem; left: -14rem;
  background: radial-gradient(circle at 35% 35%, #F6C77A 0%, rgba(246,199,122,0) 68%);
  animation: gkk-drift-a 22s ease-in-out infinite alternate;
}

.gkk-anim .gkk-hero::after {
  width: 38rem; height: 38rem;
  bottom: -20rem; right: -10rem;
  background: radial-gradient(circle at 60% 40%, #E9A08C 0%, rgba(233,160,140,0) 66%);
  animation: gkk-drift-b 27s ease-in-out infinite alternate;
}

@keyframes gkk-drift-a {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(5rem, 3rem, 0) scale(1.12); }
}
@keyframes gkk-drift-b {
  from { transform: translate3d(0,0,0) scale(1.06); }
  to   { transform: translate3d(-4rem, -3rem, 0) scale(1); }
}

.gkk-anim .gkk-hero-in { position: relative; z-index: 1; }

/* --- entrance sequence --- */

.gkk-anim .gkk-hero .gkk-eyebrow,
.gkk-anim .gkk-hero h1,
.gkk-anim .gkk-hero-sub,
.gkk-anim .gkk-hero-actions,
.gkk-anim .gkk-cutoff,
.gkk-anim .gkk-promises li {
  opacity: 0;
  transform: translateY(14px);
  animation: gkk-rise .72s cubic-bezier(.22,.68,.28,1) forwards;
}

.gkk-anim .gkk-hero .gkk-eyebrow { animation-delay: .05s; }
.gkk-anim .gkk-hero h1           { animation-delay: .13s; }
.gkk-anim .gkk-hero-sub          { animation-delay: .23s; }
.gkk-anim .gkk-hero-actions      { animation-delay: .33s; }
.gkk-anim .gkk-cutoff            { animation-delay: .41s; }
.gkk-anim .gkk-promises li:nth-child(1) { animation-delay: .40s; }
.gkk-anim .gkk-promises li:nth-child(2) { animation-delay: .50s; }
.gkk-anim .gkk-promises li:nth-child(3) { animation-delay: .60s; }

@keyframes gkk-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* --- scroll reveals (class added by animated.js) --- */

.gkk-anim .gkk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.68,.28,1), transform .7s cubic-bezier(.22,.68,.28,1);
  will-change: opacity, transform;
}
.gkk-anim .gkk-reveal.is-in { opacity: 1; transform: none; }

.gkk-anim .gkk-reveal:nth-child(2) { transition-delay: .07s; }
.gkk-anim .gkk-reveal:nth-child(3) { transition-delay: .14s; }
.gkk-anim .gkk-reveal:nth-child(4) { transition-delay: .21s; }

/* --- depth on the things you can act on --- */

.gkk-anim .hk-dish {
  transition: transform .28s cubic-bezier(.22,.68,.28,1), box-shadow .28s ease, border-color .28s ease;
}
.gkk-anim .hk-dish:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 14px 34px -18px rgba(34,26,19,.5);
}
.gkk-anim .hk-dish-media img { transition: transform .5s cubic-bezier(.22,.68,.28,1); }
.gkk-anim .hk-dish:hover .hk-dish-media img { transform: scale(1.045); }

.gkk-anim .gkk-btn { transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.gkk-anim .gkk-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(192,68,46,.75); }

.gkk-anim .gkk-slotchip { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.gkk-anim .gkk-slotchip:hover { transform: translateY(-2px); }

.gkk-anim .gkk-reason { transition: transform .25s ease; }
.gkk-anim .gkk-reason:hover { transform: translateY(-3px); }

/* --- a quiet pulse on the slot that is open right now --- */

.gkk-anim .gkk-slotchip.is-open em::before {
  content: "";
  display: inline-block;
  width: .42rem; height: .42rem;
  margin-right: .32rem;
  border-radius: 50%;
  background: var(--herb);
  animation: gkk-pulse 2.1s ease-in-out infinite;
}

@keyframes gkk-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

/* --- honour the user's own setting, completely --- */

@media (prefers-reduced-motion: reduce) {
  .gkk-anim .gkk-hero::before,
  .gkk-anim .gkk-hero::after { animation: none; }

  .gkk-anim .gkk-hero .gkk-eyebrow,
  .gkk-anim .gkk-hero h1,
  .gkk-anim .gkk-hero-sub,
  .gkk-anim .gkk-hero-actions,
  .gkk-anim .gkk-cutoff,
  .gkk-anim .gkk-promises li {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .gkk-anim .gkk-reveal { opacity: 1; transform: none; transition: none; }
  .gkk-anim .hk-dish, .gkk-anim .gkk-btn, .gkk-anim .gkk-slotchip, .gkk-anim .gkk-reason { transition: none; }
  .gkk-anim .hk-dish:hover, .gkk-anim .gkk-btn:hover, .gkk-anim .gkk-slotchip:hover, .gkk-anim .gkk-reason:hover { transform: none; }
  .gkk-anim .gkk-slotchip.is-open em::before { animation: none; }
}

/* --- the hero visual drifts in, and the steam moves --- */

.gkk-anim .gkk-hero-media {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  animation: gkk-rise-art .9s cubic-bezier(.22,.68,.28,1) .18s forwards;
}
@keyframes gkk-rise-art {
  to { opacity: 1; transform: none; }
}

.gkk-anim .gkk-steam path { animation: gkk-steam 3.6s ease-in-out infinite; }
.gkk-anim .gkk-steam path:nth-child(2) { animation-delay: .5s; }
.gkk-anim .gkk-steam path:nth-child(3) { animation-delay: 1s; }

@keyframes gkk-steam {
  0%, 100% { opacity: .25; transform: translateY(3px); }
  50%      { opacity: .85; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .gkk-anim .gkk-hero-media { opacity: 1; transform: none; animation: none; }
  .gkk-anim .gkk-steam path { animation: none; }
}