@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root {
  --bg: #fce8ef;
  --bg-soft: #fff4f7;
  --ink: #4a2132;
  --muted: #a66882;
  --pink-1: #f373ab;
  --pink-2: #ee2b93;
  --white: #ffffff;
  --ring-track: rgba(255,255,255,.54);
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

body {
  min-height: 100svh;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button, img { -webkit-touch-callout: none; }

.app-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 41%, rgba(255,255,255,.72) 0 18%, transparent 42%),
    linear-gradient(180deg, var(--bg-soft), var(--bg));
}

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.985);
  transition: opacity .52s ease, transform .52s ease, visibility .52s;
}

.screen--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.content {
  width: min(100%, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 5px;
  font-size: clamp(12px, 2.7vw, 14px);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
}

.brand-title {
  margin: 0 0 34px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(39px, 10vw, 62px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.025em;
}

.portrait-button {
  position: relative;
  width: min(78vw, 400px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

.portrait-button:focus-visible {
  outline: 4px solid rgba(238,43,147,.28);
  outline-offset: 7px;
}

.portrait-wrap {
  position: absolute;
  inset: 5.5%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.92);
  background: #ddd;
  box-shadow:
    0 22px 65px rgba(173,76,114,.22),
    0 0 0 1px rgba(74,33,50,.06);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.portrait-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(30,10,18,.55) 100%);
  pointer-events: none;
}

.portrait-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transform: scale(1.04);
  transition: transform 2.6s cubic-bezier(.2,.75,.2,1), filter .3s ease;
}

.progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(238,43,147,.16));
}

.progress-ring__track,
.progress-ring__value {
  fill: none;
  stroke-width: 4;
}

.progress-ring__track { stroke: var(--ring-track); }

.progress-ring__value {
  stroke: var(--pink-2);
  stroke-linecap: round;
  stroke-dasharray: 314.159;
  stroke-dashoffset: 314.159;
  transition: stroke-dashoffset .08s linear;
}

.hold-label {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 2;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--white);
  font-size: clamp(16px, 4.5vw, 24px);
  font-weight: 600;
  letter-spacing: .24em;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.hold-subtext {
  position: absolute;
  left: 50%;
  bottom: 9%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(255,255,255,.82);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s ease;
}

.helper {
  min-height: 20px;
  margin: 19px 0 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
}

.portrait-button.is-holding .portrait-wrap {
  transform: scale(.985);
  box-shadow:
    0 28px 75px rgba(238,43,147,.30),
    0 0 0 7px rgba(255,255,255,.26);
}

.portrait-button.is-holding img {
  transform: scale(1.12);
  filter: saturate(1.08) brightness(1.03);
}

.portrait-button.is-holding .hold-subtext { opacity: 1; }

.enter-content {
  gap: 12px;
  transform: translateY(-2vh);
}

.almost {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(48px, 12vw, 78px);
  line-height: 1;
  letter-spacing: -.035em;
}

.come-see {
  margin: 3px 0 39px;
  color: var(--muted);
  font-size: clamp(19px, 5vw, 29px);
  letter-spacing: .04em;
}

.enter-button {
  width: min(74vw, 380px);
  min-height: 72px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--pink-1), var(--pink-2));
  color: white;
  font: inherit;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: .16em;
  cursor: pointer;
  box-shadow: 0 18px 34px rgba(238,43,147,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}

.enter-button:active {
  transform: scale(.98);
  box-shadow: 0 10px 22px rgba(238,43,147,.20);
}

.enter-button:focus-visible {
  outline: 4px solid rgba(238,43,147,.25);
  outline-offset: 5px;
}

.tiny-note {
  margin: 6px 0 0;
  color: rgba(166,104,130,.7);
  font-size: 12px;
  letter-spacing: .06em;
}

.ambient-hearts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-hearts span {
  position: absolute;
  color: rgba(238,43,147,.09);
  font-family: Georgia, serif;
  animation: float 9s ease-in-out infinite;
}

.ambient-hearts span:nth-child(1) { left: 11%; top: 16%; font-size: 42px; }
.ambient-hearts span:nth-child(2) { right: 10%; bottom: 14%; font-size: 64px; animation-delay: -3s; }
.ambient-hearts span:nth-child(3) { left: 38%; bottom: 5%; font-size: 34px; animation-delay: -6s; }
.ambient-hearts--enter span:nth-child(4) { right: 22%; top: 20%; font-size: 32px; animation-delay: -2s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: .45; }
  50% { transform: translateY(-18px) rotate(7deg); opacity: 1; }
}

@media (max-height: 700px) {
  .brand-title { margin-bottom: 20px; }
  .portrait-button { width: min(66vw, 330px); }
  .helper { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}