:root {
  --forest: #003f3b;
  --forest-deep: #001b1a;
  --forest-black: #001211;
  --honey: #f4ad13;
  --honey-light: #ffd47a;
  --cream: #fff8e9;
  --cream-soft: #f2e5c8;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--forest-black);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--forest-black);
  color: var(--cream);
  font-family: Arial, Helvetica, sans-serif;
}

a {
  color: inherit;
}

.launch-page {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest-black);
}

.scene,
.scene-shade,
.honeycomb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene {
  z-index: -5;
  background-image: url("assets/img/braggot-lanzamiento-botella.webp");
  background-position: center;
  background-size: cover;
  transform: scale(1.015);
  animation: scene-arrival 1.8s cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.scene-shade {
  z-index: -4;
  background:
    linear-gradient(
      90deg,
      rgba(0, 17, 16, 0.99) 0%,
      rgba(0, 26, 24, 0.99) 28%,
      rgba(0, 29, 27, 0.96) 46%,
      rgba(0, 23, 21, 0.52) 64%,
      rgba(0, 12, 11, 0.08) 100%
    ),
    linear-gradient(180deg, rgba(0, 12, 11, 0.6), transparent 24%, transparent 70%, rgba(0, 12, 11, 0.88));
}

.honeycomb {
  z-index: -3;
  width: 430px;
  height: 430px;
  opacity: 0.18;
  background-image:
    linear-gradient(30deg, rgba(244, 173, 19, 0.3) 12%, transparent 12.5%, transparent 87%, rgba(244, 173, 19, 0.3) 87.5%),
    linear-gradient(150deg, rgba(244, 173, 19, 0.3) 12%, transparent 12.5%, transparent 87%, rgba(244, 173, 19, 0.3) 87.5%),
    linear-gradient(30deg, rgba(244, 173, 19, 0.3) 12%, transparent 12.5%, transparent 87%, rgba(244, 173, 19, 0.3) 87.5%),
    linear-gradient(150deg, rgba(244, 173, 19, 0.3) 12%, transparent 12.5%, transparent 87%, rgba(244, 173, 19, 0.3) 87.5%),
    linear-gradient(60deg, rgba(244, 173, 19, 0.18) 25%, transparent 25.5%, transparent 75%, rgba(244, 173, 19, 0.18) 75%);
  background-position: 0 0, 0 0, 30px 52px, 30px 52px, 0 0;
  background-size: 60px 105px;
  mask-image: radial-gradient(circle, #000 8%, transparent 70%);
}

.honeycomb-top {
  top: -220px;
  left: -110px;
}

.honeycomb-bottom {
  inset: auto auto -250px 26%;
  transform: rotate(22deg);
}

.site-header {
  position: relative;
  z-index: 3;
  width: min(1450px, calc(100% - 96px));
  min-height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}

.wordmark-symbol {
  display: grid;
  width: 45px;
  aspect-ratio: 1;
  place-items: center;
  background: var(--honey);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.wordmark-symbol span {
  width: 19px;
  height: 24px;
  border: 2px solid var(--forest);
  border-radius: 4px 4px 9px 9px;
}

.wordmark-copy strong,
.wordmark-copy small {
  display: block;
  line-height: 0.9;
  letter-spacing: 0.12em;
}

.wordmark-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
}

.wordmark-copy small {
  margin-top: 5px;
  font-size: 9px;
  letter-spacing: 0.32em;
}

.header-tag {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  background: rgba(0, 24, 22, 0.24);
}

.hero {
  position: relative;
  z-index: 2;
  width: min(1450px, calc(100% - 96px));
  min-height: calc(100svh - 184px);
  margin: 0 auto;
  display: grid;
  align-items: center;
  padding: clamp(52px, 7vh, 108px) 0 clamp(72px, 9vh, 130px);
}

.hero-content {
  width: min(690px, 49vw);
  animation: copy-arrival 1.15s 0.15s cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  color: var(--honey-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}

.eyebrow span {
  width: 33px;
  height: 1px;
  background: var(--honey);
  box-shadow: 0 0 14px rgba(244, 173, 19, 0.65);
}

.hero h1 {
  position: relative;
  width: fit-content;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(66px, 7.6vw, 120px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.067em;
  white-space: nowrap;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.32);
}

.hero h1 em {
  margin-left: 0.08em;
  color: var(--honey);
  font-weight: 400;
}

.flying-bee {
  position: absolute;
  z-index: 3;
  top: -18px;
  left: -5%;
  width: 24px;
  height: 15px;
  border: 1px solid rgba(255, 212, 122, 0.75);
  border-radius: 58% 42% 48% 52%;
  background: repeating-linear-gradient(
    90deg,
    #f5b51b 0 5px,
    #4a2c0b 5px 9px
  );
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.38),
    0 0 14px rgba(244, 173, 19, 0.42);
  pointer-events: none;
  animation: bee-flight 7s 1.2s ease-in-out infinite;
}

.flying-bee::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 3px;
  width: 12px;
  height: 10px;
  border: 1px solid rgba(255, 248, 233, 0.72);
  border-radius: 70% 30% 65% 35%;
  background: rgba(255, 248, 233, 0.4);
  box-shadow: 8px 3px 0 -1px rgba(255, 248, 233, 0.38);
  transform: rotate(-24deg);
}

.flying-bee::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f210d;
}

.gold-rule {
  display: flex;
  width: min(450px, 78%);
  align-items: center;
  gap: 0;
  margin: 35px 0 29px;
}

.gold-rule::before,
.gold-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 173, 19, 0.92));
}

.gold-rule::after {
  background: linear-gradient(90deg, rgba(244, 173, 19, 0.92), transparent);
}

.gold-rule span {
  width: 17px;
  aspect-ratio: 1;
  border: 2px solid var(--honey);
  transform: rotate(30deg);
}

.intro-copy {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 248, 233, 0.91);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.64;
}

.intro-copy strong {
  color: var(--honey-light);
  font-weight: 700;
}

.closing-copy {
  max-width: 570px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 15px;
  line-height: 1.65;
}

.product-notes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 13px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-notes i {
  width: 5px;
  aspect-ratio: 1;
  border: 1px solid var(--honey);
  transform: rotate(30deg);
}

.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 35px;
  padding: 14px 20px;
  border: 1px solid rgba(244, 173, 19, 0.42);
  border-radius: 999px;
  background: rgba(0, 24, 22, 0.42);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
}

.coming-soon-dot {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 5px rgba(244, 173, 19, 0.12), 0 0 18px rgba(244, 173, 19, 0.85);
  animation: pulse 2.2s ease-in-out infinite;
}

.site-footer {
  position: absolute;
  z-index: 3;
  right: 48px;
  bottom: 28px;
  left: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  color: rgba(255, 255, 255, 0.48);
}

.site-footer p,
.site-footer small {
  margin: 0;
}

.site-footer p {
  flex: 0 0 auto;
  color: rgba(255, 231, 177, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
}

.site-footer small {
  max-width: 780px;
  text-align: right;
  font-size: 8px;
  letter-spacing: 0.065em;
  line-height: 1.6;
}

@keyframes scene-arrival {
  from {
    opacity: 0;
    transform: scale(1.08);
    filter: saturate(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1.015);
    filter: saturate(1);
  }
}

@keyframes copy-arrival {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bee-flight {
  0% {
    top: -18px;
    left: -5%;
    opacity: 0;
    transform: rotate(-8deg) scale(0.88);
  }
  8% {
    opacity: 1;
  }
  26% {
    top: -31px;
    transform: rotate(9deg) scale(1);
  }
  52% {
    top: -12px;
    transform: rotate(-6deg) scale(0.94);
  }
  76% {
    top: -28px;
    transform: rotate(7deg) scale(1);
  }
  92% {
    opacity: 1;
  }
  100% {
    top: -17px;
    left: 103%;
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
  }
}

@media (max-width: 980px) {
  .scene {
    background-image: url("assets/img/braggot-lanzamiento-botella.webp");
    background-position: 70% center;
  }

  .scene-shade {
    background:
      linear-gradient(180deg, rgba(0, 17, 16, 0.96) 0%, rgba(0, 22, 20, 0.89) 31%, rgba(0, 24, 22, 0.54) 57%, rgba(0, 14, 13, 0.88) 100%),
      linear-gradient(90deg, rgba(0, 15, 14, 0.7), transparent, rgba(0, 15, 14, 0.56));
  }

  .hero {
    align-items: start;
    padding-top: 65px;
  }

  .hero-content {
    width: min(650px, 90%);
  }

  .hero h1 {
    font-size: clamp(64px, 12vw, 108px);
  }
}

@media (max-width: 640px) {
  .site-header {
    width: calc(100% - 48px);
    min-height: 82px;
    gap: 12px;
  }

  .wordmark-symbol {
    width: 39px;
  }

  .wordmark-copy strong {
    font-size: 19px;
  }

  .header-tag {
    padding: 8px 10px;
    font-size: 8px;
    letter-spacing: 0.13em;
  }

  .hero {
    width: calc(100% - 56px);
    min-height: auto;
    padding: 55px 0 180px;
  }

  .hero-content {
    width: 100%;
  }

  .eyebrow {
    max-width: 300px;
    margin-bottom: 18px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .hero h1 {
    font-size: clamp(46px, 15vw, 64px);
    letter-spacing: -0.055em;
  }

  .gold-rule {
    margin: 28px 0 24px;
  }

  .intro-copy {
    font-size: 16px;
    line-height: 1.55;
  }

  .closing-copy {
    font-size: 14px;
  }

  .product-notes {
    gap: 9px 10px;
    font-size: 8px;
    line-height: 1.5;
  }

  .coming-soon {
    margin-top: 27px;
    padding: 12px 17px;
    font-size: 9px;
  }

  .site-footer {
    position: absolute;
    right: 28px;
    bottom: 22px;
    left: 28px;
    display: block;
  }

  .site-footer p {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .site-footer small {
    display: block;
    max-width: 100%;
    text-align: left;
    font-size: 6.5px;
    line-height: 1.5;
  }
}

@media (max-height: 760px) and (min-width: 981px) {
  .site-header {
    min-height: 80px;
  }

  .hero {
    min-height: calc(100svh - 140px);
    padding-top: 36px;
    padding-bottom: 68px;
  }

  .hero h1 {
    font-size: clamp(68px, 8vw, 116px);
  }

  .gold-rule {
    margin: 24px 0 22px;
  }

  .intro-copy {
    font-size: 17px;
  }

  .product-notes {
    margin-top: 20px;
  }

  .coming-soon {
    margin-top: 24px;
  }

  .site-footer {
    bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .flying-bee {
    display: none;
  }
}