/* ============================================================
   sakura-doble.css — "Doble" cursor (production)
   Sakura × jacaranda: mixed blush + cerulean petal fall while
   moving; landing on a link fires a radial petal shower.
   Pair with sakura-doble.js. All classes tmc- prefixed.

   Color overrides (from the site's own stylesheet):
     :root{ --tmc-cerulean:#2b4ce0; --tmc-cerulean-deep:#1d38b0;
            --tmc-blush:#e4b3bd; }
   NOTE: the flower heart is intentionally pinned to #2b4ce0 and
   does not follow the variable. That is a design decision — do
   not "fix" it.
   ============================================================ */

:root{
  --tmc-cerulean:#2b4ce0;
  --tmc-cerulean-deep:#1d38b0;
  --tmc-blush:#e4b3bd;
}

@media (pointer:fine){
  body.tmc-on, body.tmc-on a, body.tmc-on button{ cursor:none }
  body.tmc-on input, body.tmc-on textarea, body.tmc-on [contenteditable]{ cursor:text }
}

/* Head — 34px, centered on the raw pointer. The heart at its center
   IS the precision marker; there is no separate dot. */
.tmc-head{
  position:fixed; top:0; left:0; z-index:10000; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  will-change:transform; opacity:0; transition:opacity .25s;
}
body.tmc-live .tmc-head{ opacity:1 }
body.tmc-native .tmc-head{ opacity:0 }
.tmc-head svg{ position:absolute; inset:0; overflow:visible;
  animation:tmc-spin 16s linear infinite }
@keyframes tmc-spin{ to{ transform:rotate(360deg) } }
/* Head petals are ALL blush — the cerulean lives in the heart and in the
   falling petals. This matches the approved demo; do not mix petal colors. */
.tmc-head .tmc-pB{ fill:var(--tmc-blush); opacity:.92 }
/* Her rule: the heart is #2b4ce0. Always. No state changes it. */
.tmc-head .tmc-heart{ fill:#2b4ce0 !important }

/* Petals */
.tmc-fp{
  position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  opacity:0; will-change:transform,opacity;
}
body.tmc-native .tmc-fp{ opacity:0 !important }
.tmc-sh-sak{ width:7px; height:6px; background:var(--tmc-blush); border-radius:60% 40% 55% 45% }
.tmc-sh-jac{ width:6px; height:7px; background:var(--tmc-cerulean);
  border-radius:50% 50% 46% 46% / 32% 32% 68% 68% }
.tmc-sh-jac.tmc-alt{ background:var(--tmc-cerulean-deep) }

/* Ambient fall — blush flutters, cerulean spirals. */
.tmc-go-saka{ animation:tmc-saka 1.4s ease-in forwards }
.tmc-go-sakb{ animation:tmc-sakb 1.6s ease-in forwards }
@keyframes tmc-saka{ 0%{opacity:.95; transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0; transform:translate(calc(-50% + 28px),44px) rotate(190deg)} }
@keyframes tmc-sakb{ 0%{opacity:.95; transform:translate(-50%,-50%) rotate(0)}
  100%{opacity:0; transform:translate(calc(-50% - 24px),52px) rotate(-220deg)} }
.tmc-go-jaca{ animation:tmc-jaca 2s ease-in-out forwards }
.tmc-go-jacb{ animation:tmc-jacb 2.2s ease-in-out forwards }
@keyframes tmc-jaca{ 0%{opacity:.95; transform:translate(-50%,-50%) rotate(0)}
  45%{transform:translate(calc(-50% - 16px),24px) rotate(-100deg)}
  100%{opacity:0; transform:translate(calc(-50% + 8px),58px) rotate(-230deg)} }
@keyframes tmc-jacb{ 0%{opacity:.95; transform:translate(-50%,-50%) rotate(0)}
  45%{transform:translate(calc(-50% + 16px),26px) rotate(100deg)}
  100%{opacity:0; transform:translate(calc(-50% - 8px),62px) rotate(230deg)} }

/* Link-landing shower — out, then down. Four spread patterns. */
.tmc-go-b1{ animation:tmc-b1 1.3s cubic-bezier(.2,.7,.4,1) forwards }
.tmc-go-b2{ animation:tmc-b2 1.3s cubic-bezier(.2,.7,.4,1) forwards }
.tmc-go-b3{ animation:tmc-b3 1.35s cubic-bezier(.2,.7,.4,1) forwards }
.tmc-go-b4{ animation:tmc-b4 1.35s cubic-bezier(.2,.7,.4,1) forwards }
@keyframes tmc-b1{ 0%{opacity:.95; transform:translate(-50%,-50%)}
  30%{transform:translate(calc(-50% + 22px),-14px) rotate(80deg)}
  100%{opacity:0; transform:translate(calc(-50% + 30px),34px) rotate(220deg)} }
@keyframes tmc-b2{ 0%{opacity:.95; transform:translate(-50%,-50%)}
  30%{transform:translate(calc(-50% - 22px),-14px) rotate(-80deg)}
  100%{opacity:0; transform:translate(calc(-50% - 30px),36px) rotate(-220deg)} }
@keyframes tmc-b3{ 0%{opacity:.95; transform:translate(-50%,-50%)}
  30%{transform:translate(calc(-50% + 12px),-24px) rotate(60deg)}
  100%{opacity:0; transform:translate(calc(-50% + 16px),30px) rotate(200deg)} }
@keyframes tmc-b4{ 0%{opacity:.95; transform:translate(-50%,-50%)}
  30%{transform:translate(calc(-50% - 12px),-24px) rotate(-60deg)}
  100%{opacity:0; transform:translate(calc(-50% - 16px),32px) rotate(-200deg)} }

@media (prefers-reduced-motion:reduce){
  .tmc-head, .tmc-fp{ display:none !important }
  body.tmc-on{ cursor:auto !important }
  body.tmc-on a, body.tmc-on button{ cursor:pointer !important }
}