/* ==========================================================
   Abertura: flores nascendo das bordas + envelope com selo
   ========================================================== */
.op {
  position: fixed; inset: 0; z-index: 70; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; color: #F4ECD8; user-select: none; -webkit-user-select: none;
  background: #121A0D;
}
.op[hidden] { display: none; }
.op-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%, #33422A 0%, #222D1A 45%, #141C0F 78%, #0C1209 100%);
}
/* textura de veludo */
.op-bg::after {
  content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .55 0 0 0 0 .4 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.op-light {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--lx, 50%) var(--ly, 48%), rgba(240, 214, 150, .22) 0%, rgba(240, 214, 150, .07) 22%, transparent 48%);
}
.op-flash {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  pointer-events: none; opacity: 0; z-index: 6;
  background: radial-gradient(circle, rgba(255, 244, 214, .95) 0%, rgba(240, 210, 140, .45) 35%, transparent 70%);
}

/* ---------- Flores das bordas ---------- */
.op-flora { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.op-corner { position: absolute; width: max(40vw, 33vh); max-width: 640px; aspect-ratio: 1; }
.op-corner .sway { position: absolute; inset: 0; }
.op-corner canvas.stems { position: absolute; left: -5%; top: -5%; width: 120%; height: 120%; }
.op-corner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.op-corner.tl { left: 0; top: 0; }
.op-corner.tr { right: 0; top: 0; transform: scaleX(-1); }
.op-corner.bl { left: 0; bottom: 0; transform: scaleY(-1); }
.op-corner.br { right: 0; bottom: 0; transform: scale(-1, -1); }
.op-corner .sway { transform-origin: 0 0; animation: opSway 9s ease-in-out infinite; }
.op-corner.tr .sway { animation-delay: -2.2s; }
.op-corner.bl .sway { animation-delay: -4.5s; }
.op-corner.br .sway { animation-delay: -6.7s; }
@keyframes opSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }

.op-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; }

/* ---------- Topo ---------- */
.op-skip {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 12;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244, 236, 216, .55); padding: 10px 6px; opacity: 0; transition: color .3s;
}
.op-skip:hover { color: #F0DDA8; }

.op-head { position: relative; z-index: 5; text-align: center; margin-bottom: clamp(14px, 3.4vh, 34px); max-width: 92vw; }
.op-eyebrow {
  font-family: var(--sans); font-size: clamp(.62rem, 1.9vw, .74rem); letter-spacing: .42em; text-transform: uppercase;
  color: #CDB57E; margin-bottom: 4px; opacity: 0;
}
.op-name {
  font-family: var(--script); font-weight: 400; line-height: 1.15;
  font-size: clamp(2.3rem, 8.4vw, 4.4rem); padding: 0 .2em;
  filter: drop-shadow(0 2px 16px rgba(230, 200, 130, .28));
}
.op-name { position: relative; display: inline-block; }
.op-name .nm {
  display: inline-block; opacity: 0; padding: 0 .28em; clip-path: inset(-20% 100% -20% 0%);
  background: var(--gold-grad-light); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: opShine 6s linear infinite;
}
.op-pen {
  position: absolute; top: 55%; left: 0; width: 8px; height: 8px; margin: -4px; border-radius: 50%; opacity: 0;
  background: #FFF4D6; box-shadow: 0 0 10px 4px rgba(255, 226, 160, .8), 0 0 30px 10px rgba(230, 190, 110, .35);
}
@keyframes opShine { from { background-position: 0% 0; } to { background-position: -220% 0; } }

/* ---------- Envelope ---------- */
.op-stage { position: relative; z-index: 4; width: min(84vw, 470px); perspective: 1600px; }
.op-float { position: relative; transform-style: flat; }
.op-env {
  position: relative; width: 100%; aspect-ratio: 10 / 7; cursor: pointer; container-type: inline-size;
  filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)) drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
  opacity: 0;
}
.op-env > * { position: absolute; }
.op-env-back {
  inset: 0; z-index: 1; border-radius: 3px; overflow: hidden;
  background: #2A3620 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C9A85E' stroke-width='.8' opacity='.55'%3E%3Cpath d='M22 6c4 6 4 10 0 16-4-6-4-10 0-16zM22 38c4-6 4-10 0-16-4 6-4 10 0 16zM6 22c6-4 10-4 16 0-6 4-10 4-16 0zM38 22c-6-4-10-4-16 0 6 4 10 4 16 0z'/%3E%3Ccircle cx='22' cy='22' r='2'/%3E%3Ccircle cx='0' cy='0' r='3'/%3E%3Ccircle cx='44' cy='0' r='3'/%3E%3Ccircle cx='0' cy='44' r='3'/%3E%3Ccircle cx='44' cy='44' r='3'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 7.5cqw 7.5cqw;
  box-shadow: inset 0 14px 30px rgba(0, 0, 0, .45);
}
.op-glow {
  z-index: 2; left: 10%; right: 10%; top: -10%; height: 70%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 236, 180, .55), transparent 65%);
  filter: blur(8px);
}
.op-front, .op-flap { inset: 0; width: 100%; height: 100%; }
.op-front { z-index: 4; pointer-events: none; }
.op-addr {
  z-index: 5; left: 0; right: 0; bottom: 5%; text-align: center; pointer-events: none;
  font-family: var(--serif); color: #8A6A2E; line-height: 1.25;
}
.op-addr small { display: block; font-family: var(--sans); font-size: 2cqw; letter-spacing: .5em; text-transform: uppercase; color: #A88A4F; }
.op-addr span {
  display: block; font-family: var(--script); font-size: 6.4cqw; padding: 0 .2em;
  background: linear-gradient(100deg, #7E6128, #C9A75E 40%, #8A6A2E 70%, #B8924A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.op-flap { z-index: 6; transform-origin: 50% 0; transform-style: preserve-3d; pointer-events: none; }
.op-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: visible; }
.op-flap .flap-in { transform: rotateX(180deg); }

/* brilho que passa pelo papel */
.op-sheen { z-index: 6; inset: 0; overflow: hidden; pointer-events: none; border-radius: 3px; mix-blend-mode: soft-light; }
.op-sheen::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; width: 34%; left: -50%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: opSheen 5.5s ease-in-out infinite 2.4s;
}
@keyframes opSheen { 0% { left: -50%; } 45%, 100% { left: 125%; } }

/* laço de cetim */
.op-ribbon { z-index: 7; left: -1.2%; right: -1.2%; top: 54.5%; height: 6.4cqw; pointer-events: none; }
.op-ribbon i {
  position: absolute; top: 0; bottom: 0; width: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .22) 28%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(90deg, #2B3620, #4A5A33 30%, #5E7044 50%, #44542E 70%, #2B3620);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
}
.op-ribbon i::before, .op-ribbon i::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: rgba(217, 192, 138, .75); }
.op-ribbon i::before { top: 14%; } .op-ribbon i::after { bottom: 14%; }
.op-ribbon .rb-l { left: 0; border-radius: 2px 0 0 2px; }
.op-ribbon .rb-r { right: 0; border-radius: 0 2px 2px 0; }

/* selo de cera */
.op-seal {
  z-index: 8; left: 50%; top: 57.6%; width: 27cqw; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.op-seal svg { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.op-seal:focus-visible { outline: 2px solid #E6CC8A; outline-offset: 6px; }
.op-seal .halo {
  position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(240, 214, 150, .7); animation: opHalo 2.6s ease-out infinite;
}
.op-seal .halo + .halo { animation-delay: 1.3s; }
@keyframes opHalo { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
.op.opening .op-seal .halo { display: none; }

.op-hint {
  position: relative; z-index: 5; margin-top: clamp(18px, 4vh, 40px); opacity: 0;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .36em; text-transform: uppercase; color: #CDB57E;
  display: flex; align-items: center; gap: 12px;
}
.op-hint::before, .op-hint::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #CDB57E); }
.op-hint::after { transform: scaleX(-1); }
.op-hint span { animation: opBlink 2.4s ease-in-out infinite; }
@keyframes opBlink { 50% { opacity: .45; } }

/* ---------- Carta (dobrada ao meio) ---------- */
.op-letter {
  z-index: 3; left: 6%; top: 5.5%; width: 88%; aspect-ratio: 100 / 68; container-type: inline-size;
  transform-origin: 50% 50%;
}
.op-letter.out { position: fixed; z-index: 11; left: 0; top: 0; margin: 0; }
.lt-panel {
  position: absolute; left: 0; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(180deg, #FFFDF7, #F8F1E2);
  color: #3A3F2E; text-align: center;
}
.lt-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .55 0 0 0 0 .45 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lt-top { top: 0; z-index: 2; border-radius: 3px 3px 0 0; box-shadow: 0 1px 0 rgba(176, 141, 76, .25); }
.lt-bot {
  top: 100%; z-index: 1; border-radius: 0 0 3px 3px; transform-origin: 50% 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.lt-bot .crease {
  position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 95, 50, .22), transparent);
}
/* moldura dourada */
.lt-top .frame, .lt-bot .frame { position: absolute; inset: 3.6cqw; pointer-events: none; border: 1px solid rgba(176, 141, 76, .55); }
.lt-top .frame { bottom: -1px; border-bottom: 0; }
.lt-bot .frame { top: -1px; border-top: 0; }
.lt-top .frame::after, .lt-bot .frame::after { content: ''; position: absolute; inset: 1.1cqw; border: .5px solid rgba(176, 141, 76, .4); }
.lt-top .frame::after { bottom: -1px; border-bottom: 0; }
.lt-bot .frame::after { top: -1px; border-top: 0; }

.lt-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 7cqw 9cqw; }
.lt-top .lt-content { justify-content: flex-end; padding-bottom: 5cqw; }
.lt-bot .lt-content { justify-content: flex-start; padding-top: 4cqw; }
.lt-sprig { width: 26cqw; height: auto; margin-bottom: 1.5cqw; overflow: visible; }
.lt-kicker { font-family: var(--sans); font-size: 2.3cqw; letter-spacing: .5em; text-transform: uppercase; color: #8A6A2E; margin-bottom: 1.4cqw; }
.lt-names { font-family: var(--script); font-weight: 400; line-height: 1.02; font-size: 13cqw; }
.lt-names span {
  display: block;
  background: linear-gradient(100deg, #7E6128 0%, #B8924A 25%, #E2C47F 42%, #A98238 60%, #7E6128 80%, #C9A75E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lt-names .amp { font-family: var(--serif); font-weight: 300; font-size: .5em; line-height: 1.05; }
.lt-invite { font-family: var(--serif); font-style: italic; font-size: 4.6cqw; line-height: 1.3; color: #4A4E3A; margin-bottom: 4cqw; }
.lt-date { display: flex; align-items: center; justify-content: center; gap: 4cqw; margin-bottom: 3.6cqw; }
.lt-date .side {
  font-family: var(--sans); font-size: 2.5cqw; letter-spacing: .32em; text-transform: uppercase; color: #6D6C5E;
  padding: 1.4cqw 0; border-top: 1px solid rgba(176, 141, 76, .55); border-bottom: 1px solid rgba(176, 141, 76, .55); min-width: 20cqw;
}
.lt-date .big { font-family: var(--serif); font-weight: 300; font-size: 15cqw; line-height: .9; color: #8A6A2E; font-variant-numeric: lining-nums; }
.lt-place { font-family: var(--serif); font-size: 4.2cqw; color: #3F4D2C; letter-spacing: .04em; margin-bottom: 1cqw; }
.lt-small { font-family: var(--sans); font-size: 2.3cqw; letter-spacing: .34em; text-transform: uppercase; color: #8A8570; margin-bottom: 5cqw; }
.lt-enter {
  font-family: var(--sans); font-size: 2.6cqw; letter-spacing: .34em; text-transform: uppercase;
  color: #FBF5E6; padding: 3.2cqw 7cqw; border-radius: 99px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3F4D2C, #2B3620); box-shadow: 0 10px 24px -10px rgba(43, 54, 32, .7), inset 0 0 0 1px rgba(217, 192, 138, .55);
}
.lt-enter::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .45), transparent);
  animation: opSweep 2.8s ease-in-out infinite 1s;
}
@keyframes opSweep { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.lt-enter:focus-visible { outline: 2px solid #E6CC8A; outline-offset: 4px; }
.lt-reveal { opacity: 0; }

@media (max-height: 560px) and (orientation: landscape) {
  .op-head { margin-bottom: 8px; }
  .op-name { font-size: clamp(1.8rem, 6vh, 2.6rem); }
  .op-stage { width: min(56vh * 1.43, 70vw); }
  .op-hint { margin-top: 10px; }
}