.hoo-reveal{
  position:fixed;
  inset:0;
  z-index:9998;
  background:radial-gradient(circle at 50% 55%, #16321f 0%, #0A2A1E 55%, #050c07 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  transition:opacity 700ms cubic-bezier(0.22,1,0.36,1);
}
.hoo-reveal.hoo-reveal-leaving{opacity:0; pointer-events:none;}

.hoo-reveal-stage{
  position:relative;
  width:220px;
  height:220px;
  transform-style:preserve-3d;
}

.hoo-reveal-box-base{
  position:absolute;
  left:0; right:0; bottom:0;
  height:110px;
  background:linear-gradient(160deg, #1B2015 0%, #0C0F09 100%);
  border:1px solid rgba(185,151,91,0.4);
  border-radius:4px;
  box-shadow:0 30px 60px rgba(0,0,0,0.55);
}
.hoo-reveal-box-lid{
  position:absolute;
  left:0; right:0; bottom:110px;
  height:70px;
  background:linear-gradient(160deg, #242B1C 0%, #12160D 100%);
  border:1px solid rgba(185,151,91,0.5);
  border-bottom:none;
  border-radius:4px 4px 0 0;
  transform-origin:bottom center;
  animation:hooLidOpen 1000ms cubic-bezier(0.65,0,0.35,1) 250ms forwards;
}
@keyframes hooLidOpen{
  0%{transform:rotateX(0deg);}
  100%{transform:rotateX(-118deg);}
}

.hoo-reveal-product{
  position:absolute;
  left:50%;
  bottom:60px;
  width:150px;
  transform:translate(-50%, 20px) scale(0.7);
  opacity:0;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,0.5));
  animation:hooBottleRise 1100ms cubic-bezier(0.22,1,0.36,1) 750ms forwards;
}
.hoo-reveal-product img{width:100%; display:block;}
@keyframes hooBottleRise{
  0%{transform:translate(-50%, 20px) scale(0.7); opacity:0;}
  60%{opacity:1;}
  100%{transform:translate(-50%, -70px) scale(1); opacity:1;}
}

.hoo-reveal-sweep{
  position:absolute;
  left:50%;
  bottom:-40px;
  width:2px;
  height:0;
  background:linear-gradient(180deg, rgba(216,195,154,0), rgba(216,195,154,0.9), rgba(216,195,154,0));
  transform:translateX(-50%);
  animation:hooSweep 1000ms ease-out 850ms forwards;
}
@keyframes hooSweep{
  0%{height:0; opacity:0;}
  30%{opacity:1;}
  100%{height:260px; opacity:0;}
}

.hoo-reveal-title{
  position:absolute;
  bottom:-70px;
  left:0; right:0;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#CFC7B8;
  opacity:0;
  animation:hooEntranceReveal 700ms ease-out 1500ms forwards;
}

@media (prefers-reduced-motion: reduce){
  .hoo-reveal, .hoo-reveal-box-lid, .hoo-reveal-product, .hoo-reveal-sweep, .hoo-reveal-title{
    animation:none !important;
    transition:none !important;
  }
}

/* Gallery */
.hoo-product-gallery-main img{
  width:100%;
  border-radius:var(--hoo-radius);
  box-shadow:var(--hoo-shadow);
  transition:opacity 150ms ease;
}
.hoo-product-gallery-thumbs{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-wrap:wrap;
}
.hoo-product-gallery-thumb{
  padding:0;
  border:1px solid var(--hoo-border);
  border-radius:6px;
  overflow:hidden;
  background:none;
  cursor:pointer;
  width:64px;
  height:64px;
  transition:border-color 250ms var(--hoo-ease);
}
.hoo-product-gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.hoo-product-gallery-thumb:hover,
.hoo-product-gallery-thumb.is-active{border-color:var(--hoo-gold);}

/* Fragrance notes */
.hoo-fragrance-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:20px;
  margin:32px 0;
  padding:24px 0;
  border-top:1px solid var(--hoo-border);
  border-bottom:1px solid var(--hoo-border);
}
.hoo-fragrance-note dt{
  font-size:0.68rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--hoo-gold);
  margin-bottom:6px;
}
.hoo-fragrance-note dd{
  margin:0;
  color:var(--hoo-text-secondary);
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
}

/* Sticky add-to-bag bar */
.hoo-sticky-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:400;
  background:rgba(10,42,30,0.96);
  backdrop-filter:blur(6px);
  border-top:1px solid var(--hoo-border);
  transform:translateY(100%);
  transition:transform 350ms var(--hoo-ease);
}
.hoo-sticky-bar.is-visible{transform:translateY(0);}
.hoo-sticky-bar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 24px;
}
.hoo-sticky-bar-name{
  font-family:'Cormorant Garamond', serif;
  font-size:1.1rem;
  color:var(--hoo-ivory);
  flex:1;
}
.hoo-sticky-bar-price{color:var(--hoo-gold-soft);}
@media (max-width:600px){
  .hoo-sticky-bar-name{display:none;}
}