/* PRINT2PACK opening: precision print sheets become a protective package. */
.intro {
  background:
    radial-gradient(circle at 50% 46%, #153d5b 0, #0a2943 27%, #041625 72%),
    #041625;
  isolation: isolate;
}

.intro::before {
  z-index: -3;
  background:
    linear-gradient(90deg, transparent 0 49.92%, #ffffff0b 49.92% 50.08%, transparent 50.08%),
    linear-gradient(0deg, transparent 0 49.92%, #ffffff0b 49.92% 50.08%, transparent 50.08%);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at center, #000 0 18%, transparent 69%);
  opacity: .56;
}

.intro::after {
  z-index: -2;
  width: min(94vw, 1160px);
  background: radial-gradient(circle, #e85d3f18 0, #e85d3f06 26%, transparent 69%);
}

.intro .intro-grid {
  display: none;
}

.intro .orbit {
  z-index: -1;
  width: min(72vw, 760px);
  border: 1px solid #f6f0e51c;
  box-shadow: 0 0 0 1px #e85d3f11 inset;
  animation: orbitBreathe 6.2s cubic-bezier(.4, 0, .2, 1) both;
}

.intro .orbit.two {
  width: min(90vw, 980px);
  border-color: #f6f0e510;
  border-style: dashed;
  animation: orbitTurn 16s linear infinite;
}

.opening-stage-label {
  position: absolute;
  z-index: 5;
  top: 28px;
  left: clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: #dce5ec;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  animation: openingHeader .8s cubic-bezier(.16, 1, .3, 1) .2s both;
}

.opening-stage-label b {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #e85d3f8a;
  color: #ff8b73;
  font-size: 8px;
  letter-spacing: 0;
}

.opening-stage-label i {
  width: 32px;
  height: 1px;
  background: #e85d3f;
}

.packing-motion {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.print-sheet {
  position: absolute;
  overflow: hidden;
  width: clamp(230px, 23vw, 370px);
  aspect-ratio: .78;
  border: 1px solid #f8f3e444;
  background: linear-gradient(132deg, #fffdf5e8, #dce6e999);
  box-shadow: 0 30px 70px #0000002b;
}

.print-sheet::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #102b4621;
  background:
    linear-gradient(90deg, #e85d3f 0 31%, transparent 31% 35%, #102b46 35% 71%, transparent 71% 75%, #e85d3f 75% 100%) top/100% 18px no-repeat,
    linear-gradient(#102b460d 1px, transparent 1px) 0 43px/100% 42px,
    linear-gradient(90deg, #102b460d 1px, transparent 1px) 0 43px/42px 100%;
}

.print-sheet::after {
  content: "PRINT  /  PACK  /  PRESENT";
  position: absolute;
  right: 20px;
  bottom: 20px;
  color: #102b4699;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
  writing-mode: vertical-rl;
}

.print-sheet.one {
  top: 18%;
  left: 9%;
  transform: rotate(-17deg) translate3d(-45vw, -11vh, 0);
  animation: sheetOne 1.25s cubic-bezier(.16, 1, .3, 1) .15s both;
}

.print-sheet.two {
  right: 8%;
  bottom: 9%;
  transform: rotate(19deg) translate3d(47vw, 12vh, 0);
  animation: sheetTwo 1.3s cubic-bezier(.16, 1, .3, 1) .33s both;
}

.fold-panel {
  position: absolute;
  width: clamp(145px, 15vw, 250px);
  aspect-ratio: 1;
  border-radius: 13px 62px 13px 62px;
}

.fold-panel.coral {
  top: 8%;
  right: 19%;
  background: linear-gradient(135deg, #ff856b, #e85d3f 68%);
  box-shadow: 26px 30px 0 #ffffff0c;
  transform: translate3d(18vw, -24vh, 0) rotate(21deg);
  animation: coralFold 1.1s cubic-bezier(.16, 1, .3, 1) .45s both;
}

.fold-panel.navy {
  bottom: 5%;
  left: 18%;
  border: 1px solid #ffffff16;
  background: linear-gradient(135deg, #24527a, #102b46 70%);
  transform: translate3d(-16vw, 23vh, 0) rotate(-29deg);
  animation: navyFold 1.2s cubic-bezier(.16, 1, .3, 1) .58s both;
}

.cut-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(65vw, 790px);
  height: min(43vw, 440px);
  border: 1px dashed #ffac994b;
  border-radius: 42px 112px 42px 112px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-19deg) scale(.68);
  animation: cutLine 1.45s cubic-bezier(.16, 1, .3, 1) .55s both;
}

.cut-line::before,
.cut-line::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 1px solid #ff9c85;
  background: #0a2943;
}

.cut-line::before { top: -7px; left: -7px; }
.cut-line::after { right: -7px; bottom: -7px; }

.registration {
  position: absolute;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid #f7f1e84d;
  border-radius: 50%;
  color: #ff9a82;
  font-size: 10px;
  opacity: 0;
  animation: registrationIn .6s cubic-bezier(.16, 1, .3, 1) both;
}

.registration::before,
.registration::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.registration::before { width: 1px; height: 13px; }
.registration::after { width: 13px; height: 1px; }
.registration.r1 { top: 22%; right: 27%; animation-delay: 1.05s; }
.registration.r2 { bottom: 26%; left: 29%; animation-delay: 1.2s; }
.registration.r3 { top: 35%; left: 24%; animation-delay: 1.35s; }

.intro-center {
  position: relative;
  z-index: 4;
  width: min(88vw, 450px);
  animation: centerReveal 1.05s cubic-bezier(.16, 1, .3, 1) .9s both;
}

.logo-stage {
  width: 174px;
  height: 174px;
}

.logo-stage::before {
  inset: 6px;
  border: 1px solid #ffffff30;
  border-radius: 25px 71px 25px 71px;
  box-shadow: 0 0 0 10px #ffffff05;
  transform: rotate(-19deg);
  animation: logoFramePremium 1.35s cubic-bezier(.16, 1, .3, 1) .96s both;
}

.logo-stage::after {
  left: -45px;
  right: -45px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #e85d3f 21%, #fff6e8 50%, #e85d3f 79%, transparent);
  filter: drop-shadow(0 0 9px #e85d3f);
  animation: premiumScan 1.45s cubic-bezier(.16, 1, .3, 1) 1.5s both;
}

.intro-center img {
  width: 126px;
  height: 126px;
  filter: drop-shadow(0 22px 36px #000b);
  animation: logoMaterialize 1.25s cubic-bezier(.16, 1, .3, 1) 1.05s both;
}

.intro-center p {
  margin: 19px 0 0;
  font-size: 31px;
  letter-spacing: -2.5px;
}

.intro-center p::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin: 17px auto 0;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: center;
  animation: brandRule .7s cubic-bezier(.16, 1, .3, 1) 1.75s both;
}

.intro-center .intro-kicker {
  margin-top: 16px;
  color: #dce7ef;
  font-size: 9px;
  letter-spacing: 2.6px;
  animation: subtitleReveal .7s cubic-bezier(.16, 1, .3, 1) 1.86s both;
}

.intro-bottom {
  bottom: 27px;
  color: #d0dce5;
  letter-spacing: 2.35px;
  animation: subtitleReveal .7s cubic-bezier(.16, 1, .3, 1) 2.05s both;
}

.intro .skip {
  z-index: 7;
  top: 26px;
  right: clamp(24px, 4vw, 64px);
  color: #e4edf4;
  opacity: .78;
  transition: opacity .2s;
}

.intro .skip:hover { opacity: 1; }

@keyframes openingHeader {
  from { opacity: 0; transform: translateY(-9px); }
  to { opacity: 1; transform: none; }
}

@keyframes sheetOne {
  0% { opacity: 0; transform: rotate(-28deg) translate3d(-45vw, -11vh, 0); }
  72% { opacity: .9; transform: rotate(-14deg) translate3d(6px, 5px, 0); }
  100% { opacity: .72; transform: rotate(-17deg) translate3d(0, 0, 0); }
}

@keyframes sheetTwo {
  0% { opacity: 0; transform: rotate(31deg) translate3d(47vw, 12vh, 0); }
  72% { opacity: .9; transform: rotate(16deg) translate3d(-7px, -5px, 0); }
  100% { opacity: .65; transform: rotate(19deg) translate3d(0, 0, 0); }
}

@keyframes coralFold {
  0% { opacity: 0; transform: translate3d(18vw, -24vh, 0) rotate(45deg) scale(.52); }
  78% { opacity: 1; transform: translate3d(-5px, 6px, 0) rotate(17deg) scale(1.05); }
  100% { opacity: .88; transform: none; }
}

@keyframes navyFold {
  0% { opacity: 0; transform: translate3d(-16vw, 23vh, 0) rotate(-49deg) scale(.58); }
  78% { opacity: 1; transform: translate3d(7px, -5px, 0) rotate(-25deg) scale(1.04); }
  100% { opacity: .78; transform: none; }
}

@keyframes cutLine {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-31deg) scale(.66); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(-19deg) scale(1); }
}

@keyframes registrationIn {
  from { opacity: 0; transform: scale(.35) rotate(-80deg); }
  to { opacity: 1; transform: none; }
}

@keyframes centerReveal {
  from { opacity: 0; transform: translateY(20px) scale(.91); }
  to { opacity: 1; transform: none; }
}

@keyframes logoFramePremium {
  from { opacity: 0; transform: rotate(-54deg) scale(.58); }
  to { opacity: 1; transform: rotate(-19deg) scale(1); }
}

@keyframes logoMaterialize {
  0% { opacity: 0; transform: scale(.42) rotate(-28deg); }
  72% { opacity: 1; transform: scale(1.09) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes premiumScan {
  0% { opacity: 0; transform: translateX(-72px); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateX(72px); }
}

@keyframes brandRule { to { transform: scaleX(1); } }
@keyframes subtitleReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes orbitBreathe { from { opacity: 0; transform: scale(.77); } to { opacity: 1; transform: scale(1); } }
@keyframes orbitTurn { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
  .print-sheet { width: 210px; }
  .print-sheet.one { top: 15%; left: -14%; }
  .print-sheet.two { right: -17%; bottom: 12%; }
  .fold-panel.coral { top: 7%; right: 3%; }
  .fold-panel.navy { bottom: 5%; left: 4%; }
  .cut-line { width: 91vw; height: 60vw; }
  .registration.r1 { right: 13%; }
  .registration.r2 { left: 13%; }
  .registration.r3 { left: 10%; }
  .opening-stage-label { top: 21px; left: 22px; font-size: 8px; }
  .opening-stage-label i { width: 18px; }
  .intro .skip { top: 20px; right: 19px; font-size: 9px; }
  .intro-center p { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .packing-motion *,
  .opening-stage-label,
  .intro-center,
  .logo-stage::before,
  .logo-stage::after,
  .intro-center img,
  .intro-center .intro-kicker,
  .intro-bottom,
  .intro .orbit {
    animation: none !important;
  }

  .print-sheet.one {
    opacity: .56;
    transform: rotate(-17deg) translate3d(0, 0, 0);
  }

  .print-sheet.two {
    opacity: .48;
    transform: rotate(19deg) translate3d(0, 0, 0);
  }

  .fold-panel.coral,
  .fold-panel.navy {
    opacity: .8;
    transform: none;
  }

  .cut-line {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-19deg) scale(1);
  }

  .registration {
    opacity: 1;
    transform: none;
  }
}

/* Cinematic material backplate: the opening now inherits the homepage packaging world. */
.intro {
  background:
    linear-gradient(90deg, #041625ef 0%, #071a2ddd 36%, #071a2dbb 63%, #041625e3 100%),
    linear-gradient(180deg, #04162555 0%, #04162508 44%, #041625bd 100%),
    url("hero-packaging.png") center 48% / cover no-repeat,
    #041625;
}

.intro::before {
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49.93%, #f8f0df15 49.93% 50.07%, transparent 50.07%),
    linear-gradient(0deg, transparent 0 49.93%, #f8f0df12 49.93% 50.07%, transparent 50.07%);
  background-size: 108px 108px;
  mask-image: radial-gradient(ellipse at center, #000 0 19%, transparent 76%);
  opacity: .78;
}

.intro::after {
  z-index: 0;
  background: radial-gradient(circle at 50% 48%, #e85d3f16 0, #e85d3f05 31%, transparent 70%);
}

.intro .orbit,
.intro .orbit.two {
  z-index: 1;
  opacity: .48;
  border-color: #f6ead63a;
}

.packing-motion {
  z-index: 2;
}

.print-sheet {
  box-shadow: 0 30px 90px #00000045;
  filter: saturate(.86) contrast(.96);
}

.cut-line {
  border-color: #ffe2cc62;
}

.fold-panel.coral,
.fold-panel.navy {
  opacity: .64;
  filter: saturate(.88);
}

.intro-center {
  z-index: 5;
  padding: 33px 46px 30px;
  border: 1px solid #f7f1e826;
  border-radius: 34px 90px 34px 90px;
  background: linear-gradient(145deg, #071a2d6e, #071a2d2b);
  box-shadow: 0 26px 80px #00000034, 0 0 0 9px #071a2d16;
  backdrop-filter: blur(5px);
  animation: cinematicCenter 1.3s cubic-bezier(.16, 1, .3, 1) .7s both;
}

.logo-stage {
  width: 166px;
  height: 166px;
}

.logo-stage::before {
  border-color: #fff8e563;
  box-shadow: 0 0 0 8px #fff8e509, 0 16px 45px #00000030;
  animation: cinematicFrame 1.35s cubic-bezier(.16, 1, .3, 1) .78s both;
}

.logo-stage::after {
  filter: drop-shadow(0 0 12px #ffe5cc8a);
  animation: cinematicScan 1.7s cubic-bezier(.16, 1, .3, 1) 1.32s both;
}

.intro-center img {
  width: 122px;
  height: 122px;
  filter: drop-shadow(0 20px 30px #0000008c);
  animation: cinematicLogo 1.45s cubic-bezier(.16, 1, .3, 1) .92s both;
}

.intro-center p {
  margin-top: 17px;
  font-size: 30px;
  letter-spacing: -2.35px;
}

.intro-center p::after {
  margin-top: 14px;
  background: linear-gradient(90deg, transparent, #ff8a70 30%, #fff0df 50%, #ff8a70 70%, transparent);
  animation: brandRule .9s cubic-bezier(.16, 1, .3, 1) 1.65s both;
}

.intro-center .intro-kicker {
  margin-top: 14px;
  color: #f5eadc;
  letter-spacing: 2.25px;
  animation: subtitleReveal .8s cubic-bezier(.16, 1, .3, 1) 1.78s both;
}

.opening-stage-label {
  color: #fff6e9;
  text-shadow: 0 2px 14px #041625;
}

.opening-stage-label b {
  border-color: #ffb29c;
  background: #071a2d78;
}

.intro-bottom {
  z-index: 6;
  color: #fff4e6;
  text-shadow: 0 2px 12px #041625;
}

@keyframes sheetOne {
  0% { opacity: 0; transform: rotate(-28deg) translate3d(-45vw, -11vh, 0); }
  72% { opacity: .36; transform: rotate(-14deg) translate3d(6px, 5px, 0); }
  100% { opacity: .28; transform: rotate(-17deg) translate3d(0, 0, 0); }
}

@keyframes sheetTwo {
  0% { opacity: 0; transform: rotate(31deg) translate3d(47vw, 12vh, 0); }
  72% { opacity: .33; transform: rotate(16deg) translate3d(-7px, -5px, 0); }
  100% { opacity: .25; transform: rotate(19deg) translate3d(0, 0, 0); }
}

@keyframes cinematicCenter {
  0% { opacity: 0; transform: translateY(26px) scale(.94); filter: blur(5px); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.008); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}

@keyframes cinematicFrame {
  0% { opacity: 0; transform: rotate(-29deg) scale(.74); }
  100% { opacity: 1; transform: rotate(-19deg) scale(1); }
}

@keyframes cinematicLogo {
  0% { opacity: 0; transform: translateY(10px) scale(.76); filter: blur(5px) drop-shadow(0 20px 30px #0000008c); }
  68% { opacity: 1; transform: translateY(-1px) scale(1.018); filter: blur(0) drop-shadow(0 20px 30px #0000008c); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 20px 30px #0000008c); }
}

@keyframes cinematicScan {
  0% { opacity: 0; transform: translateX(-84px); }
  32% { opacity: .92; }
  100% { opacity: 0; transform: translateX(84px); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-center {
    filter: none;
  }

  .print-sheet.one { opacity: .19; }
  .print-sheet.two { opacity: .17; }
  .fold-panel.coral,
  .fold-panel.navy { opacity: .45; }
}

/* Final luxury pass: let the actual packaging visual carry the opening. */
.intro {
  background:
    linear-gradient(90deg, #041625dc 0%, #071a2db8 37%, #071a2d91 64%, #041625c9 100%),
    linear-gradient(180deg, #04162535 0%, #04162508 45%, #041625a8 100%),
    url("hero-packaging.png") center 48% / cover no-repeat,
    #041625;
  animation: materialBackplate 4.3s cubic-bezier(.2, .8, .2, 1) both;
}

.intro::before {
  background: radial-gradient(ellipse at 50% 44%, #ffffff12 0, #e85d3f0b 27%, transparent 64%);
  mask-image: none;
  opacity: 1;
}

.intro::after {
  background: linear-gradient(110deg, transparent 31%, #f7f1e80c 49%, transparent 67%);
  opacity: .72;
}

.packing-motion,
.intro .orbit,
.intro .orbit.two {
  display: none;
}

.intro-center {
  padding: 35px 50px 32px;
  border-color: #fff7e735;
  background: linear-gradient(145deg, #071a2d72, #071a2d1e);
  box-shadow: 0 28px 90px #00000042, 0 0 0 1px #fff7e70d inset;
  backdrop-filter: blur(6px) saturate(1.06);
}

.logo-stage::before {
  border-color: #fff6e977;
  box-shadow: 0 0 0 9px #fff6e50c, 0 18px 50px #00000037;
}

.intro-center img {
  filter: drop-shadow(0 24px 34px #00000096);
}

.opening-stage-label,
.intro-bottom {
  color: #fff8ed;
}

@keyframes materialBackplate {
  from { background-position: center 54%, center 54%, center 54%, center; }
  to { background-position: center 48%, center 48%, center 48%, center; }
}