/* SendMazel — motion: every design's own opening (js/envelope.js), page scenes (js/journey.js) and ending.
   Colors come from the design: --op-a accent, --op-a2 second accent, --op-p paper, --op-p2 paper shade, --op-in inside,
   --op-g gold, --op-r ribbon, --op-s wax seal, --op-bg / --op-bg2 design background, --op-ink text. */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- the stage every opening shares ---------- */
.env-stage:has(> .op) { padding-top: 6px; }
.env-stage:has(> .op) { position: relative; }
.env-stage:has(> .op) > .env-caption { position: static; margin-bottom: 18px; transition: opacity .4s; }
.env-stage:has(> .op) > .env-caption.env-caption-out { position: absolute; margin: 0; opacity: 0; pointer-events: none; }
.env-opening:has(> .op) > .env-caption { opacity: 0; }
.op { position: relative; width: min(420px, 100%); aspect-ratio: 10 / 7; margin-inline: auto; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.op-tall { width: min(330px, 84%); aspect-ratio: 4 / 5; }
.op-square { width: min(350px, 86%); aspect-ratio: 1; }
.op button { font: inherit; -webkit-tap-highlight-color: transparent; }
.env-reveal { position: absolute; top: 0; left: 0; right: 0; margin-inline: auto; width: min(420px, 100%); z-index: 20; animation: none; }
.env-result.env-still { animation: none; }
.op-layer { pointer-events: none; }

/* the call to action under each opening: a glowing pill with a turning gradient edge */
.op-cta { position: relative; margin: 26px auto 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 700; font-size: 17px; letter-spacing: .01em; color: var(--op-cta-fg, var(--op-ink)); background: var(--op-cta-bg, #FFFFFF); cursor: pointer; isolation: isolate;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.45); transition: opacity .35s, transform .35s; }
.op-cta::before { content: ""; position: absolute; inset: -2.5px; border-radius: inherit; padding: 2.5px; z-index: -1;
  background: conic-gradient(from var(--ang), var(--op-a), var(--op-a2), var(--op-g), var(--op-a));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: op-turn 3s linear infinite; }
.op-cta::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; order: -1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10Q1.8-1.8 10 0Q1.8 1.8 0 10Q-1.8 1.8-10 0Q-1.8-1.8 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10Q1.8-1.8 10 0Q1.8 1.8 0 10Q-1.8 1.8-10 0Q-1.8-1.8 0-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: op-twinkle 1.6s ease-in-out infinite; }
.op-cta-glow { position: absolute; inset: 0; border-radius: inherit; z-index: -2; animation: op-ping 2.2s ease-out infinite; }
.op-cta:hover { transform: translateY(-2px); }
.op-cta:active { transform: scale(.96); }
.op-cta:focus-visible { outline: 3px solid var(--op-a); outline-offset: 4px; }
.env-opening .op-cta:not(.op-reopen) { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
@keyframes op-turn { to { --ang: 360deg; } }
@keyframes op-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--op-a) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes op-twinkle { 0%, 100% { transform: scale(.8) rotate(0); } 50% { transform: scale(1.1) rotate(45deg); } }
@keyframes op-draw { to { stroke-dashoffset: 0; } }

/* ---------- a plain envelope body, used by several openings ---------- */
.ob { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.5,0,.6,1), opacity .7s; }
.ob::before { content: ""; position: absolute; inset: 6% 4% -4%; border-radius: 30px; background: rgba(0,0,0,.22); filter: blur(18px); z-index: -1; }
.ob-back { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(180deg, var(--op-in), color-mix(in srgb, var(--op-in) 78%, #000)); }
.ob-liner { position: absolute; left: 3%; right: 3%; top: 2.5%; height: 52%; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--op-a) 28%, #FFFFFF) 0 7px, color-mix(in srgb, var(--op-a2) 22%, #FFFFFF) 7px 14px); }
.ob-front { position: absolute; inset: 0; z-index: 2; border-radius: 0 0 14px 14px; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background: radial-gradient(120% 90% at 50% 100%, var(--op-p) 0%, var(--op-p2) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.ob-flap { position: absolute; left: 0; right: 0; top: 0; height: 58%; z-index: 3; transform-origin: top center; clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, var(--op-p2), var(--op-p)); transition: transform .6s cubic-bezier(.4,.1,.3,1); }
.ob-gilt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; fill: none; stroke: var(--op-g); stroke-width: 2.5; }
.op-seal { position: absolute; left: 50%; top: 57%; z-index: 6; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .4s; }
.op-seal:focus-visible { outline: 3px solid var(--op-a); outline-offset: 4px; border-radius: 50%; }
.op-wax { display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); animation: seal-pulse 2.2s ease-in-out infinite; }

/* reveal styles: how the invitation itself arrives */
.rv-pop { animation: pop-in .55s cubic-bezier(.2,.9,.3,1.2) both; }
.rv-spin { animation: rv-spin 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-spin { 0% { opacity: 0; transform: perspective(1000px) translateY(45%) scale(.5) rotateY(0); } 65% { opacity: 1; transform: perspective(1000px) translateY(-5%) scale(1.03) rotateY(340deg); } 100% { transform: perspective(1000px) rotateY(360deg); } }
.rv-rise { animation: rv-rise 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-rise { 0% { opacity: 0; transform: translateY(55%) scale(.7); filter: brightness(1.7) saturate(1.3); } 60% { opacity: 1; } 100% { transform: none; filter: none; } }
.rv-emerge { animation: rv-emerge 1.3s cubic-bezier(.16,.8,.3,1) both; }
@keyframes rv-emerge { 0% { opacity: 0; transform: translateY(8%) scale(.35); filter: brightness(2.4) blur(6px); } 50% { opacity: 1; filter: brightness(1.4) blur(1px); } 100% { transform: none; filter: none; } }
.rv-slideUp { animation: rv-slideUp 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-slideUp { 0% { opacity: 0; transform: translateY(32%) skewY(4deg); } 100% { opacity: 1; transform: none; } }
.rv-glowIn { animation: rv-glowIn 1.2s ease-out both; }
@keyframes rv-glowIn { 0% { opacity: 0; transform: scale(1.05); filter: blur(16px) brightness(2.4); } 100% { opacity: 1; transform: none; filter: none; } }
.rv-bounce { animation: rv-bounce .95s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes rv-bounce { 0% { opacity: 0; transform: translateY(18%) scale(.3); } 55% { opacity: 1; transform: translateY(-3%) scale(1.06); } 78% { transform: scale(.97); } 100% { transform: none; } }
.rv-materialize { animation: rv-materialize 1.35s ease-out both; }
@keyframes rv-materialize { 0% { opacity: 0; filter: blur(12px) saturate(0) brightness(1.8); transform: scale(.94); } 60% { opacity: 1; filter: blur(2px) saturate(.7) brightness(1.2); } 100% { filter: none; transform: none; } }
.rv-unfold { animation: rv-unfold 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-unfold { 0% { opacity: 0; transform: scale(.15) rotate(-10deg); } 60% { opacity: 1; transform: scale(1.03) rotate(1deg); } 100% { transform: none; } }
.rv-riseBox { animation: rv-riseBox 1.25s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-riseBox { 0% { opacity: 0; transform: translateY(55%) scale(.68); } 55% { opacity: 1; transform: translateY(-5%) scale(1.01); } 100% { transform: none; } }
.rv-iris { animation: rv-iris 1.25s cubic-bezier(.5,0,.2,1) both; }
@keyframes rv-iris { 0% { clip-path: circle(0% at 50% 42%); transform: scale(.9); } 100% { clip-path: circle(110% at 50% 42%); transform: none; } }
.rv-float { animation: rv-float 1.45s cubic-bezier(.3,.7,.3,1) both; }
@keyframes rv-float { 0% { opacity: 0; transform: translateY(40%) scale(.8); } 50% { opacity: 1; transform: translateY(-5%) rotate(-1.5deg); } 75% { transform: translateY(2%) rotate(.8deg); } 100% { transform: none; } }
.rv-slideOut { animation: rv-slideOut 1.15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-slideOut { 0% { opacity: 0; transform: translateY(42%) scale(.86); clip-path: inset(0 0 62% 0 round 14px); } 40% { opacity: 1; } 100% { transform: none; clip-path: inset(0 0 0 0 round 14px); } }
.rv-flipIn { animation: rv-flipIn .9s cubic-bezier(.2,.8,.3,1.1) both; }
@keyframes rv-flipIn { 0% { transform: perspective(1200px) rotateY(-90deg) scale(.86); } 100% { transform: none; } }
.rv-wash { animation: rv-wash 1.3s ease-out both; }
@keyframes rv-wash { 0% { opacity: 0; filter: saturate(.3) blur(4px); } 100% { opacity: 1; filter: none; } }
.rv-swing { transform-origin: 50% 100%; animation: rv-swing 1.15s cubic-bezier(.3,.9,.3,1.15) both; }
@keyframes rv-swing { 0% { opacity: 0; transform: translateX(70%) rotate(16deg); } 60% { opacity: 1; transform: translateX(-4%) rotate(-3deg); } 100% { transform: none; } }
.rv-drift { animation: rv-drift 1.5s cubic-bezier(.3,.7,.3,1) both; }
@keyframes rv-drift { 0% { opacity: 0; transform: translateY(30%) rotate(-2.5deg); } 60% { opacity: 1; transform: translateY(-3%) rotate(1deg); } 100% { transform: none; } }
.rv-descend { animation: rv-descend 1.35s cubic-bezier(.25,.8,.3,1) both; }
@keyframes rv-descend { 0% { opacity: 0; transform: translateY(-55%) scale(.8); } 70% { opacity: 1; transform: translateY(3%) scale(1); } 100% { transform: none; } }
.rv-surface { animation: rv-surface 1.4s cubic-bezier(.25,.8,.3,1) both; }
@keyframes rv-surface { 0% { opacity: 0; transform: translateY(24%); filter: blur(5px) hue-rotate(-12deg); } 55% { opacity: 1; transform: translateY(-3%); filter: none; } 80% { transform: translateY(1%) rotate(.5deg); } 100% { transform: none; } }

/* ---------- crack: the seal wiggles and bursts ---------- */
.op-crack.shake .op-seal { animation: cr-shake .55s ease-in-out; }
@keyframes cr-shake { 0%, 100% { transform: translate(-50%, -50%); } 20% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); } 40% { transform: translate(-50%, -50%) rotate(12deg); } 60% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.08); } 80% { transform: translate(-50%, -50%) rotate(6deg); } }
.op-crack.crack .op-seal { opacity: 0; transform: translate(-50%, -50%) scale(1.4); transition-duration: .12s; }
.cr-shards { position: absolute; left: 50%; top: 57%; width: 0; height: 0; z-index: 7; pointer-events: none; }
.cr-shards i { position: absolute; width: 30px; height: 30px; margin: -15px; background: var(--op-s); clip-path: polygon(50% 50%, 100% 10%, 92% 100%); opacity: 0; transform: rotate(var(--a)); }
.op-crack.crack .cr-shards i { animation: cr-fly .75s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes cr-fly { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(220deg) scale(.6); } }
.op-crack.flap .ob-flap { transform: rotateX(180deg); z-index: 1; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.op-crack.away .ob { transform: translateY(32%) scale(.9); opacity: 0; }

/* ---------- sunrise ---------- */
.sr-sky { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; transition: filter 1.2s;
  background: linear-gradient(180deg, color-mix(in srgb, var(--op-a) 30%, #20305E) 0%, color-mix(in srgb, var(--op-a2) 45%, #FFD9B8) 100%); box-shadow: 0 24px 40px -22px rgba(0,0,0,.55); }
.sr-sun { position: absolute; left: 50%; bottom: 38%; width: 44%; aspect-ratio: 1; margin-left: -22%; border-radius: 50%; z-index: 1; transform: translateY(114.5%); will-change: transform;
  background: radial-gradient(circle, #FFF7DD 0%, color-mix(in srgb, var(--op-a2) 70%, #FFF3C4) 55%, var(--op-a) 100%); box-shadow: 0 0 70px 26px color-mix(in srgb, var(--op-a2) 55%, transparent);
  transition: transform 1.3s cubic-bezier(.2,.8,.2,1); }
.sr-rays { position: absolute; inset: -90%; border-radius: 50%; opacity: 0; transition: opacity 1s;
  background: repeating-conic-gradient(rgba(255,255,255,.32) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); animation: sr-turn 16s linear infinite; }
@keyframes sr-turn { to { transform: rotate(360deg); } }
.sr-hill { position: absolute; border-radius: 50% 50% 0 0; z-index: 3; }
.sr-h1 { left: -20%; right: 30%; bottom: -16%; height: 40%; background: color-mix(in srgb, var(--op-a) 55%, #24402C); }
.sr-h2 { left: 25%; right: -25%; bottom: -20%; height: 42%; background: color-mix(in srgb, var(--op-a) 35%, #1B3322); }
.sr-env { position: absolute; left: 18%; right: 18%; bottom: 20%; aspect-ratio: 10 / 7; z-index: 2; transition: transform 1s cubic-bezier(.6,0,.4,1); }
.op-sunrise.sink .sr-env { transform: translateY(125%); }
.op-sunrise.sun .sr-sun { transform: none; }
.op-sunrise.sun .sr-rays { opacity: 1; }
.op-sunrise.sun .sr-sky { filter: brightness(1.22) saturate(1.15); }

/* ---------- ark doors ---------- */
.ak { position: absolute; inset: 0; perspective: 1300px; border-radius: 50% 50% 12px 12px / 32% 32% 12px 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--op-in) 80%, #000), var(--op-in));
  box-shadow: 0 0 0 6px var(--op-g), 0 0 0 10px color-mix(in srgb, var(--op-g) 35%, transparent), 0 30px 46px -18px rgba(0,0,0,.65); }
.ak-light { position: absolute; inset: 5%; border-radius: inherit; opacity: 0; transition: opacity .9s;
  background: radial-gradient(circle at 50% 58%, #FFFBEA 0%, color-mix(in srgb, var(--op-g) 80%, #FFF) 30%, transparent 72%); }
.ak-door { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform 1.05s cubic-bezier(.55,0,.2,1);
  background: linear-gradient(165deg, color-mix(in srgb, var(--op-a) 70%, #FFFFFF) 0%, var(--op-a) 45%, color-mix(in srgb, var(--op-a) 75%, #000) 100%); border: 2px solid var(--op-g); }
.ak-l { left: 0; border-radius: 100% 0 0 12px / 64% 0 0 12px; transform-origin: left center; }
.ak-r { right: 0; border-radius: 0 100% 12px 0 / 0 64% 12px 0; transform-origin: right center; }
.ak-door i { position: absolute; inset: 16% 14% 9%; border: 2px solid color-mix(in srgb, var(--op-g) 80%, transparent); border-radius: inherit; }
.ak-door i::after { content: ""; position: absolute; left: 20%; right: 20%; top: 44%; height: 22%; border-radius: 6px; border: 1.5px solid color-mix(in srgb, var(--op-g) 70%, transparent); }
.ak-crown { position: absolute; top: -17%; left: 50%; width: 30%; transform: translateX(-50%); fill: var(--op-g); z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.ak-medal { position: absolute; left: 50%; top: 52%; z-index: 4; width: 82px; height: 82px; transform: translate(-50%, -50%); border-radius: 50%; padding: 0; cursor: pointer;
  border: 3px solid color-mix(in srgb, var(--op-g) 70%, #FFF); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--op-g) 45%, #FFF), var(--op-g) 70%, color-mix(in srgb, var(--op-g) 70%, #000));
  color: color-mix(in srgb, var(--op-g) 25%, #3A2400); font-family: var(--hebrew, 'Frank Ruhl Libre'), serif; font-size: 36px; box-shadow: 0 8px 16px rgba(0,0,0,.4); animation: seal-pulse 2.2s ease-in-out infinite; }
.op-ark.medal .ak-medal { animation: ak-medal .6s ease-in forwards; }
@keyframes ak-medal { to { transform: translate(-50%, -50%) translateY(-34px) rotateY(360deg) scale(.5); opacity: 0; } }
.op-ark.open .ak-l { transform: rotateY(-112deg); }
.op-ark.open .ak-r { transform: rotateY(112deg); }
.op-ark.open .ak-light { opacity: 1; }

/* ---------- tallit ---------- */
.tl { position: absolute; inset: 0 0 8%; }
.tl-half { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform 1s cubic-bezier(.6,0,.2,1), opacity .9s .25s; box-shadow: 0 20px 30px -18px rgba(0,0,0,.5); background-color: #FBF9F2; }
.tl-l { left: 0; border-radius: 12px 0 0 12px; transform-origin: left center;
  background-image: linear-gradient(90deg, transparent 7%, var(--op-a) 7% 11%, transparent 11% 14%, var(--op-a) 14% 15.5%, transparent 15.5% 18.5%, var(--op-a) 18.5% 22.5%, transparent 22.5%), linear-gradient(90deg, #FBF9F2, #EFEBDD); }
.tl-r { right: 0; border-radius: 0 12px 12px 0; transform-origin: right center;
  background-image: linear-gradient(270deg, transparent 7%, var(--op-a) 7% 11%, transparent 11% 14%, var(--op-a) 14% 15.5%, transparent 15.5% 18.5%, var(--op-a) 18.5% 22.5%, transparent 22.5%), linear-gradient(270deg, #FBF9F2, #EFEBDD); }
.tl-fringe { position: absolute; left: 4%; right: 4%; top: 100%; height: 15%; transform-origin: top center; background: repeating-linear-gradient(90deg, #EFEAD8 0 2px, transparent 2px 7px); animation: tl-sway 3.4s ease-in-out infinite; }
@keyframes tl-sway { 0%, 100% { transform: skewX(4deg); } 50% { transform: skewX(-4deg); } }
.tl-atara { position: absolute; left: 22%; right: 22%; top: -5%; height: 12%; z-index: 2; border-radius: 4px; transition: transform .5s, opacity .5s;
  background: repeating-linear-gradient(90deg, var(--op-g) 0 5px, color-mix(in srgb, var(--op-g) 55%, #FFF) 5px 10px); box-shadow: 0 4px 8px rgba(0,0,0,.18); }
.tl .op-seal { top: 50%; }
.op-tallit.knot .op-seal { transform: translate(-50%, -50%) scale(0) rotate(120deg); opacity: 0; }
.op-tallit.part .tl-l { transform: translateX(-70%) rotateY(35deg) skewY(-4deg); opacity: 0; }
.op-tallit.part .tl-r { transform: translateX(70%) rotateY(-35deg) skewY(4deg); opacity: 0; }
.op-tallit.part .tl-atara { transform: translateY(-40px); opacity: 0; }
.op-tallit.part .tl-fringe { animation: tl-whip .9s ease-out; }
@keyframes tl-whip { 30% { transform: skewX(-24deg); } 60% { transform: skewX(14deg); } }

/* ---------- menorah ---------- */
.mn { position: absolute; inset: 0; display: grid; place-items: center; }
.mn-svg { width: 100%; height: 100%; overflow: visible; transition: filter 1s ease-in, opacity 1s ease-in, transform 1s ease-in; }
.mn-metal { fill: none; stroke: var(--op-g); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.mn-metal rect { fill: var(--op-g); stroke: none; }
.mn-candles rect { fill: color-mix(in srgb, var(--op-a2) 55%, #FFFFFF); stroke: color-mix(in srgb, var(--op-a2) 50%, #000); stroke-width: 1; }
.mn-fl { opacity: 0; }
.mn-fl path { fill: #FFC93C; transform-box: fill-box; transform-origin: 50% 100%; animation: mn-flick .16s ease-in-out infinite alternate; }
.mn-fl .mn-core { fill: #FFF6C8; }
.mn-halo { fill: rgba(255,201,60,.35); filter: blur(4px); }
@keyframes mn-flick { from { transform: scaleY(.9) skewX(-4deg); } to { transform: scaleY(1.1) skewX(4deg); } }
.op-menorah.lit0 .mn-sh { opacity: 1; transition: opacity .35s; }
.op-menorah.lit .mn-fl { opacity: 1; transition: opacity .25s calc(var(--i) * 150ms); }
.op-menorah.melt .mn-svg { filter: brightness(2.3) blur(7px); opacity: 0; transform: scale(1.12); }
.mn-btn { position: absolute; inset: 0; border: 0; background: none; cursor: pointer; }

/* ---------- dreidel ---------- */
.op-dreidel .dr { position: absolute; inset: 0; perspective: 900px; }
.dr-env { position: absolute; left: 8%; right: 8%; top: 24%; aspect-ratio: 10 / 7; }
.op-dreidel.spin .dr-env { animation: dr-spin .75s ease-in forwards; }
@keyframes dr-spin { to { transform: rotateY(1080deg) scale(.25); opacity: 0; } }
.dr-top { position: absolute; left: 50%; top: 14%; width: 34%; overflow: visible; opacity: 0; transform: translateX(-50%); transform-origin: 50% 96%; }
.dr-body { fill: var(--op-a); } .dr-handle { fill: color-mix(in srgb, var(--op-a) 60%, #000); } .dr-shine { fill: #FFFFFF; opacity: .28; }
.dr-top text { fill: #FFFFFF; font: 700 38px 'Frank Ruhl Libre', serif; transition: fill .3s; }
.op-dreidel.morph .dr-top { opacity: 1; animation: dr-whirl 1.05s linear forwards; }
@keyframes dr-whirl { 0% { transform: translateX(-50%) scaleX(1) rotate(0); } 10% { transform: translateX(-50%) scaleX(-.9) rotate(3deg); } 20% { transform: translateX(-50%) scaleX(1) rotate(-3deg); } 30% { transform: translateX(-50%) scaleX(-.9) rotate(4deg); }
  40% { transform: translateX(-50%) scaleX(1) rotate(-5deg); } 52% { transform: translateX(-50%) scaleX(-.85) rotate(7deg); } 64% { transform: translateX(-50%) scaleX(1) rotate(-9deg); } 78% { transform: translateX(-50%) scaleX(-.8) rotate(12deg); } 100% { transform: translateX(-50%) scaleX(1) rotate(-6deg); } }
.op-dreidel.land .dr-top { animation: dr-land .5s ease-out forwards; }
.op-dreidel.land .dr-top text { fill: #FFE48A; }
@keyframes dr-land { 0% { transform: translateX(-50%) rotate(-6deg); } 60% { transform: translateX(-50%) rotate(-30deg); } 100% { transform: translateX(-50%) rotate(-20deg); } }
.op-dreidel.pop .dr-top { animation: dr-pop .45s ease-in forwards; }
@keyframes dr-pop { from { transform: translateX(-50%) rotate(-20deg); } to { transform: translateX(-50%) rotate(-20deg) scale(1.9); opacity: 0; } }

/* ---------- stardust ---------- */
.sd-env { position: absolute; inset: 0; transition: opacity .45s, filter .45s; }
.sd-dust { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.sd-dust i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0; background: radial-gradient(circle, #FFFFFF 0%, var(--op-a) 55%, transparent 72%); }
.op-stardust .op-seal::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--op-a); opacity: 0; }
.op-stardust.gather .op-wax { animation: sd-glow .7s ease-in forwards; }
.op-stardust.gather .op-seal::after { animation: sd-ring .7s ease-out forwards; }
@keyframes sd-glow { to { transform: scale(1.18); filter: drop-shadow(0 0 22px #FFFFFF) brightness(1.7); } }
@keyframes sd-ring { 0% { opacity: 1; transform: scale(2.6); } 100% { opacity: 0; transform: scale(.6); } }
.op-stardust.dust .sd-env { opacity: 0; filter: blur(8px); }
.op-stardust.dust .op-seal { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.op-stardust.dust .sd-dust i { animation: sd-fly 1.35s cubic-bezier(.2,.6,.3,1) var(--w) forwards; }
@keyframes sd-fly { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* ---------- blooming fold ---------- */
.bl { position: absolute; inset: 4%; perspective: 1100px; }
.bl-in { position: absolute; inset: 0; border-radius: 10px; background: var(--op-in); box-shadow: 0 24px 40px -22px rgba(0,0,0,.55); }
.bl-flap { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.5,0,.2,1), opacity .4s .5s; background: linear-gradient(135deg, var(--op-p), var(--op-p2)); }
.bl-t { clip-path: polygon(0 0, 100% 0, 50% 52%); transform-origin: top center; z-index: 4; }
.bl-b { clip-path: polygon(0 100%, 100% 100%, 50% 48%); transform-origin: bottom center; z-index: 3; }
.bl-l { clip-path: polygon(0 0, 0 100%, 52% 50%); transform-origin: left center; z-index: 2; background: linear-gradient(90deg, var(--op-p2), color-mix(in srgb, var(--op-p2) 88%, #000)); }
.bl-r { clip-path: polygon(100% 0, 100% 100%, 48% 50%); transform-origin: right center; z-index: 2; background: linear-gradient(270deg, var(--op-p2), color-mix(in srgb, var(--op-p2) 88%, #000)); }
.bl-vine { position: absolute; inset: -5%; width: 110%; height: 110%; overflow: visible; z-index: 6; pointer-events: none; transition: opacity .4s; }
.bl-vine path { fill: none; stroke: color-mix(in srgb, var(--op-a2) 55%, #2F5D3A); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bl-bud { fill: var(--op-a); transform-box: fill-box; transform-origin: center; transform: scale(0); }
.bl .op-seal { top: 50%; z-index: 7; }
.op-bloom.vine .bl-vine path { animation: op-draw .9s ease-out forwards; }
.op-bloom.vine .bl-bud { animation: bl-bud .45s cubic-bezier(.3,1.7,.5,1) forwards; animation-delay: calc(380ms + var(--i) * 50ms); }
@keyframes bl-bud { to { transform: scale(1); } }
.op-bloom.open .bl-t { transform: rotateX(178deg); opacity: 0; }
.op-bloom.open .bl-b { transform: rotateX(-178deg); opacity: 0; transition-delay: .12s, .62s; }
.op-bloom.open .bl-l { transform: rotateY(-178deg); opacity: 0; transition-delay: .24s, .74s; }
.op-bloom.open .bl-r { transform: rotateY(178deg); opacity: 0; transition-delay: .36s, .86s; }
.op-bloom.open .bl-vine, .op-bloom.open .op-seal { opacity: 0; }

/* ---------- gift box ---------- */
.gb { position: absolute; inset: 8% 14% 0; }
.gb-base, .gb-lid { background-color: var(--op-p);
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--op-a) 34%, transparent) 50%, transparent 50%), linear-gradient(color-mix(in srgb, var(--op-a) 34%, transparent) 50%, transparent 50%); background-size: 24px 24px; }
.gb-base { position: absolute; left: 0; right: 0; top: 24%; bottom: 0; border-radius: 6px 6px 14px 14px; box-shadow: inset 0 14px 18px -12px rgba(0,0,0,.25), 0 24px 36px -20px rgba(0,0,0,.5); transition: transform .8s ease-in, opacity .7s; }
.gb-lid { position: absolute; left: -5%; right: -5%; top: 10%; height: 17%; z-index: 2; border-radius: 6px; box-shadow: 0 8px 12px -6px rgba(0,0,0,.35); transition: transform .75s cubic-bezier(.4,0,.2,1), opacity .5s .3s; }
.gb-rib { position: absolute; z-index: 3; background: linear-gradient(90deg, color-mix(in srgb, var(--op-r) 80%, #000), var(--op-r), color-mix(in srgb, var(--op-r) 80%, #000)); transition: transform .5s ease-in; }
.gb-v { left: 45%; width: 10%; top: 10%; bottom: 0; transform-origin: top center; }
.gb-h { left: 0; right: 0; top: 54%; height: 10%; transform-origin: right center; background: linear-gradient(180deg, color-mix(in srgb, var(--op-r) 80%, #000), var(--op-r), color-mix(in srgb, var(--op-r) 80%, #000)); }
.gb-bow { position: absolute; left: 50%; top: 2%; width: 52%; z-index: 4; overflow: visible; fill: var(--op-r); transform: translate(-50%, -38%); filter: drop-shadow(0 5px 6px rgba(0,0,0,.25)); transition: transform .65s cubic-bezier(.5,0,.3,1), opacity .5s; }
.gb-bow circle { fill: color-mix(in srgb, var(--op-r) 82%, #000); }
.gb-tag { position: absolute; right: -10%; top: 60%; z-index: 5; padding: 7px 14px; border: 0; border-radius: 6px; background: #FFFFFF; color: #2B2B2B; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 6px 12px rgba(0,0,0,.2); animation: gb-wiggle 2.2s ease-in-out infinite; transition: opacity .3s; }
@keyframes gb-wiggle { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-4deg) translateX(4px); } }
.op-gift.pull .gb-bow { transform: translate(70%, 140%) rotate(80deg) scale(.5); opacity: 0; }
.op-gift.pull .gb-rib { transform: scale(0); }
.op-gift.pull .gb-tag { opacity: 0; }
.op-gift.lid .gb-lid { transform: translate(34%, -170%) rotate(30deg); opacity: 0; }
.op-gift.away .gb-base { transform: translateY(45%); opacity: 0; }

/* ---------- rose wreath ---------- */
.wr { position: absolute; inset: 0; display: grid; place-items: center; }
.wr-ring { position: absolute; inset: 4%; border-radius: 50%; transition: transform .8s cubic-bezier(.5,0,.2,1); }
.wr-rose { position: absolute; left: 50%; top: 50%; width: 17%; aspect-ratio: 1; margin: -8.5%; border-radius: 50%; transform: rotate(var(--a)) translateY(-232%) scale(var(--s)); box-shadow: 0 3px 7px rgba(0,0,0,.2);
  background: radial-gradient(circle at 44% 40%, color-mix(in srgb, var(--op-a) 35%, #FFF) 0 14%, var(--op-a) 15% 30%, color-mix(in srgb, var(--op-a) 60%, #FFF) 31% 42%, var(--op-a2) 43% 66%, color-mix(in srgb, var(--op-a2) 70%, #000) 67%); }
.wr-leaf { position: absolute; left: 50%; top: 50%; width: 9%; height: 5%; margin: -2.5% -4.5%; border-radius: 0 100% 0 100%; background: color-mix(in srgb, var(--op-a2) 25%, #4E7D52); transform: rotate(var(--a)) translateY(-760%) rotate(35deg); transition: opacity .4s; }
.wr-medal { position: relative; z-index: 2; width: 46%; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; cursor: pointer; transition: transform .6s, opacity .6s;
  background: radial-gradient(circle, #FFFFFF 40%, var(--op-p)); box-shadow: inset 0 0 0 5px var(--op-p2), inset 0 0 0 7px var(--op-a), 0 12px 24px -10px rgba(0,0,0,.35);
  font-family: 'Pinyon Script', 'Frank Ruhl Libre', serif; font-size: clamp(44px, 12vw, 66px); color: var(--op-mark, var(--op-a)); animation: seal-pulse 2.4s ease-in-out infinite; }
.op-wreath.turn .wr-ring { transform: rotate(150deg); }
.op-wreath.scatter .wr-rose { animation: wr-fly .95s ease-in forwards; }
@keyframes wr-fly { from { transform: rotate(var(--a)) translateY(-232%) scale(var(--s)); } to { transform: rotate(var(--a)) translateY(-720%) rotate(260deg) scale(.4); opacity: 0; } }
.op-wreath.scatter .wr-leaf { opacity: 0; }
.op-wreath.scatter .wr-medal { transform: scale(1.5); opacity: 0; animation: none; }

/* ---------- butterflies ---------- */
.ft { position: absolute; inset: 0; }
.ft-b { position: absolute; width: 17%; z-index: 7; color: var(--op-a2); opacity: 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); transition: transform .85s cubic-bezier(.3,.7,.3,1), opacity .3s; }
.ft-b svg { display: block; width: 100%; animation: fx-wings .28s ease-in-out infinite alternate; }
.ft-b0 { left: 4%; top: -6%; transform: translate(-260%, -120%) rotate(-30deg); }
.ft-b1 { left: 78%; top: -6%; transform: translate(260%, -150%) rotate(30deg); transition-delay: .09s; color: var(--op-a); }
.ft-b2 { left: 26%; top: 34%; transform: translate(-380%, 220%) rotate(-20deg); transition-delay: .18s; }
.ft-b3 { left: 58%; top: 34%; transform: translate(380%, 240%) rotate(20deg); transition-delay: .27s; color: var(--op-a); }
.op-flutter.in .ft-b { transform: none; opacity: 1; }
.op-flutter.in .op-seal { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.op-flutter.lift .ob-flap { transform: rotateX(180deg); z-index: 1; transition-duration: .85s; }
.op-flutter.lift .ft-b0, .op-flutter.lift .ft-b1 { transform: translateY(-80%); }
.op-flutter.away .ob { transform: translateY(40%); opacity: 0; }
.op-flutter.away .ft-b { transform: translateY(-460%) rotate(14deg); opacity: 0; transition: transform 1.4s ease-in, opacity 1.2s .3s; }

/* ---------- tear strip ---------- */
.op-tear .tr { position: absolute; inset: 0; }
.tr-env .ob-flap, .tr-env .ob-liner { display: none; }
.tr-env .ob-front { clip-path: none; border-radius: 14px; }
.tr-strip { position: absolute; left: 0; right: 0; top: 0; height: 21%; z-index: 5; border-radius: 14px 14px 0 0; clip-path: inset(0 0 0 0); transition: clip-path .75s linear;
  background: linear-gradient(180deg, var(--op-p2), var(--op-p)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.tr-perf { position: absolute; left: 3%; right: 3%; bottom: 0; border-bottom: 2px dashed color-mix(in srgb, var(--op-ink) 35%, transparent); }
.tr-tab { position: absolute; left: -3%; top: 3%; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 14px; border: 0; border-radius: 6px 999px 999px 6px; cursor: pointer;
  background: var(--op-a); color: #FFFFFF; font-weight: 700; font-size: 14px; box-shadow: 0 6px 12px rgba(0,0,0,.25); transition: left .75s linear, transform .5s, opacity .5s; animation: tr-nudge 1.7s ease-in-out infinite; }
@keyframes tr-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }
.op-tear.pull .tr-strip { clip-path: inset(0 0 0 100%); }
.op-tear.pull .tr-tab { left: 90%; animation: none; }
.op-tear.off .tr-tab { transform: translate(70px, -90px) rotate(40deg); opacity: 0; }
.op-tear.away .ob { transform: translateY(36%); opacity: 0; }

/* ---------- toile flip ---------- */
.fp { position: absolute; inset: 0; perspective: 1200px; }
.fp-face { position: absolute; inset: 0; border-radius: 18px; box-shadow: 0 24px 36px -18px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.5,0,.8,.4);
  background-color: var(--op-p);
  background-image: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--op-a) 45%, transparent) 0 5%, transparent 6%), radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--op-a) 35%, transparent) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 75% 25%, transparent 0 8%, color-mix(in srgb, var(--op-a) 25%, transparent) 8.5% 10%, transparent 10.5%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--op-a) 10%, transparent) 0 2px, transparent 2px 14px);
  background-size: 64px 64px, 64px 64px, 64px 64px, auto; }
.fp-scallop { position: absolute; inset: 10px; border-radius: 12px; border: 3px dotted var(--op-a); box-shadow: inset 0 0 0 6px var(--op-p), inset 0 0 0 7.5px var(--op-a); }
.fp .op-seal { top: 50%; }
.op-flip.lift .fp-face { transform: translateY(-5%) rotateX(10deg) scale(1.03); transition: transform .4s cubic-bezier(.3,.7,.3,1); }
.op-flip.flip .fp-face { transform: translateY(-5%) rotateY(90deg) scale(1.03); }

/* ---------- watercolor wash ---------- */
.ws { position: absolute; inset: 0; }
.ws-env .ob-front, .ws-env .ob-flap { background: radial-gradient(circle at 22% 72%, color-mix(in srgb, var(--op-a) 32%, transparent), transparent 42%), radial-gradient(circle at 78% 36%, color-mix(in srgb, var(--op-a2) 38%, transparent), transparent 46%), var(--op-p); }
.ws-bloom { position: absolute; left: 50%; top: 40%; width: 0; height: 0; z-index: 30; }
.ws-bloom i { position: absolute; width: 1000px; height: 1000px; margin: -500px; border-radius: 50%; transform: scale(0); filter: blur(14px);
  background: radial-gradient(circle, color-mix(in srgb, var(--op-a) 55%, #FFFFFF) 0 28%, color-mix(in srgb, var(--op-a2) 50%, #FFFFFF) 46%, transparent 66%); }
.ws-bloom i:nth-child(2) { margin: -440px -560px; background: radial-gradient(circle, color-mix(in srgb, var(--op-a2) 60%, #FFFFFF) 0 24%, transparent 62%); }
.ws-bloom i:nth-child(3) { margin: -560px -430px; background: radial-gradient(circle, color-mix(in srgb, var(--op-a) 40%, #FFFFFF) 0 30%, transparent 60%); }
.ws-bloom.on i { animation: ws-grow 2.3s cubic-bezier(.3,.6,.3,1) forwards; }
.ws-bloom.on i:nth-child(2) { animation-delay: .12s; } .ws-bloom.on i:nth-child(3) { animation-delay: .24s; }
@keyframes ws-grow { 0% { transform: scale(0); opacity: .95; } 45% { transform: scale(1); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
.op-wash.gone .ob, .op-wash.gone .op-seal { opacity: 0; }

/* ---------- side pocket ---------- */
.pk { position: absolute; inset: 8% 10% 8% 2%; }
.pk-env { position: absolute; inset: 0; z-index: 2; border-radius: 12px; background: linear-gradient(160deg, var(--op-p), var(--op-p2)); box-shadow: 0 22px 32px -16px rgba(0,0,0,.45); transition: transform .8s cubic-bezier(.6,0,.4,1), opacity .6s; }
.pk-flap { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; clip-path: polygon(100% 0, 0 50%, 100% 100%); background: linear-gradient(270deg, var(--op-p2), var(--op-p)); border-radius: 0 12px 12px 0; }
.pk-card { position: absolute; top: 7%; bottom: 7%; left: 5%; right: 5%; z-index: 1; border-radius: 8px; transform: translateX(16%); transition: transform .7s cubic-bezier(.5,0,.2,1), opacity .4s;
  background: linear-gradient(135deg, var(--op-bg), var(--op-bg2)); border: 1px solid color-mix(in srgb, var(--op-a) 30%, transparent); box-shadow: 0 10px 18px -10px rgba(0,0,0,.3); }
.pk-card i { position: absolute; right: -5%; top: 38%; width: 7%; height: 24%; border-radius: 0 8px 8px 0; background: var(--op-a); animation: pk-tug 1.8s ease-in-out infinite; }
@keyframes pk-tug { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
.pk .op-seal { left: 42%; top: 50%; z-index: 3; }
.op-pocket.pull .pk-card { transform: translateX(108%) rotate(4deg); }
.op-pocket.pull .op-seal { opacity: 0; }
.op-pocket.away .pk-env { transform: translateX(-60%) rotate(-6deg); opacity: 0; }
.op-pocket.away .pk-card { opacity: 0; }

/* ---------- twine & lavender ---------- */
.tw { position: absolute; inset: 0; }
.tw-twine { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.tw-twine path { fill: none; stroke: #C4A06C; stroke-width: 9; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease-in; }
.tw-twine path + path { stroke-width: 12; }
.tw-sprig { position: absolute; left: 50%; top: 22%; width: 12%; z-index: 6; overflow: visible; transform: rotate(-26deg); transform-origin: 50% 100%; transition: transform .85s cubic-bezier(.5,0,.8,.6), opacity .85s; }
.tw-sprig ellipse { fill: var(--op-a); }
.tw-stem { fill: none; stroke: #6B8E5A; stroke-width: 3; }
.tw .op-seal { left: 56%; top: 60%; z-index: 7; }
.op-twine.untie .tw-twine path { stroke-dashoffset: -1; }
.op-twine.untie .op-seal { transform: translate(-50%, -50%) rotate(-220deg) scale(0); opacity: 0; transition-duration: .6s; }
.op-twine.sprig .tw-sprig { transform: translate(50%, 170%) rotate(80deg); opacity: 0; }
.op-twine.flap .ob-flap { transform: rotateX(180deg); z-index: 1; transition-duration: 1s; }
.op-twine.away .ob { transform: translateY(36%); opacity: 0; transition-duration: .9s; }
.tw-buds { position: absolute; inset: 0; z-index: 25; }
.tw-buds i { position: absolute; bottom: 24%; width: 7px; height: 11px; border-radius: 50%; background: var(--op-a); opacity: 0; }
.tw-buds.on i { animation: tw-bud var(--d) ease-out var(--w) forwards; }
@keyframes tw-bud { 0% { opacity: 0; transform: none; } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), -340px) rotate(240deg); } }

/* ---------- tile mosaic ---------- */
.op-mosaic { aspect-ratio: auto; }
.mo { position: relative; }
.mo-under .inv { box-shadow: 0 30px 60px -24px rgba(27,19,64,.5); }
.mo-grid { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); perspective: 900px; border-radius: 14px; overflow: hidden; }
.mo-grid i, .mo-mini i { border: 1px solid color-mix(in srgb, var(--op-a) 35%, #FFFFFF); backface-visibility: hidden;
  background: radial-gradient(circle at 50% 50%, var(--op-a) 0 9%, transparent 10% 21%, var(--op-a) 22% 26%, transparent 27%),
    radial-gradient(circle at 0 0, var(--op-a) 0 18%, transparent 19%), radial-gradient(circle at 100% 0, var(--op-a) 0 18%, transparent 19%),
    radial-gradient(circle at 0 100%, var(--op-a) 0 18%, transparent 19%), radial-gradient(circle at 100% 100%, var(--op-a) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, transparent 0 34%, color-mix(in srgb, var(--op-a2) 60%, #FFFFFF) 35% 38%, transparent 39%), #FFFFFF; }
.op-mosaic.go .mo-grid i { animation: mo-flip .62s ease-in forwards; animation-delay: calc((var(--r) + var(--c)) * 85ms); }
@keyframes mo-flip { 0% { transform: none; } 45% { transform: rotateY(90deg) scale(1.05); } 100% { transform: rotateY(90deg) translateY(70px) scale(.8); opacity: 0; } }
.mo-btn { position: absolute; inset: 0; z-index: 3; border: 0; background: none; cursor: pointer; }
.op-mosaic.go .mo-btn { display: none; }

/* ---------- clouds ---------- */
.cl { position: absolute; inset: 0; }
.cl-env { position: absolute; left: 17%; right: 17%; top: 10%; aspect-ratio: 10 / 7; z-index: 2; animation: cl-bob 3.2s ease-in-out infinite; }
@keyframes cl-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-7px) rotate(-1.2deg); } }
.cl-puff { position: absolute; aspect-ratio: 1; border-radius: 50%; z-index: 3; transition: transform .9s cubic-bezier(.5,0,.2,1) .25s, opacity .8s .3s;
  background: radial-gradient(circle at 40% 32%, #FFFFFF 0 40%, color-mix(in srgb, var(--op-bg2) 55%, #FFFFFF) 75%); box-shadow: 0 10px 20px -12px rgba(0,0,0,.25); }
.cl-p0 { left: 0; bottom: -8%; width: 32%; } .cl-p1 { left: 20%; bottom: -16%; width: 36%; } .cl-p2 { left: 44%; bottom: -12%; width: 32%; } .cl-p3 { left: 66%; bottom: -6%; width: 30%; }
.cl-p4 { left: 10%; bottom: 8%; width: 22%; } .cl-p5 { left: 50%; bottom: 6%; width: 26%; } .cl-p6 { left: 76%; bottom: 14%; width: 18%; }
.op-clouds.puff .cl-puff { animation: cl-puff .4s ease-out; }
@keyframes cl-puff { 50% { transform: scale(1.14); } }
.op-clouds.float .cl-env { animation: cl-away 1.1s cubic-bezier(.5,0,.6,1) forwards; }
@keyframes cl-away { to { transform: translateY(-230%) rotate(-12deg) scale(.7); opacity: 0; } }
.op-clouds.float .cl-p0, .op-clouds.float .cl-p1, .op-clouds.float .cl-p4 { transform: translateX(-130%); opacity: 0; }
.op-clouds.float .cl-p2, .op-clouds.float .cl-p3, .op-clouds.float .cl-p5, .op-clouds.float .cl-p6 { transform: translateX(130%); opacity: 0; }

/* ---------- ocean wave ---------- */
.wv { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--op-bg2) 50%, #FFFFFF), var(--op-bg2)); box-shadow: 0 24px 40px -24px rgba(0,0,0,.5); }
.wv-env { position: absolute; left: 22%; right: 22%; top: 14%; aspect-ratio: 10 / 7; z-index: 2; animation: wv-bob 2.6s ease-in-out infinite; }
@keyframes wv-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(9px) rotate(3deg); } }
.wv-w { position: absolute; left: -10%; width: 120%; height: 24%; }
.wv-a { bottom: 4%; z-index: 3; fill: color-mix(in srgb, var(--op-a) 45%, #FFFFFF); animation: wv-slide 4s ease-in-out infinite alternate; }
.wv-b { bottom: -6%; z-index: 4; fill: var(--op-a); animation: wv-slide 3s ease-in-out infinite alternate-reverse; }
@keyframes wv-slide { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.wv-big { position: absolute; left: -10%; right: -10%; top: -25%; height: 140%; z-index: 6; background: color-mix(in srgb, var(--op-a) 80%, #FFFFFF); transform: translateY(92.86%); will-change: transform; transition: transform .85s cubic-bezier(.5,0,.3,1); }
.wv-big .wv-w { left: 0; width: 100%; height: 14%; bottom: 99%; fill: color-mix(in srgb, var(--op-a) 80%, #FFFFFF); }
.op-waves.swell .wv-big { transform: none; }
.op-waves.gone .wv-env { visibility: hidden; }
.op-waves.recede .wv-big { transform: translateY(96.43%); transition-duration: 1.1s; }

/* ---------- reduced motion: show things, skip the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .op *, .op-cta, .op-cta::before, .op-cta::after, .env-reveal { animation: none !important; transition: none !important; }
}
.op-ark { margin-top: 54px; }
.bl-vine path { stroke: color-mix(in srgb, var(--op-a2) 20%, #4E7D52); stroke-width: 1.1; }
.bl-bud { fill: var(--op-a2); }

/* ---------- birthday cards: six ways to open (card.html) ---------- */
.book-stage:has(.bk-balloons), .book-stage:has(.bk-lid) { overflow: visible; }
/* lid: the cover lifts up from the top edge */
.bk-lid .book-cover { transform-origin: top center; }
.bk-lid .book-back { transform: rotateX(180deg); }
.bk-lid.open .book-cover { transform: rotateX(178deg); }
@media (min-width: 760px) { .bk-lid.open { transform: translateY(46%); } .book-stage:has(.bk-lid.open) { padding-bottom: 60%; } }
/* gate: two doors open from the middle */
.bk-gate .gate-l .book-face { clip-path: inset(0 50% 0 0); }
.bk-gate .gate-r .book-face { clip-path: inset(0 0 0 50%); }
.bk-gate .gate-l .book-back { clip-path: inset(0 0 0 50%); }
.bk-gate .gate-r .book-back { clip-path: inset(0 50% 0 0); }
.bk-gate .gate-r { transform-origin: right center; }
.bk-gate.open .gate-l { transform: rotateY(-165deg); }
.bk-gate.open .gate-r { transform: rotateY(165deg); }
@media (min-width: 760px) { .bk-gate.open { transform: none; } .bk-gate.open .book-cover { opacity: 1; } }
@media (max-width: 759.98px) { .bk-gate.open .book-cover { opacity: 0; } }
/* burst: the card trembles, then the cover flies at you in a shower of confetti */
.bk-burst.shake { animation: bk-shake .38s ease-in-out; }
@keyframes bk-shake { 20% { transform: rotate(-3deg) scale(1.02); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg) scale(1.03); } 80% { transform: rotate(2deg); } }
.bk-burst.open { transform: none !important; }
.bk-burst.open .book-cover { transform: translateZ(400px) scale(1.6) rotate(-8deg); opacity: 0 !important; transition: transform .6s cubic-bezier(.3,.6,.4,1), opacity .5s .1s; pointer-events: none; }
/* balloons: three balloons tied to the cover float it away */
.bk-bunch { position: absolute; left: 0; right: 0; top: -34%; height: 40%; z-index: 4; pointer-events: none; transition: transform 1.6s cubic-bezier(.5,0,.6,1), opacity 1.2s .5s; }
.bk-bal { position: absolute; top: 0; width: 26%; overflow: visible; animation: bk-bob 3s ease-in-out infinite; }
.bk-bal0 { left: 22%; transform: rotate(-10deg); } .bk-bal1 { left: 38%; top: -10%; animation-delay: -1s; } .bk-bal2 { left: 54%; transform: rotate(10deg); animation-delay: -2s; }
@keyframes bk-bob { 50% { translate: 0 -8px; } }
.bk-balloons.open { transform: none !important; }
.bk-balloons.open .bk-bunch { transform: translateY(-260%); opacity: 0; }
.bk-balloons.open .book-cover { transform: translateY(-160%) rotate(-6deg); opacity: 0 !important; transition: transform 1.6s cubic-bezier(.5,0,.6,1), opacity 1s .6s; pointer-events: none; }
/* sleeve: a vellum sleeve with butterflies slides off, then the card opens like a book */
.bk-vellum { position: absolute; left: -4%; right: -4%; top: 30%; bottom: -4%; z-index: 4; border-radius: 6px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 -1px 0 rgba(255,255,255,.9), 0 14px 24px -14px rgba(0,0,0,.3);
  transition: transform .7s cubic-bezier(.5,0,.6,1), opacity .6s .2s; }
.bk-vellum i { position: absolute; width: 18%; aspect-ratio: 1.6; background: var(--bk-a2, #FFF); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -26 64 40'%3E%3Cpath d='M0 0C-10-22-34-24-30-4-28 6-12 6 0 0ZM0 0C10-22 34-24 30-4 28 6 12 6 0 0ZM0 0C-8 12-24 18-22 4-20-4-8-4 0 0ZM0 0C8 12 24 18 22 4 20-4 8-4 0 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -26 64 40'%3E%3Cpath d='M0 0C-10-22-34-24-30-4-28 6-12 6 0 0ZM0 0C10-22 34-24 30-4 28 6 12 6 0 0ZM0 0C-8 12-24 18-22 4-20-4-8-4 0 0ZM0 0C8 12 24 18 22 4 20-4 8-4 0 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bk-vellum i:nth-child(1) { left: 12%; top: 20%; transform: rotate(-14deg); } .bk-vellum i:nth-child(2) { left: 62%; top: 38%; transform: rotate(10deg); } .bk-vellum i:nth-child(3) { left: 34%; top: 66%; transform: rotate(-4deg) scale(.8); }
.unsleeve .bk-vellum { transform: translateY(110%); opacity: 0; }
.bk-sleeve .book-tap { z-index: 6; }

/* =====================================================================
   Guest journey (js/journey.js)
   ===================================================================== */
/* scenes wait out of sight until they scroll into view */
.jr-scene.jr-wait { opacity: 0; }
.jr-fast .jr-scene, .jr-fast .jr-scene *, .jr-fast .env-result, .jr-fast .env-result * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }

/* ---------- twenty scene entrances, one per design ---------- */
.jr-scene.jr-in { animation: jr-unfold .95s cubic-bezier(.2,.8,.2,1) both; transform-origin: top center; }
.jr-e-slideL .jr-scene.jr-in { animation-name: e-slideL; }
.jr-e-slideR .jr-scene.jr-in { animation-name: e-slideR; }
.jr-e-zoom .jr-scene.jr-in { animation-name: e-zoom; }
.jr-e-blur .jr-scene.jr-in { animation-name: e-blur; animation-duration: 1.1s; }
.jr-e-drop .jr-scene.jr-in { animation-name: e-drop; animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
.jr-e-swing .jr-scene.jr-in { animation-name: e-swing; animation-duration: 1.2s; }
.jr-e-flipY .jr-scene.jr-in { animation-name: e-flipY; transform-origin: center; }
.jr-e-rise .jr-scene.jr-in { animation-name: e-rise; animation-duration: 1.1s; }
.jr-e-curtain .jr-scene.jr-in { animation-name: e-curtain; animation-duration: 1.1s; }
.jr-e-skew .jr-scene.jr-in { animation-name: e-skew; }
.jr-e-spiral .jr-scene.jr-in { animation-name: e-spiral; animation-duration: 1.1s; transform-origin: center; }
.jr-e-stamp .jr-scene.jr-in { animation-name: e-stamp; animation-duration: .7s; transform-origin: center; }
.jr-e-fold .jr-scene.jr-in { animation-name: e-fold; transform-origin: left center; }
.jr-e-peel .jr-scene.jr-in { animation-name: e-peel; transform-origin: top left; animation-duration: 1.1s; }
.jr-e-bounce .jr-scene.jr-in { animation-name: e-bounce; animation-duration: 1s; animation-timing-function: linear; }
.jr-e-iris .jr-scene.jr-in { animation-name: e-iris; animation-duration: 1.1s; }
.jr-e-wipe .jr-scene.jr-in { animation-name: e-wipe; animation-duration: .9s; }
.jr-e-glide .jr-scene.jr-in { animation-name: e-glide; animation-duration: 1.2s; }
.jr-e-elastic .jr-scene.jr-in { animation-name: e-elastic; animation-duration: 1.1s; animation-timing-function: linear; transform-origin: center bottom; }
@keyframes e-slideL { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes e-slideR { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes e-zoom { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes e-blur { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } to { opacity: 1; filter: none; transform: none; } }
@keyframes e-drop { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }
@keyframes e-swing { 0% { opacity: 0; transform: perspective(800px) rotateX(-70deg); } 60% { opacity: 1; transform: perspective(800px) rotateX(12deg); } 80% { transform: perspective(800px) rotateX(-5deg); } 100% { transform: none; } }
@keyframes e-flipY { from { opacity: 0; transform: perspective(900px) rotateY(80deg); } to { opacity: 1; transform: none; } }
@keyframes e-rise { from { opacity: 0; transform: translateY(70px) scale(.97); filter: brightness(1.3); } to { opacity: 1; transform: none; filter: none; } }
@keyframes e-curtain { from { clip-path: inset(0 50% 0 50% round 20px); opacity: .3; } to { clip-path: inset(0 0 0 0 round 0); opacity: 1; } }
@keyframes e-skew { from { opacity: 0; transform: skewY(6deg) translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes e-spiral { from { opacity: 0; transform: rotate(-14deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes e-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-4deg); } 60% { opacity: 1; transform: scale(.97) rotate(.5deg); } 80% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes e-fold { from { opacity: 0; transform: perspective(900px) rotateY(-75deg); } to { opacity: 1; transform: none; } }
@keyframes e-peel { from { opacity: 0; transform: perspective(900px) rotate3d(1, -1, 0, 50deg); } to { opacity: 1; transform: none; } }
@keyframes e-bounce { 0% { opacity: 0; transform: translateY(60px); } 30% { opacity: 1; transform: translateY(-14px); } 50% { transform: translateY(6px); } 68% { transform: translateY(-4px); } 84% { transform: translateY(2px); } 100% { transform: none; } }
@keyframes e-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(100% at 50% 50%); } }
@keyframes e-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes e-glide { from { opacity: 0; transform: translate(-40px, 50px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes e-elastic { 0% { opacity: 0; transform: scale(1, .3); } 30% { opacity: 1; transform: scale(.9, 1.15); } 45% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.04); } 78% { transform: scale(1.02, .98); } 100% { transform: none; } }
/* playful page tilts its cards; keep the tilt after the entrance */
.pg-playful .guest-card.jr-in { animation-fill-mode: backwards; }

/* ---------- the date: eight reveals ---------- */
.dt { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 4px auto 10px; }
.dt-he { font-size: 14px; color: var(--ink-2); }
.dt-time { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 600; }
.dt-wd { font-weight: 600; }
.dt-mon { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; color: var(--grape); }
/* split-flap board */
.fl-mon { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.fl-row { display: flex; gap: 8px; perspective: 500px; }
.fl-tile { position: relative; display: grid; place-items: center; width: 72px; height: 96px; border-radius: 10px; background: #1D1F2B; color: #FFFFFF; font: 700 64px/1 var(--display); box-shadow: 0 12px 20px -10px rgba(0,0,0,.6); overflow: hidden; }
.fl-tile::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0,0,0,.6); }
.fl-tile b { font-weight: 700; }
.jr-in .fl-tile { animation: fl-flip .55s cubic-bezier(.3,1.4,.5,1) both; animation-delay: calc(.4s + var(--i) * .18s); }
@keyframes fl-flip { 0% { transform: rotateX(90deg); filter: brightness(.4); } 100% { transform: none; filter: none; } }
/* slot-machine digits */
.rl-row { display: flex; gap: 4px; }
.rl-col { display: block; height: 84px; overflow: hidden; border-radius: 12px; background: var(--mist); padding-inline: 8px; }
.rl-col > span { display: flex; flex-direction: column; transition: none; }
.rl-col b { display: block; height: 84px; font: 700 70px/84px var(--display); color: var(--grape); font-variant-numeric: tabular-nums; }
.jr-in .rl-col > span { animation: rl-spin 1.4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.35s + var(--i) * .2s); }
@keyframes rl-spin { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -84px)); } }
.rl-col > span { transform: translateY(calc(var(--n) * -84px)); }
/* rubber stamp */
.st-ring { display: grid; place-items: center; width: 174px; aspect-ratio: 1; border-radius: 50%; border: 4px double var(--grape); color: var(--grape); transform: rotate(-8deg); padding: 10px; box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 8px color-mix(in srgb, var(--grape) 60%, transparent); }
.st-mon, .st-yr { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.st-day { font: 700 56px/1 var(--display); }
.jr-in .st-ring { animation: st-slam .55s cubic-bezier(.5,0,.6,1.6) .35s both; }
@keyframes st-slam { 0% { opacity: 0; transform: scale(2.2) rotate(-20deg); } 70% { opacity: 1; transform: scale(.92) rotate(-6deg); } 100% { transform: rotate(-8deg); } }
/* ticket from a slot */
.dt-ticket { position: relative; }
.tk-slot { width: 220px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 75%, transparent); }
.tk { width: 200px; margin-top: -4px; padding: 14px 12px 16px; background: var(--card); color: var(--ink); border: 2px dashed color-mix(in srgb, var(--grape) 55%, transparent);
  -webkit-mask: radial-gradient(circle 10px at 0 62%, transparent 98%, #000) , radial-gradient(circle 10px at 100% 62%, transparent 98%, #000); -webkit-mask-composite: source-in; mask-composite: intersect;
  mask: radial-gradient(circle 10px at 0 62%, transparent 98%, #000), radial-gradient(circle 10px at 100% 62%, transparent 98%, #000); box-shadow: 0 14px 22px -14px rgba(0,0,0,.45); }
.tk-top { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--grape); }
.tk-day { font: 700 58px/1 var(--display); }
.tk-mon { font-weight: 600; } .tk-wd { font-size: 14px; color: var(--ink-2); }
.jr-in .tk { animation: tk-out 1.1s cubic-bezier(.3,.8,.3,1) .35s both; transform-origin: top center; }
@keyframes tk-out { from { clip-path: inset(0 0 100% 0); transform: translateY(-40%); } to { clip-path: inset(0 0 0 0); transform: none; } }
/* parchment scroll */
.dt-scroll { gap: 0; }
.sc-rod { display: block; width: 210px; height: 14px; border-radius: 999px; background: linear-gradient(180deg, #A47A45, #6E4B25); box-shadow: 0 3px 6px rgba(0,0,0,.3); position: relative; z-index: 1; }
.sc-paper { width: 186px; padding: 14px 10px; background: linear-gradient(90deg, #EAD9B4, #F7ECD3 20%, #F7ECD3 80%, #EAD9B4); color: #4A3418; transform-origin: top center; }
.sc-paper .dt-mon { color: #8A5A2B; } .sc-paper .dt-he { color: #6D5434; } .sc-paper .dt-time { background: rgba(255,255,255,.5); }
.sc-day { font: 700 60px/1 var(--display); }
.jr-in .sc-paper { animation: sc-unroll 1.1s cubic-bezier(.4,0,.2,1) .35s both; }
.jr-in .sc-rod-b { animation: sc-rod 1.1s cubic-bezier(.4,0,.2,1) .35s both; }
@keyframes sc-unroll { from { transform: scaleY(0); } to { transform: none; } }
@keyframes sc-rod { from { transform: translateY(-160px); } to { transform: none; } }
/* neon sign */
.dt-neon { padding: 18px 26px; border-radius: 18px; background: #11111C; color: #FFFFFF; }
.ne-wd { font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--jr-a2); text-shadow: 0 0 8px var(--jr-a2); }
.ne-day { font: 700 50px/1.1 var(--display); color: #FFFFFF; text-shadow: 0 0 6px #FFFFFF, 0 0 18px var(--jr-accent), 0 0 34px var(--jr-accent); }
.ne-yr { font-weight: 700; letter-spacing: .4em; color: var(--jr-accent); text-shadow: 0 0 10px var(--jr-accent); }
.dt-neon .dt-he { color: #CFCFE8; } .dt-neon .dt-time { background: rgba(255,255,255,.1); color: #FFFFFF; }
.jr-in .dt-neon > div { animation: ne-on 1.2s linear both; }
.jr-in .ne-day { animation-delay: .35s; } .jr-in .ne-yr { animation-delay: .6s; } .jr-in .dt-neon > div:nth-child(n+4) { animation-delay: .8s; }
@keyframes ne-on { 0%, 20%, 34%, 48% { opacity: .1; } 22%, 40%, 60%, 100% { opacity: 1; } }
/* bloom medallion */
.bm { position: relative; width: 170px; aspect-ratio: 1; display: grid; place-items: center; }
.bm i { position: absolute; left: 50%; top: 50%; width: 34%; height: 50%; margin: -50% -17% 0; transform-origin: 50% 100%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: color-mix(in srgb, var(--jr-a2) 55%, var(--card)); transform: rotate(var(--a)) translateY(-8%); }
.bm-c { position: relative; width: 56%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; background: var(--card); box-shadow: 0 0 0 3px var(--grape); }
.bm-mon { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--grape); }
.bm-day { font: 700 40px/1 var(--display); }
.jr-in .bm i { animation: bm-petal .6s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(.35s + var(--i) * 60ms); }
.jr-in .bm-c { animation: jr-pop .6s cubic-bezier(.3,1.5,.5,1) .3s both; }
@keyframes bm-petal { from { transform: rotate(var(--a)) translateY(-8%) scale(0); } to { transform: rotate(var(--a)) translateY(-8%); } }

/* ---------- the map: six reveals ---------- */
.jr-map { position: relative; }
.jr-map svg { display: block; }
.mp-steps .jr-pin { transform-origin: 160px 112px; }
.mp-steps ellipse { fill: var(--jr-accent); opacity: 0; }
.jr-in .mp-steps ellipse { animation: mp-step .3s ease-out forwards; animation-delay: calc(.4s + var(--i) * .13s); }
@keyframes mp-step { from { opacity: 0; transform: scale(.4); } to { opacity: .9; transform: none; } }
.mp-steps .jr-pin, .jr-map.mpk-steps .jr-pin { }
.jr-in .mp-steps .jr-pin { animation-delay: 1.6s; }
.mp-radar circle { fill: none; stroke: var(--jr-accent); stroke-width: 1.5; opacity: 0; transform-box: view-box; transform-origin: 160px 112px; }
.jr-in .mp-radar circle { animation: mp-ring 2.4s ease-out infinite; }
.jr-in .mp-radar circle:nth-child(2) { animation-delay: .5s; } .jr-in .mp-radar circle:nth-child(3) { animation-delay: 1s; }
@keyframes mp-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.4); } }
.mp-beam { fill: color-mix(in srgb, var(--jr-accent) 30%, transparent); transform-box: view-box; transform-origin: 160px 112px; opacity: 0; }
.jr-in .mp-beam { opacity: 1; animation: mp-sweep 2.2s linear infinite; }
@keyframes mp-sweep { to { transform: rotate(360deg); } }
.mp-folds { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); perspective: 800px; pointer-events: none; }
.mp-folds i { background: linear-gradient(90deg, var(--card), color-mix(in srgb, var(--card) 85%, #000)); transform-origin: left center; }
.mp-folds i:nth-child(2) { background: linear-gradient(270deg, var(--card), color-mix(in srgb, var(--card) 85%, #000)); }
.jr-in .mp-folds i { animation: mp-fold .7s ease-in both; animation-delay: calc(.35s + var(--i) * .22s); }
@keyframes mp-fold { to { transform: rotateY(-100deg); opacity: 0; } }
.mp-compass { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.mp-compass svg { width: 44%; overflow: visible; }
.mp-compass circle:first-child { fill: color-mix(in srgb, var(--card) 85%, transparent); stroke: var(--jr-accent); stroke-width: 3; }
.mp-rose { fill: color-mix(in srgb, var(--jr-ink) 30%, transparent); }
.mp-needle { fill: var(--jr-accent); transform-origin: 0 0; }
.mp-compass circle:last-child { fill: var(--jr-ink); }
.jr-in .mp-needle { animation: mp-needle 1.4s cubic-bezier(.2,.9,.3,1) .3s both; }
.jr-in .mp-compass { animation: mp-gone .5s ease-in 1.8s forwards; }
@keyframes mp-needle { 0% { transform: rotate(-200deg); } 55% { transform: rotate(35deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(48deg); } }
@keyframes mp-gone { to { opacity: 0; transform: scale(1.3); } }
.jr-in .mp-compass ~ * { }
.jr-map.mpk-compass .jr-route { animation-delay: 1.9s !important; }
.mp-back { position: absolute; inset: 0; background: var(--card); display: grid; place-items: center; backface-visibility: hidden; border-radius: 18px; }
.mp-stamp { position: absolute; top: 12px; right: 12px; width: 44px; height: 54px; border: 3px dotted var(--jr-accent); background: color-mix(in srgb, var(--jr-accent) 25%, var(--card)); }
.mp-greet { font: 400 34px/1 'Pinyon Script', cursive; color: var(--jr-accent); transform: rotate(-6deg); }
.mp-back i { position: absolute; left: 14%; right: 40%; height: 1px; background: var(--line); }
.mp-back i:nth-of-type(1) { top: 68%; } .mp-back i:nth-of-type(2) { top: 78%; } .mp-back i:nth-of-type(3) { top: 88%; }
.jr-map.mpk-postcard { perspective: 900px; }
.jr-in .jr-map.mpk-postcard > svg { animation: mp-front 1s cubic-bezier(.3,.8,.3,1) 1s both; }
.jr-in .mp-back { animation: mp-turn 1s cubic-bezier(.3,.8,.3,1) 1s both; }
@keyframes mp-turn { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes mp-front { from { transform: rotateY(-180deg); } to { transform: none; } }
.jr-map.mpk-postcard > svg { backface-visibility: hidden; }
.jr-in .jr-map.mpk-postcard .jr-route { animation-delay: 1.9s; } .jr-in .jr-map.mpk-postcard .jr-pin { animation-delay: 2.4s; }
.jr-in .jr-map.mpk-fold .jr-route { animation-delay: 1.2s; } .jr-in .jr-map.mpk-fold .jr-pin { animation-delay: 1.8s; }
.jr-in .jr-map.mpk-compass .jr-pin { animation-delay: 2.4s; }

/* ---------- finales ---------- */
.jr-finale { position: relative; overflow: hidden; }
.jr-finale > p, .jr-finale > h2, .jr-fin-actions { position: relative; z-index: 2; }
.jr-fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.fz { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
canvas.fz { width: 100%; height: 100%; }
.fz-balloons i { position: absolute; bottom: -30%; width: 34px; height: 42px; border-radius: 50%; background: currentColor; opacity: 0; box-shadow: inset -6px -6px 0 rgba(0,0,0,.12); }
.fz-balloons i::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 40px; background: rgba(0,0,0,.25); }
.jr-in .fz-balloons i { animation: fz-up var(--d) ease-in var(--w) forwards; }
@keyframes fz-up { 0% { opacity: 0; transform: none; } 10% { opacity: .95; } 100% { opacity: .95; transform: translate(14px, -520px) rotate(6deg); } }
.fz-petals i { position: absolute; top: -10%; width: 14px; height: 9px; border-radius: 60% 0 60% 0; opacity: 0; }
.jr-in .fz-petals i { animation: fz-fall var(--d) linear var(--w) infinite; }
@keyframes fz-fall { 0% { opacity: 0; transform: none; } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--x), 420px) rotate(560deg); } }
.fz-lanterns i { position: absolute; bottom: -20%; width: calc(22px * var(--s)); height: calc(30px * var(--s)); border-radius: 40% 40% 30% 30%; opacity: 0;
  background: radial-gradient(circle at 50% 70%, #FFF3C4, #FFB347 55%, #E36B2C); box-shadow: 0 0 18px 6px rgba(255,180,70,.45); }
.jr-in .fz-lanterns i { animation: fz-lantern var(--d) ease-in-out var(--w) infinite; }
@keyframes fz-lantern { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 50% { transform: translate(12px, -260px); } 100% { opacity: 0; transform: translate(-8px, -520px); } }
.fz-hearts i { position: absolute; bottom: -12%; width: 22px; height: 22px; background: currentColor; opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.4 3.3 5 6.6 5c2 0 3.4 1.1 5.4 3 2-1.9 3.4-3 5.4-3C20.7 5 23 8.4 21.5 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.4 3.3 5 6.6 5c2 0 3.4 1.1 5.4 3 2-1.9 3.4-3 5.4-3C20.7 5 23 8.4 21.5 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.jr-in .fz-hearts i { animation: fz-heart var(--d) ease-out var(--w) infinite; }
@keyframes fz-heart { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: translate(var(--x), -360px) scale(.8) rotate(12deg); } }
.fz-sparkler { width: 100%; height: 60%; top: 8%; }
.fz-sparkler path { fill: none; stroke: var(--jr-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--jr-accent)); }
.sp-head { fill: #FFF6C8; filter: drop-shadow(0 0 6px #FFD54A) drop-shadow(0 0 12px #FFB347); offset-path: path("M30 80 C 50 20, 90 20, 100 60 S 140 100, 160 50 S 210 10, 230 60 S 260 90, 275 40"); offset-distance: 0%; }
.jr-in .fz-sparkler path { animation: op-draw 2.4s ease-in-out .4s forwards; }
.jr-in .sp-head { animation: sp-run 2.4s ease-in-out .4s forwards; }
@keyframes sp-run { 0% { offset-distance: 0%; opacity: 1; } 95% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- jump to RSVP and skip: a little floating bar at the top ---------- */
.jr-bar { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; gap: 8px; align-items: center; }
.jr-jump, .jr-ff { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .3s; }
.jr-jump { padding: 0 16px 0 6px; color: var(--on-grape, #FFFFFF); background: linear-gradient(135deg, var(--jr-accent), color-mix(in srgb, var(--jr-accent) 70%, #000)); box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--jr-accent) 70%, #000), inset 0 1px 0 rgba(255,255,255,.35); animation: jr-jump-in .6s cubic-bezier(.3,1.6,.5,1) backwards; }
.jr-jump::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; z-index: -1;
  background: conic-gradient(from var(--ang), transparent 0 60%, #FFFFFF 75%, var(--jr-a2) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: op-turn 2.4s linear infinite; }
.jr-jump::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%); background-size: 250% 100%; animation: jr-sheen 3s ease-in-out infinite; }
.jr-jump-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.22); }
.jr-jump-ic svg { width: 19px; height: 19px; }
.jr-tick { stroke-dasharray: 12; stroke-dashoffset: 12; animation: jr-tick 2.6s ease-in-out infinite; }
@keyframes jr-tick { 0%, 30% { stroke-dashoffset: 12; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 12; } }
@keyframes jr-sheen { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } }
@keyframes jr-jump-in { from { opacity: 0; transform: translateY(-20px) scale(.8); } to { opacity: 1; transform: none; } }
.jr-jump:hover { transform: translateY(-1px) scale(1.03); }
.jr-jump:active, .jr-ff:active { transform: scale(.95); }
.jr-ff { padding: 0 14px 0 10px; color: var(--ink); background: color-mix(in srgb, var(--card) 80%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.4), inset 0 0 0 1px var(--line); }
.jr-ff svg { width: 18px; height: 18px; }
.jr-ff:hover svg { animation: jr-ff .6s ease-in-out infinite; }
@keyframes jr-ff { 50% { transform: translateX(3px); } }
.jr-jump:focus-visible, .jr-ff:focus-visible { outline: 3px solid var(--jr-accent); outline-offset: 3px; }
.jr-skip { display: none !important; }
/* the next button: glass and a moving sheen */
.jr-next { overflow: hidden; }
.jr-next::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); background-size: 250% 100%; animation: jr-sheen 3.4s ease-in-out infinite; pointer-events: none; }
.jr-dots button[disabled] { opacity: 1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .jr-jump, .jr-jump::before, .jr-jump::after, .jr-tick, .jr-next::after { animation: none !important; } .jr-tick { stroke-dashoffset: 0; } }

/* =====================================================================
   The ending: a little game, then the invitation folds back and seals (js/closing.js)
   ===================================================================== */
.jr-seal-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px 0 8px; border: 0; border-radius: 999px; cursor: pointer; isolation: isolate;
  font: inherit; font-weight: 700; font-size: 17px; color: var(--on-grape, #FFFFFF); background: linear-gradient(135deg, var(--jr-accent), color-mix(in srgb, var(--jr-accent) 65%, #000));
  box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--jr-accent) 70%, #000), inset 0 1px 0 rgba(255,255,255,.35); animation: seal-pulse 2.4s ease-in-out infinite; }
.jr-seal-btn::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; z-index: -1; background: conic-gradient(from var(--ang), transparent 0 55%, #FFFFFF 72%, var(--jr-a2) 86%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: op-turn 2.4s linear infinite; }
.jr-seal-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.22); }
.jr-seal-ic svg { width: 21px; height: 21px; }
.jr-fin-actions { flex-direction: column; align-items: center; }
.jr-closed .jr-scene, .jr-closed .made-with { animation: jr-away .45s ease-in forwards !important; }
@keyframes jr-away { to { opacity: 0; transform: translateY(30px) scale(.97); } }
@keyframes cl-sink { 0% { transform: none; opacity: 1; } 100% { transform: translateY(35%) scale(.55); opacity: 0; } }

/* the closed opening returns and gets its seal */
.op-closed { position: relative; width: min(420px, 100%); aspect-ratio: 10 / 7; margin: 30px auto 0; animation: cl-arrive .7s cubic-bezier(.2,.9,.3,1.2) both; }
.op-closed.op-tall { width: min(300px, 78%); aspect-ratio: 4 / 5; }
.op-closed.op-square { width: min(320px, 80%); aspect-ratio: 1; }
@keyframes cl-arrive { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
.op-closed .ob, .op-closed .ak, .op-closed .gb, .op-closed .wr, .op-closed .fp, .op-closed .tl, .op-closed .mn { position: absolute; }
.op-closed .ak-door { transform: none !important; }
.mo-mini { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 40px -22px rgba(0,0,0,.5); }
.op-closed-mosaic { aspect-ratio: 4 / 3; width: min(360px, 90%); }
.op-closed-seal { position: absolute; left: 50%; top: 55%; z-index: 9; transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
.op-closed.sealed .op-closed-seal { animation: cl-stamp .55s cubic-bezier(.5,0,.6,1.6) forwards; }
@keyframes cl-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6) rotate(-20deg); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(.92) rotate(3deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } }
.op-closed.sealed::after { content: ""; position: absolute; left: 50%; top: 55%; width: 90px; height: 90px; margin: -45px; border-radius: 50%; border: 3px solid var(--op-a); animation: cl-ring .8s ease-out .35s both; pointer-events: none; }
@keyframes cl-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.op-sealed { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 22px; text-align: center; animation: cl-arrive .7s ease-out .8s both; }
.op-sealed-he { font-family: var(--hebrew, 'Frank Ruhl Libre'), serif; font-size: 30px; color: var(--op-on-bg-2, var(--op-a)); }
.op-sealed-en { font-family: var(--display); font-size: 20px; color: var(--op-on-bg, var(--op-ink)); max-width: 30ch; }
.op-sealed .op-cta { margin-top: 16px; }
.env-closing .op-cta:not(.op-reopen) { display: none; }

/* the game overlay */
.cg { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, #0B0D1C 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.cg.on { opacity: 1; }
.cg-in { position: relative; width: min(440px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px 18px; border-radius: 28px; overflow: hidden; text-align: center;
  background: linear-gradient(180deg, var(--cg-bg), var(--cg-bg2)); color: var(--cg-ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); transform: translateY(24px) scale(.96); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.cg.on .cg-in { transform: none; }
.cg-eye { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.cg-title { font-family: var(--display); font-size: clamp(22px, 6vw, 28px); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.cg-meter { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.cg-bar { width: 140px; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--cg-ink) 15%, transparent); overflow: hidden; }
.cg-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cg-a), var(--cg-a2)); transition: width .3s cubic-bezier(.3,1.5,.5,1); }
.cg-field { position: relative; width: 100%; height: min(52vh, 380px); border-radius: 20px; overflow: hidden; background: color-mix(in srgb, #FFFFFF 35%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg-ink) 12%, transparent); touch-action: manipulation; }
.cg-skip { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: inherit; opacity: .7; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px; }
.cg.won .cg-field { animation: cg-win .9s ease-out; }
@keyframes cg-win { 30% { transform: scale(1.03); filter: brightness(1.2); } }
/* catch & pop */
.cg-item { position: absolute; bottom: -70px; width: 58px; height: 58px; padding: 6px; border: 0; background: none; cursor: pointer; animation: cg-rise var(--d) linear forwards; -webkit-tap-highlight-color: transparent; }
.cg-item svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
.cg-balloon { width: 52px; height: 92px; }
.cg-butterfly svg { animation: fx-wings .3s ease-in-out infinite alternate; }
@keyframes cg-rise { 0% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(calc(var(--x) * .6), calc(-1 * min(26vh, 190px))) rotate(6deg); } 100% { transform: translate(var(--x), calc(-1 * min(52vh, 380px) - 90px)) rotate(-4deg); } }
.cg-item.got { animation-play-state: paused; pointer-events: none; }
.cg-item.got svg { animation: cg-got .4s ease-out forwards; }
.cg-pop .cg-item.got svg { animation: cg-burst .3s ease-out forwards; }
@keyframes cg-got { to { transform: scale(1.8); opacity: 0; } }
@keyframes cg-burst { 40% { transform: scale(1.35); } 100% { transform: scale(.2); opacity: 0; } }
/* candles */
.cg-light .cg-field { display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(180deg, #121633, #1F2550); }
.cg-candles { display: flex; align-items: flex-end; gap: clamp(6px, 2.4vw, 14px); position: relative; z-index: 1; }
.cg-candle { position: relative; width: clamp(18px, 6vw, 26px); height: 90px; border: 0; border-radius: 5px 5px 2px 2px; cursor: pointer; padding: 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cg-a2) 70%, #FFF) 0 6px, #FFFFFF 6px 12px); box-shadow: inset -3px 0 0 rgba(0,0,0,.08); }
.cg-candle.cg-sh { height: 118px; }
.cg-candle::before { content: ""; position: absolute; left: 50%; top: -8px; width: 2px; height: 9px; margin-left: -1px; background: #333; }
.cg-flame { position: absolute; left: 50%; top: -40px; width: 20px; height: 32px; margin-left: -10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; transform: scale(.3);
  background: radial-gradient(circle at 50% 70%, #FFFFFF 0 18%, #FFE27A 30%, #FF9F2E 60%, transparent 72%); filter: drop-shadow(0 0 10px #FFB347); transition: opacity .2s, transform .35s cubic-bezier(.3,1.7,.5,1); }
.cg-candle.lit .cg-flame { opacity: 1; transform: none; animation: cg-flick .18s ease-in-out infinite alternate; }
.cg-candle:not(.lit) { animation: cg-wait 1.6s ease-in-out infinite; }
@keyframes cg-flick { from { transform: scaleY(.92) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
@keyframes cg-wait { 50% { filter: brightness(1.12); transform: translateY(-2px); } }
.cg-base { display: block; width: 78%; height: 14px; margin-top: 6px; border-radius: 8px; background: linear-gradient(#E9C46A, #B68A2E); }
.cg-cakebody { display: block; width: 82%; height: 90px; margin-top: 0; border-radius: 14px 14px 18px 18px; background: linear-gradient(180deg, #FFFFFF 0 22%, color-mix(in srgb, var(--cg-a) 60%, #FFF) 22% 30%, #FBE3C4 30% 100%); box-shadow: 0 14px 20px -10px rgba(0,0,0,.4); }
.cg-cake .cg-candle { height: 70px; }
/* hold the seal */
.cg-hold .cg-field { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.cg-seal { position: relative; width: 150px; height: 150px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cg-a) 50%, #FFF), var(--cg-a) 62%, color-mix(in srgb, var(--cg-a) 60%, #000)); color: #FFF5DD;
  font: 400 60px/1 'Frank Ruhl Libre', 'Pinyon Script', serif; box-shadow: 0 16px 30px -10px rgba(0,0,0,.5), inset 0 0 0 8px rgba(255,255,255,.12); transition: transform .2s; }
.cg-seal span { position: relative; z-index: 1; }
.cg-seal svg { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); transform: rotate(-90deg); }
.cg-ring { fill: none; stroke: var(--cg-a2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s ease-out; }
.cg-seal.down { transform: scale(.94); }
.cg-seal.down .cg-ring { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s linear; }
.cg-hint { font-weight: 600; opacity: 0; transition: opacity .2s; }
.cg-seal.down + .cg-hint { opacity: .8; }
/* spell the Hebrew name */
.cg-spell .cg-field { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 14px; }
.cg-slots { display: flex; gap: 8px; }
.cg-slot { display: grid; place-items: center; width: 46px; height: 54px; border-radius: 12px; border: 2px dashed color-mix(in srgb, var(--cg-ink) 35%, transparent); font: 700 30px 'Frank Ruhl Libre', serif; }
.cg-slot.in { border-style: solid; border-color: var(--cg-a); background: color-mix(in srgb, var(--cg-a) 14%, #FFF); color: #1F2D52; animation: jr-pop .4s cubic-bezier(.3,1.6,.5,1); }
.cg-blocks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 320px; }
.cg-block { width: 58px; height: 58px; border: 0; border-radius: 12px; cursor: pointer; font: 700 32px 'Frank Ruhl Libre', serif; color: #FFFFFF; transform: rotate(var(--r));
  background: linear-gradient(145deg, color-mix(in srgb, var(--cg-a) 75%, #FFF), var(--cg-a)); box-shadow: 0 6px 0 color-mix(in srgb, var(--cg-a) 60%, #000), 0 12px 18px -8px rgba(0,0,0,.4); transition: transform .2s, opacity .3s; }
.cg-block:nth-child(3n+2) { background: linear-gradient(145deg, color-mix(in srgb, var(--cg-a2) 75%, #FFF), var(--cg-a2)); box-shadow: 0 6px 0 color-mix(in srgb, var(--cg-a2) 60%, #000), 0 12px 18px -8px rgba(0,0,0,.4); }
.cg-block:active { transform: translateY(4px) rotate(var(--r)); }
.cg-block.used { opacity: .25; transform: scale(.85); }
.cg-block.no { animation: cg-no .35s ease-in-out; }
@keyframes cg-no { 25% { transform: translateX(-6px) rotate(var(--r)); } 75% { transform: translateX(6px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .cg-item { animation-duration: 12s; } .jr-seal-btn, .jr-seal-btn::before { animation: none; } }
.card-end { display: flex; justify-content: center; margin-top: 8px; }
.bk-sticker { position: absolute; right: -16px; top: -16px; z-index: 7; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; color: #FFFFFF;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bk-a, #E8407A) 55%, #FFF), var(--bk-a, #E8407A) 65%, color-mix(in srgb, var(--bk-a, #E8407A) 65%, #000));
  box-shadow: 0 10px 18px -6px rgba(0,0,0,.45), inset 0 0 0 5px rgba(255,255,255,.18); animation: bk-stick .55s cubic-bezier(.5,0,.6,1.6) both; }
.bk-sticker svg { width: 40px; height: 40px; }
@keyframes bk-stick { 0% { opacity: 0; transform: scale(2.4) rotate(-25deg); } 70% { opacity: 1; transform: scale(.9) rotate(4deg); } 100% { transform: none; } }
.book .book-tap { pointer-events: none; }

/* the invitation coming out between the two halves of the tallit */
.rv-tallit { animation: rv-tallit 1.1s cubic-bezier(.55,0,.2,1) both; }
@keyframes rv-tallit { 0% { clip-path: inset(0 50% 0 50% round 14px); transform: scale(.94); } 100% { clip-path: inset(0 0 0 0 round 14px); transform: none; } }
/* going back in at the end */
@keyframes cl-tuck { 0% { transform: none; clip-path: inset(0 0 0 0); } 100% { transform: translateY(70%); clip-path: inset(0 0 100% 0); opacity: .6; } }
@keyframes cl-shrink { 0% { transform: none; opacity: 1; } 100% { transform: scale(.15) rotate(8deg); opacity: 0; } }

/* tapping the opened invitation (js/envelope.js enableTap) */
.env-result { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.env-result.tapped, .book.open .book-inside.tapped { animation: tap-tilt .65s cubic-bezier(.3,1.4,.5,1); }
.env-result.tapped .inv, .book-inside.tapped .inv { animation: tap-glow .8s ease-out; }
@keyframes tap-tilt { 0% { transform: none; } 30% { transform: perspective(900px) rotateX(calc((var(--ty, .5) - .5) * -12deg)) rotateY(calc((var(--tx, .5) - .5) * 14deg)) scale(.985); } 100% { transform: none; } }
@keyframes tap-glow { 0% { box-shadow: 0 30px 60px -24px rgba(27,19,64,.5), 0 0 0 0 color-mix(in srgb, var(--tap-c) 70%, transparent); } 35% { box-shadow: 0 30px 60px -24px rgba(27,19,64,.5), 0 0 0 10px color-mix(in srgb, var(--tap-c) 35%, transparent), 0 0 46px 8px color-mix(in srgb, var(--tap-c) 45%, transparent); } 100% { box-shadow: 0 30px 60px -24px rgba(27,19,64,.5), 0 0 0 0 transparent; } }
.tap-fx { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
.tap-ring { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 12px var(--tap-c, #F2C14E), inset 0 0 8px var(--tap-c, #F2C14E); animation: tap-ring .8s ease-out forwards; }
@keyframes tap-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(9); opacity: 0; } }
.tap-spark { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF, var(--tap-c, #F2C14E) 60%, transparent 70%); animation: tap-spark .7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes tap-spark { from { transform: rotate(var(--a)) translateX(0) scale(1.4); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)) scale(.3); opacity: 0; } }
.book-inside { cursor: pointer; }

/* room under the last scene so it can sit centered too */
.jr .guest-wrap { padding-bottom: max(56px, 30vh); }

/* ---------- more closing games ---------- */
.cg-drop { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer;
  font: 700 16px var(--body, Rubik, sans-serif); color: #FFFFFF; background: linear-gradient(135deg, var(--cg-a), color-mix(in srgb, var(--cg-a) 70%, #000));
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); -webkit-tap-highlight-color: transparent; }
.cg-drop:active { transform: translateX(-50%) scale(.96); }
.cg-drop-sm { padding: 8px 16px; font-size: 14px; background: #1F2D52; color: #FFFFFF; }
.cg-hint2 { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-weight: 600; opacity: .75; pointer-events: none; }
/* stack */
.cg-stack .cg-field { touch-action: manipulation; cursor: pointer; }
.cg-tower { position: absolute; inset: 0 0 64px; }
.cg-ground { position: absolute; left: 10%; right: 10%; bottom: 8px; height: 8px; border-radius: 6px; background: color-mix(in srgb, var(--cg-ink) 25%, transparent); }
.cg-sblock { position: absolute; left: 0; display: grid; place-items: center; border-radius: 10px; will-change: transform; font: 700 26px 'Frank Ruhl Libre', Rubik, serif; color: #FFFFFF;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cg-a) 72%, #FFF), var(--cg-a)); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--cg-a) 60%, #000); }
.cg-sblock.alt { background: linear-gradient(145deg, color-mix(in srgb, var(--cg-a2) 72%, #FFF), var(--cg-a2)); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--cg-a2) 60%, #000); color: #1F2D52; }
.cg-sblock.set::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: cg-land .45s ease-out; }
.cg-sblock.perfect::after { box-shadow: 0 0 0 3px #FFFFFF, 0 0 22px 6px var(--cg-a2); }
@keyframes cg-land { from { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } to { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
/* spin the wheel */
.cg-wheelbox { position: absolute; left: 50%; top: 14px; width: min(250px, 70%); aspect-ratio: 1; transform: translateX(-50%); }
.cg-wheel { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; filter: drop-shadow(0 10px 16px rgba(0,0,0,.25)); will-change: transform; }
.cg-wheel text { font: 700 11px var(--body, Rubik, sans-serif); }
.cg-pointer { position: absolute; left: 50%; top: -8px; z-index: 2; width: 0; height: 0; margin-left: -12px; border: 12px solid transparent; border-top: 22px solid var(--cg-ink); border-bottom: 0; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
/* dreidel */
.cg-dreid { position: absolute; left: 50%; top: 16px; width: 120px; margin-left: -60px; touch-action: none; cursor: pointer; transform-origin: 50% 95%; will-change: transform; }
.cg-dreid svg { width: 100%; display: block; filter: drop-shadow(0 10px 10px rgba(0,0,0,.25)); }
.cg-dlet { position: absolute; left: 0; right: 0; top: 64px; text-align: center; font: 700 44px 'Frank Ruhl Libre', serif; color: #FFFFFF; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.cg-dmsg { position: absolute; left: 0; right: 0; top: 214px; text-align: center; font-weight: 700; font-size: 17px; padding-inline: 12px; }
/* twist */
.cg-twist .cg-field { display: grid; place-items: center; }
.cg-dial { position: relative; width: 190px; height: 190px; margin-top: -30px; border-radius: 50%; touch-action: none; cursor: grab; outline-offset: 6px; }
.cg-dial-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.cg-dial-ring circle { fill: none; stroke: var(--cg-a2); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.cg-knob { position: absolute; inset: 18px; border-radius: 50%; display: grid; place-items: center; will-change: transform; font: 700 54px 'Frank Ruhl Libre', serif; color: #FFFFFF;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cg-a) 50%, #FFF), var(--cg-a) 62%, color-mix(in srgb, var(--cg-a) 60%, #000)); box-shadow: 0 10px 22px -8px rgba(0,0,0,.5), inset 0 -6px 12px rgba(0,0,0,.25); }
.cg-knob i { position: absolute; left: 50%; top: 4px; width: 6px; height: 14px; margin-left: -3px; border-radius: 3px; background: rgba(255,255,255,.45); transform-origin: 50% 73px; transform: rotate(calc(var(--i) * 30deg)); }
.cg-dial.down .cg-knob { box-shadow: 0 4px 10px -4px rgba(0,0,0,.5), inset 0 -3px 8px rgba(0,0,0,.25); }
/* match */
.cg-match .cg-field { display: grid; place-items: center; }
.cg-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: min(340px, 94%); }
.cg-mcard { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.cg-mback, .cg-mface { position: absolute; inset: 0; border-radius: 12px; display: grid; place-items: center; backface-visibility: hidden; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.cg-mback { background: repeating-linear-gradient(45deg, var(--cg-a) 0 8px, color-mix(in srgb, var(--cg-a) 80%, #FFF) 8px 16px); box-shadow: 0 4px 8px -4px rgba(0,0,0,.4); }
.cg-mface { background: #FFFFFF; transform: rotateY(180deg); box-shadow: 0 4px 8px -4px rgba(0,0,0,.3); }
.cg-mface svg { width: 62%; height: 62%; }
.cg-mcard.up .cg-mback { transform: rotateY(-180deg); }
.cg-mcard.up .cg-mface { transform: rotateY(0); }
.cg-mcard.done .cg-mface { box-shadow: 0 0 0 3px var(--cg-a2), 0 0 16px var(--cg-a2); }
/* scratch */
.cg-reveal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; background: linear-gradient(160deg, var(--cg-bg), var(--cg-bg2)); }
.cg-reveal b { font-family: var(--display); font-size: clamp(26px, 7vw, 34px); color: var(--cg-a); }
.cg-reveal span { font-size: 17px; font-weight: 600; }
.cg-scratchpad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; transition: opacity .5s; }
.cg-scratchpad.gone { opacity: 0; pointer-events: none; }
.cg-scratchpad.gone ~ .cg-drop { display: none; }
/* connect the dots */
.cg-dots .cg-field { display: grid; place-items: center; }
.cg-dotbox { position: relative; width: min(270px, 80%); aspect-ratio: 1; }
.cg-dotbox svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cg-dotbox line { stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cg-draw .35s ease-out forwards; }
@keyframes cg-draw { to { stroke-dashoffset: 0; } }
.cg-dot { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--cg-a); background: #FFFFFF; color: #1F2D52; font-weight: 700; font-size: 16px; cursor: pointer; padding: 0; }
.cg-dot.hit { background: var(--cg-a); color: #FFFFFF; animation: jr-pop .35s ease-out; }
.cg-dot.no { animation: cg-no .35s ease-in-out; }
/* break the glass */
.cg-glass .cg-field { display: grid; place-items: center; }
button.cg-glass { position: relative; width: 170px; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.cg-glass svg { width: 100%; display: block; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.cg-crack { fill: none; stroke: #6B7280; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
button.cg-glass.h1 .cg-c1, button.cg-glass.h2 .cg-c1, button.cg-glass.h2 .cg-c2 { stroke-dashoffset: 0; transition: stroke-dashoffset .25s; }
button.cg-glass.hit svg { animation: cg-smack .3s ease-out; }
@keyframes cg-smack { 30% { transform: scale(.92, .86) translateY(8px); } }
button.cg-glass.h3 svg { animation: cg-flatten .4s ease-in forwards; }
@keyframes cg-flatten { to { transform: scale(1.15, .35) translateY(140px); opacity: .85; } }
.cg-shards { position: absolute; left: 50%; top: 50%; }
.cg-shards i { position: absolute; width: 10px; height: 14px; clip-path: polygon(50% 0, 100% 70%, 20% 100%); background: linear-gradient(135deg, #FFFFFF, #B9D6F2); opacity: 0; }
button.cg-glass.h3 .cg-shards i { animation: cg-shard .8s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes cg-shard { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(var(--r)); } }
/* "play another game" after it's sealed */
.cg-more { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 15px; }
.cg-more select { font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); background: #FFFFFF; color: #1F2D52; }
@media (prefers-reduced-motion: reduce) { .cg-mback, .cg-mface { transition-duration: .01s; } }

/* smooth, shake-free buttons: press feedback composes with the pulse, and pulsing seals get their own layer */
.jr-seal-btn { transition: transform .18s; -webkit-tap-highlight-color: transparent; }
.jr-seal-btn:hover { transform: translateY(-2px); }
.jr-seal-btn:active { transform: scale(.95); }
.op-wax, .env-wax, .env-seal-mark, .ak-medal, .book-tap { will-change: scale; }
.jr-bar, .jr-next { will-change: transform; }

/* ---------- after it seals: what next ---------- */
.after-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(420px, 100%); margin: 18px auto 0; }
.after-act { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; text-decoration: none;
  font: inherit; font-weight: 600; font-size: 15.5px; line-height: 1.2; color: #1F2D52; background: rgba(255,255,255,.94); box-shadow: 0 6px 16px -8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(31,45,82,.08);
  transition: transform .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; }
.after-act:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(31,45,82,.12); }
.after-act:active { transform: scale(.97); }
.after-act:focus-visible { outline: 3px solid #1F2D52; outline-offset: 3px; }
.after-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #EEF2FA; font-size: 16px; }
.after-act.after-main { background: #1F2D52; color: #FFFFFF; }
.after-act.after-main .after-ic { background: rgba(255,255,255,.18); }
.op-sealed .after-acts { margin-top: 14px; }
.card-sealed-t { display: block; font-family: var(--display); font-size: 22px; margin-bottom: 4px; }
#intro .after-acts { display: grid; }
@media (max-width: 360px) { .after-acts { grid-template-columns: 1fr; } }
/* game picker */
.cg-pick { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; padding: 16px; background: rgba(15,20,40,0); transition: background .25s; }
.cg-pick.on { background: rgba(15,20,40,.55); }
.cg-pick-in { width: min(460px, 100%); max-height: 86vh; overflow: auto; border-radius: 22px; padding: 18px; background: #FFFFFF; color: #1F2D52; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
  transform: translateY(30px); opacity: 0; transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .25s; }
.cg-pick.on .cg-pick-in { transform: none; opacity: 1; }
.cg-pick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cg-pick-head h2 { font-family: var(--display); font-size: 24px; }
.cg-pick-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #EEF2FA; color: #1F2D52; font-size: 24px; line-height: 1; cursor: pointer; }
.cg-pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cg-pick-grid button { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 0; border-radius: 14px; background: #F4F6FB; color: #1F2D52; font: inherit; font-weight: 600; font-size: 15px; text-align: left; cursor: pointer; }
.cg-pick-grid button span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #FFFFFF; font-size: 17px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.cg-pick-grid button:hover, .cg-pick-grid button:focus-visible { background: #E7ECF8; outline: none; }
@media (min-width: 700px) { .cg-pick { place-items: center; } }

/* the balloon bunch floats above the card: give it its own room so it never covers the words above */
.book-stage:has(.bk-balloons) { padding-top: min(30vw, 150px); } /* stays after opening, so the card doesn't jump */
.jr-fade { position: fixed; left: 0; right: 0; bottom: 0; height: calc(120px + env(safe-area-inset-bottom, 0px)); z-index: 79; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--jr-page-end, #FFFFFF) 0%, transparent) 0%, color-mix(in srgb, var(--jr-page-end, #FFFFFF) 88%, transparent) 55%, var(--jr-page-end, #FFFFFF) 100%); }
.jr-fade[hidden] { display: none; }

/* =================== premium openings =================== */
/* ---- fire: the envelope burns away from one corner, a glowing edge and flames eat across it, embers rise ---- */
@property --burn { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.op-fire { --burn: 0%; }
.fi { position: absolute; inset: 0; }
.fi-env { position: absolute; inset: 0; -webkit-mask: radial-gradient(circle at 88% 92%, transparent var(--burn), #000 calc(var(--burn) + 4%)); mask: radial-gradient(circle at 88% 92%, transparent var(--burn), #000 calc(var(--burn) + 4%)); }
.fi-edge { position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 88% 92%, transparent calc(var(--burn) - 1%), #2A1408 var(--burn), #FF5A00 calc(var(--burn) + 1.5%), #FFC94A calc(var(--burn) + 3%), rgba(255,140,0,.0) calc(var(--burn) + 6%));
  -webkit-mask: linear-gradient(#000 0 0); filter: drop-shadow(0 0 10px rgba(255,120,0,.8)); }
.fi-flames { position: absolute; right: 6%; bottom: 4%; width: 0; height: 0; opacity: 0; transition: opacity .3s; }
.fi-flames i { position: absolute; left: var(--x); bottom: 0; width: 22px; height: var(--h); margin-left: -11px; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 85%, #FFF3B0 0 18%, #FFC23A 34%, #FF6A00 62%, rgba(255,60,0,0) 75%); transform-origin: 50% 100%; filter: blur(.6px); mix-blend-mode: screen; animation: fi-flick .32s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.07s); }
@keyframes fi-flick { from { transform: scale(.85, .9) skewX(-4deg); } to { transform: scale(1.1, 1.15) skewX(5deg); } }
.fi-embers i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFB347; box-shadow: 0 0 6px #FF7A00; opacity: 0; }
.op-fire.spark .fi-flames { opacity: 1; }
.op-fire.burn { animation: fi-burn 1.6s cubic-bezier(.4,0,.6,1) forwards; }
.op-fire.burn .fi-edge { opacity: 1; }
.op-fire.burn .fi-flames { animation: fi-travel 1.6s cubic-bezier(.4,0,.6,1) forwards; }
.op-fire.burn .fi-embers i { animation: fi-ember 1.4s ease-out infinite; animation-delay: var(--w); }
.op-fire.ash .fi-flames, .op-fire.ash .fi-edge { opacity: 0; transition: opacity .5s; }
@keyframes fi-burn { to { --burn: 135%; } }
@keyframes fi-travel { 0% { transform: none; } 60% { transform: translate(-150px, -110px) scale(1.4); opacity: 1; } 100% { transform: translate(-300px, -220px) scale(.6); opacity: 0; } }
@keyframes fi-ember { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

/* ---- out of the water: bubbles, then the envelope bursts up with a splash ---- */
.sp { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--op-bg2) 60%, #CFEFFF) 0 46%, transparent 46%); }
.sp-sea { position: absolute; left: 0; right: 0; top: 46%; bottom: 0; background: linear-gradient(180deg, #4DB6E8, #1A6FA8 70%, #0E4C7A); }
.sp-env { position: absolute; left: 10%; right: 10%; top: 56%; aspect-ratio: 10 / 7; transform: rotate(-4deg); filter: saturate(.6) brightness(.8) hue-rotate(-10deg); opacity: .75; animation: sp-sway 3s ease-in-out infinite; }
.sp-env .ob { inset: 0; }
@keyframes sp-sway { 50% { transform: rotate(3deg) translateY(6px); } }
.sp-w { position: absolute; left: -2%; width: 104%; height: 18%; top: 41%; z-index: 3; }
.sp-a path { fill: rgba(130, 210, 245, .75); } .sp-b { top: 43.5%; z-index: 4; } .sp-b path { fill: rgba(60, 160, 220, .8); }
.sp-w { animation: wv-slide 3.5s ease-in-out infinite alternate; }
.sp-bub i { position: absolute; bottom: 10%; width: var(--s); height: var(--s); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: rgba(255,255,255,.15); opacity: 0; }
.op-splash.bubble .sp-bub i { animation: sp-bub 1.1s ease-in infinite; animation-delay: var(--w); }
@keyframes sp-bub { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-160px) translateX(10px); } }
.op-splash.burst .sp-env { animation: sp-jump .55s cubic-bezier(.2,.9,.3,1.3) forwards; filter: none; opacity: 1; }
@keyframes sp-jump { from { top: 56%; transform: rotate(-4deg); } to { top: 14%; transform: rotate(0); } }
.sp-drops { position: absolute; left: 50%; top: 44%; z-index: 6; }
.sp-drops i { position: absolute; width: var(--s); height: calc(var(--s) * 1.4); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #9EDCFA; opacity: 0; }
.op-splash.burst .sp-drops i { animation: sp-drop .9s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes sp-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) translateY(60px); } }

/* ---- slow origami: a square folded in four unfolds crease by crease (press and hold to start) ---- */
.og { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1100px; }
.og-paper { --S: min(300px, 76vw); position: relative; width: var(--S); height: var(--S); transform-style: preserve-3d; transform: translate(calc(var(--S) / 4), calc(var(--S) / -4)) rotateX(10deg); transition: transform 2.4s cubic-bezier(.45,0,.2,1); }
.og-half { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; }
.og-L { left: 0; } .og-R { left: 50%; transform-origin: 0 50%; transform: rotateY(-179.5deg); transition: transform 1.2s cubic-bezier(.45,0,.25,1); }
.og-q { position: absolute; left: 0; width: 100%; height: 50%; transform-style: preserve-3d; }
.og-bl, .og-br { top: 50%; } .og-tl, .og-tr { top: 0; transform-origin: 50% 100%; transform: rotateX(-179.5deg); transition: transform 1.2s cubic-bezier(.45,0,.25,1); }
.og-q i { position: absolute; inset: 0; backface-visibility: hidden; }
.og-f { transform: translateZ(.6px); background: linear-gradient(135deg, var(--op-p), color-mix(in srgb, var(--op-p) 88%, #000)); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08); }
.og-b { transform: rotateY(180deg) translateZ(.6px); background: repeating-linear-gradient(45deg, var(--op-a) 0 10px, color-mix(in srgb, var(--op-a) 82%, #fff) 10px 20px); }
.og-tl .og-b, .og-tr .og-b { transform: rotateX(180deg) translateZ(.6px); }
.og-press { position: absolute; z-index: 5; width: 84px; height: 84px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--op-s) 75%, #fff), var(--op-s) 70%); color: #FFF; font: 700 28px/1 var(--hebrew, serif); cursor: pointer; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5); touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .25s, opacity .4s; }
.og-press svg { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); }
.og-ring { fill: none; stroke: var(--op-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; }
.op-origami.holding .og-ring { transition: stroke-dashoffset .9s linear; stroke-dashoffset: 0; }
.op-origami.holding .og-press { transform: scale(.92); }
.op-origami.go .og-press { opacity: 0; transform: scale(.4); pointer-events: none; }
.op-origami.u1 .og-R { transform: none; }
.op-origami.u1 .og-paper { transform: translate(0, calc(var(--S) / -4)) rotateX(6deg); }
.op-origami.u2 .og-tl, .op-origami.u2 .og-tr { transform: none; }
.op-origami.u2 .og-paper { transform: none; }
.op-origami.flat .og-paper { filter: brightness(1.15); transition: filter .3s, opacity .4s; }
.op-origami.gone .og-paper { opacity: 0; transition: opacity .5s; }
.op-origami .og-paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(0,0,0,.12) 50%, transparent calc(50% + .5px)), linear-gradient(180deg, transparent calc(50% - .5px), rgba(0,0,0,.12) 50%, transparent calc(50% + .5px)); opacity: 0; transition: opacity .5s; transform: translateZ(1px); }
.op-origami.u2 .og-paper::after { opacity: 1; transition-delay: 1.1s; }

/* ---- portal: a swirling hole opens, the envelope spirals in, the card spins out ---- */
.pt { position: absolute; inset: 0; display: grid; place-items: center; }
.pt-hole { position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; transform: scale(0); transition: transform .6s cubic-bezier(.3,1.4,.5,1); }
.pt-hole i { position: absolute; inset: 0; border-radius: 50%; }
.pt-swirl { background: conic-gradient(from 0deg, var(--op-a), #7C4DFF, var(--op-a2), #00D1FF, var(--op-a)); -webkit-mask: radial-gradient(circle, transparent 18%, #000 20% 68%, transparent 70%); mask: radial-gradient(circle, transparent 18%, #000 20% 68%, transparent 70%); animation: pt-spin 1.2s linear infinite; filter: blur(1px); }
.pt-ring { border: 2px dashed rgba(255,255,255,.7); animation: pt-spin 2s linear infinite reverse; }
.pt-r1 { inset: 8%; } .pt-r2 { inset: 22%; animation-duration: 1.4s; } .pt-r3 { inset: 36%; animation-duration: .9s; }
.pt-core { inset: 30%; background: radial-gradient(circle, #FFF 0, #E6DBFF 30%, rgba(124,77,255,.0) 70%); }
@keyframes pt-spin { to { transform: rotate(360deg); } }
.pt-env { position: absolute; width: 74%; aspect-ratio: 10 / 7; transition: transform 1s cubic-bezier(.6,0,.8,.4), opacity 1s; }
.pt-env .ob { inset: 0; }
.pt-motes i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #FFF; opacity: 0; }
.op-portal.open .pt-hole { transform: scale(1); }
.op-portal.open .pt-motes i { animation: pt-mote 1s ease-in infinite; animation-delay: var(--w); }
@keyframes pt-mote { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-160px); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(calc(var(--a) + 160deg)) translateY(0); } }
.op-portal.suck .pt-env { transform: rotate(720deg) scale(0); opacity: 0; }
.op-portal.flash .pt-core { animation: pt-flash .5s ease-out forwards; }
.op-portal.flash .pt-hole { transform: scale(0); transition: transform .7s .35s cubic-bezier(.6,0,.4,1); }
@keyframes pt-flash { 50% { transform: scale(2.4); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
.rv-portal { animation: rv-portal 1.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rv-portal { from { transform: rotate(-540deg) scale(0); opacity: 0; filter: blur(8px) brightness(2); } 60% { opacity: 1; filter: none; } to { transform: none; opacity: 1; } }

/* ---- plane & banner at the beach, fireworks ---- */
.pl { position: absolute; inset: 0; overflow: hidden; border-radius: 22px; container-type: inline-size; background: linear-gradient(180deg, #7EC8F2, #C8ECFF 62%); }
.pl-sun { position: absolute; right: 12%; top: 10%; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, #FFF6C2, #FFD24A 60%, rgba(255,210,74,0) 72%); }
.pl-cloud { position: absolute; width: 90px; height: 26px; border-radius: 20px; background: #FFF; opacity: .9; animation: pl-cloud 14s linear infinite; }
.pl-cloud::before { content: ""; position: absolute; left: 18px; top: -14px; width: 40px; height: 34px; border-radius: 50%; background: #FFF; }
.pl-c1 { left: 10%; top: 22%; } .pl-c2 { left: 60%; top: 36%; transform: scale(.7); animation-duration: 20s; }
@keyframes pl-cloud { to { translate: 40px 0; } }
.pl-sea { position: absolute; left: 0; right: 0; bottom: 20%; height: 18%; background: linear-gradient(180deg, #2E9BD6, #1B78B5); }
.pl-sand { position: absolute; left: -10%; right: -10%; bottom: -6%; height: 30%; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3) 0 2px, transparent 3px) 0 0 / 22px 18px, linear-gradient(180deg, #F6DFA5, #E9C47A); }
.pl-fly { position: absolute; top: 18%; left: 0; display: flex; align-items: center; transform: translateX(-120%); white-space: nowrap; flex-direction: row-reverse; }
.pl-plane { width: 86px; fill: #F4F4F4; stroke: #36506E; stroke-width: 1.4; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.pl-plane .pl-wing { fill: var(--op-a); }
.pl-prop { fill: #36506E; animation: pl-prop .08s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pl-prop { 50% { transform: scaleY(.2); } }
.pl-rope { width: 26px; height: 1.5px; background: #36506E; }
.pl-banner { padding: 7px 16px 7px 12px; background: #FFF; color: var(--op-a); font: 700 17px/1 var(--display, Georgia, serif); border-radius: 3px 10px 10px 3px; box-shadow: 0 4px 8px rgba(0,0,0,.15); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); animation: pl-wave .5s ease-in-out infinite alternate; transform-origin: 100% 50%; }
@keyframes pl-wave { to { transform: skewY(-3deg) scaleY(.94); } }
.op-plane.fly .pl-fly { animation: pl-fly 2.8s cubic-bezier(.35,.1,.55,.95) forwards; }
@keyframes pl-fly { 0% { transform: translateX(-110%) translateY(10px); } 50% { transform: translateX(calc(50cqw - 50%)) translateY(-4px); } 100% { transform: translateX(110cqw) translateY(-18px); } }
.pl-fw b { position: absolute; width: 0; height: 0; }
.pl-fw i { position: absolute; width: 4px; height: 26px; margin: -13px -2px; border-radius: 2px; background: linear-gradient(180deg, #FFF, var(--op-a2), transparent); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.pl-fw b:nth-child(2) i { background: linear-gradient(180deg, #FFF, #FF5DA2, transparent); } .pl-fw b:nth-child(3) i { background: linear-gradient(180deg, #FFF, #FFD24A, transparent); }
.op-plane.boom .pl-fw i { animation: pl-burst 1s cubic-bezier(.2,.7,.3,1) forwards; animation-delay: calc(var(--k) * .35s); }
@keyframes pl-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scaleY(.2); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-60px) scaleY(1); } }
.pl-tap { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }

/* ---- shaped by sand: a dune swirls up, forms the card, and becomes paper ---- */
.sa { position: absolute; inset: 0; }
.sa-grains i { position: absolute; left: var(--hx); top: var(--hy); width: 9px; height: 9px; margin: -4.5px; border-radius: 40%; background: radial-gradient(circle at 35% 30%, #FBE7B2, #D9AE62); transition: left 1s cubic-bezier(.4,0,.2,1), top 1s cubic-bezier(.4,0,.2,1), transform 1s, border-radius .6s, width .6s, height .6s, margin .6s; transition-delay: var(--w); }
.op-sand.swirl .sa-grains i { transform: translate(var(--sx), var(--sy)) rotate(200deg); }
.op-sand.form .sa-grains i { left: var(--gx); top: var(--gy); transform: none; width: 9%; height: 12%; margin: -4.2% -4.5%; border-radius: 2px; }
.sa-sheet { position: absolute; inset: 0; border-radius: 10px; background: var(--op-p); opacity: 0; transition: opacity .5s; box-shadow: 0 20px 30px -18px rgba(0,0,0,.4); }
.op-sand.paper .sa-sheet { opacity: 1; }
.op-sand.paper .sa-grains i { opacity: 0; transition: opacity .6s; }
.op-sand.gone .sa-sheet { opacity: 0; }
.sa-tap { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }

/* ---- dove & owl fly out and lift the card ---- */
.op-birds .bd { position: absolute; inset: 0; }
.op-birds { z-index: 25; }
.bd-bird { position: absolute; left: 50%; top: 26%; width: 100px; margin-left: -50px; opacity: 0; z-index: 30; pointer-events: none; }
.bd-bird svg { width: 100%; display: block; overflow: visible; }
.bd-dove svg { fill: #FFFFFF; stroke: #B9C3D6; stroke-width: 1; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.bd-owl svg { fill: #A0703E; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.bd-wing { transform-box: fill-box; transform-origin: 100% 100%; animation: bd-flap .22s ease-in-out infinite alternate; }
.bd-w2 { transform-origin: 0% 100%; }
@keyframes bd-flap { to { transform: scaleY(-.6); } }
.op-birds.flap .ob-flap { transform: rotateX(180deg); transition: transform .5s; }
.op-birds.out .bd-dove { animation: bd-dove 2.6s cubic-bezier(.4,0,.3,1) forwards; }
.op-birds.out .bd-owl { animation: bd-owl 2.6s cubic-bezier(.4,0,.3,1) .1s forwards; }
@keyframes bd-dove { 0% { opacity: 0; transform: translate(0, 40px) scale(.4); } 15% { opacity: 1; } 35% { transform: translate(-90px, -120px) scale(1); } 75% { transform: translate(-70px, -170px) scale(1); opacity: 1; } 100% { transform: translate(-260px, -320px) scale(.8); opacity: 0; } }
@keyframes bd-owl { 0% { opacity: 0; transform: translate(0, 40px) scale(.4); } 15% { opacity: 1; } 35% { transform: translate(90px, -120px) scale(1); } 75% { transform: translate(70px, -170px) scale(1); opacity: 1; } 100% { transform: translate(260px, -320px) scale(.8); opacity: 0; } }
.bd-feathers i { position: absolute; top: 20%; width: 10px; height: 16px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #FFF; opacity: 0; }
.op-birds.out .bd-feathers i { animation: bd-feather 2.4s ease-in forwards; animation-delay: var(--w); }
@keyframes bd-feather { 0% { opacity: 0; transform: translateY(-40px); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), 140px) rotate(220deg); } }

/* ---- bullseye: the arrow flies, hits with a wobble, the note becomes the card ---- */
.ar { position: absolute; inset: 0; }
.ar-target { position: absolute; right: 6%; top: 50%; width: 42%; aspect-ratio: 1; transform: translateY(-50%) perspective(400px) rotateY(-22deg); }
.ar-target i { position: absolute; border-radius: 50%; }
.ar-target i:nth-child(1) { inset: 0; background: #FFF; box-shadow: 0 10px 20px -8px rgba(0,0,0,.35), inset 0 0 0 2px #D9D9D9; }
.ar-target i:nth-child(2) { inset: 12%; background: var(--op-a); }
.ar-target i:nth-child(3) { inset: 24%; background: #FFF; }
.ar-target i:nth-child(4) { inset: 36%; background: var(--op-a); }
.ar-target i:nth-child(5) { inset: 44%; background: #E53935; }
.ar-arrow { position: absolute; left: 2%; top: 46%; width: 40%; transform-origin: 85% 50%; }
.ar-arrow svg { width: 100%; display: block; overflow: visible; }
.ar-shaft { stroke: #7A5230; stroke-width: 4; stroke-linecap: round; } .ar-head { fill: #5F6B7A; } .ar-fl { fill: var(--op-a2); }
.ar-note { position: absolute; left: 30%; top: -8px; width: 34px; height: 22px; border-radius: 4px; background: var(--op-p); box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.1); }
.op-arrow.draw .ar-arrow { transform: translateX(-14px); transition: transform .3s; }
.op-arrow.shoot .ar-arrow { animation: ar-fly .62s cubic-bezier(.4,0,.8,.6) forwards; }
@keyframes ar-fly { 0% { transform: translateX(-14px) rotate(0); } 50% { transform: translateX(70%) translateY(-18px) rotate(-6deg); } 100% { transform: translateX(118%) translateY(4px) rotate(2deg); } }
.op-arrow.hit .ar-arrow { animation: ar-wobble .5s ease-out forwards; transform: translateX(118%) translateY(4px); }
@keyframes ar-wobble { 0%, 100% { transform: translateX(118%) translateY(4px) rotate(2deg); } 20% { transform: translateX(118%) translateY(4px) rotate(-4deg); } 45% { transform: translateX(118%) translateY(4px) rotate(3deg); } 70% { transform: translateX(118%) translateY(4px) rotate(-1.5deg); } }
.op-arrow.hit .ar-target { animation: ar-shake .35s ease-out; }
@keyframes ar-shake { 30% { transform: translateY(-50%) perspective(400px) rotateY(-22deg) translateX(5px); } }
.ar-tap { position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer; }

/* ---- starfield: stars across the whole screen stream together into the card ---- */
.sf { position: absolute; inset: 0; }
.sf-sky { position: absolute; inset: -4% -3% -22%; border-radius: 24px; background: radial-gradient(ellipse at 50% 20%, #2B2F6B, #12143A 70%); }
.sf-sky i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF; box-shadow: 0 0 6px #FFF; animation: op-twinkle 1.8s ease-in-out infinite; animation-delay: var(--w); }
.sf-env { position: absolute; inset: 10% 8%; }
.sf-env .ob { inset: 0; }
.sf-shoot { position: absolute; left: 10%; top: 12%; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, #FFF); transform: rotate(18deg); opacity: 0; animation: sf-shoot 3.5s ease-in 1s infinite; }
@keyframes sf-shoot { 0% { opacity: 0; translate: 0 0; } 5% { opacity: 1; } 18% { opacity: 0; translate: 180px 60px; } 100% { opacity: 0; translate: 180px 60px; } }
.op-starfield.wish .sf-seal { transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 0 14px #FFE38A); transition: transform .4s, filter .4s; }
.op-starfield.fade .sf-env, .op-starfield.fade .sf-seal, .op-starfield.fade .sf-sky { opacity: 0; transition: opacity .7s; }
.sf-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.sf-layer i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #FFF; box-shadow: 0 0 8px 2px rgba(255,236,160,.9); transform: translate(var(--x0), var(--y0)) scale(.3); opacity: 0; transition: transform 1.4s cubic-bezier(.5,0,.2,1), opacity .3s; transition-delay: var(--w); }
.sf-layer.on i { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(1); }
.sf-layer.lined i { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(2.5); transition: transform .5s, opacity .5s; transition-delay: 0s; }
.sf-flash { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #FFF; opacity: 0; }
.sf-layer.lined .sf-flash { animation: sf-flash .7s ease-out forwards; }
@keyframes sf-flash { 30% { opacity: .95; transform: scale(60); } 100% { opacity: 0; transform: scale(90); } }
@media (prefers-reduced-motion: reduce) { .op-fire *, .op-splash *, .op-origami *, .op-portal *, .op-plane *, .op-sand *, .op-birds *, .op-arrow *, .op-starfield *, .sf-layer * { animation: none !important; transition: none !important; } }

/* =====================================================================
   Origami crane (replaces the slow press-and-hold origami)
   ===================================================================== */
.op-origami .og-paper { transition: transform .9s cubic-bezier(.3,1.25,.4,1); }
.op-origami .og-R { transition: transform .55s cubic-bezier(.55,0,.25,1.2); }
.op-origami .og-tl, .op-origami .og-tr { transition: transform .55s cubic-bezier(.55,0,.25,1.2); }
.op-origami .og-b { background: repeating-linear-gradient(45deg, var(--op-a) 0 9px, color-mix(in srgb, var(--op-a) 78%, #fff) 9px 18px),
  radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--op-a2) 50%, transparent) 0 6px, transparent 7px) 0 0 / 28px 28px; background-blend-mode: multiply; }
.op-origami.u2 .og-paper::after { transition-delay: .35s; }
.cn-perch { position: absolute; left: 50%; top: 50%; z-index: 4; width: min(230px, 62%); transform: translate(-46%, -86%); pointer-events: none; }
.cn-bird { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 10px 10px rgba(0,0,0,.28)); animation: cn-bob 2.8s ease-in-out infinite; }
.cn-bird path { stroke: color-mix(in srgb, var(--op-a) 60%, #000); stroke-width: .6; stroke-linejoin: round; }
.cn-wb { fill: color-mix(in srgb, var(--op-a) 72%, #000); }
.cn-tail { fill: color-mix(in srgb, var(--op-a) 82%, #fff); }
.cn-neck { fill: color-mix(in srgb, var(--op-a) 88%, #fff); }
.cn-head { fill: color-mix(in srgb, var(--op-a) 70%, #000); }
.cn-body { fill: var(--op-a); }
.cn-shade { fill: color-mix(in srgb, var(--op-a) 75%, #000); opacity: .55; }
.cn-wf { fill: color-mix(in srgb, var(--op-a) 60%, #fff); }
.cn-wf2 { fill: color-mix(in srgb, var(--op-a) 40%, #fff); }
.cn-wb, .cn-wf, .cn-wf2 { transform-box: view-box; transform-origin: 104px 78px; animation: cn-breathe 2.8s ease-in-out infinite; }
@keyframes cn-bob { 50% { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes cn-breathe { 50% { transform: scaleY(.9) skewX(-3deg); } }
.op-origami.go .cn-wb, .op-origami.go .cn-wf, .op-origami.go .cn-wf2 { animation: cn-flap .16s ease-in-out infinite alternate; }
.op-origami.go .cn-wb { animation-delay: -.08s; }
@keyframes cn-flap { from { transform: scaleY(1.05); } to { transform: scaleY(-.55); } }
.op-origami.go .cn-perch { animation: cn-hop .38s cubic-bezier(.3,0,.4,1.6) forwards; }
@keyframes cn-hop { to { transform: translate(-46%, -104%) rotate(-4deg); } }
.op-origami.fly .cn-perch { animation: cn-away 1.5s cubic-bezier(.45,0,.6,.6) forwards; }
@keyframes cn-away { 0% { transform: translate(-46%, -104%) rotate(-4deg); } 30% { transform: translate(-30%, -150%) rotate(-10deg) scale(.95); }
  60% { transform: translate(30%, -230%) rotate(-16deg) scale(.72); opacity: 1; } 100% { transform: translate(190%, -360%) rotate(-22deg) scale(.4); opacity: 0; } }
.cn-bits { position: absolute; left: 50%; top: 46%; width: 0; height: 0; z-index: 5; pointer-events: none; }
.cn-bits i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; clip-path: polygon(50% 0, 100% 100%, 0 100%); opacity: 0; background: var(--op-a); }
.cn-bits i:nth-child(3n) { background: var(--op-a2); } .cn-bits i:nth-child(4n) { background: var(--op-g); } .cn-bits i:nth-child(5n) { background: var(--op-p); }
.op-origami.fly .cn-bits i { animation: cn-bit 1.3s cubic-bezier(.15,.7,.3,1) var(--w) forwards; }
@keyframes cn-bit { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.4); } 25% { opacity: 1; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) rotate(calc(var(--r) * .4)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--r)) scale(.7); } }
.cn-creases { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transform: translateZ(2px); overflow: visible; }
.cn-creases path { fill: none; stroke: var(--op-g); stroke-width: .9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px var(--op-g)); }
.op-origami.flat .cn-creases path { animation: cn-crease .7s ease-out forwards; }
.op-origami.flat .cn-creases path:nth-child(2) { animation-delay: .08s; } .op-origami.flat .cn-creases path:nth-child(3) { animation-delay: .16s; } .op-origami.flat .cn-creases path:nth-child(4) { animation-delay: .22s; }
@keyframes cn-crease { 0% { opacity: 1; stroke-dashoffset: 1; } 60% { opacity: 1; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
.op-origami.flat .og-paper { filter: brightness(1.12); }
.cn-tap { position: absolute; inset: 0; z-index: 6; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.cn-tap:focus-visible { outline: 3px solid var(--op-a); outline-offset: 4px; }
.op-origami.go .cn-tap { pointer-events: none; }
.rv-crane { animation: rv-crane 1.25s cubic-bezier(.25,.8,.3,1) both; transform-origin: 50% 40%; }
@keyframes rv-crane { 0% { opacity: 0; transform: perspective(1100px) rotateX(32deg) scale(.78); filter: brightness(1.4); } 40% { opacity: 1; }
  70% { transform: perspective(1100px) rotateX(-5deg) scale(1.025); filter: brightness(1.08); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .cn-bird, .cn-bird path { animation: none !important; } }

/* =====================================================================
   Tapping the open invitation: each design sends out something different
   ===================================================================== */
.tap-heart, .tap-star, .tap-bit, .tap-petal, .tap-wave, .tap-flash { position: absolute; pointer-events: none; }
.tap-heart { left: -10px; top: -10px; width: 20px; height: 20px; background: currentColor; opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.4 3.3 5 6.6 5c2 0 3.4 1.1 5.4 3 2-1.9 3.4-3 5.4-3C20.7 5 23 8.4 21.5 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.4 3.3 5 6.6 5c2 0 3.4 1.1 5.4 3 2-1.9 3.4-3 5.4-3C20.7 5 23 8.4 21.5 11.8 19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); animation: tap-heart 1.3s cubic-bezier(.2,.7,.3,1) var(--w) forwards; }
@keyframes tap-heart { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.2); } 20% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--d) * -.4)) scale(var(--s)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(calc(var(--s) * .8)); } }
.tap-star { left: -9px; top: -9px; width: 18px; height: 18px; background: currentColor; opacity: 0; filter: drop-shadow(0 0 4px currentColor);
  clip-path: polygon(50% 0, 61% 38%, 100% 38%, 69% 61%, 80% 100%, 50% 76%, 20% 100%, 31% 61%, 0 38%, 39% 38%); animation: tap-star 1s cubic-bezier(.1,.8,.3,1) var(--w) forwards; }
@keyframes tap-star { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0) scale(.3); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(220deg) scale(1.1); } }
.tap-flash { left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF, color-mix(in srgb, var(--tap-c, #F2C14E) 60%, transparent) 40%, transparent 70%); animation: tap-flash .6s ease-out forwards; }
@keyframes tap-flash { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(2.4); } }
.tap-wave { left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--tap-c, #FFFFFF); opacity: 0; animation: tap-wave 1.3s cubic-bezier(.2,.6,.3,1) var(--w) forwards; }
@keyframes tap-wave { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(7); border-width: .5px; } }
.tap-bit { left: -4px; top: -3px; width: 8px; height: 5px; border-radius: 1px; opacity: 0; animation: tap-bit 1.2s cubic-bezier(.15,.75,.35,1) forwards; }
@keyframes tap-bit { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(40px) rotate(var(--r)); } }
.tap-petal { left: -7px; top: -5px; width: 14px; height: 10px; border-radius: 60% 0 60% 0; opacity: 0; animation: tap-petal 1.45s ease-out var(--w) forwards; }
@keyframes tap-petal { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); } 20% { opacity: .95; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(50px) rotate(var(--r)) scale(1); } }

/* =====================================================================
   The words on the opened card arrive in a different way per design (Elite pages and the home page)
   ===================================================================== */
.jr .env-w-blur .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-blur .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-name: wr-blur; animation-duration: 1.15s; animation-timing-function: ease-out; }
.jr .env-w-scale .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-scale .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-name: wr-scale; animation-duration: .85s; animation-timing-function: cubic-bezier(.3,1.5,.5,1); }
.jr .env-w-slide .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-slide .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-name: wr-slide; animation-duration: 1s; }
.jr .env-w-slide .env-result .inv-body > :nth-child(even):not(.inv-name):not(.inv-he-name), #hero-env.env-w-slide .env-result .inv-body > :nth-child(even):not(.inv-name):not(.inv-he-name) { animation-name: wr-slide-r; }
.jr .env-w-drop .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-drop .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-name: wr-drop; animation-duration: .95s; animation-timing-function: cubic-bezier(.3,1.45,.5,1); }
.jr .env-w-type .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-type .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-name: jr-write; animation-duration: 1.3s; animation-timing-function: cubic-bezier(.5,0,.4,1); }
.jr .env-w-rise .env-result .inv-body > :not(.inv-name):not(.inv-he-name), #hero-env.env-w-rise .env-result .inv-body > :not(.inv-name):not(.inv-he-name) { animation-duration: .95s; }
@keyframes wr-blur { from { opacity: 0; filter: blur(9px); transform: scale(1.05); letter-spacing: .08em; } to { opacity: 1; filter: none; transform: none; } }
@keyframes wr-scale { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes wr-slide { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes wr-slide-r { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes wr-drop { from { opacity: 0; transform: translateY(-22px) rotate(-2deg); } to { opacity: 1; transform: none; } }
#hero-env .env-result .inv-body > * { animation: jr-rise .95s cubic-bezier(.2,.8,.2,1) both; }
#hero-env .env-result .inv-body > *:nth-child(2) { animation-delay: .15s; }
#hero-env .env-result .inv-body > *:nth-child(3) { animation-delay: .3s; }
#hero-env .env-result .inv-body > *:nth-child(4) { animation-delay: .45s; }
#hero-env .env-result .inv-body > *:nth-child(5) { animation-delay: .6s; }
#hero-env .env-result .inv-body > *:nth-child(n+6) { animation-delay: .8s; }
#hero-env .env-result .inv-name { animation: jr-write 1.1s cubic-bezier(.5,0,.3,1) .3s both; }
#hero-env .env-result .inv-he-name { animation: jr-write-rtl 1s cubic-bezier(.5,0,.3,1) .7s both; }
@media (prefers-reduced-motion: reduce) { #hero-env .env-result .inv-body > *, .jr .env-result .inv-body > * { animation: none !important; } }

/* =====================================================================
   Scene entrances: each design has its own speed (no two alike), and the parts inside follow one by one
   ===================================================================== */
.jr-e-unfold .jr-scene.jr-in { animation-duration: 1.25s; }
.jr-e-slideL .jr-scene.jr-in { animation-duration: 1.05s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.jr-e-slideR .jr-scene.jr-in { animation-duration: .9s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.jr-e-zoom .jr-scene.jr-in { animation-duration: 1.35s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.jr-e-blur .jr-scene.jr-in { animation-duration: 1.65s; animation-timing-function: ease-out; }
.jr-e-drop .jr-scene.jr-in { animation-duration: 1.15s; }
.jr-e-swing .jr-scene.jr-in { animation-duration: 1.55s; }
.jr-e-flipY .jr-scene.jr-in { animation-duration: 1.2s; animation-timing-function: cubic-bezier(.2,.9,.3,1.1); }
.jr-e-rise .jr-scene.jr-in { animation-duration: 1.5s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.jr-e-curtain .jr-scene.jr-in { animation-duration: 1.45s; animation-timing-function: cubic-bezier(.65,0,.35,1); }
.jr-e-skew .jr-scene.jr-in { animation-duration: 1s; }
.jr-e-spiral .jr-scene.jr-in { animation-duration: 1.6s; animation-timing-function: cubic-bezier(.2,.9,.25,1.05); }
.jr-e-stamp .jr-scene.jr-in { animation-duration: .75s; }
.jr-e-fold .jr-scene.jr-in { animation-duration: 1.3s; }
.jr-e-peel .jr-scene.jr-in { animation-duration: 1.55s; }
.jr-e-bounce .jr-scene.jr-in { animation-duration: 1.35s; }
.jr-e-iris .jr-scene.jr-in { animation-duration: 1.7s; animation-timing-function: cubic-bezier(.65,0,.35,1); }
.jr-e-wipe .jr-scene.jr-in { animation-duration: 1.2s; animation-timing-function: cubic-bezier(.77,0,.18,1); }
.jr-e-glide .jr-scene.jr-in { animation-duration: 1.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
.jr-e-elastic .jr-scene.jr-in { animation-duration: 1.4s; }
/* the follow-in of the parts: style and pace set per design below (default: rise) */
.jr { --kid: kid-rise; --kd: .8s; --k0: .3s; --ks: .13s; --ke: cubic-bezier(.2,.8,.2,1); }
.jr-e-slideL, .jr-e-glide, .jr-e-skew { --kid: kid-left; --kd: .9s; --ks: .1s; }
.jr-e-slideR, .jr-e-fold, .jr-e-flipY { --kid: kid-right; --kd: .85s; --ks: .11s; }
.jr-e-zoom, .jr-e-stamp, .jr-e-elastic, .jr-e-bounce { --kid: kid-pop; --kd: .6s; --ks: .09s; --ke: cubic-bezier(.3,1.5,.5,1); }
.jr-e-blur, .jr-e-iris, .jr-e-curtain { --kid: kid-blur; --kd: 1.1s; --k0: .45s; --ks: .18s; --ke: ease-out; }
.jr-e-swing, .jr-e-peel, .jr-e-spiral, .jr-e-unfold { --kid: kid-tilt; --kd: 1s; --k0: .4s; --ks: .15s; }
.jr-e-drop, .jr-e-wipe { --kid: kid-drop; --kd: .75s; --ks: .1s; --ke: cubic-bezier(.3,1.35,.5,1); }
.jr-e-rise { --kid: kid-rise; --kd: 1s; --k0: .5s; --ks: .2s; }
.jr-kids.jr-in > :is(h2, h3, .muted, .jr-map, .jr-place, .action-row, .cal, .dt, form, .rsvp-opts, .btn-row, .gb-list, .gbk-list, .gx-box, .tune-row, .jr-fin-actions):not(.jr-burst):not(.fz) {
  animation: var(--kid) var(--kd) var(--ke) both; animation-delay: calc(var(--k0) + var(--k, 0) * var(--ks)); }
@keyframes kid-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kid-left { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes kid-right { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@keyframes kid-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes kid-blur { from { opacity: 0; filter: blur(8px); transform: translateY(8px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes kid-tilt { from { opacity: 0; transform: perspective(700px) rotateX(-28deg) translateY(16px); transform-origin: top; } to { opacity: 1; transform: none; } }
@keyframes kid-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jr-kids.jr-in > * { animation: none !important; } }

/* birthday cover: with a long name the age badge joins the words under the name instead of sitting in the corner (js/render.js) */
.inv-card .inv-cover.inv-age-flow .inv-age { position: static; flex: none; width: 15cqw; height: 15cqw; font-size: 7.5cqw; margin-top: 1cqw; }
/* framed birthday covers: the big heading stays inside the frame */
.inv-card.inv-framed .inv-card-head { font-size: 12cqw; }
.inv-card.inv-frame-oval .inv-card-head { font-size: 11cqw; }
.inv-card.inv-framed .inv-card-to { max-width: 56cqw; }

/* ---------- smoothness pass: always-running shines and pulses move with transform / opacity only (no repaint every frame) ---------- */
.jr-next::after { background-size: 100% 100%; transform: translateX(-100%); animation: tx-sheen 3.4s ease-in-out infinite; }
.jr-jump { overflow: visible; }
.jr-jump::after { animation-iteration-count: 3; }
.jr-tick { animation-iteration-count: 4; }
@keyframes tx-sheen { 0%, 40% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes tx-sheen-late { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* =====================================================================
   Rocket launch (Elite): countdown → ignition → lift-off → hits the envelope in the sky → it bursts → the card flies out
   ===================================================================== */
.rk { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; container-type: size; background: radial-gradient(120% 80% at 50% 110%, #5B3A8E, transparent 60%), linear-gradient(180deg, #070B24, #18205A 55%, #2A2470); box-shadow: 0 30px 50px -26px rgba(0,0,0,.7); }
.rk-sky i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px #FFFFFF; animation: rk-tw 2.6s ease-in-out var(--w) infinite; }
@keyframes rk-tw { 50% { opacity: .25; transform: scale(.6); } }
.rk-moon { position: absolute; right: 9%; top: 5%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFF7D6, #F2D37A 70%); box-shadow: 0 0 22px rgba(255,231,163,.6), inset -5px -4px 0 rgba(0,0,0,.08); }
.rk-planet { position: absolute; left: -6%; bottom: 20%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FF8FA8, #C2456A 75%); opacity: .85; }
.rk-planet::after { content: ""; position: absolute; left: -22%; right: -22%; top: 44%; height: 14%; border-radius: 50%; border: 3px solid rgba(255,214,102,.8); transform: rotate(-16deg); }
.rk-env { --op-p: #FFF6E0; --op-p2: #F3DFAF; --op-in: #D9B970; --op-g: #FFB627; --op-a: #FF5A6E; --op-a2: #FFB627; position: absolute; left: 50%; top: 7%; width: 56%; filter: drop-shadow(0 0 16px rgba(255,214,102,.45)); aspect-ratio: 10 / 7; margin-left: -28%; animation: rk-float 3.4s ease-in-out infinite; transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .35s, filter .35s; }
.rk-env .ob::before { display: none; }
@keyframes rk-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.rk-cracks i { position: absolute; left: 50%; bottom: 0; width: 2px; height: 0; background: #FFF3B0; box-shadow: 0 0 8px #FFB627; transform-origin: 50% 100%; z-index: 7; transition: height .25s ease-out .05s; }
.rk-cracks i:nth-child(1) { transform: rotate(-28deg); } .rk-cracks i:nth-child(2) { transform: rotate(4deg); } .rk-cracks i:nth-child(3) { transform: rotate(33deg); }
.rk-pad { position: absolute; left: 30%; right: 30%; bottom: 4%; height: 3.4%; border-radius: 6px; background: linear-gradient(180deg, #9AA6C8, #5E6A8F); box-shadow: 0 6px 12px rgba(0,0,0,.4); }
.rk-pad i { position: absolute; left: 10%; right: 10%; top: -40%; height: 40%; background: repeating-linear-gradient(90deg, #FFB627 0 8px, #1C1830 8px 16px); border-radius: 2px; }
.rk-rocket { position: absolute; left: 50%; bottom: 7%; width: 26%; margin-left: -13%; z-index: 5; transition: transform 1.15s cubic-bezier(.55,0,.75,.35), opacity .3s; }
.rk-ship { display: block; width: 100%; overflow: visible; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
.rk-hull { fill: #F4F6FC; stroke: #C7CFE6; stroke-width: 1.2; } .rk-nose { fill: #FF5A6E; } .rk-fin { fill: #FF5A6E; } .rk-band { fill: #FFB627; }
.rk-shine { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; opacity: .8; }
.rk-win { fill: #FFB627; } .rk-win2 { fill: #3E6FD8; }
.rk-ini { font: 800 13px/1 'Fredoka', 'Rubik', sans-serif; fill: #1C1830; }
.rk-flame { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); opacity: 0; transition: transform .25s, opacity .2s; }
.rk-rocket { animation: rk-idle 2.4s ease-in-out infinite; }
@keyframes rk-idle { 50% { translate: 0 -3px; } }
.rk-count { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; pointer-events: none; }
.rk-count b { grid-area: 1 / 1; font: 800 clamp(70px, 34cqw, 140px)/1 'Fredoka', 'Rubik', sans-serif; color: #FFFFFF; -webkit-text-stroke: 2px #FFB627; text-shadow: 0 0 24px #FFB627, 0 6px 0 rgba(0,0,0,.25); opacity: 0; }
.rk-count b.go { font-size: clamp(28px, 12cqw, 52px); color: #FFB627; text-shadow: 0 0 18px #FF5A2E; }
.op-rocket.count .rk-count b { animation: rk-num .78s cubic-bezier(.3,1.5,.5,1) both; }
.op-rocket.count .rk-count b:nth-child(2) { animation-delay: .8s; } .op-rocket.count .rk-count b:nth-child(3) { animation-delay: 1.6s; }
.op-rocket.count .rk-count b.go { animation: rk-go 1.1s ease-out 2.4s both; }
@keyframes rk-num { 0% { opacity: 0; transform: scale(2.4); } 18% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(.95); } 100% { opacity: 0; transform: scale(.5); } }
@keyframes rk-go { 0% { opacity: 0; transform: scale(.4) rotate(-8deg); } 25% { opacity: 1; transform: scale(1.1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.2); } }
/* ignition: flames roar, smoke billows out of the pad, the rocket shudders */
.op-rocket.ignite .rk-flame { transform: scaleY(1); opacity: 1; animation: rk-flick .09s linear infinite alternate; }
@keyframes rk-flick { from { transform: scaleY(.85) scaleX(.95); } to { transform: scaleY(1.15) scaleX(1.05); } }
.op-rocket.ignite .rk-rocket { animation: rk-shake .08s linear infinite; }
@keyframes rk-shake { 0% { translate: -1.5px 0; } 50% { translate: 1.5px -1px; } 100% { translate: -1px 1px; } }
.rk-smoke { position: absolute; left: 50%; bottom: 5%; width: 0; height: 0; z-index: 4; }
.rk-smoke i { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #C9CFE2 60%, rgba(201,207,226,0) 72%); opacity: 0; }
.op-rocket.ignite .rk-smoke i { animation: rk-puff 1.8s ease-out var(--w) forwards; }
@keyframes rk-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--x), -30px) scale(calc(var(--s) * 2.4)); } }
/* lift-off: up into the sky on a glowing trail */
.op-rocket.launch .rk-rocket { animation: none; transform: translateY(-21cqh); }
.rk-trail { position: absolute; left: 50%; bottom: 8%; width: 9%; margin-left: -4.5%; height: 30cqh; z-index: 3; transform-origin: 50% 100%; transform: scaleY(0); border-radius: 50% 50% 0 0; opacity: 0;
  background: linear-gradient(0deg, rgba(255,90,46,0), rgba(255,182,39,.9) 40%, #FFF3B0 85%, rgba(255,243,176,0)); filter: blur(2px); transition: transform 1.15s cubic-bezier(.55,0,.75,.35), opacity .3s; }
.op-rocket.launch .rk-trail { transform: scaleY(1); opacity: 1; }
/* impact: the envelope shudders and cracks with light */
.op-rocket.hit .rk-env { animation: rk-hit .32s linear 2; }
@keyframes rk-hit { 25% { transform: translate(-5px, -3px) rotate(-3deg); } 50% { transform: translate(4px, 2px) rotate(2deg); } 75% { transform: translate(-3px, 1px) rotate(-1deg); } }
.op-rocket.hit .rk-cracks i { height: 46%; }
.op-rocket.hit .rk-flame { opacity: 0; }
/* the burst */
.op-rocket.boom .rk-env { animation: none; transform: scale(1.35); opacity: 0; filter: brightness(2.5); }
.op-rocket.boom .rk-rocket { opacity: 0; transition: opacity .2s; }
.op-rocket.boom .rk-trail { opacity: 0; transition: opacity .6s; }
.rk-shards, .rk-burst { position: absolute; left: 50%; top: 25%; width: 0; height: 0; z-index: 9; pointer-events: none; }
.rk-shards i { position: absolute; left: -9px; top: -6px; width: 18px; height: 12px; background: var(--op-p); border: 1px solid var(--op-g); opacity: 0; clip-path: polygon(0 0, 100% 20%, 70% 100%, 10% 80%); }
.rk-shards i:nth-child(3n) { background: #FFB627; } .rk-shards i:nth-child(4n) { background: #FF5A6E; }
.op-rocket.boom .rk-shards i { animation: rk-shard 1.2s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes rk-shard { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) translateY(50px) rotate(var(--r)); } }
.rk-burst i { position: absolute; left: -2px; top: 0; width: 4px; height: 26px; border-radius: 4px; background: linear-gradient(#FFF3B0, #FFB627); opacity: 0; transform-origin: 50% 0; }
.op-rocket.boom .rk-burst i { animation: rk-ray .7s ease-out forwards; }
@keyframes rk-ray { 0% { opacity: 1; transform: rotate(var(--a)) translateY(8px) scaleY(.3); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d)) scaleY(1.2); } }
.rk-burst::before { content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF, rgba(255,214,102,.8) 35%, rgba(255,90,46,0) 70%); opacity: 0; }
.op-rocket.boom .rk-burst::before { animation: rk-flash .6s ease-out forwards; }
@keyframes rk-flash { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.2); } }
.op-rocket.boom .rk { animation: rk-quake .35s linear; }
@keyframes rk-quake { 25% { transform: translate(4px, -3px); } 50% { transform: translate(-4px, 2px); } 75% { transform: translate(2px, 3px); } }
.rk-tap { position: absolute; inset: 0; z-index: 10; border: 0; background: none; cursor: pointer; border-radius: 22px; }
.rk-tap:focus-visible { outline: 3px solid #FFB627; outline-offset: 3px; }
.op-rocket.count .rk-tap { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rk *, .rk { animation: none !important; transition: none !important; } }

.rk-seal { position: absolute; left: 50%; top: 56%; z-index: 6; width: 26%; aspect-ratio: 1; margin: -13% 0 0 -13%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FF8FA0, #D93A55 70%); color: #FFF3B0; font: 800 clamp(12px, 5cqw, 20px)/1 'Fredoka', sans-serif; box-shadow: 0 4px 8px rgba(0,0,0,.35); }

/* ---- rocket launch v2: a long climb with wind, a direct hit on the wax seal, the seal splits, then the burst ---- */
.rk-sky { position: absolute; inset: 0; transition: transform 2.8s cubic-bezier(.5,.05,.55,.95); }
.rk-moon, .rk-planet { transition: transform 2.8s cubic-bezier(.5,.05,.55,.95); }
.op-rocket.launch .rk-sky { transform: translateY(48cqh); }
.op-rocket.launch .rk-moon { transform: translateY(22cqh); } .op-rocket.launch .rk-planet { transform: translateY(70cqh); }
.op-rocket.ignite .rk-env, .op-rocket.launch .rk-env { animation: none; }
.rk-rocket { transform-origin: 50% 0; transition: transform 2.8s cubic-bezier(.5,.05,.55,.95), opacity .3s; }
.op-rocket.launch .rk-rocket { animation: none; transform: translateY(-30cqh) scale(.82); }
.op-rocket.launch .rk-ship { animation: rk-sway .45s ease-in-out infinite alternate; transform-origin: 50% 30%; }
@keyframes rk-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.op-rocket.hit .rk-rocket { transform: translateY(-28.6cqh) scale(.82); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.op-rocket.hit .rk-ship { animation: none; }
.rk-trail { height: 40cqh; transition: transform 2.8s cubic-bezier(.5,.05,.55,.95), opacity .4s; }
.rk-wind { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s; }
.rk-wind i { position: absolute; top: -25%; width: 2px; height: var(--h); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.75)); }
.op-rocket.launch .rk-wind { opacity: 1; } .op-rocket.launch .rk-wind i { animation: rk-wind var(--d) linear var(--w) infinite; }
.op-rocket.hit .rk-wind { opacity: 0; }
@keyframes rk-wind { to { transform: translateY(150cqh); } }
.rk-clouds { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.rk-clouds i { position: absolute; top: -30%; width: 42%; height: 12%; border-radius: 999px; background: radial-gradient(60% 90% at 30% 60%, rgba(255,255,255,.95), rgba(220,226,245,.85) 60%, rgba(220,226,245,0) 75%), radial-gradient(50% 80% at 70% 50%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%); opacity: 0; }
.op-rocket.launch .rk-clouds i { animation: rk-cloud 1.25s cubic-bezier(.4,0,.8,.6) var(--w) forwards; }
@keyframes rk-cloud { 0% { opacity: 0; transform: translateY(0) scale(.8); } 15% { opacity: .95; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(170cqh) scale(1.3); } }
.rk-seal { overflow: visible; background: none; box-shadow: none; }
.rk-seal b { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #FF8FA0, #D93A55 70%); box-shadow: 0 4px 8px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s; }
.rk-h1 { clip-path: polygon(0 0, 55% 0, 42% 28%, 60% 45%, 38% 65%, 55% 80%, 45% 100%, 0 100%); }
.rk-h2 { clip-path: polygon(55% 0, 100% 0, 100% 100%, 45% 100%, 55% 80%, 38% 65%, 60% 45%, 42% 28%); }
.rk-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.rk-crack path { fill: none; stroke: #FFF3B0; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px #FFB627); }
.op-rocket.hit .rk-crack path { transition: stroke-dashoffset .4s ease-out; stroke-dashoffset: 0; }
.op-rocket.hit .rk-seal { animation: rk-seal-hit .4s ease-out; }
@keyframes rk-seal-hit { 30% { transform: scale(1.18); } 60% { transform: scale(.94); } }
.op-rocket.split .rk-h1 { transform: translate(-60%, 25%) rotate(-50deg); opacity: 0; }
.op-rocket.split .rk-h2 { transform: translate(60%, 25%) rotate(50deg); opacity: 0; }
.op-rocket.split .rk-crack { opacity: 0; transition: opacity .2s; }
.op-rocket.split .rk-env .ob-flap { transform: rotateX(180deg); transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.op-rocket.split .rk-env { filter: drop-shadow(0 0 26px rgba(255,214,102,.9)); }
.op-rocket.split .rk-flame { opacity: 0; }
/* the launch pad drops away below as the rocket climbs */
.rk-pad { transition: transform 2.4s cubic-bezier(.5,.05,.55,.95), opacity 1.6s .8s; }
.op-rocket.launch .rk-pad { transform: translateY(30cqh); opacity: 0; }