/* =========================================================
   TCUX — Post-it overlay (optional, decorative)
   Inclusion: <link rel="stylesheet" href="postits.css">
              <div id="postits" class="postits"></div>
              <script src="postits.js"></script>
   To remove: simply delete those three lines.
   ========================================================= */

/* ----- Color tokens for postits ----- */
:root {
  --postit-yellow: #FEEB00;
  --postit-cyan:   #6FD3E9;
  --postit-pink:   #FF9DC6;
  --postit-green:  #B8E986;
  --postit-orange: #FFB266;
  --postit-blue:   #8FA8F0;
  --postit-red:    #F37070;
}

/* ----- Anchor the overlay to the page (needed for absolute positioning) ----- */
body { position: relative; }

/* While a post-it is being dragged, suppress text selection across the page */
body.is-dragging-postit {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}
body.is-dragging-postit * { cursor: grabbing !important; }

/* ----- Overlay container ----- */
.postits {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;       /* under nav (100) and cookie banner (200), above section content */
  overflow: hidden;
  contain: layout paint;
}
.postits[hidden] { display: none; }

/* ----- Individual post-it ----- */
.postit {
  position: absolute;
  width: var(--ps, 72px);
  height: var(--ps, 72px);
  background: var(--pc, var(--postit-yellow));
  /* translate(-50%,-50%) centers on x/y; then drag offset (--pdx/--pdy);
     then parallax (--py); then rotation. Order matters. */
  transform:
    translate(-50%, -50%)
    translate(var(--pdx, 0px), var(--pdy, 0px))
    translateY(var(--py, 0px))
    rotate(var(--pr, 0deg));
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 4px 14px -2px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  will-change: transform;
  /* Subtle paper texture via gradient */
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.04) 100%);

  /* Drag interaction: re-enable pointer events on the post-it itself
     (the wrapper .postits keeps pointer-events: none for the area between). */
  pointer-events: auto;
  cursor: grab;
  touch-action: none;          /* prevent scroll while dragging on touch */
  user-select: none;
  -webkit-user-drag: none;
  transition: box-shadow 0.2s ease;
}
.postit:hover {
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.08),
    0 8px 22px -4px rgba(0, 0, 0, 0.28);
}
.postit:active { cursor: grabbing; }

/* Lift effect while being dragged: bigger shadow, slight scale-up,
   straighten rotation a bit so it feels held. */
.postit.is-dragging {
  cursor: grabbing;
  z-index: 10;
  box-shadow:
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 18px 40px -6px rgba(0, 0, 0, 0.4);
  transform:
    translate(-50%, -50%)
    translate(var(--pdx, 0px), var(--pdy, 0px))
    translateY(var(--py, 0px))
    rotate(calc(var(--pr, 0deg) * 0.4))
    scale(1.06);
}
.postit::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 14px; height: 14px;
  background: linear-gradient(225deg, rgba(0, 0, 0, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.postit__text {
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  font-size: clamp(10px, calc(var(--ps, 72px) * 0.16), 14px);
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: rgba(0, 0, 0, 0.78);
  /* Hand-drawn marker feel via slight tilt */
  transform: rotate(-2deg);
  user-select: none;
}

/* ----- Color variants ----- */
.postit--yellow { --pc: var(--postit-yellow); }
.postit--cyan   { --pc: var(--postit-cyan); }
.postit--pink   { --pc: var(--postit-pink); }
.postit--green  { --pc: var(--postit-green); }
.postit--orange { --pc: var(--postit-orange); }
.postit--blue   { --pc: var(--postit-blue); }
.postit--red    { --pc: var(--postit-red); }

/* ----- Cluster at the bottom: tighter shadow stack ----- */
.postit--stack {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.08),
    0 6px 18px -2px rgba(0, 0, 0, 0.22);
}

/* ----- Respect motion preferences ----- */
@media (prefers-reduced-motion: reduce) {
  .postit { transition: none !important; }
}

/* ----- Mobile: hide some, shrink others to avoid clutter ----- */
@media (max-width: 760px) {
  .postit { transform-origin: center; }
  .postit[data-hide-mobile] { display: none; }
  .postit {
    width: calc(var(--ps, 72px) * 0.75);
    height: calc(var(--ps, 72px) * 0.75);
  }
}