---

.hero,

.map-popup,

.icon-circle,

.social-nav .dot,

.footer-links a,

.menu-tabs a,

.hero-cta,

.menu-banner .cta {

  position: relative;

}

.hero::before {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(

    120deg,

    rgba(239, 197, 139, 0.12),

    rgba(255, 255, 255, 0.03),

    rgba(39, 39, 39, 0.1)

  );

  background-size: 220% 220%;

  pointer-events: none;

  z-index: 0;

  animation: heroGradientShift 10s linear infinite;

}

.hero > * {

  position: relative;

  z-index: 1;

}

.footer-links a::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -4px;

  width: 0;

  height: 1px;

  background: #efc58b;

  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);

}

.map-popup::before {

  content: '';

  position: absolute;

  left: 14px;

  top: 100%;

  width: 10px;

  height: 10px;

  background: rgba(103, 103, 103, 0.58);

  transform: translateY(-4px) rotate(45deg);

}

.icon-circle::before {

  content: '';

  position: absolute;

  inset: -2px;

  border-radius: 50%;

  border: 1px solid rgba(226, 182, 122, 0.25);

  pointer-events: none;

  animation: iconBorderPulse 2.9s ease-in-out infinite;

}

.social-nav .dot.active::before {

  content: '';

  position: absolute;

  left: 50%;

  top: 50%;

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #fff;

  transform: translate(-50%, -50%);

  animation: activeDotPulse 2.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;

}

.hero-title {

  text-shadow:

    0 0 5px rgba(226, 182, 122, 0.55),

    0 0 16px rgba(226, 182, 122, 0.42),

    0 0 28px rgba(226, 182, 122, 0.3);

  will-change: text-shadow;

  animation: heroTextShadowGlow 4.8s ease-in-out infinite;

}

.split-banner .title {

  animation: splitTitleLetterPulse 4.4s ease-in-out infinite;

}

.hero-cta,

.menu-banner .cta,

.menu-close,

.icon-circle,

.icon-circle svg,

.grid-card img,

.footer-links a,

.menu-tabs a,

.social-nav .dot {

  transition:

    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),

    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),

    color 0.35s ease,

    background-color 0.45s ease,

    filter 0.45s ease,

    box-shadow 0.5s ease;

}

.hero-cta:hover {

  transform: translateX(6px);

  color: #8f6025;

}

.menu-banner .cta:hover {

  transform: translateX(6px);

  color: #efc58b;

}

.hero-cta:active,

.menu-banner .cta:active {

  transform: translateX(3px) scale(0.98);

  opacity: 0.88;

}

.menu-tabs a:hover {

  color: #efc58b;

}

.menu-tabs a:focus-visible {

  outline: 1px solid #efc58b;

  outline-offset: 4px;

}

.footer-links a:visited {

  color: #d8d8d8;

}

.footer-links a:hover {

  color: #efc58b;

}

.footer-links a:hover::after {

  width: 100%;

}

.footer-links a:first-child,

.footer-links a:last-child {

  letter-spacing: 0.1em;

}

.menu-columns li:nth-child(odd) {

  color: #ffffff;

}

.menu-columns li:nth-child(even) {

  color: #d4d4d4;

}

.icons .bag-count {

  animation: bagCounterFlash 1.9s steps(2, end) infinite;

}

.icon-circle:hover {

  transform: translateY(-2px) scale(1.03);

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);

}

.icon-circle:hover svg {

  transform: rotate(8deg);

}

.grid-card:hover img {

  transform: scale(1.03);

}

.social-nav .dot:not(.active):hover {

  transform: scale(1.2);

  background: #9a9a9a;

}

.menu-close:hover {

  transform: rotate(8deg);

  color: #efc58b;

}

.menu-close:active {

  transform: scale(0.95);

}

.product-feature {

  animation: featureOpacityCycle 7s ease-in-out infinite;

}

.hero-ring {

  animation: ringMotion 6s ease-in-out infinite;

  transform-origin: center center;

}

.marker-2 {

  animation: mainMarkerScale 4.2s ease-in-out infinite;

  transform-origin: center center;

}

.marker-1,

.marker-3,

.marker-4,

.marker-5 {

  animation: auxMarkersFloat 4.8s ease-in-out infinite;

}

.marker-3 {

  animation-delay: 0.7s;

}

.marker-4 {

  animation-delay: 1.4s;

}

.marker-5 {

  animation-delay: 2.1s;

}

.hero-line {

  position: relative;

  height: 1px;

  border-top: 0;

  background: transparent;

  overflow: visible;

}

.hero-line::after {

  content: '';

  position: absolute;

  left: 0;

  top: 50%;

  width: 100%;

  height: 1px;

  background: #272727;

  transform: translateY(-50%) scaleY(1);

  transform-origin: center center;

  animation: heroLinePulse 4.8s ease-in-out infinite;

}

.split-banner .line {

  position: relative;

  height: 1px;

  border-top: 0;

  overflow: hidden;

}

.split-banner .line::after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 1px;

  background: #fff;

  transform-origin: left center;

  animation: splitLineScaleBezier 4.6s cubic-bezier(0.42, 0, 0.28, 1) infinite;

}

.menu-banner .overlay {

  animation: menuOverlayFadeInOut 5.2s ease-in-out infinite alternate;

}

.menu-banner img {

  animation: bannerFilterSpectrum 8.4s linear infinite;

  will-change: filter;

}

.map-popup {

  border: 1px solid rgba(255, 255, 255, 0.34);

  animation: mapPopupMotion 5.2s ease-in-out infinite;

  will-change: transform, border-radius, border-color, opacity;

}

.contact-block.input .value,

.footer-meta.news .value,

.menu-side .input {

  background: rgba(239, 197, 139, 0);

  animation: inputBackgroundEase 6.6s ease-in-out infinite;

}

.footer-logo {

  animation: footerLogoFloat 5.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;

}

.menu-store-badge {

  animation: badgeLift 4.2s ease-in-out infinite;

}

.grid-card {

  animation: cardShadowEase 5.4s ease-in-out infinite alternate;

}

.social-strip img {

  animation: socialSaturateBezier 6.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;

  will-change: filter, transform, clip-path;

}

.social-strip img:nth-child(3n) {

  animation: socialSaturateBlur 6.4s ease-in-out infinite;

}

.social-strip img:nth-child(4n + 1) {

  animation: socialSaturateClip 5.6s ease-in-out infinite;

}

.social-strip img:nth-child(even) {

  animation-delay: 1.2s;

}

.menu-close {

  animation: menuCloseSkewPulse 3.8s ease-in-out infinite;

}

.social-nav {

  transform-style: preserve-3d;

  animation: socialNavTilt3d 7.6s ease-in-out infinite;

}

/* KEYFRAMES */

@keyframes heroGradientShift {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}

@keyframes heroTextShadowGlow {

  0% {

    text-shadow:

      0 0 5px rgba(226, 182, 122, 0.55),

      0 0 16px rgba(226, 182, 122, 0.42),

      0 0 28px rgba(226, 182, 122, 0.3);

  }

  50% {

    text-shadow:

      0 0 3px rgba(255, 255, 255, 0.75),

      0 0 12px rgba(255, 232, 196, 0.95),

      0 0 28px rgba(226, 182, 122, 1),

      0 0 52px rgba(226, 182, 122, 0.92),

      0 0 84px rgba(226, 182, 122, 0.72);

  }

  100% {

    text-shadow:

      0 0 5px rgba(226, 182, 122, 0.55),

      0 0 16px rgba(226, 182, 122, 0.42),

      0 0 28px rgba(226, 182, 122, 0.3);

  }

}

@keyframes splitTitleLetterPulse {

  0% { letter-spacing: 0.03em; }

  50% { letter-spacing: 0.065em; }

  100% { letter-spacing: 0.03em; }

}

@keyframes featureOpacityCycle {

  0% { opacity: 1; }

  50% { opacity: 0.42; }

  100% { opacity: 1; }

}

@keyframes ringMotion {

  0% {

    transform: translateX(0) rotate(-3deg);

  }

  50% {

    transform: translateX(22px) rotate(4deg);

  }

  100% {

    transform: translateX(0) rotate(-3deg);

  }

}

@keyframes mainMarkerScale {

  0% { transform: scale(1); }

  50% { transform: scale(1.26); }

  100% { transform: scale(1); }

}

@keyframes auxMarkersFloat {

  0% { transform: translateY(0); }

  50% { transform: translateY(-12px); }

  100% { transform: translateY(0); }

}

@keyframes heroLinePulse {

  0% {

    transform: translateY(-50%) scaleY(1);

    opacity: 0.7;

  }

  50% {

    transform: translateY(-50%) scaleY(6);

    opacity: 1;

  }

  100% {

    transform: translateY(-50%) scaleY(1);

    opacity: 0.7;

  }

}

@keyframes splitLineScaleBezier {

  0% { transform: scaleX(1); }

  50% { transform: scaleX(0.45); }

  100% { transform: scaleX(1); }

}

@keyframes menuOverlayFadeInOut {

  0% { opacity: 0.52; }

  100% { opacity: 1; }

}

@keyframes bannerFilterSpectrum {

  0% { filter: brightness(1) hue-rotate(0deg); }

  50% { filter: brightness(1.22) hue-rotate(38deg); }

  100% { filter: brightness(1) hue-rotate(0deg); }

}

@keyframes mapPopupMotion {

  0% {

    transform: translateY(0);

    opacity: 1;

    border-color: rgba(255, 255, 255, 0.28);

    border-radius: 2px;

  }

  50% {

    transform: translateY(16px);

    opacity: 0.7;

    border-color: rgba(239, 197, 139, 1);

    border-radius: 16px;

  }

  100% {

    transform: translateY(0);

    opacity: 1;

    border-color: rgba(255, 255, 255, 0.28);

    border-radius: 2px;

  }

}

@keyframes inputBackgroundEase {

  0% { background-color: rgba(239, 197, 139, 0); }

  50% { background-color: rgba(239, 197, 139, 0.22); }

  100% { background-color: rgba(239, 197, 139, 0); }

}

@keyframes activeDotPulse {

  0% {

    transform: translate(-50%, -50%) scale(1);

    opacity: 1;

  }

  50% {

    transform: translate(-50%, -50%) scale(1.7);

    opacity: 0.45;

  }

  100% {

    transform: translate(-50%, -50%) scale(1);

    opacity: 1;

  }

}

@keyframes footerLogoFloat {

  0% {

    transform: translateY(0);

    opacity: 0.93;

  }

  50% {

    transform: translateY(-12px);

    opacity: 1;

  }

  100% {

    transform: translateY(0);

    opacity: 0.93;

  }

}

@keyframes badgeLift {

  0% { transform: translateY(0); }

  50% { transform: translateY(-8px); }

  100% { transform: translateY(0); }

}

@keyframes cardShadowEase {

  0% {

    box-shadow: 0 2px 9px rgba(39, 39, 39, 0.05);

  }

  100% {

    box-shadow: 0 20px 38px rgba(39, 39, 39, 0.28);

  }

}

@keyframes socialSaturateBezier {

  0% { filter: saturate(1); }

  50% { filter: saturate(1.65); }

  100% { filter: saturate(1); }

}

@keyframes socialSaturateBlur {

  0% {

    filter: saturate(1) blur(0);

  }

  50% {

    filter: saturate(1.65) blur(2.2px);

  }

  100% {

    filter: saturate(1) blur(0);

  }

}

@keyframes socialSaturateClip {

  0% {

    filter: saturate(1);

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

  }

  50% {

    filter: saturate(1.65);

    -webkit-clip-path: inset(0 12% 0 0);

    clip-path: inset(0 12% 0 0);

  }

  100% {

    filter: saturate(1);

    -webkit-clip-path: inset(0 0 0 0);

    clip-path: inset(0 0 0 0);

  }

}

@keyframes menuCloseSkewPulse {

  0% { transform: skewX(0deg); }

  50% { transform: skewX(-16deg); }

  100% { transform: skewX(0deg); }

}

@keyframes iconBorderPulse {

  0% {

    transform: scale(1);

    opacity: 0.6;

  }

  50% {

    transform: scale(1.08);

    opacity: 1;

  }

  100% {

    transform: scale(1);

    opacity: 0.6;

  }

}

@keyframes bagCounterFlash {

  0% { opacity: 1; }

  50% { opacity: 0.2; }

  100% { opacity: 1; }

}

@keyframes socialNavTilt3d {

  0% {

    transform: perspective(700px) rotateY(0deg);

  }

  50% {

    transform: perspective(700px) rotateY(14deg);

  }

  100% {

    transform: perspective(700px) rotateY(0deg);

  }

}