/* Home hero: molten chocolate surface, entrance and hover details.
   Everything is scoped to classes that hero-motion.js adds; without the script the hero renders
   exactly as Elementor outputs it. */

/* Hide the hero text until the script starts the entrance; reveal anyway after 3s if it never does. */
.ehm-pre [data-id="5c35a87d"] {
  opacity: 0;
  animation: ehm-failsafe 0s 3s forwards;
}

@keyframes ehm-failsafe {
  to {
    opacity: 1;
  }
}

/* ---------- surface ---------- */

/* The gradient is what shows if WebGL is unavailable, and under the canvas while it fades in. */
.ehm-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #36211e;
  background-image: radial-gradient(120% 95% at 24% 46%, #5e3b27 0%, #36211e 46%, #170b09 100%);
}

.ehm-canvas {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}

.ehm-live .ehm-canvas {
  opacity: 1;
}

.ehm-content {
  position: relative;
  z-index: 2;
}

/* ---------- chocolate bar and orbit ---------- */
/* The bar is drawn by hero-motion.js into .ehm-barcanvas. */

.ehm-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ehm-live .ehm-scene {
  opacity: 1;
}

.ehm-live .ehm-scene-phone {
  opacity: 0.85;
}

.ehm-rig {
  position: absolute;
  width: 0;
  height: 0;
  perspective: 1100px;
  transform: scale(var(--ehm-scale, 1));
}

.ehm-glow {
  position: absolute;
  left: -330px;
  top: -330px;
  width: 660px;
  height: 660px;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(172, 144, 122, 0.3) 0%, rgba(94, 59, 39, 0.16) 45%, rgba(94, 59, 39, 0) 100%);
}

.ehm-shadow {
  position: absolute;
  left: -200px;
  top: -170px;
  width: 520px;
  height: 560px;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(15, 6, 4, 0.6) 0%, rgba(15, 6, 4, 0.28) 55%, rgba(15, 6, 4, 0) 100%);
}

.ehm-barcanvas {
  position: absolute;
  left: -320px;
  top: -320px;
  width: 640px;
  height: 640px;
  z-index: 2;
  will-change: transform, opacity;
}

.ehm-item {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(0 10px 12px rgba(23, 11, 9, 0.5));
  will-change: transform, opacity;
}

.ehm-item svg {
  display: block;
  width: 100%;
  height: auto;
}


.ehm-hero [data-id="5c35a87d"] {
  will-change: transform, opacity;
}

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

.ehm-word,
.ehm-char {
  display: inline-block;
  white-space: nowrap;
}

.ehm-intro .ehm-char {
  animation: ehm-char 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ehm-intro .ehm-rise {
  animation: ehm-rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes ehm-char {
  from {
    opacity: 0;
    transform: translateY(0.7em) rotate(6deg);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes ehm-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- buttons ---------- */

.ehm-hero [data-id="5c35a87d"] > a {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.ehm-hero [data-id="5c35a87d"] > a img {
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
  .ehm-hero [data-id="5c35a87d"] > a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(23, 11, 9, 0.45);
  }

  .ehm-hero [data-id="5c35a87d"] > a:hover img {
    transform: translateX(6px);
  }
}

.ehm-hero [data-id="5c35a87d"] > a:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .ehm-canvas,
  .ehm-hero [data-id="5c35a87d"] > a,
  .ehm-hero [data-id="5c35a87d"] > a img {
    transition: none;
  }
}