/* ============================================================================
   decorations.css: purely decorative overlays
   ----------------------------------------------------------------------------
   Tape, pins, stamps, stickers, doodles (squiggle underline, highlighter, coffee
   ring), the spiral binding and hanging string, the note-wall colour cycle, the
   loose decorative stickers, and the photo-frame clip. None of these carry
   content or interaction (most are ::before/::after pseudo-elements with
   pointer-events:none), so they can overlap real content without blocking it.
   ========================================================================== */

/* ---- Tape --------------------------------------------------------------- */
/* Default strip of washi tape, centred across the top edge of a card. */
.tape::before{content:'';position:absolute;top:-10px;left:50%;width:86px;height:22px;
  transform:translateX(-50%) rotate(-2deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px), rgba(238,215,158,.78);
  border-left:1px dashed rgba(122,90,56,.35);border-right:1px dashed rgba(122,90,56,.35);
  box-shadow:0 1px 3px rgba(80,55,30,.18);pointer-events:none;z-index:2;}
/* The real green washi sticker image, reserved for the home "up next" journal card. */
.tape-washi::before{top:-22px;width:72px;height:52px;transform:translateX(-50%);
  background:url("/anna-s-desk/assets/stickers/tape-green.png") no-repeat center/contain;
  border:none;box-shadow:none;filter:drop-shadow(0 1px 2px rgba(80,55,30,.28));}
/* Tape angled onto the top-left corner. */
.tape-l::before{left:12%;transform:rotate(-38deg);top:-8px;width:60px;}
/* Berry colour variant for the diagonal-weave washi tape. */
.washi-berry::before{background:repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 5px, transparent 5px 10px), rgba(184,80,96,.6);}

/* ---- Pin ---------------------------------------------------------------- */
/* A round push-pin head centred on the top edge (used on corkboard cards). */
.pin::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #e58a76, #b0402c 65%);box-shadow:0 3px 4px rgba(60,30,10,.4);z-index:3;pointer-events:none;}

/* ---- Stamp -------------------------------------------------------------- */
/* Red rubber-stamp label (uppercase typewriter text in a rotated red box). */
.stamp{display:inline-block;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--redpen);border:2px solid rgba(192,61,46,.75);border-radius:5px;padding:2px 9px;transform:rotate(-3deg);opacity:.92;}

/* ---- Sticker (round badge) ---------------------------------------------- */
.sticker{display:inline-flex;align-items:center;justify-content:center;background:#fffdf4;border-radius:50%;
  box-shadow:0 2px 5px rgba(80,55,30,.3);border:2px solid #fff;transition:transform .18s;}
@media(hover:hover){.sticker:hover{transform:rotate(-10deg) scale(1.12);}}

/* ---- Doodles ------------------------------------------------------------ */
/* Hand-drawn squiggle underline beneath a heading. */
.squig{position:relative;padding-bottom:8px;}
.squig::after{content:'';position:absolute;left:0;bottom:0;width:84px;height:7px;background:var(--squiggle) no-repeat;background-size:contain;}
/* Highlighter marker over text. */
.hilite{background:linear-gradient(104deg, transparent 0.9%, rgba(249,221,118,.75) 2.4%, rgba(249,221,118,.55) 96%, transparent 98%);
  padding:0 6px;margin:0 -2px;border-radius:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
/* Faint coffee-cup ring stain in a card's bottom-right corner. */
.coffee::after{content:'';position:absolute;width:104px;height:104px;border-radius:50%;right:-14px;bottom:-20px;
  border:11px double rgba(146,94,42,.18);pointer-events:none;transform:rotate(8deg) scaleY(.94);}

/* ---- Spiral binding & hanging string ------------------------------------ */
/* Twin-loop wire binding: one metal coil loop per tile (shadow + metallic body
   + highlight), repeated down the edge so it reads as a real spiral notebook. */
.spiral{width:26px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23efe9df'/%3E%3Cstop offset='.45' stop-color='%23b0a898'/%3E%3Cstop offset='1' stop-color='%237c7264'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M6 2 C 19 6 19 22 8 27' fill='none' stroke='rgba(55,35,15,.3)' stroke-width='6.5' stroke-linecap='round'/%3E%3Cpath d='M6 1 C 19 5 19 21 8 26' fill='none' stroke='url(%23w)' stroke-width='4.6' stroke-linecap='round'/%3E%3Cpath d='M6 .6 C 17.5 4 17.5 20 8 25.2' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center top;background-size:24px 28px;}
/* A curved thread the photos hang from. */
.string{position:absolute;left:0;right:0;top:-2px;height:34px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='34' viewBox='0 0 400 34' preserveAspectRatio='none'%3E%3Cpath d='M0 6 Q 200 40 400 6' fill='none' stroke='%237d5a3c' stroke-width='2'/%3E%3C/svg%3E") no-repeat;background-size:100% 100%;}

/* ---- Note wall (sticky colour cycling) ----------------------------------
   Cycle the four sticky-note tints across a wall of notes so neighbours differ. */
.notewall>*:nth-child(4n+1){--sc:var(--butter);}
.notewall>*:nth-child(4n+2){--sc:var(--spink);}
.notewall>*:nth-child(4n+3){--sc:var(--ssky);}
.notewall>*:nth-child(4n){--sc:var(--smint);}

/* ---- Decorative stickers ------------------------------------------------
   Cut-out paper stickers (assets/stickers/*) laid on the page for texture. They
   are purely decorative: never interactive (pointer-events:none) and always
   behind real content, so they can overlap a card edge without blocking it.
   Always visible; on phones they shrink instead of hiding. `zoom` (not
   transform) does the shrinking so each sticker's inline rotation survives. */
.deco{position:absolute;pointer-events:none;user-select:none;-webkit-user-select:none;z-index:0;
  filter:drop-shadow(0 4px 7px rgba(60,35,15,.3));}
@media(max-width:700px){.deco{zoom:.78;}}

/* ---- Photo frames --------------------------------------------------------
   Heart / stamp / deckle / painted are real PNG frame overlays (assets/frames/*);
   circle is a simple CSS cut. .cut just clips the image box to its wrapper. */
.cut{overflow:hidden;}
.cut-circle{border-radius:50%;}