/*
  GLOP Launch Party invite (sections/glop-launch.liquid, layout/glop-bare.liquid).
  Figma frame 3337x2580: positions are % of the frame, sizes are cqw of the canvas (1cqw = 33.37 Figma px).
*/
html.glop-bare,
.glop-bare__body {
  margin: 0;
  min-height: 100%;
  background: #f3a5dd;
}

.glop-launch {
  --ink: #000;
  --placeholder: rgb(255 40 176 / 0.5);
  --canvas-w: min(100vw, 129.34dvh);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--ink);
  /* Paper texture keeps its grain (luminosity) but takes the Figma pink hue from the colour beneath. */
  background: var(--glop-launch-paper) center / cover no-repeat, #f4a3dd;
  background-blend-mode: luminosity, normal;
  font-family: 'ABC Favorit Mono', 'DM Mono', ui-monospace, monospace;
  font-weight: 400;
}

.glop-launch__canvas {
  position: relative;
  width: var(--canvas-w);
  aspect-ratio: 3337 / 2580;
  container-type: inline-size;
  z-index: 1;
}

/* :where() keeps this reset at one class of specificity so the single-class item rules below win. */
.glop-launch :where(p, h1) {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-wrap: balance;
}

/* Every item is placed by its centre point, then rotated. The float animates `translate`, which composes before `transform`. */
.glop-launch__item {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  text-align: center;
}

.glop-launch__kicker,
.glop-launch__with {
  width: 21.05cqw;
  font-size: 1.744cqw;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}

.glop-launch__kicker {
  --cx: 36.49%;
  --cy: 20.58%;
  --rot: 6.67deg;
}

.glop-launch__with {
  --cx: 66.13%;
  --cy: 49.62%;
  --rot: -12.06deg;
}

.glop-launch .glop-launch__title {
  --cx: 50.59%;
  --cy: 36.92%;
  --rot: -18.67deg;
  display: grid;
  justify-items: center;
  width: 48.3cqw;
  font-family: 'ABC Schengen B', 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 7.734cqw;
  line-height: 0.78;
  letter-spacing: -0.07em;
}

.glop-launch__aside {
  --cx: 33.67%;
  --cy: 58.5%;
  --rot: 9.11deg;
  width: 10.53cqw;
  font-size: 1.259cqw;
  line-height: normal;
}

.glop-launch .glop-launch__details {
  --cx: 50%;
  --cy: 65.14%;
  width: 21.56cqw;
  font-size: 1.349cqw;
  font-weight: 700;
  line-height: normal;
}

.glop-launch__rsvp {
  --cx: 50%;
  --cy: 80.7%;
  width: 28cqw;
}

.glop-launch__form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.glop-launch__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.glop-launch__step + .glop-launch__step {
  margin-top: 1.3cqw;
}

.glop-launch__form.is-stepped .glop-launch__step {
  display: none;
  margin-top: 0;
}

.glop-launch__form.is-stepped .glop-launch__step.is-active {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .glop-launch__form.is-stepped .glop-launch__step.is-active .glop-launch__label {
    animation: glop-launch-label-in 0.35s ease-out;
  }
}

@keyframes glop-launch-label-in {
  from {
    opacity: 0;
    translate: 0 0.4em;
  }
}

.glop-launch .glop-launch__label {
  font-size: 1.349cqw;
  line-height: normal;
  text-transform: uppercase;
}

.glop-launch__error {
  margin-top: 0.4cqw !important;
  font-size: 1cqw !important;
}

.glop-launch .glop-launch__input {
  box-sizing: border-box;
  width: 100%;
  height: 3.364cqw;
  margin: 0.85cqw 0 0;
  padding: 0 1cqw;
  border: max(1.5px, 0.1085cqw) solid var(--ink);
  border-radius: 0.271cqw;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: inherit;
  font-size: 1.349cqw;
  text-align: center;
  text-transform: uppercase;
  appearance: none;
}

/* Honeypot field (sheet mode): off-screen, never visible or focusable. */
.glop-launch .glop-launch__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Marketing opt-in on the last step (Klaviyo mode): pre-checked, guests can untick it. Square box in the form's ink. */
.glop-launch .glop-launch__optin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  margin-top: 0.8cqw;
  font-size: 0.95cqw;
  text-transform: none;
  cursor: pointer;
}

.glop-launch .glop-launch__optin input {
  display: grid;
  place-content: center;
  flex: none;
  width: 1.05cqw;
  height: 1.05cqw;
  margin: 0;
  border: max(1.5px, 0.08cqw) solid var(--ink);
  border-radius: 2px;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.glop-launch .glop-launch__optin input:checked::after {
  content: '';
  width: 0.55em;
  height: 0.55em;
  background: var(--ink);
}

.glop-launch .glop-launch__optin input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Thank-you box: the step box's outline, holding the message instead of an input. */
.glop-launch .glop-launch__done {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 3.364cqw;
  margin: calc(0.85cqw + 1.349cqw * 1.2) 0 0;
  border: max(1.5px, 0.1085cqw) solid var(--ink);
  border-radius: 0.271cqw;
  font-size: 1.349cqw;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
  .glop-launch .glop-launch__done {
    animation: glop-launch-label-in 0.45s ease-out;
  }
}

.glop-launch .glop-launch__input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.glop-launch .glop-launch__submit {
  margin: 1.3cqw 0 0;
  padding: 0.6cqw 1.006cqw;
  border: max(1.5px, 0.1006cqw) solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.609cqw;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  appearance: none;
  transition: background-color 0.2s, color 0.2s;
}

.glop-launch .glop-launch__submit:hover {
  background: var(--ink);
  color: #f3a5dd;
}

.glop-launch .glop-launch__input:focus-visible,
.glop-launch .glop-launch__submit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.glop-launch__go {
  --cx: 10.63%;
  --cy: 87.23%;
  width: 10.96cqw;
  height: auto;
}

.glop-launch__glop {
  --cx: 85.86%;
  --cy: 85.93%;
  width: 21cqw;
  height: auto;
  mix-blend-mode: multiply;
}

/* Critters: placed at their Figma spots; glop-launch.js takes over and crawls them across the whole screen. */
.glop-launch__critters {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.glop-launch__critter {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  height: auto;
  transform: translate(-50%, -50%) rotate(var(--r));
  will-change: transform;
}

.glop-launch__critter--bug {
  width: calc(var(--canvas-w) * 0.0317);
}

.glop-launch__critter--butterfly {
  width: calc(var(--canvas-w) * 0.0315);
}

/* Two frames stacked: open and folded wings, same 106x122 canvas so they register
   exactly. The flap is a swap between them — crisp at any size, no video, no 3D. */
.glop-launch__wings {
  display: block;
  width: 100%;
  height: auto;
}

.glop-launch__wings--shut {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.glop-launch__critter--butterfly.is-wings-shut .glop-launch__wings--open {
  opacity: 0;
}

.glop-launch__critter--butterfly.is-wings-shut .glop-launch__wings--shut {
  opacity: 1;
}

.glop-launch__critter--star {
  width: calc(var(--canvas-w) * 0.0353);
}

@media (prefers-reduced-motion: no-preference) {
  .glop-launch__float {
    animation: glop-launch-float 7s ease-in-out infinite;
    animation-delay: var(--d, 0s);
  }

  .glop-launch__critter--star {
    animation: glop-launch-twinkle 9s ease-in-out infinite;
  }
}

@keyframes glop-launch-float {
  0%,
  100% {
    translate: 0 0;
  }
  33% {
    translate: 0.25cqw -0.55cqw;
  }
  66% {
    translate: -0.2cqw 0.35cqw;
  }
}

@keyframes glop-launch-twinkle {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(20deg) scale(1.12);
  }
}

/* Portrait (phones, portrait tablets): stack the invite, keep the tilts. */
@media (max-aspect-ratio: 1 / 1) {
  .glop-launch {
    --canvas-w: 100vw;
    place-items: start center;
  }

  /*
    Fit the whole invite, logos included, into the visible screen. svh = viewport height with the browser
    bars showing, so the logos pinned to the bottom stay above them. Vertical gaps are svh so short phones
    compress; if a phone is still too short the page scrolls rather than overlapping.
  */
  .glop-launch__canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    aspect-ratio: auto;
    padding: max(20px, 3.5svh) 20px calc(12px + env(safe-area-inset-bottom));
  }

  .glop-launch__item {
    position: relative;
    left: auto;
    top: auto;
    transform: rotate(var(--rot, 0deg));
  }

  .glop-launch__kicker,
  .glop-launch__with {
    width: auto;
    font-size: 4.2cqw;
  }

  .glop-launch__kicker {
    align-self: flex-start;
    margin-left: 6cqw !important;
  }

  .glop-launch .glop-launch__title {
    width: 100%;
    margin: 2.5svh 0 1.5svh;
    font-size: min(15.5cqw, 8.6svh);
  }

  .glop-launch__with {
    align-self: flex-end;
    margin-right: 4cqw !important;
  }

  .glop-launch__aside {
    align-self: flex-start;
    width: auto;
    margin: 2.5svh 0 0 8cqw !important;
    font-size: 3.4cqw;
  }

  .glop-launch .glop-launch__details {
    width: auto;
    margin-top: 2svh;
    font-size: 4cqw;
  }

  .glop-launch__rsvp {
    width: min(100%, 420px);
    /* Shares the leftover height with the logos row (both margin-top: auto), so the form sits lower
       while the logos stay pinned to the bottom. padding-top keeps a minimum gap on short phones. */
    margin-top: auto;
    padding-top: 3svh;
  }

  .glop-launch .glop-launch__label {
    font-size: 4cqw;
  }

  .glop-launch__error {
    margin-top: 2cqw !important;
    font-size: 3.4cqw !important;
  }

  .glop-launch .glop-launch__input {
    height: 44px;
    margin-top: max(8px, 1.2svh);
    padding: 0 12px;
    border-width: 1.5px;
    border-radius: 4px;
    font-size: 16px;
  }

  .glop-launch .glop-launch__done {
    height: 44px;
    margin-top: calc(max(8px, 1.2svh) + 4cqw * 1.2);
    border-width: 1.5px;
    border-radius: 4px;
    font-size: 16px;
  }

  .glop-launch .glop-launch__optin {
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
  }

  .glop-launch .glop-launch__optin input {
    width: 16px;
    height: 16px;
    border-width: 1.5px;
  }

  .glop-launch .glop-launch__submit {
    margin-top: max(10px, 1.6svh);
    padding: 8px 18px;
    border-width: 1.5px;
    font-size: 17px;
  }

  .glop-launch__logos {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    padding-top: max(8px, 1.5svh);
  }

  .glop-launch__go {
    width: 19cqw;
  }

  .glop-launch__glop {
    width: 27cqw;
  }

  .glop-launch__critter--bug,
  .glop-launch__critter--bee,
  .glop-launch__critter--star {
    width: 9vw;
  }
}