/* Ciqui landing page (src/views/landing.ts): the real app shown in 3D, the workflow told as you
   scroll, then the photobooth and the rest. Dark stage and light paper sections, the pick's cream
   for actions and the logo's red for marks. Loaded on "/" only, after style.css. */

.landing {
  display: grid;
  --ink: #0f0e0c;
  --ink-2: #151311;
  --paper: #f2eee6;
  --paper-2: #faf8f3;
  --text-ink: #16140f;
  --dim-ink: #a0988a;
  --dim-cream: rgba(236, 232, 220, 0.4);
  --pick: #ede1a8;
  --red: #ab2c2e;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  gap: 16px;
}

/* ---------------------------------------------------------------- shared */

.lp-panel {
  position: relative;
  border-radius: 36px;
  padding: clamp(28px, 5vw, 72px);
}

.lp-dark {
  background: radial-gradient(80% 60% at 85% 0%, rgba(237, 225, 168, 0.06), transparent 70%), var(--ink-2);
  color: var(--cream);
}

.lp-light {
  background: var(--paper);
  color: var(--text-ink);
}

body.public .lp-light h2,
body.public .lp-light h3 {
  color: var(--text-ink);
}

body.public .lp-light a {
  color: var(--red);
}

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pick);
}

.lp-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.lp-light .lp-eyebrow {
  color: var(--red);
}

.lp-panel h2 {
  margin: 0 0 20px;
  max-width: 17ch;
  font-size: clamp(2.2rem, 4.6vw, 4.1rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.lp-dim {
  color: var(--dim-cream);
}

.lp-light .lp-dim {
  color: var(--dim-ink);
}

.lp-lead {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--soft);
}

.lp-light .lp-lead {
  color: #6b655b;
}

.lp-head {
  margin-bottom: clamp(28px, 4vw, 52px);
}

.lp-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pick);
  box-shadow: 0 0 0 4px rgba(237, 225, 168, 0.18);
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}

body.public .lp-btn-pick {
  background: var(--pick);
  color: #1b1607;
  box-shadow: 0 14px 40px -12px rgba(237, 225, 168, 0.6);
}

body.public .lp-btn-pick:hover {
  background: #f5ecc4;
  color: #1b1607;
  transform: translateY(-1px);
}

body.public .lp-btn-line {
  border: 1px solid rgba(236, 232, 220, 0.28);
  color: var(--cream);
}

body.public .lp-btn-line:hover {
  border-color: rgba(236, 232, 220, 0.6);
  color: var(--cream);
}

body.public .lp-btn-ink {
  background: var(--text-ink);
  color: var(--paper);
}

body.public .lp-btn-ink:hover {
  background: #2a2620;
  color: var(--paper);
}

body.public .lp-btn-ink-line {
  border: 1px solid rgba(22, 20, 15, 0.3);
  color: var(--text-ink);
}

body.public .lp-btn-ink-line:hover {
  border-color: var(--text-ink);
  color: var(--text-ink);
}

.lp-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.lp-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.lp-checks li {
  position: relative;
  padding-left: 30px;
  color: var(--cream-2);
  line-height: 1.55;
}

.lp-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.4' fill='none' stroke='%231b1607' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 18px no-repeat,
    var(--pick);
}

.lp-checks-dark li {
  color: #3d3830;
}

.lp-checks-dark li::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.4' fill='none' stroke='%23f5e6de' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 18px no-repeat,
    var(--red);
}

/* ---------------------------------------------------------------- the app, in 3D */

/* A screenshot of the real app in a macOS window. Its traffic lights sit where the app's own
   title strip leaves room for them, scaled with the window (container units). */
.lp-window {
  position: relative;
  margin: 0;
  border-radius: 1.1cqw;
  overflow: hidden;
  background: #1e1e1e;
  container-type: inline-size;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 40px 90px -30px rgba(0, 0, 0, 0.75);
}

.lp-window img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-lights {
  position: absolute;
  z-index: 2;
  top: 1.25cqw;
  left: 1.1cqw;
  display: flex;
  gap: 0.6cqw;
}

.lp-lights i {
  width: 0.85cqw;
  height: 0.85cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: #ff5f57;
}

.lp-lights i:nth-child(2) {
  background: #febc2e;
}

.lp-lights i:nth-child(3) {
  background: #28c840;
}

.lp-scene {
  perspective: 2400px;
  perspective-origin: 50% 30%;
}

/* The tilt comes from --rx/--ry/--rz (set per section, nudged by app.js with the pointer and the
   scroll); every child sits at its own depth, so the pieces float in front of the window. */
.lp-tilt {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg));
  transition: transform 0.9s var(--ease);
  will-change: transform;
}

.lp-piece {
  position: absolute;
  z-index: 3;
  height: auto;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 30px 60px -20px rgba(0, 0, 0, 0.7);
  transform: translateZ(var(--z, 120px));
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
}

.lp-piece-tr {
  top: 7%;
  right: -8%;
  width: 24%;
  --z: 150px;
}

.lp-piece-tl {
  top: 20%;
  left: -9%;
  width: 19%;
  --z: 110px;
}

.lp-piece-bl {
  bottom: -9%;
  left: -6%;
  width: 21%;
  --z: 130px;
}

.lp-piece-br {
  bottom: -11%;
  right: 5%;
  width: 40%;
  --z: 180px;
}

/* ---------------------------------------------------------------- hero */

.lp-hero {
  position: relative;
  min-height: clamp(760px, 94vh, 940px);
  margin-top: -86px;
  padding: 0 clamp(24px, 4vw, 64px);
  border-radius: 36px;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(50% 45% at 50% 52%, rgba(237, 225, 168, 0.16), transparent 70%),
    radial-gradient(30% 30% at 64% 40%, rgba(171, 44, 46, 0.16), transparent 70%),
    var(--ink);
}

.lp-hero-glow {
  position: absolute;
  inset: auto 15% -30% 15%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(237, 225, 168, 0.18), transparent);
  filter: blur(20px);
  pointer-events: none;
}

.lp-rings {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1240px, 140%);
  height: auto;
  translate: -50% calc(-50% + var(--py, 0px));
  rotate: var(--spin, 0deg);
  pointer-events: none;
}

.lp-rings circle {
  fill: none;
  stroke: rgba(236, 232, 220, 0.07);
  stroke-width: 1;
}

.lp-rings circle:nth-child(2) {
  stroke-dasharray: 2 7;
}

.lp-exif {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-exif li {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(236, 232, 220, 0.38);
}

.lp-exif li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: rgba(236, 232, 220, 0.3);
}

.lp-exif-1 {
  top: 44%;
  left: 4%;
}

.lp-exif-2 {
  top: 17%;
  right: 24%;
}

.lp-exif-3 {
  bottom: 5%;
  right: 42%;
}

.lp-exif-4 {
  bottom: 5%;
  right: 5%;
}

.lp-hero-title {
  margin: 0;
  font-size: clamp(3.4rem, 7.4vw, 7.6rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.055em;
}

.lp-hero-title span {
  position: absolute;
  z-index: 5;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.55);
}

.lp-hero-a {
  top: 128px;
  left: clamp(24px, 4vw, 64px);
}

.lp-hero-b {
  right: clamp(24px, 4vw, 64px);
  bottom: 120px;
  text-align: right;
}

/* Right of centre, so the copy at the bottom left has dark space of its own: the window never
   reaches into the 560px the copy needs. */
.lp-hero-scene {
  position: absolute;
  left: 0;
  right: 0;
  top: 196px;
  width: min(900px, 57%, 100% - 560px);
  margin: 0 4% 0 auto;
}

.lp-hero-scene .lp-tilt {
  --rx: 26deg;
  --ry: -20deg;
  --rz: 7deg;
}

.lp-window-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 35%);
  pointer-events: none;
}

.lp-live {
  position: absolute;
  z-index: 5;
  top: 118px;
  right: clamp(24px, 4vw, 64px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(22, 20, 18, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--cream-2);
}

.lp-live .lp-dot {
  animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(237, 225, 168, 0);
  }
}

.lp-hero-foot {
  position: absolute;
  z-index: 5;
  left: clamp(24px, 4vw, 64px);
  bottom: clamp(28px, 4vw, 52px);
  max-width: 470px;
}

.lp-hero-foot p {
  max-width: clamp(340px, 30vw, 440px);
  margin: 0 0 22px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--cream-2);
}

/* ---------------------------------------------------------------- the workflow, as you scroll */

.lp-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: clamp(32px, 5vw, 80px);
}

.lp-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.lp-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  min-height: 44vh;
  padding: 26px 0 30px;
  border-top: 1px solid rgba(22, 20, 15, 0.1);
}

.lp-step:last-child {
  min-height: 0;
  padding-bottom: 20vh;
}

.lp-step-no {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(22, 20, 15, 0.16);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--dim-ink);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}

.lp-step h3 {
  margin: 4px 0 10px;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  transition: color 0.35s;
}

.lp-step p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.6;
  color: #5e584e;
  transition: opacity 0.35s;
}

.lp-step-bar {
  display: block;
  height: 2px;
  margin-top: 22px;
  max-width: 260px;
  border-radius: 2px;
  background: rgba(22, 20, 15, 0.1);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s;
}

.lp-step-bar i {
  display: block;
  height: 100%;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

.lp-step-shot {
  display: none;
}

/* With a scroll story, only the step in view is in full colour. */
.lp-flow.is-live .lp-step:not(.is-active) h3 {
  color: var(--dim-ink);
}

.lp-flow.is-live .lp-step:not(.is-active) p {
  opacity: 0.4;
}

.lp-step.is-active .lp-step-no {
  background: var(--red);
  border-color: var(--red);
  color: #f5e6de;
}

.lp-flow.is-live .lp-step.is-active .lp-step-bar {
  opacity: 1;
}

.lp-flow-visual {
  position: relative;
}

.lp-glow-panel {
  position: sticky;
  top: 12vh;
  display: grid;
  place-items: center;
  height: 76vh;
  min-height: 520px;
  max-height: 760px;
  padding: 0 6%;
  border-radius: 30px;
  background:
    radial-gradient(70% 60% at 72% 22%, rgba(244, 222, 140, 0.75), transparent 70%),
    radial-gradient(60% 50% at 20% 90%, rgba(171, 44, 46, 0.1), transparent 70%),
    #ece4d2;
}

.lp-glow-panel .lp-scene {
  width: 104%;
}

/* Two-column sections: the headline shares the width. */
.lp-flow h2,
.lp-booth h2,
.lp-pricing h2 {
  max-width: 18ch;
  font-size: clamp(2rem, 3.3vw, 3.15rem);
}

.lp-flow .lp-tilt {
  --rx: 10deg;
  --ry: -16deg;
  --rz: 3deg;
}

.lp-window-stack {
  aspect-ratio: 1440 / 900;
}

.lp-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}

.lp-screen.is-on {
  opacity: 1;
}

.lp-for-step {
  opacity: 0;
  transform: translateZ(40px) translateY(18px);
}

.lp-for-step.is-on {
  opacity: 1;
  transform: translateZ(var(--z, 120px));
}

.lp-note {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(22, 20, 15, 0.86);
  color: var(--cream);
  font-size: 0.82rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.lp-note.is-on {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- photobooth */

.lp-booth {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.lp-switch {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 28px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.05);
}

.lp-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.lp-switch-btn:hover {
  color: var(--cream);
}

.lp-switch-btn.is-on {
  background: var(--pick);
  color: #1b1607;
}

.lp-booth .lp-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  font-size: 0.92rem;
}

.lp-booth-visual {
  position: relative;
  padding: 8% 9% 14% 9%;
}

/* The guest screen is mostly black: a warm light behind it and a brighter rim keep the window
   readable on the dark panel. */
.lp-booth-visual::before {
  content: "";
  position: absolute;
  inset: 4% 2% 8%;
  background: radial-gradient(closest-side, rgba(237, 225, 168, 0.2), transparent);
  pointer-events: none;
}

.lp-booth .lp-window {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 90px -20px rgba(237, 225, 168, 0.35),
    0 40px 90px -30px rgba(0, 0, 0, 0.85);
}

.lp-booth .lp-tilt {
  --rx: 14deg;
  --ry: 18deg;
  --rz: -4deg;
}

.lp-strip {
  position: absolute;
  left: -8%;
  bottom: -14%;
  width: 22%;
  padding: 7px 7px 10px;
  border-radius: 6px;
  background: #f7f3ea;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transform: translateZ(140px) rotateZ(-7deg);
}

.lp-strip img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 5px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lp-strip-name {
  margin: 6px 0 0;
  text-align: center;
  font-size: clamp(0.6rem, 1vw, 0.85rem);
  font-weight: 600;
  color: #2a241c;
}

.lp-strip-date {
  margin: 0;
  text-align: center;
  font-size: clamp(0.5rem, 0.7vw, 0.65rem);
  letter-spacing: 0.15em;
  color: #9a7b40;
}

.lp-qr {
  position: absolute;
  right: -5%;
  bottom: -10%;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 24%;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #1d1b18;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  text-align: center;
  transform: translateZ(180px) rotateZ(4deg);
}

.lp-qr-code {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--paper);
  color: #16140f;
}

.lp-qr-code svg {
  width: 72%;
  height: auto;
}

.lp-qr b {
  font-size: clamp(0.6rem, 0.9vw, 0.82rem);
}

.lp-qr span:last-child {
  font-size: clamp(0.5rem, 0.7vw, 0.68rem);
  color: var(--soft);
}

/* ---------------------------------------------------------------- the other features */

.lp-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.lp-card {
  grid-column: span 3;
  padding: 22px;
  border-radius: 26px;
  border: 1px solid rgba(22, 20, 15, 0.07);
  background: var(--paper-2);
}

.lp-card-shot {
  grid-column: span 6;
}

.lp-card-media {
  perspective: 1800px;
  margin: 4px 4px 22px;
}

.lp-card-media .lp-window {
  transform: rotateX(9deg) rotateY(-7deg) rotateZ(1deg);
  transition: transform 0.8s var(--ease);
}

.lp-card:hover .lp-card-media .lp-window {
  transform: none;
}

.lp-tags {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
}

.lp-tags span {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22, 20, 15, 0.14);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b655b;
}

.lp-card h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.lp-card p:last-child {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #5e584e;
}

.lp-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 28px;
}

.lp-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: #5e584e;
}

body.public .lp-key kbd {
  min-width: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(22, 20, 15, 0.16);
  border-bottom-width: 2px;
  background: #fff;
  color: var(--text-ink);
  font-family: inherit;
  font-weight: 600;
}

.lp-keys-note {
  font-size: 0.82rem;
  color: var(--dim-ink);
}

/* ---------------------------------------------------------------- pricing, privacy, FAQ, closing */

.lp-pricing {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.lp-platforms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-platforms li {
  display: grid;
  padding: 12px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--soft);
}

.lp-platforms b {
  color: var(--cream);
  font-weight: 600;
}

.lp-platforms span {
  font-size: 0.82rem;
}

.lp-platforms .is-ready {
  border-color: rgba(237, 225, 168, 0.45);
  background: rgba(237, 225, 168, 0.06);
}

.lp-privacy .lp-checks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 40px;
}

.lp-closing {
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--text-ink);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(244, 222, 140, 0.9), transparent 70%),
    radial-gradient(40% 60% at 50% 100%, rgba(171, 44, 46, 0.12), transparent 70%),
    #efe6d1;
}

.lp-closing-mark {
  width: 112px;
  height: 112px;
  margin-bottom: 26px;
  filter: drop-shadow(0 24px 40px rgba(120, 40, 30, 0.35));
}

body.public .lp-closing h2 {
  max-width: none;
  color: var(--text-ink);
  font-size: clamp(2.4rem, 6vw, 5.2rem);
}

.lp-closing > p {
  margin: 0 0 28px;
  color: #5e584e;
}

.lp-closing .lp-cta {
  justify-content: center;
}

/* ---------------------------------------------------------------- motion (landing.js) */

/* The intro: until landing.js has built the rose window, the page is already covered. */
@font-face {
  font-family: "Ciqui Tagline";
  src: url("/assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

html.lp-intro {
  overflow: hidden;
  scrollbar-gutter: stable;
}

html.lp-intro body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: #0b0909;
}

.lp-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  cursor: pointer;
}

.lp-intro.is-opening {
  pointer-events: none;
}

.lp-intro-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.lp-intro-glass {
  will-change: transform, opacity;
}

.lp-intro .lp-blend {
  mix-blend-mode: screen;
}

.lp-intro .lp-pivot {
  transform-box: fill-box;
  transform-origin: center;
}

.lp-intro-tagline {
  font-family: "Ciqui Tagline", var(--font);
  font-weight: 300;
}

.lp-intro-skip {
  position: absolute;
  right: 24px;
  bottom: 22px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 230, 222, 0.18);
  background: rgba(11, 9, 9, 0.5);
  color: rgba(245, 230, 222, 0.7);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.lp-intro-skip:hover {
  color: #f5e6de;
  border-color: rgba(245, 230, 222, 0.4);
}

/* The entrance: the hero's parts wait out of sight (lp-enter), then come into place (lp-go).
   Each animation starts from its own offset and ends at the part's usual place. */
html.lp-enter:not(.lp-go) .site-top,
html.lp-enter:not(.lp-go) .lp-hero-glow,
html.lp-enter:not(.lp-go) .lp-rings,
html.lp-enter:not(.lp-go) .lp-exif li,
html.lp-enter:not(.lp-go) .lp-hero-title span,
html.lp-enter:not(.lp-go) .lp-hero-scene,
html.lp-enter:not(.lp-go) .lp-live,
html.lp-enter:not(.lp-go) .lp-hero-foot {
  opacity: 0;
}

html.lp-go .site-top {
  animation: lp-in-drop 0.8s var(--ease, ease) 0.4s both;
}

html.lp-go .lp-hero-glow {
  animation: lp-in-fade 1.6s ease-out both;
}

html.lp-go .lp-rings {
  animation: lp-in-rings 1.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.lp-go .lp-hero-a {
  animation: lp-in-left 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

html.lp-go .lp-hero-b {
  animation: lp-in-right 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}

html.lp-go .lp-hero-scene {
  animation: lp-in-scene 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}

html.lp-go .lp-hero-scene .lp-piece {
  animation: lp-in-piece 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

html.lp-go .lp-hero-scene .lp-piece + .lp-piece {
  animation-delay: 0.9s;
}

html.lp-go .lp-exif li {
  animation: lp-in-fade 0.9s ease-out 0.9s both;
}

html.lp-go .lp-exif li:nth-child(2) {
  animation-delay: 1.02s;
}

html.lp-go .lp-exif li:nth-child(3) {
  animation-delay: 1.14s;
}

html.lp-go .lp-exif li:nth-child(4) {
  animation-delay: 1.26s;
}

html.lp-go .lp-live {
  animation: lp-in-drop 0.8s var(--ease, ease) 1s both;
}

html.lp-go .lp-hero-foot {
  animation: lp-in-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

@keyframes lp-in-fade {
  from {
    opacity: 0;
  }
}

@keyframes lp-in-drop {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@keyframes lp-in-rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
}

@keyframes lp-in-left {
  from {
    opacity: 0;
    transform: translateX(-14vw);
    filter: blur(12px);
  }
}

@keyframes lp-in-right {
  from {
    opacity: 0;
    transform: translateX(14vw);
    filter: blur(12px);
  }
}

@keyframes lp-in-rings {
  from {
    opacity: 0;
    transform: scale(0.55) rotate(-30deg);
  }
}

/* The window swings up out of the floor, as if the glass had just opened onto it. */
@keyframes lp-in-scene {
  from {
    opacity: 0;
    transform: perspective(1600px) translateY(18vh) rotateX(46deg) scale(0.84);
  }
}

/* The pieces arrive from in front of the window, towards their own depth. */
@keyframes lp-in-piece {
  from {
    opacity: 0;
    transform: translateZ(900px);
  }
}

/* Depth and reveal: landing.js sets --px/--py/--spin as you scroll; --reveal is the distance
   still to rise. Registered, so a parent's values never pass to its children, and so --reveal
   can ease. */
@property --px {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --py {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --reveal {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

[data-depth],
[data-drift],
[data-reveal] {
  translate: var(--px, 0px) calc(var(--py, 0px) + var(--reveal, 0px));
}

[data-spin] {
  rotate: var(--spin, 0deg);
}

/* The rings are centred by their own translate. */
.lp-rings[data-depth] {
  translate: -50% calc(-50% + var(--py, 0px));
}

.lp-hero-scene,
.lp-hero-title span,
.lp-rings,
.lp-exif li {
  will-change: translate;
}

html.lp-motion [data-reveal] {
  transition:
    opacity 0.9s var(--ease),
    --reveal 1.1s var(--ease);
}

html.lp-motion [data-reveal]:not(.is-in) {
  --reveal: 64px;
  opacity: 0;
}

/* ---------------------------------------------------------------- narrower windows */

@media (max-width: 1099px) {
  .lp-hero {
    min-height: 0;
    padding-top: 110px;
    padding-bottom: 40px;
  }
  .lp-hero-title span,
  .lp-hero-scene,
  .lp-hero-foot,
  .lp-live {
    position: relative;
    inset: auto;
  }
  .lp-hero-title {
    display: grid;
  }
  .lp-hero-b {
    justify-self: end;
    margin-top: 0.1em;
  }
  .lp-hero-scene {
    width: min(760px, 92%);
    margin: 36px auto 56px;
  }
  .lp-hero-scene .lp-tilt {
    --rx: 18deg;
    --ry: -12deg;
    --rz: 4deg;
  }
  .lp-live {
    display: inline-flex;
    margin: 0 0 24px;
  }
  .lp-hero-foot {
    max-width: 520px;
  }
  .lp-exif {
    display: none;
  }

  .lp-flow,
  .lp-booth,
  .lp-pricing {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-flow-visual {
    display: none;
  }
  .lp-step {
    min-height: 0;
  }
  .lp-step:last-child {
    padding-bottom: 0;
  }
  .lp-step-shot {
    display: block;
    grid-column: 1 / -1;
    margin-top: 8px;
    perspective: 1600px;
  }
  .lp-step-shot .lp-window {
    transform: rotateX(8deg) rotateY(-6deg);
  }

  .lp-card,
  .lp-card-shot {
    grid-column: span 6;
  }
}

@media (max-width: 719px) {
  .lp-panel,
  .lp-hero {
    border-radius: 26px;
  }
  /* The floating pieces would leave the screen; the window alone, full width. */
  .lp-hero-scene {
    width: 100%;
  }
  .lp-hero-scene .lp-piece {
    display: none;
  }
  .lp-piece-br {
    display: none;
  }
  .lp-booth .lp-checks,
  .lp-privacy .lp-checks {
    grid-template-columns: minmax(0, 1fr);
  }
  .lp-card,
  .lp-card-shot {
    grid-column: 1 / -1;
  }
  .lp-switch-btn {
    padding: 9px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-tilt,
  .lp-piece,
  .lp-screen,
  .lp-note,
  .lp-card-media .lp-window {
    transition: none;
  }
  .lp-live .lp-dot {
    animation: none;
  }
}