/* Loaded from index.html before the SPA bundle. Keep this file small. */

@font-face {
  font-family: "DreamingOutloud";
  src: url("/static/bubblekassa.otf") format("opentype");
  font-display: swap;
}

html,
body {
  margin: 0;
  background: #f5fafd;
  color: #12283a;
  font-family: Arial, sans-serif;
}


.first-paint {
  min-height: 100vh;
  padding: 24px 0 64px;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(0, 168, 236, 0.16), transparent 60%),
    radial-gradient(600px 400px at 0% 40%, rgba(227, 0, 123, 0.1), transparent 60%),
    #f5fafd;
}

.pv-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.first-paint-logo {
  display: block;
  width: 100%;
  height: auto;
}

.pv-hero-actions-top {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pv-lang {
  display: flex;
  border: 1.5px solid #dcebf4;
  border-radius: 99px;
  overflow: hidden;
  background: #ffffff;
}

.pv-lang-btn {
  width: 38px;
  height: 26px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.45;
}

.pv-lang-btn.is-active {
  opacity: 1;
  background: rgba(0, 168, 236, 0.12);
}

.pv-flag-icon {
  display: block;
  width: 100%;
  height: 15px;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
}

.pv-flag-icon--de {
  background-image: linear-gradient(#000 33%, #dd0000 33% 66%, #ffce00 66%);
}

.pv-flag-icon--en {
  background-image: url("/static/gb.png");
}

/* Same classes as the live homepage, so Vue inherits them the moment it mounts. */
.pv-eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e3007b;
}

.pv-claim {
  position: relative;
  font-family: "DreamingOutloud", Arial, sans-serif;
  font-size: clamp(2.6rem, 6.5vw, 4rem);
  line-height: 1.03;
  margin: 0 0 76px;
  font-weight: 400;
}

.pv-claim em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: #e3007b;
}

.pv-claim em::after {
  content: "";
  position: absolute;
  left: 2px;
  right: -5%;
  bottom: -0.02em;
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, #e3007b, #8b5cf6 55%, #00a8ec);
  mask-image: radial-gradient(closest-side at 45% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 45% 50%, #000 60%, transparent 100%);
  transform-origin: left center;
  animation: pv-stroke 0.7s ease-out 0.35s backwards;
}

@keyframes pv-stroke {
  from { opacity: 0; scale: 0 1; }
  to { opacity: 1; scale: 1 1; }
}

/* Same height as the live hero: facts + scan CTA, or Vue grows the column on mount. */
.pv-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  /* Five rows: live open/free lines fill in without shrinking the hero. */
  min-height: 145px;
}

.pv-fact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.pv-fact--open {
  color: #15803d;
}

.pv-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #15803d;
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.15);
}

.fp-icon {
  flex: none;
  display: block;
  width: 21px;
  height: 21px;
}

.pv-fact-machine {
  color: #00a8ec;
}

.pv-fact-check {
  color: #16a34a;
}

.pv-btn--scan .fp-icon {
  width: 20px;
  height: 20px;
}

.pv-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.pv-btn--scan {
  gap: 9px;
  background: #00a8ec;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 168, 236, 0.35);
}

/* Empty photo frames — same boxes as the live collage, no pixels yet. */
.pv-hero-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.pv-hero-art {
  position: relative;
  display: none;
  aspect-ratio: 47 / 34;
}

@media (min-width: 50rem) {
  .pv-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 46vw, 470px);
    gap: 28px;
  }

  .pv-hero-art {
    display: block;
  }
}

.pv-hero-img {
  position: absolute;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(8, 37, 57, 0.06);
  box-shadow: 0 18px 50px rgba(8, 37, 57, 0.18);
}

/* Soft sweep: a light band eases across the empty frame until the photo is in. */
.pv-hero-img:not(.is-ready)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0) 90%
  );
  background-size: 220% 100%;
  animation: pv-img-sweep 1.6s ease-in-out infinite;
}

.pv-hero-img--1:not(.is-ready)::after { animation-delay: 0.22s; }
.pv-hero-img--2:not(.is-ready)::after { animation-delay: 0.44s; }

@keyframes pv-img-sweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.pv-hero-img--0 { width: 72%; height: 62%; top: 0; right: 0; }
.pv-hero-img--1 { width: 62%; height: 58%; bottom: 0; left: 0; border: 3px solid #f5fafd; }
.pv-hero-img--2 { width: 58%; height: 50%; bottom: calc(8% - 50px); right: 10%; border: 3px solid #f5fafd; }

/* After the frames: login + find-a-salon, same classes as the live header. */
.pv-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 76px;
}

.pv-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.pv-account {
  font-size: 13.5px;
  font-weight: 700;
  color: #00a8ec;
  text-decoration: none;
  white-space: nowrap;
}

.pv-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 27px;
  border-radius: 99px;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
}

.pv-btn--primary {
  background: #e3007b;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(227, 0, 123, 0.35);
}

.pv-hero-find {
  padding: 11px 22px;
  font-size: 14.5px;
}

@media (max-width: 40rem) {
  .pv-hero-find {
    padding: 8px 14px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pv-claim em::after,
  .pv-hero-img:not(.is-ready)::after {
    animation: none;
  }
}

/* The logo animation, earned with four tickles on the logo. Its code is a
   lazily fetched chunk (src/splash.js); only these few rules are kept here, so
   the overlay is styled the moment that chunk builds it. */
/* No scrolling and no scrollbar while the intro covers the page. The script
   pads by the scrollbar's width so removing it shifts nothing. */
.bp-splash-lock {
  overflow: hidden;
}

/* Clicking it replays the intro, and every tickle on the way pushes the logo
   further toward red. A flat red layer takes over the mark's hue and saturation
   while the logo keeps its own light and shade, so the magenta "bubble" and the
   cyan "point" land on the same red — a hue rotation cannot do that, it can only
   turn every colour by the same angle and sends one of the two into green. */
.first-paint-logo,
.pv-logo {
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}

/* The wrapper is the flex item the logo used to be: it carries the size, the
   red layer, and the flinch, so the colour moves with the logo rather than
   sitting still behind it. */
.pv-logo-wrap {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 168px;
  max-width: 45%;
  line-height: 0;
  cursor: pointer;
  isolation: isolate;
  transition: filter 320ms ease;
}

/* Masked to the logo's own alpha, so only the mark reddens and never its box. */
.pv-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #e00614;
  mix-blend-mode: color;
  -webkit-mask-image: url(/static/bubblepoint_sm.webp);
  mask-image: url(/static/bubblepoint_sm.webp);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.pv-logo-wrap.is-tickle-fade,
.pv-logo-wrap.is-tickle-fade::after {
  transition-duration: 2.2s;
}

/* The build-up is a progress meter: the first tap barely warms the mark, the
   second pulls more of the red over, and the third — the one that bursts into
   the film — is a deep, dark red. */
.pv-logo-wrap[data-tickle="1"] {
  filter: saturate(1.8) brightness(1.02);
}

.pv-logo-wrap[data-tickle="1"]::after {
  opacity: 0.45;
}

.pv-logo-wrap[data-tickle="2"] {
  filter: saturate(2.1) brightness(0.96) contrast(1.08);
}

.pv-logo-wrap[data-tickle="2"]::after {
  opacity: 0.75;
}

.pv-logo-wrap[data-tickle="3"] {
  filter: saturate(2.2) brightness(0.95) contrast(1.1);
}

.pv-logo-wrap[data-tickle="3"]::after {
  opacity: 0.85;
}

.bp-splash-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #000000;
}

.bp-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000000;
  cursor: default;
  opacity: 1;
  /* Slow cover first. The shrink is driven from splash.js so a hidden tab
     cannot skip it the way a CSS transition would. */
  transition: opacity 1.6s ease;
}

.bp-splash.is-entering {
  opacity: 0;
}

.bp-splash.is-leaving {
  pointer-events: none;
  transition: none;
}

.bp-splash.is-abort {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.bp-splash-video {
  /* Square source: as large as fits, touching the edges on the shorter side. */
  width: min(100vw, 100vh);
  height: auto;
  transform-origin: top left;
  transition: none;
  /* Hold the first frame back until the cover is fully black. */
  opacity: 0;
}

.bp-splash.is-playing .bp-splash-video {
  opacity: 1;
}