/* vibe-card.css
   Awareverse Positive Note
   Option A: Real sticky note look
*/

.av-vibe-note{
  position: fixed;
  top: 110px;
  left: 50%;

  width: min(380px, calc(100vw - 28px));
  padding: 18px 18px 14px;

  border-radius: 14px;
  z-index: 99999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(-50%) translateY(-14px) rotate(-1.6deg) scale(.98);
  transform-origin: 50% 0%;

  color: rgba(24, 18, 8, .92);

  /* paper and ruled lines */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(40, 30, 10, .10) 0px,
      rgba(40, 30, 10, .10) 1px,
      rgba(255, 255, 255, 0) 14px,
      rgba(255, 255, 255, 0) 18px
    ),
    radial-gradient(180px 120px at 22% 18%, rgba(255,255,255,.45), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #ffe06b 0%, #ffd24f 44%, #ffc52f 100%);

  border: 1px solid rgba(55, 40, 15, .18);

  box-shadow:
    0 26px 55px rgba(0,0,0,.30),
    0 10px 18px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -14px 20px rgba(0,0,0,.06) inset;

  filter: saturate(1.04) contrast(1.03);

  transition:
    opacity .35s ease,
    transform .35s ease,
    visibility .35s ease;
}

/* subtle paper grain overlay */
.av-vibe-note::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.08) 0px,
      rgba(255,255,255,.08) 1px,
      rgba(0,0,0,.02) 3px,
      rgba(0,0,0,.02) 4px
    ),
    radial-gradient(260px 180px at 80% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 65%),
    linear-gradient(0deg, rgba(0,0,0,.08), rgba(0,0,0,0) 50%);

  opacity: .55;
}

/* tape strip */
.av-vibe-note::before{
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;

  width: 118px;
  height: 30px;

  transform: translateX(-50%) rotate(-3.2deg);
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.18)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,.10) 10px
    );

  border: 1px solid rgba(255,255,255,.35);

  box-shadow:
    0 10px 22px rgba(0,0,0,.18);

  pointer-events: none;
  opacity: .95;
}

/* keep content above overlays */
.av-vibe-title,
.av-vibe-message,
.av-vibe-sub{
  position: relative;
  z-index: 2;
}

/* title row */
.av-vibe-title{
  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;

  color: rgba(34, 24, 10, .75);
}

/* small dot like a sticker stamp */
.av-vibe-title .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;

  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(170,115,255,.95));
  box-shadow: 0 0 14px rgba(170,115,255,.55);
}

/* handwritten vibe for the main line */
.av-vibe-message{
  margin-top: 10px;

  font-weight: 900;
  font-size: 18px;
  line-height: 1.28;

  color: rgba(22, 16, 6, .92);

  font-family:
    "Segoe Print",
    "Bradley Hand",
    "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;

  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

/* small handwritten footer line */
.av-vibe-sub{
  margin-top: 8px;

  font-weight: 800;
  font-size: 12px;

  color: rgba(34, 24, 10, .62);

  font-family:
    "Segoe Print",
    "Bradley Hand",
    "Comic Sans MS",
    "Trebuchet MS",
    system-ui,
    sans-serif;
}
/* Keep the note always above the header */
.av-vibe-note{
  z-index: 2147483647;
}

/* If the header has its own stacking context, force it lower */
#site-header{
  z-index: 1000;
  position: relative;
}

/* Safer placement so it never sits under the header */
.av-vibe-note{
  top: calc(110px + env(safe-area-inset-top, 0px));
}

/* show state */
.av-vibe-note.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  animation: avStickOn .42s cubic-bezier(.2,.9,.2,1) both;
}

/* hide state */
.av-vibe-note.hide{
  opacity: 1;
  visibility: visible;
  pointer-events: none;

  animation: avPeelOff .55s cubic-bezier(.3,0,.2,1) both;
}

/* entry animation */
@keyframes avStickOn{
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) rotate(-3.2deg) scale(.96);
    filter: blur(.2px);
  }
  55%{
    opacity: 1;
    transform: translateX(-50%) translateY(2px) rotate(-1.2deg) scale(1.01);
    filter: blur(0);
  }
  78%{
    transform: translateX(-50%) translateY(0px) rotate(-1.9deg) scale(.995);
  }
  100%{
    transform: translateX(-50%) translateY(0px) rotate(-1.6deg) scale(1);
  }
}

/* exit animation */
@keyframes avPeelOff{
  0%{
    opacity: 1;
    transform: translateX(-50%) translateY(0px) rotate(-1.6deg) scale(1);
  }
  25%{
    transform: translateX(-50%) translateY(-2px) rotate(2.6deg) scale(1.01);
  }
  60%{
    opacity: .9;
    transform: translateX(calc(-50% + 14px)) translateY(-18px) rotate(10deg) scale(.98);
  }
  100%{
    opacity: 0;
    transform: translateX(calc(-50% + 44px)) translateY(-70px) rotate(18deg) scale(.92);
  }
}

/* light mode tuning */
body.light-mode .av-vibe-note{
  border: 1px solid rgba(55, 40, 15, .15);

  box-shadow:
    0 22px 48px rgba(0,0,0,.22),
    0 8px 14px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.42) inset,
    0 -14px 20px rgba(0,0,0,.05) inset;
}

body.light-mode .av-vibe-title{
  color: rgba(34, 24, 10, .68);
}

body.light-mode .av-vibe-message{
  color: rgba(22, 16, 6, .92);
}

body.light-mode .av-vibe-sub{
  color: rgba(34, 24, 10, .58);
}

/* small screens */
@media (max-width: 560px){
  .av-vibe-note{
    top: 105px;
    width: min(360px, calc(100vw - 18px));
  }
  .av-vibe-message{
    font-size: 17px;
  }
}