/* ============================================
   Lenpak — homepage motion & micro-interactions
   ============================================ */

/* Respect users who prefer reduced motion: everything becomes instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

/* ---- Scroll-reveal ----
   Elements animate into place when they enter the viewport
   (see assets/js/animations.js). Plain .reveal elements animate as a
   whole; .reveal-stagger elements instead let their direct children
   animate individually (the container itself never moves — this avoids
   a "double motion" feel where both the box and its contents shift). */
.reveal:not(.reveal-stagger) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal:not(.reveal-stagger).in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children (headings/paragraphs/cards) inside a revealed section.
   The container itself stays static; only its children move. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px) scale(0.99);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.27s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.38s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.49s; }
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Hero entrance (plays immediately on load, no scroll needed) ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate {
  opacity: 0;
  animation: heroFadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-animate.hero-delay-1 { animation-delay: 0.12s; }
.hero-animate.hero-delay-2 { animation-delay: 0.28s; }

/* Hero background image transform (initial zoom-in-to-rest + scroll parallax)
   is controlled entirely from assets/js/animations.js, so both effects can
   share the same transform property without fighting each other. */
.wp-block-cover__image-background {
  transform-origin: center center;
}

/* ---- Sticky header: transparent by default, so only the logo/nav/icons
   themselves float over the hero — a solid rounded bar only appears once
   you've scrolled past it, for legibility over regular content. ---- */
.site-header-sticky {
  position: sticky;
  top: 12px;
  z-index: 100;
  margin: 0 16px;
  border-radius: 20px;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header-sticky.is-scrolled {
  background: var(--header-scrolled-bg, rgba(11, 13, 18, 0.72));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ---- Nav link underline hover effect ---- */
.wp-block-navigation-item > a {
  position: relative;
}
.wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-navigation-item > a:hover::after {
  width: 100%;
}

/* ============================================
   3D depth system
   One signature moment (tilt cards) kept bold;
   everything else stays quiet and subtly dimensional.
   ============================================ */

/* ---- Tilt cards: product photos respond to mouse position in 3D ---- */
.tilt-card {
  perspective: 1200px;
}
.tilt-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--card-rim, rgba(255, 255, 255, 0.07)),
    0 12px 32px rgba(0, 0, 0, 0.35);
}
.tilt-card-inner img {
  border-radius: 12px;
  display: block;
}
.tilt-card:hover .tilt-card-inner {
  box-shadow:
    0 0 0 1px rgba(76, 116, 255, 0.35),
    0 24px 48px rgba(76, 116, 255, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.5);
}

/* ---- Elevated, softly lit sections (subtle ambient depth) ---- */
.depth-glow {
  position: relative;
}
.depth-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(50, 92, 232, 0.06), transparent 70%);
  pointer-events: none;
}
.depth-glow > * {
  position: relative;
  z-index: 1;
}

/* ---- 3D raised buttons: physical "press" feedback ---- */
.wp-block-button__link {
  position: relative;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 6px 16px rgba(20, 30, 60, 0.12);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.18), 0 14px 24px rgba(50, 92, 232, 0.22);
}
.wp-block-button__link:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 4px 10px rgba(20, 30, 60, 0.14);
  transition-duration: 0.08s;
}

/* ---- Hero: layered depth via parallax (see animations.js) ---- */
.wp-block-cover {
  overflow: hidden;
  position: relative;
}
.wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* ---- Contact form submit button ---- */
#lenpak-contact-form button[type="submit"] {
  position: relative;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18), 0 6px 16px rgba(20, 30, 60, 0.12);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}
#lenpak-contact-form button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 7px 0 rgba(0, 0, 0, 0.18), 0 14px 24px rgba(50, 92, 232, 0.22);
}
#lenpak-contact-form button[type="submit"]:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 4px 10px rgba(20, 30, 60, 0.14);
  transition-duration: 0.08s;
}
#lenpak-contact-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: default;
}

/* ---- Fix: the theme's .wp-site-blocks{height:100%} locks the page wrapper
   to exactly one viewport height, which breaks position:sticky on the
   header once you scroll past that point (its containing block ends).
   min-height keeps short pages still filling the viewport, but lets it
   grow for real content so the header can stay stuck the whole way down. ---- */
.wp-site-blocks {
  height: auto;
  min-height: 100%;
}