/*
  HIMALAYAN HARVEST HONEY — CLEAN CONTINUOUS SPLASH

  Root cause of the visible "box":
  - The previous .hh-splash__visual used overflow:hidden together with a
    blurred radial-gradient pseudo-element.
  - That glow was clipped to the 2:3 visual rectangle, so the browser showed
    the glow as a rectangular panel around the transparent PNG.
  - A separate black reveal curtain also occupied that rectangle.
  - The PNG itself is RGBA with transparent pixels; it does NOT contain that box.

  Fix:
  - No background/glow layer behind the hive.
  - No reveal curtain.
  - No artificial edge/border.
  - The exact PNG is revealed directly with one clip-path on the image itself.
  - The image container is overflow:visible, so the transparent PNG is seen
    naturally against the splash background.
  - One requestAnimationFrame timeline drives both the image reveal and bar.
  - The original PNG is not cropped, edited, recompressed, or regenerated.
*/

:root{
  --splash-gold:#f6c453;
  --splash-gold-bright:#ffe6a0;
  --splash-gold-deep:#9d680d;
  --splash-black:#030303;
  --splash-duration:4.6s;
}

html.splash-lock,body.splash-lock{overflow:hidden!important}

.hh-splash{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  background:var(--splash-black);
  color:#fff;
  opacity:1;
  visibility:visible;
  transition:opacity .65s cubic-bezier(.22,1,.36,1),visibility .65s;
  isolation:isolate;
}

.hh-splash.is-leaving{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.hh-splash__inner{
  width:min(760px,calc(100vw - 48px));
  height:min(94vh,900px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  gap:0;
}

.hh-splash__visual{
  position:relative;
  width:auto;
  height:min(65vh,600px);
  aspect-ratio:2 / 3;
  display:grid;
  place-items:center;
  overflow:visible;
  flex:0 1 auto;
}

.hh-splash__image-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:visible;
}

.hh-splash__image{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center center;

  /*
    The PNG itself is transparent. Do not add a background, panel, glow,
    border, or drop-shadow here. This keeps only the actual hive + branch
    visible on the black splash.
  */
  filter:none;

  /*
    Top -> bottom reveal. The full image remains at its final size and aspect
    ratio; only the visible region changes. No duplicate image is created.
  */
  clip-path:inset(0 0 100% 0);
  opacity:1;
  visibility:visible;

  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  will-change:clip-path;
  contain:paint;
}

.hh-splash.is-ready .hh-splash__image{
  opacity:1;
  visibility:visible;
}

.hh-splash:not(.is-ready) .hh-splash__brand,
.hh-splash:not(.is-ready) .hh-splash__loader{
  opacity:0!important;
  visibility:hidden!important;
}

.hh-splash__brand{
  position:relative;
  text-align:center;
  margin-top:12px;
  opacity:0;
  transform:translate3d(0,10px,0);
}

.hh-splash__brand-main{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.1vw,42px);
  line-height:1.05;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff4cf;
  text-shadow:
    0 1px 0 rgba(255,255,255,.12),
    0 0 14px rgba(246,196,83,.18);
}

.hh-splash__brand-sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:8px;
  font-family:var(--font-interface);
  font-size:clamp(9px,1vw,12px);
  font-weight:700;
  letter-spacing:.55em;
  text-transform:uppercase;
  color:#f3c75b;
}

.hh-splash__brand-sub::before,
.hh-splash__brand-sub::after{
  content:"";
  width:44px;
  height:1px;
  background:linear-gradient(90deg,transparent,#c9942b);
}

.hh-splash__brand-sub::after{
  background:linear-gradient(90deg,#c9942b,transparent);
}

.hh-splash__loader{
  width:min(620px,100%);
  margin-top:20px;
  opacity:0;
  transform:translate3d(0,8px,0);
}

.hh-splash__track{
  position:relative;
  height:14px;
  padding:2px;
  border:1px solid rgba(246,196,83,.62);
  border-radius:999px;
  background:linear-gradient(180deg,#0f0d08,#050505);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.025),
    0 0 18px rgba(193,126,17,.16),
    0 0 36px rgba(246,196,83,.08);
  overflow:hidden;
}

.hh-splash__fill{
  height:100%;
  width:100%;
  border-radius:inherit;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(
    90deg,
    #8b5708 0%,
    #d69b25 18%,
    #ffe8a1 48%,
    #f7c957 72%,
    #a76b0d 100%
  );
  box-shadow:
    0 0 7px rgba(255,225,142,.95),
    0 0 18px rgba(246,196,83,.75),
    0 0 42px rgba(218,150,25,.38);
  will-change:transform;
}

.hh-splash__fill::after{
  content:"";
  position:absolute;
  inset:2px auto 2px -35%;
  width:32%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.85),
    transparent
  );
  filter:blur(1px);
  transform:skewX(-18deg);
  animation:hh-shimmer 1.25s linear infinite;
}

.hh-splash__status{
  margin-top:5px;
  text-align:center;
  font-family:var(--font-interface);
  font-size:9px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,235,184,.62);
}

/* Brand and bar entrance only. They do not control hive reveal timing. */
.hh-splash.is-ready .hh-splash__brand{
  animation:hh-brand .6s cubic-bezier(.22,1,.36,1) .12s forwards;
}

.hh-splash.is-ready .hh-splash__loader{
  animation:hh-loader-in .6s cubic-bezier(.22,1,.36,1) .24s forwards;
}

@keyframes hh-brand{
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes hh-loader-in{
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes hh-shimmer{
  to{transform:translateX(430%) skewX(-18deg)}
}

@media (max-width:700px){
  .hh-splash__inner{
    width:min(92vw,520px);
    height:min(94vh,820px);
  }

  .hh-splash__visual{
    height:min(63vh,520px);
    aspect-ratio:2 / 3;
  }

  .hh-splash__brand{margin-top:10px}
  .hh-splash__loader{margin-top:16px}
  .hh-splash__track{height:12px}

  .hh-splash__brand-main{
    font-size:clamp(21px,7vw,31px);
    letter-spacing:.1em;
  }

  .hh-splash__brand-sub{
    letter-spacing:.42em;
  }

  .hh-splash__brand-sub::before,
  .hh-splash__brand-sub::after{
    width:28px;
  }
}

@media (max-height:680px) and (min-width:701px){
  .hh-splash__inner{height:96vh}
  .hh-splash__visual{height:min(60vh,470px)}
  .hh-splash__brand{margin-top:8px}
  .hh-splash__loader{margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
  .hh-splash__fill::after{animation:none!important}

  .hh-splash__image{
    clip-path:inset(0 0 0 0)!important;
  }

  .hh-splash__brand,
  .hh-splash__loader{
    animation:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .hh-splash__fill{
    transform:scaleX(1)!important;
  }
}