/* HTML5 polish — scroll reveal, tab strip, meters, hover lift */

/* Animated tab strip (slides in, then slowly tucks away) */
.site-tab-strip {
  position: relative;
  height: 5px;
  overflow: hidden;
  background: #1a2420;
  max-height: 5px;
  opacity: 1;
  transition: max-height 0.9s ease, opacity 0.9s ease, margin 0.9s ease;
}
.site-tab-strip-glow {
  display: block;
  height: 100%;
  width: 200%;
  background: linear-gradient(
    90deg,
    #1a2420 0%,
    #2d3e36 20%,
    #4caf50 50%,
    #2d3e36 80%,
    #1a2420 100%
  );
  animation: tab-strip-slide 10s linear infinite;
}
.site-tab-strip.is-entering {
  animation: tab-strip-enter 0.6s ease forwards;
}
.site-tab-strip.is-dismissed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
}
@keyframes tab-strip-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes tab-strip-enter {
  from { max-height: 0; opacity: 0; }
  to { max-height: 5px; opacity: 1; }
}

.app-body .site-tab-strip {
  background: #2e7d32;
}
.app-body--dark .site-tab-strip {
  background: #0a0e0c;
}
.owner-session .site-tab-strip {
  background: #6b4a08;
}
.owner-session .site-tab-strip-glow {
  background: linear-gradient(
    90deg,
    #6b4a08 0%,
    #c9921a 30%,
    #fff4c4 50%,
    #c9921a 70%,
    #6b4a08 100%
  );
}

.app-body .site-tab-strip-glow {
  background: linear-gradient(
    90deg,
    #2e7d32 0%,
    #43a047 35%,
    #81c784 50%,
    #43a047 65%,
    #2e7d32 100%
  );
}
.app-body--dark .site-tab-strip-glow {
  background: linear-gradient(
    90deg,
    #0a0e0c 0%,
    #1a2420 20%,
    #4caf50 50%,
    #1a2420 80%,
    #0a0e0c 100%
  );
}

/* Scroll reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}
@supports (animation-timeline: view()) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 25%;
  }
  @keyframes reveal-fade {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
}

/* Decorative meters (dashboard stats) */
.stat-meter {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 0.35rem;
  border-radius: 2px;
  appearance: none;
  border: none;
  background: #e0e0e0;
}
.stat-meter::-webkit-meter-bar { background: #e8f5e9; border-radius: 2px; }
.stat-meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #66bb6a, #43a047); border-radius: 2px; }
.stat-meter::-moz-meter-bar { background: linear-gradient(90deg, #66bb6a, #43a047); border-radius: 2px; }

/* Hover lift cards */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
}
.public-body .hover-lift:hover {
  transform: none;
  box-shadow: none;
}

/* Shop App atmosphere — login + employee app backgrounds */
.shop-app-atmosphere,
.vip-smoke {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.shop-app-atmosphere--scoped,
.vip-login-main .shop-app-atmosphere,
.staff-login-main .shop-app-atmosphere,
.vip-login-main .vip-smoke {
  position: absolute;
}
.shop-app-atmosphere__base {
  position: absolute;
  inset: 0;
  background-color: #000;
  background-image:
    radial-gradient(ellipse 92% 68% at 50% -8%, rgba(45, 62, 54, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 62% 52% at 10% 88%, rgba(168, 230, 58, 0.11) 0%, transparent 66%),
    radial-gradient(ellipse 58% 48% at 90% 18%, rgba(72, 98, 82, 0.42) 0%, transparent 64%),
    radial-gradient(ellipse 44% 38% at 50% 42%, rgba(168, 230, 58, 0.07) 0%, transparent 72%),
    linear-gradient(180deg, #050807 0%, #000 42%, #020302 100%);
}
.shop-app-atmosphere__glow {
  position: absolute;
  left: 50%;
  top: 36%;
  width: min(44rem, 96vw);
  height: min(44rem, 96vw);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 198, 79, 0.18) 0%, rgba(72, 98, 82, 0.06) 42%, transparent 72%);
  animation: shop-app-glow-pulse 6.5s ease-in-out infinite;
}
.shop-app-atmosphere__canvas,
.vip-smoke-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.78;
  filter: blur(30px) saturate(1.18);
  transform: scale(1.1);
  transform-origin: center center;
}
.shop-app-atmosphere__veil,
.vip-smoke-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 58% at 28% 78%, rgba(168, 230, 58, 0.08) 0%, transparent 68%),
    radial-gradient(ellipse 56% 46% at 80% 24%, rgba(190, 198, 186, 0.06) 0%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.92;
}
.shop-app-atmosphere__marble {
  position: absolute;
  inset: -12%;
  opacity: 0.16;
  background-image: var(--stone-pattern);
  background-size: 640px 640px;
  mix-blend-mode: soft-light;
  animation: shop-marble-drift 140s linear infinite;
}
.shop-app-atmosphere__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 88% 82% at 50% 48%, transparent 36%, rgba(0, 0, 0, 0.62) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 18%, transparent 78%, rgba(0, 0, 0, 0.45) 100%);
}
.shop-app-atmosphere--static .shop-app-atmosphere__canvas,
.vip-smoke--static .vip-smoke-canvas,
.shop-app-atmosphere--static .vip-smoke-canvas {
  display: none;
}
.shop-app-atmosphere--static .shop-app-atmosphere__glow,
.shop-app-atmosphere--static .shop-app-atmosphere__marble {
  animation: none;
}
.shop-app-atmosphere--static .shop-app-atmosphere__veil,
.vip-smoke--static .vip-smoke-veil {
  opacity: 1;
  background:
    radial-gradient(ellipse 82% 62% at 24% 82%, rgba(168, 230, 58, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 52% 42% at 76% 22%, rgba(200, 210, 195, 0.07) 0%, transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.38) 100%);
}
@keyframes shop-app-glow-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes shop-marble-drift {
  0% { background-position: 0 0; }
  100% { background-position: 640px 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .pub-vips-coin-video {
    animation: none;
  }
  .pub-vips-coin-tilt,
  .pub-vips-coin {
    animation: none !important;
    transform: rotateX(12deg);
  }
  .pub-vips-coin-face--front {
    transform: translateZ(0);
  }
  .pub-vips-coin-face--back {
    display: none;
  }
  .pub-hero-slide {
    transition: none;
  }
  .pub-hero-slide--image.is-active {
    animation: none;
  }
  .pub-hero-progress-bar.is-animating {
    animation: none;
    width: 100%;
  }
  .site-tab-strip-glow,
  .site-tab-strip.is-entering,
  .reveal-on-scroll {
    animation: none !important;
    transition: none !important;
  }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .site-tab-strip.is-dismissed { display: none; }
  .shop-app-atmosphere__canvas,
  .vip-smoke-canvas { display: none; }
  .shop-app-atmosphere__glow,
  .shop-app-atmosphere__marble {
    animation: none !important;
  }
  .shop-app-atmosphere__veil,
  .vip-smoke-veil {
    animation: none !important;
    opacity: 1;
  }
}