/* g:cool — round 7, the paper note (module: g-cool). Everything animated here is transform/opacity. */
.cool .fg.bottom { padding-bottom: calc(var(--safe-bottom) + 64px + var(--kb)); }
.cool .aside-slot:empty { display: none; }
.cool .aside { margin-top: 14px; }

/* the note: cream paper, taped at the top, tilted a degree; GSAP owns its transform (drop, lift, nudge).
   .sheet is the same paper, used by the fold double (three full-size sheets clipped to halves). */
.cool .note-wrap { position: relative; margin-top: 20px; perspective: 900px; }
.cool :is(.note, .sheet) {
  position: relative; padding: 18px 20px 10px; border-radius: var(--r-xs); color: var(--ink);
  background: linear-gradient(180deg, #fbf7f0 0%, var(--paper) 38%, #eee6d6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(16, 24, 39, 0.06), 0 30px 56px -26px rgba(5, 8, 15, 0.85), 0 3px 10px -3px rgba(5, 8, 15, 0.3);
}
.cool .note { transform: rotate(-1deg); transform-style: preserve-3d; transform-origin: 50% 0%; will-change: transform; }
.cool :is(.note, .sheet) .to { font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.cool .note textarea, .cool .sheet .text {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; resize: none; background: transparent; -webkit-appearance: none; appearance: none;
  font-family: var(--display); font-style: italic; font-weight: 400; font-size: 21px; line-height: 28px; letter-spacing: -0.005em; font-variation-settings: "WONK" 1, "SOFT" 30, "opsz" 24;
  color: var(--ink); caret-color: var(--clay); text-wrap: pretty; white-space: pre-wrap; overflow-wrap: break-word;
  /* ruled lines that scroll with the text */
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(16, 24, 39, 0.11) 27px, rgba(16, 24, 39, 0.11) 28px);
  background-attachment: local;
}
.cool .sheet .text { overflow: hidden; }
.cool .note textarea::placeholder { color: var(--ink-3); opacity: 0.75; }
.cool .note textarea:read-only { caret-color: transparent; }
.cool .note .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; margin-top: 6px; }
.cool .note .nudge { font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; color: var(--clay); opacity: 0; }
.cool .note .count { margin-left: auto; font: 500 11px/1 var(--sans); letter-spacing: 0.08em; color: var(--ink-3); font-variant-numeric: tabular-nums lining-nums; opacity: 0; }
.cool .note .count.hot { color: var(--clay); }
.cool .note .stamp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1.5px solid var(--clay); border-radius: var(--r-xs); color: var(--clay); font: var(--caps-xs); letter-spacing: var(--caps-xs-track); text-transform: uppercase; transform: rotate(-4deg); transform-origin: 50% 50%; }
.cool .note .stamp i { font-style: normal; font-size: 10px; line-height: 1; }

/* washi tape across the top edge */
.cool .tape { position: absolute; top: -9px; left: 50%; width: 76px; height: 20px; margin-left: -38px; transform: rotate(-3deg); border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(201, 164, 92, 0.62), rgba(201, 164, 92, 0.8) 50%, rgba(201, 164, 92, 0.62)); box-shadow: 0 1px 2px rgba(5, 8, 15, 0.18); }
.cool .tape::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 3px, transparent 3px 8px); }

/* the ghost "+500" sticker that pops on the first character; its numeral bumps on every tick */
.cool .ghost { position: absolute; top: -13px; right: -10px; padding: 9px 11px; border-radius: var(--r-pill); background: var(--gold); color: var(--ink); font: 600 11px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; font-variant-numeric: tabular-nums lining-nums; box-shadow: 0 8px 16px -8px rgba(5, 8, 15, 0.7); transform: scale(0) rotate(8deg); pointer-events: none; }
.cool .ghost span { display: inline-block; }
.cool .ghost.zero { background: var(--cream); color: var(--ink-3); }

/* gold bar under the card: scaleX = length / max */
.cool .bar { height: 2px; margin: 12px 6px 0; border-radius: 1px; background: rgba(244, 238, 227, 0.14); overflow: hidden; }
.cool .bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }

.cool .answers { margin-top: 16px; gap: 10px; }
.cool .cool-muted { margin: 0; color: var(--cream-60); font-size: var(--t-s); line-height: 1.5; text-align: center; text-wrap: balance; }
.cool .cool-skip { align-self: center; min-width: 112px; background: transparent; color: var(--cream); border: 1px solid var(--cream-30); box-shadow: none; }

/* ---------- the fold (on send) ----------
   .paper-stage is parked over the note in the scene (absolute, so the keyboard closing cannot re-flow it).
   .paper (preserve-3d, origin at the folded packet's centre) holds .top, clipped to the upper half, and .flap, hinged on the
   midline: .front is the lower half face up, .back the blank reverse pre-turned 180° so it faces you once the flap is over.
   Negative clip insets keep each sheet's shadow, tape and sticker. */
.cool .paper-stage { position: absolute; z-index: 3; perspective: 900px; pointer-events: none; }
.cool .paper { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 25%; will-change: transform; }
.cool .sheet { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cool .sheet.top { clip-path: inset(-60px -60px 50% -60px); }
.cool .flap { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform; }
.cool .sheet.front { clip-path: inset(calc(50% - 0.5px) -60px -60px -60px); transform: translateZ(0.5px); } /* a half-pixel over the top sheet: no seam on the hinge */
.cool .sheet.back { clip-path: inset(-60px -60px 50% -60px); transform: rotateX(180deg) translateZ(1px);
  background: linear-gradient(180deg, #f3ede2 0%, #ece4d4 30%, #e2d9c6 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 32px -18px rgba(5, 8, 15, 0.7), 0 2px 6px -2px rgba(5, 8, 15, 0.3); }
.cool .sheet.back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.7; /* the rules showing through the paper */
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(16, 24, 39, 0.11) 27px, rgba(16, 24, 39, 0.11) 28px) 0 46px / 100% 100% no-repeat; }
.cool .crease { position: absolute; left: 0; right: 0; top: 0; height: 50%; border-radius: var(--r-xs) var(--r-xs) 0 0; opacity: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(16, 24, 39, 0.62), rgba(16, 24, 39, 0.18) 45%, transparent 85%); }

/* keyboard open: give the note the room, keep the question */
.kb .cool .kicker, .kb .cool .aside-slot, .kb .cool .cool-muted, .kb .cool .link, .kb .cool .cool-skip { display: none; }
.kb .cool .title { font-size: clamp(26px, 7.2vw, 30px); }

@media (prefers-reduced-motion: reduce) {
  .cool .note { transform: none; }
  .cool .ghost { transform: scale(1) rotate(8deg); opacity: 0; }
}

/* Optional Event-page return to this same paper-note question. */
.wedding-question-dialog { position:fixed; inset:auto; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--night-2); color:var(--cream); overflow:auto; overscroll-behavior:contain; scrollbar-width:none; }
.wedding-question-dialog[open] { display:flex; flex-direction:column; }
.wedding-question-dialog::backdrop { background:rgba(5,8,15,.7); }
.wedding-question-dialog .fg.question-content { flex:none; justify-content:center; min-height:100%; padding:calc(var(--safe-top) + 76px) var(--pad) calc(var(--safe-bottom) + 28px); }
.wedding-question-dialog .question-close { position:absolute; z-index:4; top:calc(var(--safe-top) + 16px); right:var(--pad); display:grid; place-items:center; width:44px; height:44px; padding:10px; border:1px solid var(--cream-30); border-radius:50%; background:rgba(5,8,15,.15); color:var(--cream); cursor:pointer; }
.question-close svg { width:100%; height:100%; }
.wedding-question-dialog .title { margin:8px 0 0; font:400 clamp(31px,8.5vw,38px)/1.08 var(--display); letter-spacing:-.015em; text-wrap:pretty; }
.wedding-question-dialog .title:focus { outline:none; }
.wedding-question-dialog .question-aside { margin:14px 0 0; font-size:14px; line-height:1.5; color:var(--cream-60); }
.wedding-question-dialog .note-wrap { margin-top:26px; }
.wedding-question-dialog .note textarea { height:112px; }
.wedding-question-dialog .question-feedback { min-height:20px; margin:12px 0 8px; font-size:12px; line-height:1.5; color:var(--cream); }
.question-actions { display:flex; flex-direction:column; gap:6px; }
.question-cancel { align-self:center; min-height:44px; padding:8px 18px; border:0; background:transparent; font:400 13px/1.5 var(--sans); color:var(--cream-60); cursor:pointer; }
.wedding-question-dialog :is(button,textarea):focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.wedding-question-dialog .note textarea:focus-visible { outline-color:var(--clay); outline-offset:2px; }
@media(max-height:560px){.wedding-question-dialog .fg.question-content { justify-content:flex-start; }.wedding-question-dialog .question-aside { display:none; }}