/* ===================================================================
   BREATHING SYNC CURSOR — micro-interaction
   ---------------------------------------------------------------
   A translucent ring that lags gently behind the real cursor. If the
   mouse sits still for 4s, it leads the visitor through one 4-7-8
   breath (inhale 4s / hold 7s / exhale 8s), looping until they move
   again. Purely decorative: pointer-events are off throughout, so it
   can never block a click or a text selection.

   Include AFTER your main stylesheet so its variables can be
   overridden per-page if ever needed:
     <link rel="stylesheet" href="assets/css/breathing-cursor.css">
   =================================================================== */

:root{
  /* Brand accents used for the glow — swap freely */
  --bc-turquoise: #1ba89f;
  --bc-green:     #609930;

  /* Resting vs. fully-inhaled ring diameter */
  --bc-size-rest:   26px;
  --bc-size-active: 68px;

  /* How quickly the ring snaps back when the user interrupts it —
     intentionally much faster than the breathing phases themselves. */
  --bc-interrupt-duration: .55s;
}

/* Optional: uncomment to hide the native OS cursor and rely solely on
   the ring. Left OFF by default — hiding the system cursor can hurt
   usability/accessibility, so this is an opt-in design choice. */
/*
html.bc-hide-native-cursor,
html.bc-hide-native-cursor * {
  cursor: none !important;
}
*/

/* -------------------------------------------------------------
   The ring itself
   ------------------------------------------------------------- */
.breath-cursor{
  position: fixed;
  top: 0;
  left: 0;
  width: var(--bc-size-rest);
  height: var(--bc-size-rest);
  margin-left: calc(var(--bc-size-rest) / -2);
  margin-top: calc(var(--bc-size-rest) / -2);

  border-radius: 50%;
  border: 1.5px solid rgba(27, 168, 159, 0.55);
  background: radial-gradient(circle, rgba(27,168,159,.10), rgba(27,168,159,0) 72%);
  box-shadow: 0 0 10px 1px rgba(27, 168, 159, .18);

  /* Never intercepts clicks, drags, text selection, etc. */
  pointer-events: none;
  z-index: 9999;

  /* Position is written by JS every frame as a translate3d transform
     (see breathing-cursor.js) — GPU-friendly, no layout thrash. */
  transform: translate3d(0, 0, 0);
  will-change: transform, width, height, opacity;

  opacity: 0;                       /* hidden until the first mousemove */
  transition:
    width var(--bc-interrupt-duration) cubic-bezier(.4,0,.2,1),
    height var(--bc-interrupt-duration) cubic-bezier(.4,0,.2,1),
    box-shadow var(--bc-interrupt-duration) ease,
    border-color var(--bc-interrupt-duration) ease,
    background var(--bc-interrupt-duration) ease,
    opacity .4s ease;
}

.breath-cursor.is-visible{ opacity: 1; }

/* A little inner dot so the ring reads clearly even at resting size */
.breath-cursor::after{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(27, 168, 159, .65);
  transition: opacity .4s ease;
}
.breath-cursor.is-breathing::after{ opacity: 0; } /* dot fades once it starts expanding */

/* -------------------------------------------------------------
   Phase 1 — INHALE (4s): expand + brighten
   ------------------------------------------------------------- */
.breath-cursor.phase-inhale{
  width: var(--bc-size-active);
  height: var(--bc-size-active);
  margin-left: calc(var(--bc-size-active) / -2);
  margin-top: calc(var(--bc-size-active) / -2);
  border-color: var(--bc-turquoise);
  background: radial-gradient(circle, rgba(27,168,159,.28), rgba(27,168,159,0) 72%);
  box-shadow: 0 0 30px 8px rgba(27, 168, 159, .45);
  transition:
    width 4s cubic-bezier(.45,0,.2,1),
    height 4s cubic-bezier(.45,0,.2,1),
    margin-left 4s cubic-bezier(.45,0,.2,1),
    margin-top 4s cubic-bezier(.45,0,.2,1),
    box-shadow 4s ease,
    border-color 4s ease,
    background 4s ease;
}

/* -------------------------------------------------------------
   Phase 2 — HOLD (7s): stay expanded, soft pulsing glow
   ------------------------------------------------------------- */
.breath-cursor.phase-hold{
  width: var(--bc-size-active);
  height: var(--bc-size-active);
  margin-left: calc(var(--bc-size-active) / -2);
  margin-top: calc(var(--bc-size-active) / -2);
  border-color: var(--bc-green);
  animation: bc-hold-pulse 1.75s ease-in-out infinite;
}
@keyframes bc-hold-pulse{
  0%, 100%{
    box-shadow: 0 0 22px 5px rgba(27, 168, 159, .35);
    background: radial-gradient(circle, rgba(27,168,159,.22), rgba(27,168,159,0) 72%);
    opacity: .88;
  }
  50%{
    box-shadow: 0 0 36px 11px rgba(96, 153, 48, .48);
    background: radial-gradient(circle, rgba(96,153,48,.30), rgba(96,153,48,0) 72%);
    opacity: 1;
  }
}

/* -------------------------------------------------------------
   Phase 3 — EXHALE (8s): slowly contract back to resting size
   ------------------------------------------------------------- */
.breath-cursor.phase-exhale{
  width: var(--bc-size-rest);
  height: var(--bc-size-rest);
  margin-left: calc(var(--bc-size-rest) / -2);
  margin-top: calc(var(--bc-size-rest) / -2);
  border-color: rgba(27, 168, 159, .55);
  background: radial-gradient(circle, rgba(27,168,159,.10), rgba(27,168,159,0) 72%);
  box-shadow: 0 0 10px 1px rgba(27, 168, 159, .18);
  animation: none; /* stop the hold pulse-keyframe cleanly */
  transition:
    width 8s cubic-bezier(.45,0,.2,1),
    height 8s cubic-bezier(.45,0,.2,1),
    margin-left 8s cubic-bezier(.45,0,.2,1),
    margin-top 8s cubic-bezier(.45,0,.2,1),
    box-shadow 8s ease,
    border-color 8s ease,
    background 8s ease;
}

/* -------------------------------------------------------------
   Idle tooltip — "Take a deep breath..."
   ------------------------------------------------------------- */
.breath-tooltip{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;

  font-family: var(--font-serif, Georgia, serif);
  font-style: italic;
  font-size: .82rem;
  color: #fff;
  white-space: nowrap;

  background: rgba(13, 38, 35, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  padding: 8px 16px;
  border-radius: 999px;

  /* JS positions this via transform (translate3d), offset above the
     ring; the extra translateY here is purely the fade-in "float". */
  transform: translate3d(0, 0, 0) translate(-50%, calc(-100% - 26px)) translateY(8px);
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.breath-tooltip.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0) translate(-50%, calc(-100% - 26px)) translateY(0);
}

/* -------------------------------------------------------------
   Respect reduced-motion: keep the tiny follower dot (harmless, low
   motion) but skip the expanding/pulsing breathing choreography.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .breath-cursor{ transition: opacity .4s ease; }
  .breath-cursor.phase-inhale,
  .breath-cursor.phase-hold,
  .breath-cursor.phase-exhale{
    width: var(--bc-size-rest);
    height: var(--bc-size-rest);
    margin-left: calc(var(--bc-size-rest) / -2);
    margin-top: calc(var(--bc-size-rest) / -2);
    animation: none;
    transition: opacity .4s ease;
  }
  .breath-tooltip{ transition: opacity .4s ease; }
}

/* Never show on touch/coarse-pointer devices — JS also skips
   initialising entirely on these, this is just a CSS backstop. */
@media (pointer: coarse){
  .breath-cursor, .breath-tooltip{ display: none; }
}