/* =========================================================
   effects.css — retro flourishes ✦
   ---------------------------------------------------------
   Each flourish is its own numbered section. To REMOVE one,
   delete its section here AND the matching piece named in
   its "also remove" note.

   Anything that moves sits inside
     @media (prefers-reduced-motion: no-preference) { ... }
   so it only moves for visitors whose device is fine with
   motion. Everyone else gets a still version.
   ========================================================= */


/* =========================================================
   1. WORDART (the "hey diva" site title)
   Also remove: nothing. Headings just go back to plain color.
   ========================================================= */

/* the wrapper gets the drop shadow... */
.wordart {
  filter: drop-shadow(3px 3px 0 var(--wordart-shadow));
}

/* ...and the text inside gets the gradient fill */
.wordart-text {
  display: inline-block;
  padding: 0 0.08em 0.08em;
  background: linear-gradient(90deg, var(--wordart-start), var(--wordart-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: skewY(-3deg);
}

/* Windows high-contrast mode: show plain text so it never disappears */
@media (forced-colors: active) {
  .wordart { filter: none; }
  .wordart-text { background: none; color: CanvasText; }
}


/* =========================================================
   2. SPARKLES + BUTTERFLIES around the title
   Also remove: section 2 in js/effects.js.
   ========================================================= */

.title-area {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
}

.deco {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  color: var(--color-accent);
}

.deco-alt { color: var(--color-accent-2); }

.deco svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}

.deco-a { top: 8%;  left: 2%;  font-size: 1.7rem; }
.deco-b { top: 58%; left: 10%; font-size: 1rem; }
.deco-c { top: 2%;  right: 4%; }
.deco-d { top: 60%; right: 9%; font-size: 1.1rem; }
.deco-e { top: 38%; right: 0;  font-size: 0.9rem; }

@media (prefers-reduced-motion: no-preference) {
  .deco-twinkle {
    animation: twinkle 2.4s ease-in-out infinite;
  }
  .deco-b { animation-delay: 0.6s; }
  .deco-e { animation-delay: 1.2s; }

  .deco-flutter {
    animation: flutter 3s ease-in-out infinite;
  }
}

@keyframes twinkle {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

@keyframes flutter {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-6px) rotate(8deg); }
}


/* =========================================================
   3. "WHAT'S NEW" TICKER (home page)
   Also remove: the ticker <section> in index.html and
   section 3 in js/effects.js.
   ========================================================= */

.ticker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.3rem 0.4rem 0.3rem 1rem;
  border-radius: 999px;
  background: var(--ticker-bg);
  color: var(--ticker-text);
  font-family: var(--font-pixel);
  font-size: 1.3rem;
  line-height: 1.2;
}

.ticker-label {
  margin: 0;
  white-space: nowrap;
}

.ticker-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* still version (reduced motion): the text just wraps normally */
.ticker-text {
  margin: 0;
}

.ticker-toggle {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  background: var(--ticker-text);
  color: var(--ticker-bg);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker:not(.ticker-static) .ticker-text {
    display: inline-block;
    padding-left: 100%;
    white-space: nowrap;
    animation: ticker-scroll 22s linear infinite;
  }

  /* pauses on hover, on keyboard focus, or with the pause button */
  .ticker:hover .ticker-text,
  .ticker:focus-within .ticker-text,
  .ticker.is-paused .ticker-text {
    animation-play-state: paused;
  }
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


/* =========================================================
   4. UNDER CONSTRUCTION SIGN (home page)
   Also remove: the <picture> block in index.html.
   ========================================================= */

.construction {
  display: block;
  margin: 0 0 1rem;
}

.construction img {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}


/* =========================================================
   5. AIM AWAY MESSAGE WINDOW (home page)
   Also remove: nothing. It goes back to a plain box.
   ========================================================= */

.away-window {
  padding: 0;
  overflow: hidden;
}

.away-window .window-bar {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-bottom: 2px solid var(--color-accent);
  background: linear-gradient(var(--gel-top), var(--gel-bottom));
  color: var(--gel-text);
}

.away-window .window-body {
  padding: 0.75rem 1rem;
}


/* =========================================================
   6. DECORATIVE VISITOR COUNTER (home page)
   Also remove: the counter <section> in index.html.
   ========================================================= */

.counter-digits {
  display: inline-block;
  padding: 0 0.4rem;
  border-radius: 4px;
  background: var(--ticker-bg);
  color: var(--ticker-text);
  font-family: var(--font-pixel);
  font-size: 1.7rem;
  letter-spacing: 0.2em;
}


/* =========================================================
   7. WEBRING PLAQUE (footer)
   Also remove: set webring.show to false in js/layout.js.
   ========================================================= */

.webring {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-accent-2);
  border-radius: 12px;
  background: var(--color-surface);
}

.webring-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-heading);
}

.webring ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =========================================================
   8. SPARKLE CURSOR TRAIL (off by default)
   Also remove: section 4 in js/effects.js.
   ========================================================= */

.cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}


/* =========================================================
   10. STICKER PHOTO (About page)
   White sticker outline + shadow + a little tilt.
   Also remove: nothing. The photo just goes back to plain.
   ========================================================= */

.sticker {
  filter:
    drop-shadow(3px 0 0 var(--sticker-outline))
    drop-shadow(-3px 0 0 var(--sticker-outline))
    drop-shadow(0 3px 0 var(--sticker-outline))
    drop-shadow(0 -3px 0 var(--sticker-outline))
    drop-shadow(5px 5px 0 var(--wordart-shadow));
  transform: rotate(-4deg);
}


/* =========================================================
   11. SCRAPBOOK DEEP DIVES (Obsessions page)
   Lined paper and taped, tilted polaroids.
   Also remove: nothing. The opened deep dives just go plain.
   ========================================================= */

/* lined paper: one line every 1.9rem, text sits right on the lines */
.deep-body.scrap {
  padding-top: 1.9rem;
  line-height: 1.9rem;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1.9rem - 1px),
    var(--color-accent) calc(1.9rem - 1px) 1.9rem
  );
}

.scrap h4 {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.9rem;
  color: var(--color-heading);
}

.scrap p {
  margin: 0 0 1.9rem;
}

/* polaroids */
.scrap .deep-photos figure {
  position: relative;
  padding: 0.6rem 0.6rem 0.3rem;
  background: var(--color-surface);
  filter: drop-shadow(3px 4px 0 var(--wordart-shadow));
}

.scrap .deep-photos figure:nth-child(odd)  { transform: rotate(-4deg); }
.scrap .deep-photos figure:nth-child(even) { transform: rotate(3deg); }

.scrap .deep-photos .placeholder,
.scrap .deep-photos img {
  border-radius: 0;
}

/* washi tape on top of each polaroid */
.scrap .deep-photos figure::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  background: var(--color-accent-2);
  opacity: 0.55;
  transform: translateX(-50%) rotate(-6deg);
  z-index: 1;
}


/* =========================================================
   12. POLAROID WALL (life as of late page)
   Also remove: nothing. Photos just sit in a plain grid.
   ========================================================= */

.life-wall figure {
  position: relative;
  padding: 0.6rem 0.6rem 1.6rem; /* thicker bottom, like a real polaroid */
  background: var(--color-surface);
  filter: drop-shadow(3px 4px 0 var(--wordart-shadow));
}

.life-wall figure:nth-child(3n+1) { transform: rotate(-4deg); }
.life-wall figure:nth-child(3n+2) { transform: rotate(3deg) translateY(0.5rem); }
.life-wall figure:nth-child(3n)   { transform: rotate(-1.5deg); }

.life-wall img,
.life-wall .placeholder {
  border-radius: 0;
}

/* washi tape */
.life-wall figure::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  background: var(--color-accent-2);
  opacity: 0.55;
  transform: translateX(-50%) rotate(-6deg);
  z-index: 1;
}


/* =========================================================
   13. SILLY GOOSE CURSOR
   The goose's beak tip is the clicking point (1px in, 4px down).
   The .svg is first; browsers that can't use it fall back to the
   .png, then to the normal cursor.
   Also remove: nothing else. Delete this section for the normal cursor.
   ========================================================= */

html {
  cursor: url("../images/goose-cursor.svg") 1 4, url("../images/goose-cursor.png") 1 4, auto;
}

a,
button,
summary,
label,
select,
[role="button"] {
  cursor: url("../images/goose-cursor.svg") 1 4, url("../images/goose-cursor.png") 1 4, pointer;
}

/* typing spots keep the normal text cursor */
input:not([type="color"]),
textarea {
  cursor: text;
}


/* =========================================================
   14. AIM MESSAGE SUBHEADERS (the line under each page title)
   A tiny instant-message window: "heydiva: ... (11:47 pm)".
   Also remove: nothing. The intro just shows as plain text.
   ========================================================= */

.sub-im {
  display: block;
  width: min(100%, 46rem);
  margin: 0 auto 2rem; /* centered under the page title */
  border: 3px solid var(--color-accent-2);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface);
}

.sub-im-bar {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.8rem;
  border-bottom: 3px solid var(--color-accent-2);
  background: linear-gradient(var(--gel-top), var(--gel-bottom));
  color: var(--gel-text);
  font-family: var(--font-pixel);
  font-size: 1.35rem;
}

.sub-im p {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-size: clamp(1.15rem, 3.5vw, 1.4rem);
  line-height: 1.45;
}

.sub-im-sn {
  color: var(--color-link);
  font-weight: 700;
}

.sub-im-time {
  font-size: 0.95rem;
  white-space: nowrap;
}


/* =========================================================
   15. RANSOM NOTE TITLE (home page)
   Each letter is a cut-out "magazine" scrap with its own font,
   paper color and tilt. Letters are built by section 5 of
   js/effects.js. Also remove: that section, and swap the h1 back
   to a plain/WordArt title in index.html.
   ========================================================= */

h1.ransom {
  margin: 0.5rem 0 1.5rem;
  text-align: center;
}

.ransom-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.3rem;
  font-size: clamp(1.8rem, 6vw, 3.2rem);
  line-height: 1;
}

/* letters of one word stay together when the line wraps */
.ransom-word {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}

.ransom-letter {
  display: inline-block;
  padding: 0.08em 0.16em 0.12em;
  border-radius: 2px;
  box-shadow: 2px 3px 0 var(--wordart-shadow);
}

/* paper + ink pairs (all pass the contrast check in every theme) */
.ransom-letter.r1 { font-family: var(--ransom-font-1); font-weight: 700; background: var(--color-surface); color: var(--color-text); }
.ransom-letter.r2 { font-family: var(--ransom-font-2); background: var(--ticker-bg); color: var(--ticker-text); }
.ransom-letter.r3 { font-family: var(--ransom-font-3); font-style: italic; background: var(--gel-bottom); color: var(--gel-text); }
.ransom-letter.r4 { font-family: var(--ransom-font-4); font-weight: 700; background: var(--color-surface); color: var(--color-heading); }
.ransom-letter.r5 { font-family: var(--ransom-font-5); background: var(--gel-top); color: var(--gel-text); }
.ransom-letter.r6 { font-family: var(--ransom-font-6); font-weight: 700; background: var(--ticker-text); color: var(--ticker-bg); }


/* =========================================================
   16. PAGE TITLE STYLES (every page has its own look)
   Each page's h1 has class "page-title" and one span inside
   with the style: title-chrome, title-lcd, title-neon,
   title-script or title-glitter. Any page can use any style:
   just swap the class name. The oops page uses title-error.
   Also remove: nothing. Without this section titles are plain.
   ========================================================= */

h1.page-title {
  margin: 0.5rem 0 1.5rem;
  font-size: clamp(2.4rem, 8vw, 4.2rem);
  line-height: 1.1;
}

/* chrome: shiny slanted metal letters (obsessions) */
.title-chrome {
  display: inline-block;
  padding: 0 0.1em;
  font-family: var(--font-chrome);
  font-style: italic;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--gel-bottom) 42%, var(--color-text) 50%, var(--gel-top) 58%, var(--color-surface) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text);
  filter: drop-shadow(3px 4px 0 var(--color-accent));
  transform: skewX(-6deg);
}

/* flip-phone screen: pixel letters on a little LCD (media consumption) */
.title-lcd {
  display: inline-block;
  position: relative;
  padding: 0.55em 0.7em 0.35em;
  border: 6px solid var(--color-text);
  border-radius: 18px;
  background: repeating-linear-gradient(transparent 0 3px, var(--gel-top) 3px 4px), var(--gel-bottom);
  color: var(--gel-text);
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* the signal + battery row along the top of the screen */
.title-lcd-bar {
  position: absolute;
  top: 0.2em;
  left: 0.5em;
  right: 0.5em;
  display: flex;
  justify-content: space-between;
  font-size: 0.32em;
  letter-spacing: 0;
}

/* neon sign: glowing letters on a sign plate (life as of late) */
.title-neon {
  display: inline-block;
  padding: 0.15em 0.55em 0.22em;
  border: 4px solid var(--color-accent);
  border-radius: 16px;
  background: var(--ticker-bg);
  color: var(--ticker-text);
  font-weight: 500;
  text-shadow: 0 0 6px var(--color-accent), 0 0 16px var(--color-accent-2);
  box-shadow: 0 0 0 4px var(--ticker-bg), 0 0 18px var(--color-accent);
}

/* juicy script: curly writing with a rhinestone underline (guestbook) */
.title-script {
  display: inline-block;
  padding: 0 0.3em 0.1em;
  font-family: var(--font-script);
  font-size: clamp(3rem, 11vw, 5.6rem);
  color: var(--color-heading);
  text-shadow: 2px 2px 0 var(--color-accent);
  border-bottom: 7px dotted var(--color-accent-2);
}

/* the "/ """ part means screen readers skip the heart */
.title-script::after {
  content: " ♥";
  content: " ♥" / "";
  font-family: var(--font-heading);
  font-size: 0.4em;
  color: var(--color-accent);
}

/* glitter: sparkly dots inside the letters (etc) */
.title-glitter {
  display: inline-block;
  position: relative;
  padding: 0 0.1em;
  background:
    radial-gradient(circle, var(--color-surface) 1.1px, transparent 1.7px) 0 0 / 7px 7px,
    radial-gradient(circle, var(--color-accent-2) 1px, transparent 1.6px) 3px 4px / 7px 7px,
    linear-gradient(100deg, var(--wordart-start), var(--wordart-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wordart-shadow);
}

.title-glitter::before,
.title-glitter::after {
  position: absolute;
  color: var(--color-accent);
  -webkit-text-stroke: 0;
  font-size: 0.45em;
}

.title-glitter::before { content: "✦"; content: "✦" / ""; left: -0.7em; top: 0; }
.title-glitter::after { content: "✧"; content: "✧" / ""; right: -0.6em; bottom: 0.1em; }

/* error window: a little pop-up box (oops page) */
.title-error {
  width: fit-content;
  min-width: min(100%, 22rem);
  max-width: 100%;
  margin: 0.5rem auto 1.5rem;
  border: 3px solid var(--color-text);
  border-radius: 6px;
  background: var(--color-surface);
  box-shadow: 5px 5px 0 var(--wordart-shadow);
}

.title-error-bar {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.6rem;
  background: linear-gradient(var(--gel-top), var(--gel-bottom));
  color: var(--gel-text);
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  border-bottom: 3px solid var(--color-text);
}

h1.title-error-msg {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.8rem 1rem 0.4rem;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  color: var(--color-text);
}

.title-error-msg span { font-size: 0.8em; }

.title-error-ok {
  display: block;
  width: fit-content;
  margin: 0 auto 0.8rem;
  padding: 0.1rem 1.4rem;
  border: 2px solid var(--color-text);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  text-decoration: none;
}

.title-error-ok:hover { background: var(--gel-bottom); color: var(--gel-text); }

/* Windows high-contrast mode: show plain text so titles never disappear */
@media (forced-colors: active) {
  .title-chrome,
  .title-glitter { background: none; color: CanvasText; filter: none; -webkit-text-stroke: 0; }
}


/* =========================================================
   9. PAINT TOY (guestbook page)
   Also remove: the paint <section> and the js/paint.js
   <script> line in guestbook.html.
   ========================================================= */

.paint {
  overflow: hidden;
  border: 2px solid var(--color-accent-2);
  border-radius: 12px;
  background: var(--color-surface);
}

.paint-titlebar {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.75rem;
  border-bottom: 2px solid var(--color-accent-2);
  background: linear-gradient(var(--gel-top), var(--gel-bottom));
  color: var(--gel-text);
  font-family: var(--font-pixel);
  font-size: 1.2rem;
}

.paint-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem 0.75rem;
}

.paint-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.paint .gel {
  min-height: 2rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.85rem;
}

.swatch {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  cursor: pointer;
}

.swatch[aria-pressed="true"] {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.paint-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.paint-custom input {
  width: 2.2rem;
  height: 1.9rem;
  padding: 0;
  border: 2px solid var(--color-text);
  border-radius: 6px;
  background: var(--color-surface);
}

.paint-canvas {
  width: 100%;
  border-top: 2px solid var(--color-accent-2);
  background: var(--paint-canvas);
  cursor: crosshair;
  touch-action: none; /* lets fingers draw instead of scrolling */
}