@font-face {
  font-family: "Inter";
  src: url("./assets/fonts/inter-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  font-family: "Inter", Arial, sans-serif;
  color: #f5f5f5;
  background: #4578ab;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --surface: rgba(255, 255, 255, 0.14);
  --ink: #f5f5f5;
  --muted: rgba(245, 245, 245, 0.88);
  --border: rgba(255, 255, 255, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #4578ab; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #4578ab;
}

.scale-wrap {
  position: relative;
  margin: 0 auto;
  overflow: visible;
}

.site-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 830px;
  height: 10291px;
  overflow: hidden;
  transform-origin: top left;
  background: #4578ab;
}

.section {
  position: relative;
  width: 830px;
  overflow: hidden;
  flex: none;
  background: #4578ab;
}

.section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.hero, .intro { height: 898px; }

.hero-nav, .section-nav {
  position: absolute;
  z-index: 2;
  left: 206px;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 417px;
  height: 38px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(20, 26, 31, 0.46);
}

.hero-nav { top: 409px; }
.section-nav { top: 20px; background: var(--surface); }

.pill-nav a {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 999px;
  color: #f5f5f5;
  font-size: 18px;
  line-height: 21.2px;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.pill-nav a:nth-child(1) { width: 67px; }
.pill-nav a:nth-child(2) { width: 69px; }
.pill-nav a:nth-child(3) { width: 80px; }
.pill-nav a:nth-child(4) { width: 81px; }
.pill-nav a:nth-child(5) { width: 79px; }
.pill-nav a.active { background: #f5f5f5; color: #141414; }
.pill-nav a:focus-visible, .social-links a:focus-visible, .flavor-hotspots button:focus-visible { outline: 2px solid white; outline-offset: 3px; }

.down-cue {
  position: absolute;
  z-index: 1;
  top: 460px;
  left: 391px;
  width: 49px;
  color: #141414;
  font-size: 32px;
  line-height: 38.4px;
  text-align: center;
  text-decoration: none;
}

.intro-can {
  position: absolute;
  top: 35px;
  left: 255px;
  width: 320px;
  height: 828px;
  object-fit: cover;
  transform-origin: 50% 50%;
  animation: hero-product-sequence 9s cubic-bezier(.45, 0, .25, 1) infinite;
}

@keyframes hero-product-sequence {
  0%, 100% { transform: translate(140px, 560px) scale(.78) rotate(0deg); }
  20% { transform: translate(90px, 260px) scale(.9) rotate(0deg); }
  48% { transform: translate(0, -12px) scale(1.04) rotate(-18deg); }
  75% { transform: translate(-110px, 155px) scale(.84) rotate(32deg); }
}

.about { height: 2134px; }
.about-card, .benefit-card {
  position: absolute;
  left: 123px;
  width: 584px;
  height: 640px;
  padding: 20px;
  border-radius: 24px;
  background: var(--surface);
}
.card-one { top: 104px; }
.card-two { top: 774px; }
.card-three { top: 1444px; }

.about-photo {
  position: relative;
  width: 544px;
  height: 600px;
  overflow: hidden;
  border-radius: 20px;
}

.photo-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-person, .can, .benefit-image { position: absolute; object-fit: cover; }
.ski { top: -75px; left: 180px; width: 390px; height: 684px; }
.dancer { top: -45px; left: 150px; width: 410px; height: 768px; }
.tilt-original { top: 45px; left: 31px; width: 176px; height: 256px; transform: rotate(12deg); }
.photo-person, .can { --parallax-y: 0px; }
.ski, .dancer, .peach, .cherry { transform: translateY(var(--parallax-y)); }
.tilt-original { transform: translateY(var(--parallax-y)) rotate(12deg); }
.peach { top: 220px; left: 310px; width: 130px; height: 234px; }
.cherry { top: 50px; left: 245px; width: 130px; height: 234px; }

.photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 20, 33, 0.6) 0%, rgba(5, 20, 33, 0.02) 50%, rgba(5, 20, 33, 0) 100%);
  pointer-events: none;
}

.about-copy {
  position: absolute;
  top: 298px;
  left: 20px;
  display: flex;
  width: 270px;
  flex-direction: column;
  gap: 30px;
}
.about-copy h2, .about-copy p { margin: 0; font-weight: 400; }
.about-copy h2 { font-size: 25px; line-height: 30.5px; }
.about-copy p { font-size: 18px; line-height: 21.2px; }
.copy-middle { top: 391px; }
.copy-low { top: 349px; }

.flavors { height: 874px; }
.flavor-panel {
  position: absolute;
  top: 104px;
  left: 40px;
  width: 750px;
  height: 720px;
  overflow: hidden;
  padding: 30px;
  border-radius: 24px;
  background: var(--surface);
}
.flavor-heading { display: flex; width: 690px; height: 50px; align-items: center; gap: 20px; }
.flavor-heading h2 { width: 538px; margin: 0; color: var(--ink); font-size: 32px; font-weight: 400; line-height: 38.4px; }
.flavor-picker { position: relative; display: flex; width: 132px; height: 24px; align-items: center; }
.flavor-picker > img { display: block; max-width: 100%; max-height: 100%; }
.flavor-hotspots { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.flavor-hotspots button { width: 22px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.flavor-hotspots button.selected { outline: 2px solid rgba(255,255,255,.9); outline-offset: 1px; }
.flavor-can { position: absolute; top: 220px; left: 485px; width: 132px; height: 354px; object-fit: cover; }
.flavor-accordion {
  position: absolute;
  top: 378px;
  left: 30px;
  width: 311px;
  color: var(--ink);
}
.flavor-accordion details { padding: 9px 0; }
.flavor-accordion summary, .ingredient-list summary { display: flex; align-items: center; gap: 15px; list-style: none; cursor: pointer; }
.flavor-accordion summary::-webkit-details-marker, .ingredient-list summary::-webkit-details-marker { display: none; }
.toggle {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  font-size: 25px;
  line-height: 30px;
}
.flavor-accordion summary > span:last-child { white-space: nowrap; font-size: 18px; line-height: 21.2px; }
.flavor-accordion details[open] summary .toggle, .ingredient-list details[open] summary .toggle { font-size: 0; }
.flavor-accordion details[open] summary .toggle::after, .ingredient-list details[open] summary .toggle::after { content: "−"; font-size: 25px; }
.flavor-accordion summary .toggle { font-size: 0; }
.flavor-accordion details:not([open]) summary .toggle::after, .ingredient-list details:not([open]) summary .toggle::after { content: "+"; font-size: 25px; }
.flavor-accordion summary .toggle::before, .ingredient-list summary .toggle::before { content: none; }
.flavor-accordion details > p, .ingredient-list details > p {
  margin: 16px 0 0 39px;
  color: var(--muted);
  font-size: 18px;
  line-height: 21.2px;
}

.benefits { height: 1294px; }
.benefit-card { left: 115px; width: 600px; height: 360px; padding: 20px 0 0 20px; }
.benefit-card:nth-of-type(1) { top: 104px; }
.benefit-card:nth-of-type(2) { top: 494px; }
.benefit-card:nth-of-type(3) { top: 884px; }
.benefit-photo { position: relative; width: 560px; height: 320px; overflow: hidden; border-radius: 24px; }
.benefit-image.caffeine { top: -210px; left: 30px; width: 500px; height: 900px; }
.benefit-image.zero { top: -80px; left: 90px; width: 380px; height: 470px; }
.benefit-image.vitamins { top: -180px; left: -45px; width: 650px; height: 812px; }
.benefit-photo .photo-shade { background: linear-gradient(180deg, rgba(5, 20, 33, .45), rgba(5, 20, 33, .02) 50%, transparent); }
.benefit-photo p {
  position: absolute;
  top: 129.5px;
  left: 20px;
  width: 520px;
  margin: 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 30.5px;
  text-align: center;
}
.benefit-card:nth-of-type(3) .benefit-photo p { top: 114px; }
.benefit-card:nth-of-type(4) .benefit-photo p { top: 144.5px; }

.system { height: 760px; padding: 104px 40px 40px; }
.system-content { position: relative; display: flex; width: 750px; height: 616px; gap: 30px; }
.system-panel {
  width: 493px;
  height: 616px;
  flex: none;
  padding: 20px;
  border-radius: 24px;
  background: var(--surface);
}
.system-panel h2 { width: 453px; margin: 0; font-size: 72px; font-weight: 400; line-height: 86.4px; }
.system-panel h3 { width: 453px; margin: 0; font-size: 25px; font-weight: 400; line-height: 30.5px; }
.ingredient-list { width: 453px; margin-top: 102px; }
.ingredient-list details { padding: 9px 0; border-bottom: 1px solid var(--border); }
.ingredient-list summary { width: 100%; min-height: 24px; font-size: 18px; line-height: 21.2px; }
.ingredient-list summary .toggle { font-size: 0; }
.ingredient-list summary .amount { margin-left: auto; text-align: right; }
.ingredient-list details > p { margin-top: 16px; }
.ingredient-list details:not([open]) > p { display: none; }
.system-product { position: relative; width: 227px; height: 616px; flex: none; border-radius: 24px; }
.system-product img { position: absolute; top: 84px; left: 34px; width: 159px; height: 440px; object-fit: cover; }

.transition { height: 245px; }
.showcase { height: 2694px; }
.showcase-stage { position: absolute; left: 0; width: 830px; height: 898px; }
.showcase-stage.single { top: 0; }
.showcase-stage.trio { top: 898px; }
.showcase-stage.lineup { top: 1796px; }
.showcase-stage img { position: absolute; object-fit: cover; }
.showcase-stage img {
  opacity: 0;
  transition: opacity 650ms ease, transform 900ms cubic-bezier(.2, .75, .25, 1);
}
.showcase-stage.is-visible img { opacity: 1; }
.single img { top: 54px; left: 270px; width: 290px; height: 790px; }
.single img { transform: translateY(90px) scale(.78) rotate(-18deg); }
.single.is-visible img { transform: translateY(0) scale(1) rotate(0); }
.trio img { top: 164px; width: 210px; height: 570px; }
.trio img:nth-child(1) { left: 92px; }
.trio img:nth-child(2) { left: 310px; }
.trio img:nth-child(3) { left: 528px; }
.trio img:nth-child(1) { transform: translate(-90px, 50px) rotate(-12deg) scale(.86); transition-delay: 0ms; }
.trio img:nth-child(2) { transform: translateY(100px) scale(.72); transition-delay: 110ms; }
.trio img:nth-child(3) { transform: translate(90px, 50px) rotate(12deg) scale(.86); transition-delay: 220ms; }
.trio.is-visible img { transform: translate(0, 0) rotate(0) scale(1); }
.lineup img { top: 254px; width: 145px; height: 390px; }
.lineup img:nth-child(1) { left: 36.5px; }
.lineup img:nth-child(2) { left: 189.5px; }
.lineup img:nth-child(3) { left: 342.5px; }
.lineup img:nth-child(4) { left: 495.5px; }
.lineup img:nth-child(5) { left: 648.5px; }
.lineup img { transform: translateY(80px) scale(.75); }
.lineup.is-visible img { transform: translateY(0) scale(1); }
.lineup.is-visible img:nth-child(1) { transition-delay: 0ms; }
.lineup.is-visible img:nth-child(2) { transition-delay: 80ms; }
.lineup.is-visible img:nth-child(3) { transition-delay: 160ms; }
.lineup.is-visible img:nth-child(4) { transition-delay: 240ms; }
.lineup.is-visible img:nth-child(5) { transition-delay: 320ms; }

.socials { height: 356px; padding: 50px 40px 39px; }
.social-panel { position: relative; width: 750px; height: 267px; padding: 30px; border-radius: 24px; background: var(--surface); }
.hashtag { width: 690px; margin: 0; color: var(--ink); font-size: 140px; line-height: 148px; }
.social-bottom { position: absolute; top: 202px; left: 30px; display: flex; width: 690px; height: 40px; align-items: center; justify-content: space-between; }
.social-links, .brand-marks { display: flex; align-items: center; }
.social-links { gap: 13px; }
.social-links a { display: inline-flex; width: 20px; height: 24px; align-items: center; justify-content: center; }
.social-links img { display: block; max-width: 20px; max-height: 20px; }
.brand-marks { height: 36px; gap: 15px; }
.brand-marks .oshee { display: block; max-width: 75px; max-height: 18px; }
.brand-marks .air { display: block; max-width: 34px; max-height: 29px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .intro-can { animation: none; transform: none; }
  .photo-person, .can { --parallax-y: 0px; }
  .showcase-stage img { opacity: 1; transform: none; transition: none; }
}