/* Opening extracted from the supplied ZIP; existing home layout stays in charge. */
/* Separate arrival and resting transforms: no conflict with the product hover. */
.botanical-opening .plant-layer { position: absolute; display: block; pointer-events: none; z-index: 1; transform-origin: 50% 96%; transform: rotate(var(--plant-turn)); }
.botanical-opening .plant-left { --plant-turn: -13deg; --plant-start: 9deg; width: 55%; height: 104%; left: -7%; top: -2%; }
.botanical-opening .plant-right { --plant-turn: 12deg; --plant-start: -9deg; width: 56%; height: 100%; right: -7%; top: 1%; transform-origin: 45% 95%; }
.botanical-opening .plant-left, .botanical-opening .plant-right {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 33%, #000 50% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 33%, #000 50% 100%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-position: center 100%; mask-position: center 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.botanical-opening .plant-front { --plant-turn: -14deg; --plant-start: -3deg; z-index: 4; width: 34%; height: 34%; left: 58%; bottom: -1%; transform-origin: 22% 80%; }
.botanical-opening .botanical { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; transform: none; object-fit: contain; }
.botanical-opening .product-arrival { position: relative; z-index: 5; width: 232px; height: 94%; display: grid; place-items: center; transform-origin: 50% 85%; }
.botanical-opening .product-arrival::after { content: ""; position: absolute; width: 67%; height: 13px; bottom: -4px; left: 18%; border-radius: 50%; background: radial-gradient(ellipse, #493c252b, #493c2500 72%); z-index: -1; }
.botanical-opening .vanilla-hero { width: 100%; height: 100%; padding: 0; transform: rotate(-3deg); filter: drop-shadow(5px 12px 9px #51402b1b); transition: transform .5s var(--ease); }
.botanical-opening .vanilla-hero img { display: block; width: 100%; height: 100%; object-fit: contain; }
.botanical-opening .vanilla-hero:hover, .botanical-opening .vanilla-hero:focus-visible { transform: translateY(-5px) rotate(-1deg); }
.botanical-opening .vanilla-hero:focus-visible { outline: 2px solid var(--olive); outline-offset: 9px; }

.botanical-opening .plant-front { left: 66%; width: 29%; height: 30%; }

/* Fine stems are drawn from the base; the engravings then unfold around them. */
.vine-trails { position: absolute; width: 119%; height: 105%; left: -9.5%; top: 0; overflow: visible; z-index: 0; pointer-events: none; color: #777b50; }
.vine-stem, .vine-tendril { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vine-stem { stroke-width: 1.4px; opacity: .55; }
.vine-tendril { stroke-width: .8px; opacity: .44; }
.vine-leaf { fill: #85875c; fill-opacity: .1; stroke: #777b50; stroke-width: .65px; transform-box: fill-box; transform-origin: center bottom; }

/* A small early marker prevents a flash. No marker / no JS = full composition. */
html[data-hero-intro="pending"] .botanical-opening .plant-layer,
html[data-hero-intro="pending"] .botanical-opening .product-arrival,
html[data-hero-intro="pending"] .vine-leaf,
html[data-hero-intro="pending"] .hero-note { opacity: 0; }
html[data-hero-intro="pending"] .vine-stem,
html[data-hero-intro="pending"] .vine-tendril { stroke-dashoffset: 1; }

html[data-hero-intro="running"] .vine-stem { animation: vine-draw 1.65s cubic-bezier(.28,.24,.18,1) both; }
html[data-hero-intro="running"] .vine-tendril { animation: vine-draw 1.5s .25s cubic-bezier(.28,.24,.18,1) both; }
html[data-hero-intro="running"] .vine-right .vine-stem { animation-delay: .13s; }
html[data-hero-intro="running"] .vine-right .vine-tendril { animation-delay: .38s; }
html[data-hero-intro="running"] .vine-leaf { animation: leaf-unfold .65s var(--leaf-delay, .7s) var(--ease) both; }
html[data-hero-intro="running"] .plant-left { animation: plant-unfold 1.65s .12s cubic-bezier(.19,.65,.25,1) both; }
html[data-hero-intro="running"] .plant-right { animation: plant-unfold 1.65s .26s cubic-bezier(.19,.65,.25,1) both; }
html[data-hero-intro="running"] .product-arrival { animation: sachet-arrive 1.15s .58s cubic-bezier(.18,.7,.25,1) both; }
html[data-hero-intro="running"] .plant-front { animation: flower-arrive 1s 1.04s var(--ease) both; }
html[data-hero-intro="running"] .hero-note { animation: note-arrive .85s .3s var(--ease) both; }
html[data-hero-intro="running"] .note-right { animation-delay: .43s; }

@keyframes vine-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes leaf-unfold { from { opacity: 0; transform: scale(.2) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes plant-unfold {
  0% { opacity: 0; -webkit-mask-position: center 0%; mask-position: center 0%; transform: translateY(18px) rotate(var(--plant-start)) scale(.88); }
  22% { opacity: .75; }
  100% { opacity: 1; -webkit-mask-position: center 100%; mask-position: center 100%; transform: translateY(0) rotate(var(--plant-turn)) scale(1); }
}
@keyframes sachet-arrive {
  0% { opacity: 0; transform: translateY(32px) rotate(5deg) scale(.92); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes flower-arrive { from { opacity: 0; transform: translate(12px, 16px) rotate(3deg) scale(.85); } to { opacity: 1; transform: translate(0, 0) rotate(var(--plant-turn)) scale(1); } }
@keyframes note-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) { .botanical-opening .product-arrival { width: 246px; } }
@media (max-width: 1050px) and (min-width: 601px) { .botanical-opening .product-arrival { width: 192px; } }
@media (max-width: 800px) and (min-width: 601px) { .botanical-opening .product-arrival { width: 178px; } }
@media (max-width: 600px) {
  .botanical-opening .product-arrival { width: 40%; height: 93%; }
  .botanical-opening .plant-left { --plant-turn: -7deg; width: 53%; height: 97%; left: 5%; top: 0; }
  .botanical-opening .plant-right { --plant-turn: 8deg; width: 53%; height: 94%; right: 4%; top: 4%; }
  .botanical-opening .plant-front { --plant-turn: -12deg; width: 29%; height: 29%; left: 71%; bottom: 0; }
  .vine-trails { width: 116%; left: -8%; height: 101%; }
}
@media (max-width: 360px) {
  /* At this width the vanilla is constrained by its image width, not its box height. */
  .botanical-opening .product-arrival::after { bottom: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-hero-intro] .botanical-opening .plant-layer,
  html[data-hero-intro] .botanical-opening .product-arrival,
  html[data-hero-intro] .vine-leaf,
  html[data-hero-intro] .hero-note { opacity: 1; animation: none; }
  html[data-hero-intro] .vine-stem,
  html[data-hero-intro] .vine-tendril { stroke-dashoffset: 0; animation: none; }
  .botanical-opening .vanilla-hero:hover { transform: rotate(-3deg); }
}