:root{
  --bg1:#2a0c12;
  --bg2:#120509;
  --wine:#6b0f1b;
  --text:#3a141b;

  --doorDur:1900ms;
  --bowDur:1300ms;
  --roseDur:1200ms;

  --drawFrame:2.35s;
  --drawCols:2.85s;
  --drawCrown:2.15s;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:grid;
  place-items:center;
  background:radial-gradient(1200px 800px at 50% 15%, #4a0e18 0%, var(--bg1) 42%, var(--bg2) 100%);
  color:var(--text);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
}

#app{width:100%; display:grid; place-items:center; padding:22px 10px}

#stage{
  width:min(92vw, 440px);
  aspect-ratio:454 / 777;
  position:relative;
  transform-style:preserve-3d;
  perspective:1200px;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}

#bg{
  position:absolute;
  inset:-12%;
  background:
    radial-gradient(220px 220px at 25% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(300px 240px at 80% 70%, rgba(255,255,255,0.05), transparent 65%),
    radial-gradient(700px 520px at 50% 60%, rgba(0,0,0,0.28), transparent 70%);
  filter:blur(0.2px);
}

#sparkles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:8;
  mix-blend-mode:screen;
  opacity:0.85;
}

#card{position:absolute; inset:0; transform:translateZ(-1px)}

#paper{
  position:absolute;
  inset:0;
  background-image:url('assets/paper_bg.png');
  background-size:cover;
  background-position:center;
}

#roses{position:absolute; inset:0; pointer-events:none; z-index:2}

.rose{
  position:absolute;
  left:0;
  top:0;
  transform:translate(-50%,-50%);
  will-change:transform,left,top,opacity;
  transition:
    transform var(--roseDur) cubic-bezier(.16,.9,.14,1),
    left var(--roseDur) cubic-bezier(.16,.9,.14,1),
    top var(--roseDur) cubic-bezier(.16,.9,.14,1),
    opacity 750ms ease;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.22));
  opacity:0;
}

#gold{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:translateY(7px);
  transition:opacity 650ms ease, transform 900ms ease;
  /* Hide the golden frame entirely; previous adjustments never aligned with
   * the new card.  Setting display to none ensures the SVG never
   * appears. */
  display:none !important;
}

#stage.is-open #gold{
  /* Keep the frame hidden even when the card is open */
  display:none !important;
}

#gold .draw{stroke-dasharray:1; stroke-dashoffset:1}
#gold.anim .draw{animation:draw var(--drawFrame) ease forwards}
#gold.anim #cols .draw{animation-duration:var(--drawCols)}
#gold.anim #crown .draw{animation-duration:var(--drawCrown)}
#gold[data-variant="title"] #cols{opacity:0}

@keyframes draw{to{stroke-dashoffset:0}}

#content{
  position:absolute;
  inset:14% 12% 16% 12%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:4;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 720ms ease, transform 950ms cubic-bezier(.16,.9,.14,1);
}

#stage.is-open #content{
  opacity:1;
  transform:none;
  transition-delay:680ms;
}

#text{width:100%}
.line{margin:0}

/*
 * Adjusted small caps styling to improve readability on small text.
 * Reduced letter spacing and increased font size for a more elegant
 * appearance as requested by the user.
 */
.smallCaps{
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  /* reduce excessive tracking */
  letter-spacing: 0.18em;
  /* further increase the size for greater prominence on the cover */
  /*
   * La usuaria comentó que el texto “MIS XV AÑOS” aún lucía un poco
   * pequeño.  Subimos la altura de fuente a 20px para hacerlo más
   * visible sin perder la armonía con el resto de los textos.  Si
   * necesitaras un ajuste específico en la portada solamente, se
   * podría hacer desde el script, pero este cambio global cumple con
   * el objetivo.
   */
  font-size: 22px;
  opacity: 0.9;
}

.roman{
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
  font-size:78px;
  line-height:0.92;
  color:#5a0f18;
  text-shadow:0 1px 0 rgba(255,255,255,0.35), 0 12px 20px rgba(0,0,0,0.10);
}

.script{
  font-family:"Great Vibes","Snell Roundhand","Segoe Script",cursive;
  font-weight:400;
  color:#6a0f1c;
  font-size:62px;
  line-height:1.02;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.35),
    0 12px 22px rgba(0,0,0,0.12),
    0 0 0.6px rgba(106,15,28,0.65);
}

.body{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:18px;
  line-height:1.35;
  color:#3b1218;
}

/*
 * Update detail titles: slightly larger and tighter spacing to better
 * match the refined aesthetic desired by the client.
 */
.detailTitle{
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
  letter-spacing:0.15em;
  font-size:13px;
  opacity:0.88;
}

.bigDate{
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
  font-size:72px;
  line-height:0.95;
  color:#5a0f18;
}

#tapHint{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(3.8% + env(safe-area-inset-bottom));
  text-align:center;
  font-family:"Cinzel", Georgia, serif;
  font-size:11px;
  letter-spacing:0.26em;
  color:#2c0b10;
  z-index:7;
  opacity:0;
  transform:translateY(7px);
  transition:opacity 650ms ease, transform 900ms ease;
}

/* ------------------------------------------------------------------
 * Custom modifications below are added to address user feedback.
 * They adjust the door behaviour, hide roses when the card is closed,
 * refine the gold frame alignment, improve the bow appearance and hint
 * readability, and add partial door states for subtle movement on
 * initial taps.
 */

/* Align the gold frame more tightly inside the paper so it does not
 * protrude beyond the white card area. Removing the vertical
 * translation ensures the frame sits flush with the paper. */
/*
 * Align the gold frame flush with the white card.  Removing any
 * inset prevents a stray wine-coloured gap from appearing around the
 * paper edges, as noted by the client.  Without translation the
 * frame sits exactly inside the paper.
 */
/*
 * Expand the gold frame slightly beyond the paper horizontally so the sides
 * sit flush with the white card edges.  Using negative side offsets
 * enlarges the width of the SVG container, eliminating the maroon strip
 * visible on the left and right edges.  Vertical insets remain zero so
 * the top and bottom align perfectly.
 */
#gold{
  position:absolute;
  top:0;
  bottom:0;
  /* Negative horizontal offsets enlarge the frame width.  A larger value helps
   * eliminate the thin maroon strip that remained on the sides.  Values
   * around -1% expand the SVG enough to fully reach the card edges.
   */
  /* Expand horizontally to ensure no wine‑coloured gap remains on either side
   * of the white card.  A slightly larger negative offset fully covers
   * the card edges. */
  /* Further enlarge the horizontal offset to fully cover the sides of
   * the white card.  Increasing to -2% eliminates the remaining
   * maroon gap observed along the edges. */
  /* Expand further horizontally; -3% ensures the gold frame fully reaches
   * the paper edges on both sides without leaving a gap. */
  /* Expand dramatically to cover any residual side gaps.  At -4%
   * horizontal expansion, the golden frame extends well beyond the
   * white card edges, ensuring no maroon strip is visible. */
  /* Final adjustment: widen the frame slightly further.  A -4.5%
   * offset eliminates the last sliver of maroon border along the
   * sides without overshooting the paper edge. */
  /* Further widen the golden frame horizontally so that it sits flush with
   * the white paper on both sides.  Previous adjustments left a subtle
   * wine-coloured gap at the edges.  By increasing the negative offsets
   * to 6%, we ensure the SVG extends beyond the paper edges, fully
   * covering any remaining border on the left and right. */
  left:-6%;
  right:-6%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:none;
  transition:opacity 650ms ease, transform 900ms ease;

  /* Hide the golden frame entirely.  Even though this rule attempted to
   * expand the frame horizontally, the client requested removal of the
   * frame, so display:none ensures it never renders. */
  display:none !important;
}
#stage.is-open #gold{
  opacity:1;
  transform:none;
}

/* Hide roses until the invitation is opened; prevents petals from
 * showing outside the doors when the card is still closed. */
#roses{
  opacity:0;
  transition:opacity 600ms ease;
}
#stage.is-open #roses{
  opacity:1;
}

/* Soften the edges of the doors by rounding corners and applying
 * rounded corners to the images as well. This helps mask rough
 * cut lines and creates a smoother appearance. */
.door{
  border-radius:8px;
}
.door img{
  border-radius:8px;
}

/* Introduce intermediate door positions for the first two taps. The
 * doors rotate slightly on each tap, giving feedback before the
 * invitation fully opens on the third tap. */
#stage.doors-step1 .door--left{
  transform:rotateY(-30deg) translateZ(5px);
}
#stage.doors-step1 .door--right{
  transform:rotateY(30deg) translateZ(5px);
}
#stage.doors-step2 .door--left{
  transform:rotateY(-60deg) translateZ(5px);
}
#stage.doors-step2 .door--right{
  transform:rotateY(60deg) translateZ(5px);
}

/* Make the tap hint more legible by increasing its size and adding a
 * slight text shadow. */
#tapHint{
  font-size:13px;
  color:#4a0d15;
  text-shadow:0 1px 2px rgba(255,255,255,0.4);
}

/* Remove the moving shimmer effect over the bow to avoid the
 * impression of a shadow or video playing across it. */
.bowFull::after{
  display:none;
}

/* Hide the decorative band behind the bow; the user disliked the
 * horizontal strip. */
#ribbon{
  display:none !important;
}


#stage.is-open #tapHint{opacity:0.64; transform:none; transition-delay:1050ms}

#cover{position:absolute; inset:0; transform-style:preserve-3d}

#doors{position:absolute; inset:0; display:flex; gap:0; z-index:1}

.door{
  width:50%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform var(--doorDur) cubic-bezier(.14,.92,.1,1);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.38));
}

.door img{width:100%; height:100%; object-fit:cover; backface-visibility:hidden; display:block}

.door--left{transform-origin:0% 50%}
.door--right{transform-origin:100% 50%}

#stage.doors-open .door--left{transform:rotateY(-112deg) translateZ(5px)}
#stage.doors-open .door--right{transform:rotateY(112deg) translateZ(5px)}

/*
 * The decorative ribbon behind the bow is entirely removed as per the
 * client’s feedback.  We retain the selector definitions to avoid any
 * residual styling but set display to none so it never appears.
 */
#ribbon{display:none !important;}

#stage.bow-cut #ribbon{display:none !important;}

#bow{
  position:absolute;
  left:50%;
  /* Center vertically within the cover.  A 50% offset centers the bow on the doors. */
  top:50%;
  /* Increase the overall width and flatten the aspect ratio so the bow
   * sits horizontally across both doors.  The bow now occupies most of
   * the card width without spilling past the edges. */
  /* Set a slightly smaller width for the bow so it sits comfortably
   * across the doors without overwhelming the design.  Use a wider
   * aspect ratio (5:2) to emphasise the horizontal shape of the
   * bow and de‑emphasise its height. */
  width:85%;
  aspect-ratio:5 / 2;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:3;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.34));
}

.bowFull{
  position:absolute;
  inset:0;
  /* Use the champagne‑coloured bow graphic with transparent background.  The
   * new file has been cleaned and trimmed to remove any unwanted artifacts.
   * We load it here and adjust its colouring via CSS filters to achieve a
   * richer golden tone. */
  /* Use the client‑provided golden bow with crown.  This image has
   * transparent background and a rich golden colour. */
  background-image:url('assets/bow.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  /*
   * Enhance the bow’s appearance: increase brightness and saturation for a
   * richer golden tone while retaining subtle shadows. The user asked
   * for a more realistic moño, so we keep the existing artwork but
   * adjust its colours via CSS filters. You can replace the underlying
   * PNG file later with a fully custom bow if desired.
   */
  /*
   * Tone down the bow’s colour: reduce the brightness and saturation
   * so it appears more natural and closer to the soft champagne-gold
   * requested by the client.  We also soften the drop shadows to
   * avoid an overly harsh glow.
   */
  /*
   * Adjust the appearance of the bow to feel more natural.  The new
   * champagne‑coloured bow graphic already has a soft sheen, so we
   * reduce the saturation slightly and avoid overly brightening it.
   * Subtle drop shadows remain to lift it from the doors without
   * producing a harsh glow.
   */
  /* Apply colour corrections to the bow: increase brightness and
   * saturation to shift the soft champagne hue toward a warmer gold.  A
   * subtle drop‑shadow remains to lift the bow from the doors without
   * introducing harsh edges. */
  /* Adjust the bow’s appearance to achieve a warmer golden tone.  We use
   * moderate brightness and saturation to enhance the colour while
   * retaining subtle shadows. */
  /* Apply gentle colour correction to the bow.  We slightly increase
   * brightness and saturation to enhance the golden sheen while
   * keeping the appearance natural. */
  filter:
    drop-shadow(0 0 3px rgba(0,0,0,.28))
    brightness(1.05)
    saturate(1.10);
  opacity:1;
  transition:opacity 320ms ease;
}

.bowFull::after{
  /*
   * Disable the shimmer overlay entirely.  The user found the moving
   * highlight distracting, so we hide the pseudo‑element rather than
   * drawing it.  This selector still exists to override earlier rules.
   */
  display:none !important;
}

@keyframes shimmer{to{transform:translateX(40%)}}

#stage.bow-cut .bowFull{opacity:0}

.bowHalf{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  /* Reference the new champagne bow here so the halves align perfectly. */
  /* Match the halves to the main bow using the same golden image */
  background-image:url('assets/bow.png');
  background-repeat:no-repeat;
  background-size:200% 100%;
  transition:opacity 450ms ease;
  /* Apply similar adjustments for the bow halves: reduce saturation and
   * maintain gentle shadows to match the new bow artwork.
   */
  /* Matching colour adjustments for the bow halves.  Increase brightness
   * and saturation so the halves share the same warm golden hue as the
   * full bow above. */
  /* Apply similar adjustments for the halves.  We use a slightly stronger
   * shadow to maintain separation from the doors while enhancing
   * brightness and saturation. */
  /* Use the same gentle colour correction for the bow halves so they
   * blend seamlessly with the full bow. */
  filter:
    drop-shadow(0 0 3px rgba(0,0,0,.28))
    brightness(1.05)
    saturate(1.10);
}

.bowHalf--left{left:0; background-position:left center; transform-origin:100% 50%}
.bowHalf--right{right:0; background-position:right center; transform-origin:0% 50%}

#stage.bow-cut .bowHalf--left{animation:bowFallL var(--bowDur) cubic-bezier(.12,.9,.2,1) forwards}
#stage.bow-cut .bowHalf--right{animation:bowFallR var(--bowDur) cubic-bezier(.12,.9,.2,1) forwards}

@keyframes bowFallL{
  0%{transform:translateX(0) rotate(0deg); opacity:1}
  14%{transform:translateX(-10px) rotate(-7deg)}
  30%{transform:translateX(-18px) rotate(-16deg)}
  100%{transform:translate(-30px, 310px) rotate(-42deg); opacity:0}
}

@keyframes bowFallR{
  0%{transform:translateX(0) rotate(0deg); opacity:1}
  14%{transform:translateX(10px) rotate(7deg)}
  30%{transform:translateX(18px) rotate(16deg)}
  100%{transform:translate(30px, 310px) rotate(42deg); opacity:0}
}

#coverHint{
  position:absolute;
  left:50%;
  bottom:calc(4.2% + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(88%, 380px);
  padding:12px 14px;
  text-align:center;
  z-index:6;
  color:rgba(255,255,255,.92);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.02em;
  background:rgba(15,5,9,0.28);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  box-shadow:0 16px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0.98;
  transition:opacity 520ms ease, transform 850ms cubic-bezier(.16,.9,.14,1);
}

#coverHint b{font-weight:700}

#stage.is-open #coverHint{opacity:0; transform:translateX(-50%) translateY(10px)}

@media (max-width:360px){
  .roman{font-size:70px}
  .script{font-size:56px}
  .body{font-size:17px}
}