:root {
  --page-bg: #f4f4f4;
  --frame-border: #2c2c2c;
  --name-color: #333;
  --date-color: #555;
  --button-color: #888;
  --open-duration: 1.5s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Fraunces", serif;
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Full-viewport scene that centers the stage */
.scene {
  width: 100%;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--page-bg);
}

/* The stage holds all stacked layers.
   Mobile: full-bleed. Desktop: phone frame (see media query). */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--page-bg);
  container-type: size;
}

/* Shared positioning for every stacked image layer */
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.layer-bg {
  z-index: 1;
}

.layer-card {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* The displayed art rectangle. Sized as a true "contain" fit of the card
   art (675x1200) inside the stage, using the stage's container units. This
   guarantees the box always equals the visible art, so the text overlay
   stays aligned with the floral frame at every viewport width/height.
   (Kept separate from .card-inner so the container units resolve against
   the stage, not against .card-inner's own inline-size container.) */
.card-fit {
  width: min(100cqw, 56.25cqh);
  height: min(177.7778cqw, 100cqh);
  margin: auto;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: url("assets/card_blank.jpg") center / contain no-repeat;
  container-type: inline-size;
  filter: drop-shadow(rgba(0, 0, 0, 0.15) 0 4px 8px)
    drop-shadow(rgba(0, 0, 0, 0.1) 0 1px 3px);
  transition: filter 0.6s var(--ease);
}

/* White panel that hides the baked-in text, keeping the floral frame.
   Positioned just inside the original blue frame line. */
.card-panel {
  position: absolute;
  left: 7.6%;
  right: 7.7%;
  top: 15%;
  bottom: 14.5%;
  box-sizing: border-box;
  padding: 1.4cqw 3.6cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Card typography (sizes in cqw scale with the card) ---- */
.ci-name {
  font-family: "Ballet", cursive;
  font-weight: 400;
  color: #33597f;
  font-size: 13cqw;
  line-height: 1.2;
  word-spacing: 1.5cqw;
  white-space: nowrap;
  margin: 0 0 0.7cqw;
}

.ci-line {
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  color: #2b2b2b;
  font-size: 2.55cqw;
  letter-spacing: 0.12cqw;
  line-height: 1.45;
  margin: 0.3cqw 0;
}

.ci-line.b,
.ci-line b {
  font-weight: 700;
}

.ci-line.blue {
  color: #33597f;
  font-weight: 600;
}

.sp {
  margin-top: 3cqw;
}

/* Date block */
.ci-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5cqw;
  margin: 1.6cqw 0 0.9cqw;
}

.ci-date-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4cqw;
}

.ci-hearts {
  color: #c2a14e;
  font-size: 1.9cqw;
  letter-spacing: 0.5cqw;
  line-height: 1;
}

.ci-date-label {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #2b2b2b;
  font-size: 2.7cqw;
  letter-spacing: 0.1cqw;
}

.ci-date-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.ci-date-num {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: #2b2b2b;
  font-size: 7cqw;
  line-height: 1;
}

.ci-date-month {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #2b2b2b;
  font-size: 2.6cqw;
  letter-spacing: 0.1cqw;
  margin-top: 0.4cqw;
}

.ci-script {
  font-family: "Ballet", cursive;
  color: #33597f;
  font-size: 7cqw;
  line-height: 1.1;
  margin: 1.8cqw 0 0.4cqw;
}

.ci-para {
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  color: #2b2b2b;
  font-size: 2.35cqw;
  letter-spacing: 0.1cqw;
  line-height: 1.45;
  margin-left: 1cqw;
  margin-right: 1cqw;
}

.layer-pocket {
  z-index: 3;
  pointer-events: none;
}

.layer-front {
  z-index: 4;
  object-fit: cover;
  transition: transform var(--open-duration) var(--ease);
}

.layer-flap {
  z-index: 5;
  object-fit: contain;
  cursor: pointer;
  transition: transform var(--open-duration) var(--ease);
}

/* Name + date overlay */
.overlay-top {
  position: absolute;
  top: 18%;
  width: 100%;
  text-align: center;
  z-index: 6;
  padding: 0 16px;
  pointer-events: none;
  transition: transform var(--open-duration) var(--ease);
}

.name {
  font-family: "Imperial Script", cursive;
  font-size: 57px;
  line-height: 1.1;
  color: var(--name-color);
  margin-bottom: 2rem;
  text-transform: capitalize;
  white-space: nowrap;
  word-spacing: 0.2em;
  display: inline-block;
}

.date {
  font-family: "Fraunces", serif;
  font-size: 0.95rem;
  letter-spacing: 4px;
  color: var(--date-color);
  text-transform: uppercase;
  font-weight: 500;
}

/* Tap hint button */
.overlay-button {
  position: absolute;
  bottom: 17%;
  width: 100%;
  text-align: center;
  z-index: 6;
  font-family: "Fraunces", serif;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--button-color);
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.tap-icon {
  width: 44px;
  height: 44px;
  fill: var(--button-color);
}

/* ---- State: opened (envelope flap + front + name slide away) ---- */
.stage.is-open .layer-front,
.stage.is-open .layer-flap,
.stage.is-open .overlay-top {
  transform: translateY(-110vh);
}

.stage.is-open .layer-front,
.stage.is-open .layer-flap {
  pointer-events: none;
}

/* ---- State: details (card extracts to the front) ---- */
.stage.is-details .layer-card {
  animation: slideOut70AndBack var(--open-duration) var(--ease) forwards;
}

.stage.is-details .card-inner {
  filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 15px 30px) !important;
}

.stage.is-details .overlay-button {
  opacity: 0;
  pointer-events: none;
}

@keyframes slideOut70AndBack {
  0% {
    z-index: 2;
    transform: translateY(0);
  }
  45% {
    z-index: 2;
    transform: translateY(-70%);
  }
  50% {
    z-index: 10;
    transform: translateY(-70%);
  }
  100% {
    z-index: 10;
    transform: translateY(0);
  }
}

@keyframes tapPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
}

.tap-pulse {
  animation: tapPulse 1.3s ease-in-out infinite;
}

/* Desktop: present the invitation inside a phone frame */
@media (min-width: 640px) {
  .stage {
    width: 100%;
    height: 100%;
    max-width: 400px;
    max-height: 711px;
    border: 7px solid var(--frame-border);
    border-radius: 30px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
}