/* Shared look: the shape a theme gives its notes and what holds them up (theme.json "notes"), on the guest page, the
   big screen and the keepsake. The Worker writes data-note-shape, data-note-attach and data-note-tilt on <html>;
   the attachment art comes from vars.css (--note-attach-0…5, taking turns by the note's look, data-v). */

[data-note-tilt="off"] .note{--tilt:0deg; --nudge:0px}
[data-note-attach="none"] .note::after{display:none}

/* ---------- attachment art: tape, pins, clips, magnets ---------- */
[data-note-attach="art"] .note[data-v]::after{
  content:""; display:block; position:absolute; z-index:2; pointer-events:none;
  top:calc(var(--note-attach-h) * -.45); left:50%; width:var(--note-attach-w); height:var(--note-attach-h);
  transform:translateX(-50%) rotate(var(--attach-tilt, 0deg));
  background:var(--attach) center / contain no-repeat; filter:none; mix-blend-mode:normal;
}
[data-note-attach="art"] .note{padding-top:calc(var(--note-attach-h) * .55 + 12px)}
[data-note-attach="art"] .note[data-v="0"]{--attach:var(--note-attach-0); --attach-tilt:-5deg}
[data-note-attach="art"] .note[data-v="1"]{--attach:var(--note-attach-1); --attach-tilt:4deg}
[data-note-attach="art"] .note[data-v="2"]{--attach:var(--note-attach-2); --attach-tilt:-2deg}
[data-note-attach="art"] .note[data-v="3"]{--attach:var(--note-attach-3); --attach-tilt:6deg}
[data-note-attach="art"] .note[data-v="4"]{--attach:var(--note-attach-4); --attach-tilt:-7deg}
[data-note-attach="art"] .note[data-v="5"]{--attach:var(--note-attach-5); --attach-tilt:2deg}
[data-note-tilt="off"][data-note-attach="art"] .note[data-v]{--attach-tilt:0deg}

/* ---------- shapes other than plain cardstock: the paper is drawn behind the words, cut to shape, and the shadow
   follows the cut ---------- */
[data-note-shape="torn"] .note, [data-note-shape="ticket"] .note, [data-note-shape="bubble"] .note{
  background:none; box-shadow:none; isolation:isolate;
  filter:drop-shadow(0 1px 1px rgba(var(--shadow-rgb),.16)) drop-shadow(0 6px 8px rgba(var(--shadow-rgb),.18));
}
[data-note-shape="torn"] .note::before, [data-note-shape="ticket"] .note::before, [data-note-shape="bubble"] .note::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background-color:var(--tone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .37 0 0 0 0 .3 .32 0 0 0 -.13'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* torn: ragged top and bottom edges */
[data-note-shape="torn"] .note{padding-block:22px 18px; border-radius:0}
[data-note-shape="torn"] .note::before{
  --rip-top:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Cpath d='M0 9V3l3 2 4-4 3 3 5-3 3 4 4-2 4 2v6z'/%3E%3C/svg%3E");
  --rip-bottom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Cpath d='M0 0v5l4 2 3-3 5 4 3-3 4 2 3-4 4 3V0z'/%3E%3C/svg%3E");
  -webkit-mask:var(--rip-top) top left / 26px 9px repeat-x, linear-gradient(black 0 0) center / 100% calc(100% - 16px) no-repeat, var(--rip-bottom) bottom left / 26px 9px repeat-x;
  mask:var(--rip-top) top left / 26px 9px repeat-x, linear-gradient(black 0 0) center / 100% calc(100% - 16px) no-repeat, var(--rip-bottom) bottom left / 26px 9px repeat-x;
}

/* ticket: a round notch cut into each end, a dashed tear line inside the edge */
[data-note-shape="ticket"] .note{padding-inline:30px; border-radius:3px}
[data-note-shape="ticket"] .note::before{
  -webkit-mask:radial-gradient(circle 11px at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%, transparent 98%, black) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, black) right / 51% 100% no-repeat;
  outline:2px dashed rgba(var(--ink-rgb),.28); outline-offset:-7px;
}

/* speech bubble: round corners and a tail at the bottom left */
[data-note-shape="bubble"] .note{padding-bottom:30px; border-radius:20px}
[data-note-shape="bubble"] .note::before{bottom:14px}
[data-note-shape="bubble"] .note{background:linear-gradient(to bottom right, var(--tone) 50%, transparent calc(50% + .5px)) 30px calc(100% - 1px) / 20px 15px no-repeat}