/* ==============================================================
   12-pack can animation — styles
   ============================================================== */

:root {
  /* FIZZCO palette */
  --cream: #fff8e7;
  --yuzu: #ffd23f;        /* copy panel */
  --teal: #0f5257;        /* text + button */
  --teal-deep: #062a2d;   /* page background */
  --lime: #9bd33a;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; }
body {
  margin: 0;
  background: var(--teal-deep);
  color: var(--teal);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }


/* ---------- Button ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 4.8rem; min-width: 20rem; padding: 0 3rem;
  border-radius: 4px;
  background: var(--teal); color: var(--cream);
  box-shadow: 0 0 0 2px var(--cream);  /* light ring */
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600;
  font-size: 1.5rem; letter-spacing: 0.08em; text-decoration: none;
  pointer-events: auto;
}
.button:hover { filter: brightness(1.08); }

/* ==============================================================
   The section
   ============================================================== */
.pack {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100lvh;
  background: var(--teal-deep);
}

/* Layers, bottom → top: bg (1) · accent (3) · stage (5) · panel (7) · copy (8) */
.pack__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pack__bg img { width: 100%; height: 100%; object-fit: cover; }

.pack__accent {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom left, rgba(3, 25, 27, 0.75) 0%, transparent 70%);
}

.pack__panel,
.pack__copy {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: min(90%, 600px);
  pointer-events: none;
}
.pack__panel { z-index: 7; background: linear-gradient(to right, var(--yuzu) 0%, var(--yuzu) 35%, rgba(255, 210, 63, 0) 100%); }
.pack__copy { z-index: 8; display: flex; align-items: center; }
.pack__copy-inner { padding: 8rem; display: flex; flex-direction: column; align-items: flex-start; }
.pack__logo { width: 16rem; height: auto; margin: 0 0 2rem; }
.pack__heading { margin: 0 0 1.2rem; color: var(--teal); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.pack__text { margin: 0 0 2rem; color: var(--teal); font-weight: 400; font-size: clamp(1.4rem, 1.25vw, 1.6rem); }

/* ---------- Scroll cue ---------- */
.pack__cue {
  position: absolute; left: 50%; bottom: 4rem; z-index: 10; margin: 0;
  transform: translateX(-50%);
  color: var(--cream); font-size: 1.3rem; letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.pack__cue span { font-size: 2rem; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(0.6rem); } }

/* ---------- Desktop stage ---------- */
.pack__stage {
  position: relative; z-index: 5;
  left: min(68%, 1000px);
  transform: translateX(-50%) translateY(5vh);
  width: 60%;
  /* never taller than ~90% of the viewport (887 × 807 = the art's aspect ratio) */
  max-width: min(1100px, calc(90lvh * 887 / 807));
}
.pack__frame { position: relative; width: 100%; }
.pack__tray { position: relative; z-index: 1; width: 100%; }
.pack__lip { position: absolute; inset: 0; z-index: 5; width: 100%; pointer-events: none; }
/* Each can image is the same size as the tray, pre-positioned in its slot,
   so it only needs to animate `top` from -100% to 0%. The lip (z 5) sits
   in front of the cans (z 2–4) so they look like they drop *into* the tray. */
.pack__can { position: absolute; left: 0; top: 0; width: 100%; max-width: none; pointer-events: none; will-change: top; }
.pack__can--1 { z-index: 2; }
.pack__can--2 { z-index: 3; }
.pack__can--3 { z-index: 4; }

/* Small laptops: narrower copy so it doesn't run under the tray */
@media (min-width: 990px) and (max-width: 1279px) {
  .pack__panel, .pack__copy { width: 48%; }
  .pack__copy-inner { padding: 4rem 5rem; }
  .pack__stage { left: 72%; width: 52%; }
}

/* ---------- Mobile / tablet stage ---------- */
.pack__m-stage { display: none; }

@media (max-width: 989px) {
  .pack__stage, .pack__accent { display: none; }

  .pack__panel, .pack__copy {
    left: 50%; top: auto; bottom: 0;
    width: 80%; max-width: 92%; height: 40%;
    transform: translateX(-50%);
  }
  .pack__panel { background: var(--yuzu); z-index: 8; border-radius: 1.2rem 1.2rem 0 0; }
  .pack__logo { width: 12rem; margin-bottom: 1rem; }
  .pack__copy { z-index: 9; justify-content: center; }
  .pack__copy-inner { padding: 1.8rem; align-items: center; text-align: center; }

  .pack__m-stage {
    display: block; position: absolute; z-index: 3;
    top: 30%; left: 50%;
    width: 88%;
    aspect-ratio: 887 / 807;
    transform: translate(-50%, -50%);
  }
  .pack__m-stage img { position: absolute; }
  .pack__m-tray, .pack__m-lip { inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pack__m-tray { z-index: 1; }
  .pack__m-lip { z-index: 3; pointer-events: none; }
  /* cans share the tray's canvas, so they simply fill the stage */
  .pack__m-can { inset: 0; width: 100%; height: 100%; z-index: 2; }
}
@media (min-width: 750px) and (max-width: 989px) {
  .pack__m-stage { width: 70%; top: calc((100% - 28% - 5vh) / 2); }
}

/* ---------- Pre-animation state ----------
   Only applied when JS is running (html.js-anim), so without JS
   or with reduced motion the finished layout just shows. */
.js-anim .pack__panel,
.js-anim .pack__heading,
.js-anim .pack__text,
.js-anim .pack__copy .button,
.js-anim .pack__accent,
.js-anim .pack__stage { opacity: 0; visibility: hidden; }
.js-anim .pack__can,
.js-anim .pack__m-can { visibility: hidden; }
.js-anim .pack__bg img { opacity: 0.2; }