/* Design "parcel": a CSS-3D parcel drops in, opens, and the logo rises out of it.
   Without JavaScript, or with reduced motion, it shows the final scene at rest. */

.parcel {
  --w: clamp(140px, 40vw, 220px);   /* box width */
  --h: calc(var(--w) * 0.6);        /* box height */
  --d: calc(var(--w) * 0.8);        /* box depth */
  --cy: calc(var(--w) * 1.9);       /* box centre, from the top of .parcel */
  --open: 118deg;                   /* how far the flaps fold back */
  position: relative;
  width: min(100%, calc(var(--w) * 2.6));
  height: calc(var(--w) * 2.48);
  margin-bottom: 1.25rem;
}

.parcel__drop {
  position: absolute;
  inset: 0;
  transform-origin: 50% calc(var(--cy) + var(--h) * 0.55); /* the box's footprint */
}

.parcel__shadow {
  position: absolute;
  left: 50%;
  top: calc(var(--cy) + var(--h) * 0.48);
  width: calc(var(--w) * 1.75);
  height: calc(var(--w) * 0.42);
  margin-left: calc(var(--w) * -0.875);
  background: radial-gradient(closest-side, rgb(27 27 27 / 0.28), rgb(27 27 27 / 0.12) 55%, transparent);
}

/* Each layer is its own 3D scene with the same camera, so plain 2D stacking puts
   the logo between the inside walls and the outside walls. */
.parcel__layer {
  position: absolute;
  left: 50%;
  top: var(--cy);
  width: 0;
  height: 0;
  perspective: 900px;
}

.box {
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-34deg);
}

.face {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
}

.face--front,
.face--back { left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); }
.face--left,
.face--right { left: calc(var(--d) / -2); top: calc(var(--h) / -2); width: var(--d); height: var(--h); }
.face--floor { left: calc(var(--w) / -2); top: calc(var(--d) / -2); width: var(--w); height: var(--d); }

.face--front { transform: translateZ(calc(var(--d) / 2)); background: var(--cream); }
.face--right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); background: #EFD9BF; }
/* Seen from inside once the box is open */
.face--back  { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); background: #E2C6A3; }
.face--left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); background: #D9BA94; }
.face--floor { transform: rotateX(90deg) translateZ(calc(var(--h) / -2)); background: #CDAB82; }

.face--front,
.face--right { box-shadow: inset 0 0 0 1px rgb(27 27 27 / 0.06); }

/* Tape down the front and a shipping label */
.tape {
  position: absolute;
  left: 41%;
  top: 0;
  width: 18%;
  height: 34%;
  background: var(--ink);
}
.label {
  position: absolute;
  right: 8%;
  bottom: 11%;
  width: 40%;
  height: 32%;
  border-radius: 3px;
  background:
    url("/brand/symbol-small.svg") 9% 50% / auto 72% no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px)
      right 10% center / 46% 44% no-repeat,
    #FFFFFF;
  box-shadow: 0 1px 2px rgb(27 27 27 / 0.12);
}

/* Top flaps, hinged on the left and right top edges. Each flap is two sheets so
   the outside (with tape) and the inside look different. */
.face--flap-left,
.face--flap-right {
  top: calc(var(--d) / -2);
  width: calc(var(--w) / 2);
  height: var(--d);
  translate: 0 calc(var(--h) / -2);
}
.face--flap-left  { left: calc(var(--w) / -2); transform-origin: 0 50%;    transform: rotateX(90deg) rotateY(var(--flap, 0deg)); }
.face--flap-right { left: 0;                   transform-origin: 100% 50%; transform: rotateX(90deg) rotateY(calc(var(--flap, 0deg) * -1)); }

.face--flap-left::before,
.face--flap-left::after,
.face--flap-right::before,
.face--flap-right::after {
  content: "";
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
/* outside */
.face--flap-left::before,
.face--flap-right::before { background: #FFF8F0; box-shadow: inset 0 0 0 1px rgb(27 27 27 / 0.06); }
.face--flap-left::before  { background: linear-gradient(90deg, #FFF8F0 82%, var(--ink) 82%); }
.face--flap-right::before { background: linear-gradient(90deg, var(--ink) 18%, #FFF8F0 18%); }
/* inside */
.face--flap-left::after,
.face--flap-right::after { transform: rotateY(180deg); background: #E8CDA9; }

/* Resting (final) state: open box, logo out. */
.parcel { --flap: calc(var(--open) * -1); }

/* The logo: the 576 × 576 Lottie box, placed so the finished lockup floats just
   above the back rim of the box. */
.parcel__logo {
  --size: calc(var(--w) * 1.7);
  position: absolute;
  left: 50%;
  top: calc(var(--cy) - var(--w) * 2.32);
  margin: 0 0 0 calc(var(--size) / -2);
  transform-origin: 50% 70%;
}

/* ---------------------------------------------------------------------------
   The entrance. Times: drop 150–950 ms, flaps 950–1,500, logo rises 1,250–1,850,
   then parcel.js plays the logo animation and the line lands. */

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .parcel__drop   { animation: drop 800ms 150ms both; }
  .parcel__shadow { animation: shadow 800ms 150ms both; }
  .face--flap-left,
  .face--flap-right { animation: open-flaps 550ms 950ms both; }
  .parcel__logo   { animation: emerge 600ms var(--ease-out) 1250ms both; }
  .brand__line    { --line-delay: 2500ms; }
}

/* Registered so the flap angle can animate smoothly inside the transforms. */
@property --flap {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes drop {
  0%   { transform: translateY(-110vh) rotate(-5deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  58%  { transform: translateY(0) scale(1.07, 0.86); animation-timing-function: var(--ease-out); }
  74%  { transform: translateY(calc(var(--w) * -0.1)) scale(0.97, 1.04); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  86%  { transform: translateY(0) scale(1.02, 0.97); }
  100% { transform: none; }
}
@keyframes shadow {
  0%   { opacity: 0; transform: scale(0.3); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  58%  { opacity: 1; transform: scale(1.12, 1); }
  74%  { transform: scale(0.94); }
  100% { opacity: 1; transform: none; }
}
@keyframes open-flaps {
  from { --flap: 0deg; }
  70%  { --flap: calc(var(--open) * -1.08); }
  to   { --flap: calc(var(--open) * -1); }
}
@keyframes emerge {
  from { opacity: 0; transform: translateY(calc(var(--w) * 0.7)) scale(0.55); }
  20%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}