/* The approved backdrop and copy frame a single, layered photographic reveal.
   No WebGL, scroll pinning, continuous render loop, or gallery duplication. */
.unboxing-story {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  min-height: 680px;
  padding: clamp(40px, 3.5vw, 66px) 4vw clamp(40px, 3.5vw, 66px) 5.5vw;
  background: #a9d9e6;
  border-radius: clamp(34px, 5vw, 86px);
}
.unboxing-story::before,
.unboxing-story::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* Freeze the approved pink / blue / lavender composition at its reveal state. */
.unboxing-story::before {
  width: 58vw; height: 62vw; left: -4vw; top: -11vw;
  border-radius: 47% 53% 62% 38% / 58% 46% 54% 42%;
  background: #f5d8d1;
  transform: rotate(6deg);
}
.unboxing-story::after {
  width: 54vw; height: 47vw; right: -8vw; bottom: -12vw;
  border-radius: 65% 35% 44% 56% / 46% 56% 44% 54%;
  background: #cab8e3;
  transform: rotate(-6deg);
}
.unboxing-copy { min-width: 0; position: relative; z-index: 1; }
.unboxing-eyebrow { color: var(--berry); font-size: .75rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 26px; }
.unboxing-copy h2 {
  margin: 0;
  color: var(--ink);
  font: 900 clamp(44px, 5.2vw, 98px)/.94 "Arial Black", Impact, Arial, sans-serif;
  letter-spacing: -.065em;
}
.unboxing-copy > p:not(.unboxing-eyebrow) { max-width: 460px; margin: 24px 0 0; color: var(--ink-soft); font-size: clamp(16px, 1.3vw, 21px); line-height: 1.6; }
.unboxing-copy .arrow-button { margin-top: 38px; }
.secret-experience { --open: 0; --foil-x: 50%; --foil-y: 45%; min-width: 0; position: relative; width: 100%; max-width: 600px; justify-self: center; }
.secret-stage { position: relative; aspect-ratio: 1 / 1.04; isolation: isolate; }
.secret-assembly { position: absolute; width: 90%; aspect-ratio: 1; left: 2%; top: 0; transform-origin: 50% 30%; transform: translateY(calc(var(--open) * -8%)) rotate(-12deg) scale(calc(1 - var(--open) * .16)); transition: transform 1.15s cubic-bezier(.2,.8,.2,1); }
.secret-assembly img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.secret-sleeve { position: absolute; inset: 0; z-index: 2; pointer-events: none; filter: drop-shadow(1px 8px 4px #2814242e) drop-shadow(10px 24px 20px #28142430); }
.secret-drawer { position: absolute; inset: 0; z-index: 1; transform: translateY(calc(3% + var(--open) * 50%)) scaleX(.984); transition: transform 1.15s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(8px 17px 13px #28142427); }
/* A deterministic display crop follows the photographed tray and ribbon edges.
   The generated RGB source has a baked backdrop; it is never displayed. */
.secret-tray-photo { clip-path: polygon(5.1% 15.5%, 95.2% 15.5%, 95.2% 77.5%, 94% 78.7%, 52.5% 78.7%, 52.5% 89%, 46.6% 89%, 46.6% 78.7%, 6.2% 78.7%, 5.1% 77.5%); }
.secret-note { position: absolute; top: 36.6%; left: 31%; width: 37%; height: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #542c39; text-align: center; }
.secret-note small { font: 700 clamp(5px, .47vw, 8px)/1.4 Arial,sans-serif; letter-spacing: .16em; margin-bottom: 6%; }
.secret-note strong { font: 500 clamp(14px, 2vw, 29px)/1.05 Georgia,serif; letter-spacing: -.04em; }
.secret-note i { font: italic clamp(6px, .6vw, 10px)/1.5 Georgia,serif; margin-top: 5%; }
.secret-foil { position: absolute; left: 4.6%; right: 4.4%; top: 18.7%; bottom: 18.8%; border-radius: 2px; opacity: 0; background: radial-gradient(ellipse at var(--foil-x) var(--foil-y), #ffd7a34a 0%, #fff1d11c 23%, transparent 59%); mix-blend-mode: screen; pointer-events: none; transition: opacity .45s; }
.secret-stage:hover .secret-foil, .secret-stage:focus-within .secret-foil { opacity: .85; }
.secret-ribbon { position: absolute; z-index: 4; width: 9%; height: 11%; left: 45%; top: 78.7%; margin: 0; padding: 0; border: 0; border-radius: 3px; color: #ffe5c2; background: transparent; cursor: grab; touch-action: pan-x; }
.secret-ribbon::before { content: ''; position: absolute; inset: -9px; }
.secret-ribbon svg { fill: none; stroke: currentColor; stroke-width: 1.5; }
.secret-experience.is-open .secret-ribbon svg { transform: rotate(180deg); }
.secret-controls { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 0; border-top: 1px solid #29173324; }
.secret-controls[hidden], .secret-ribbon[hidden], .secret-hint[hidden] { display: none; }
.secret-caption { display: flex; align-items: center; gap: 12px; color: #4e385b; font: 500 12px/1.4 Arial,sans-serif; max-width: 56%; }
.secret-step { color: #754e69; font-size: 10px; letter-spacing: .14em; padding-right: 12px; border-right: 1px solid #29173333; }
.secret-toggle { display: inline-flex; gap: 14px; align-items: center; padding: 13px 18px; border: 1px solid #422b4b80; border-radius: 30px; color: #301b39; background: #fff6; cursor: pointer; font: 700 11px/1.2 Arial,sans-serif; letter-spacing: .02em; transition: background .2s,color .2s; flex-shrink: 0; }
.secret-toggle:hover { color: #fff7eb; background: #38203f; }
.secret-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .6s; }
.secret-experience.is-open .secret-toggle svg { transform: rotate(180deg); }
.secret-hint { color: #614e6a; font: 500 10px/1.5 Arial,sans-serif; letter-spacing: .13em; text-transform: uppercase; text-align: right; margin: 13px 0 0; }
.secret-ribbon:focus-visible, .secret-toggle:focus-visible { outline: 3px solid #6a3466; outline-offset: 5px; }
.secret-experience.is-dragging .secret-drawer, .secret-experience.is-dragging .secret-assembly, .secret-experience.is-dragging .secret-ribbon { transition: none; }
.secret-experience.is-dragging .secret-ribbon { cursor: grabbing; }
.secret-experience.is-enhanced { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .95s cubic-bezier(.2,.8,.2,1); }
.secret-experience.is-ready { opacity: 1; transform: none; }
.secret-experience.is-ready:not(.has-interacted) .secret-ribbon svg { animation: ribbon-invitation 1.4s ease-in-out 1s 2; }
@keyframes ribbon-invitation { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.secret-fallback { color: #4e385b; text-align: center; font-size: 14px; }
@media (max-width: 900px) {
  .unboxing-story { min-height: 0; grid-template-columns: 1fr; gap: 36px; padding: 54px 6vw 34px; }
  .unboxing-copy { max-width: 650px; }
  .unboxing-copy h2 { font-size: clamp(40px, 7.5vw, 68px); max-width: 620px; }
  .secret-experience { max-width: 600px; }
  .secret-stage { aspect-ratio: 1 / 1.02; }
  .secret-note small { font-size: clamp(5px, 1vw, 8px); }
  .secret-note strong { font-size: clamp(18px, 4vw, 29px); }
  .secret-note i { font-size: clamp(7px, 1.4vw, 10px); }
  .unboxing-story::before { width: 110vw; height: 118vw; left: -25vw; top: -44vw; }
  .unboxing-story::after { width: 108vw; height: 96vw; right: -46vw; bottom: -26vw; }
}
@media (max-width: 480px) {
  .unboxing-story { padding: 44px 24px 24px; gap: 30px; }
  .unboxing-copy h2 { font-size: clamp(34px, 10vw, 46px); line-height: .98; }
  .unboxing-eyebrow { margin-bottom: 18px; }
  .unboxing-copy > p:not(.unboxing-eyebrow) { margin-top: 20px; }
  .unboxing-copy .arrow-button { margin-top: 28px; }
  .secret-stage { aspect-ratio: 1 / 1.08; }
  .secret-assembly { width: 92%; left: 0; }
  .secret-ribbon svg { width: 14px; height: 14px; }
  .secret-controls { gap: 12px; padding-top: 17px; flex-direction: column; align-items: flex-start; }
  .secret-caption { gap: 7px; font-size: 10px; max-width: 100%; }
  .secret-step { padding-right: 7px; }
  .secret-toggle { gap: 12px; padding: 14px 18px; min-height: 44px; font-size: 10px; }
  .secret-hint { font-size: 8px; letter-spacing: .08em; text-align: left; }
  .secret-note strong { font-size: clamp(13px, 4vw, 19px); }
  .secret-note small { margin-bottom: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .secret-experience.is-enhanced { opacity: 1; transform: none; }
  .secret-experience *, .secret-experience { transition: none !important; animation: none !important; }
  .secret-foil { display: none; }
}