/* Living illustrations: small composited layers preserve the original artwork. */
.fantasy-tide {
  position: fixed;
  inset: 45% 50% -10% -5%;
  z-index: -1;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at 25% 110%, transparent 0 14%, #fff3d340 15%, transparent 17% 24%);
  mask-image: linear-gradient(90deg, #000 20%, transparent 100%);
  animation: fantasy-water 14s ease-in-out infinite alternate;
}
.fantasy-living-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --scene-glow: #f5d992;
  --scene-mote: #fff3c7;
}
.fantasy-living-scene > img {
  transform-origin: 50% 65%;
  translate: var(--pointer-x, 0px) var(--pointer-y, 0px);
  transition: translate 350ms ease-out;
}
.fantasy-living-scene > figcaption,
.fantasy-living-scene > .familiar-expedition-portrait { z-index: 3; }
/* Reserve image frames during loading; reveal only once the decoded pixels are ready. */
.fantasy-living-scene:has(> img[data-motion-image-state="loading"])::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, #edf2f000 20%, #edf2f065 45%, #edf2f000 70%);
  background-size: 200% 100%;
  animation: fantasy-image-shimmer 1.6s ease-in-out infinite;
}
html[data-fantasy-motion-ready="true"] .familiar-view:not([hidden]),
html[data-fantasy-motion-ready="true"] .familiar-care-feedback:not([hidden]) {
  animation: none; /* The motion coordinator owns entrances, without duplicate fades. */
}
.fantasy-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.fantasy-light, .fantasy-mist {
  position: absolute;
  inset: -10%;
  pointer-events: none;
}
.fantasy-light {
  opacity: .3;
  background: radial-gradient(ellipse at 30% 18%, var(--scene-glow), transparent 65%);
  mix-blend-mode: soft-light;
  animation: fantasy-light-tide 9s ease-in-out infinite alternate;
}
.fantasy-mist {
  inset: 35% -20% -12%;
  background: radial-gradient(ellipse at 30% 80%, #e0f0e966, transparent 60%), radial-gradient(ellipse at 80% 50%, #f5edda44, transparent 55%);
  opacity: .3;
  animation: fantasy-mist-drift 18s ease-in-out infinite alternate;
}
.fantasy-mote {
  position: absolute;
  left: var(--mote-x);
  top: var(--mote-y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--scene-mote);
  box-shadow: 0 0 7px 2px var(--scene-glow);
  opacity: 0;
  animation: fantasy-mote-rise var(--mote-duration) var(--mote-delay) ease-in-out infinite;
}
.fantasy-living-scene[data-art-motion="breathe"] > img {
  animation: fantasy-breathe 6s ease-in-out infinite;
}
.fantasy-living-scene[data-art-motion="float"] > img {
  animation: fantasy-float 7s ease-in-out infinite;
}
.fantasy-living-scene[data-art-motion="egg"] > img {
  animation: fantasy-egg-wake 5s ease-in-out infinite;
}
.fantasy-living-scene[data-art-motion="landscape"] > img {
  animation: fantasy-landscape-drift 24s ease-in-out infinite alternate;
}
.fantasy-living-scene[data-atmosphere="water"] { --scene-glow: #9bdfe8; --scene-mote: #defaff; }
.fantasy-living-scene[data-atmosphere="water"] .fantasy-mist {
  background: repeating-radial-gradient(ellipse at 35% 130%, transparent 0 20%, #d7faff45 21%, transparent 23% 32%);
  animation: fantasy-water 12s ease-in-out infinite alternate;
}
.fantasy-living-scene[data-atmosphere="snow"] { --scene-glow: #b2d9f8; --scene-mote: #fff; }
.fantasy-living-scene[data-atmosphere="snow"] .fantasy-mote {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 4px #ffffff70;
  animation-name: fantasy-snow;
}
.fantasy-living-scene[data-atmosphere="ember"] { --scene-glow: #f5ae67; --scene-mote: #ffde99; }
.fantasy-living-scene[data-atmosphere="ember"] .fantasy-mote { animation-duration: 5s; }
.fantasy-living-scene[data-atmosphere="astral"] { --scene-glow: #b7b7f4; --scene-mote: #eeebff; }
.fantasy-living-scene[data-atmosphere="astral"] .fantasy-mote {
  border-radius: 0;
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  width: 8px;
  height: 8px;
}
/* Reactions are server-confirmed; the existing portrait reaction has priority. */
html[data-fantasy-motion="on"] #familiarNestImage:is([data-care-reaction="feed"], [data-care-reaction="commune"]) {
  animation: companion-nuzzle .7s ease-in-out 2, fantasy-breathe 6s 1.4s ease-in-out infinite;
}
html[data-fantasy-motion="on"] #familiarNestImage:is([data-care-reaction="heal"], [data-care-reaction="rest"]) {
  animation: companion-rest 1.6s ease-in-out 2, fantasy-breathe 6s 3.2s ease-in-out infinite;
}
html[data-ui-concept="tidal-almanac"] .familiar-region-card {
  transition: border-color 220ms, box-shadow 220ms, translate 220ms;
}
html[data-ui-concept="tidal-almanac"] .familiar-region-card > img {
  transition: filter 400ms;
}
html[data-ui-concept="tidal-almanac"] .familiar-region-card:has(input:checked) {
  border-color: #4e8991;
  box-shadow: 0 0 0 2px #77aeb12b, 0 8px 22px #173b4f0d;
}
@media (hover: hover) and (pointer: fine) {
  html[data-fantasy-motion="on"] .familiar-region-card:hover { translate: 0 -3px; }
  html[data-fantasy-motion="on"] .familiar-region-card:hover > img { filter: saturate(1.12) brightness(1.04); }
}
html[data-ui-concept="tidal-almanac"] #fantasyMotionToggle {
  flex-shrink: 0;
  min-height: 36px;
  padding: 7px 12px;
  background: transparent;
  color: var(--tidal-atlantic);
  border-color: var(--tidal-line);
  font-size: 12px;
}
#fantasyMotionToggle::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: #4e8991;
  vertical-align: 1px;
}
#fantasyMotionToggle[aria-pressed="true"]::before { background: #9da9a8; }
/* Only visible scenes animate. Background tabs and the global switch pause all motion. */
.fantasy-living-scene[data-motion-running="false"] > img,
.fantasy-living-scene[data-motion-running="false"]::after,
.fantasy-living-scene[data-motion-running="false"] .fantasy-atmosphere * {
  animation-play-state: paused !important;
}
html[data-fantasy-motion="off"] *,
html[data-fantasy-motion="off"] *::before,
html[data-fantasy-motion="off"] *::after {
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-fantasy-motion="off"] .fantasy-atmosphere { opacity: .35; }
/* Memorial and crisis portraits remain still, including any stale care reaction. */
body:is([data-familiar-view="death"], [data-familiar-view="crisis"]) .fantasy-living-scene > img { animation: none !important; }
body:is([data-familiar-view="death"], [data-familiar-view="crisis"]) .fantasy-atmosphere { display: none; }
body:is([data-familiar-view="death"], [data-familiar-view="crisis"]) #familiarRailImage { animation: none !important; }

/* Navigation and input remain interactive throughout every transition. */
.fantasy-chapter-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  pointer-events: none;
  border-left: 3px solid var(--tidal-sea);
  border-radius: 9px;
  background: #77aeb11c;
  opacity: 0;
}
#tidalAlmanacNav[data-motion-nav="ready"] { isolation: isolate; }
#tidalAlmanacNav[data-motion-nav="ready"] .fantasy-chapter-marker {
  opacity: 1;
  transition: transform 300ms cubic-bezier(.22,.8,.25,1), width 300ms cubic-bezier(.22,.8,.25,1), height 200ms;
}
html[data-ui-concept="tidal-almanac"] body #tidalAlmanacNav[data-motion-nav="ready"] button {
  position: relative;
  border-left: 0;
  background: transparent;
}
html[data-ui-concept="tidal-almanac"] button {
  position: relative;
  overflow: hidden;
  transition: scale 150ms ease-out, background-color 180ms, border-color 180ms, box-shadow 180ms;
  touch-action: manipulation;
}
html[data-fantasy-motion="on"] button:not(:disabled):active { scale: .975; }
.fantasy-button-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
html[data-ui-concept="tidal-almanac"] :is(input, textarea, select) {
  transition: border-color 180ms, box-shadow 180ms;
}
html[data-ui-concept="tidal-almanac"] :is(input, textarea, select):focus-visible {
  box-shadow: 0 0 0 3px #77aeb124;
}
.familiar-meter-grid label { border-radius: 8px; }
.familiar-meter-grid meter::-webkit-meter-optimum-value { transition: width 550ms cubic-bezier(.22,.8,.25,1); }
.familiar-meter-grid meter::-moz-meter-bar { transition: width 550ms cubic-bezier(.22,.8,.25,1); }
details.companion-extra > summary::marker { color: var(--tidal-sea); }
.fantasy-request-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
.fantasy-request-progress::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--tidal-sea), #d9bb77, transparent);
  animation: fantasy-request-travel 1.5s ease-in-out infinite;
  animation-play-state: paused;
}
html[data-fantasy-pending="true"] .fantasy-request-progress { opacity: 1; transition-delay: 160ms; }
html[data-fantasy-pending="true"] .fantasy-request-progress::after { animation-play-state: running; }
@keyframes fantasy-request-travel {
  from { transform: translateX(-100%); }
  to { transform: translateX(365%); }
}
@keyframes fantasy-image-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@keyframes fantasy-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018) translateY(-1px); }
}
@keyframes fantasy-float {
  0%, 100% { transform: translateY(1px) rotate(-.3deg); }
  50% { transform: translateY(-5px) rotate(.3deg); }
}
@keyframes fantasy-egg-wake {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.022) rotate(-.35deg); }
  55% { transform: scale(1.022) rotate(.35deg); }
}
@keyframes fantasy-landscape-drift {
  from { transform: scale(1.025) translateX(-.4%); }
  to { transform: scale(1.075) translateX(.4%); }
}
@keyframes fantasy-light-tide {
  from { opacity: .18; transform: translate(-2%, -1%); }
  to { opacity: .48; transform: translate(3%, 2%); }
}
@keyframes fantasy-mist-drift {
  from { transform: translateX(-7%); opacity: .2; }
  to { transform: translateX(7%); opacity: .48; }
}
@keyframes fantasy-water {
  from { transform: scale(.95) translateY(3%); opacity: .15; }
  to { transform: scale(1.08) translateY(-3%); opacity: .45; }
}
@keyframes fantasy-mote-rise {
  0%, 100% { opacity: 0; transform: translate(0, 25px) scale(.6); }
  25%, 65% { opacity: .8; }
  90% { opacity: 0; transform: translate(14px, -45px) scale(1); }
}
@keyframes fantasy-snow {
  0% { opacity: 0; transform: translate(-6px, -50px); }
  25%, 65% { opacity: .7; }
  100% { opacity: 0; transform: translate(18px, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui-concept="tidal-almanac"] *,
  html[data-ui-concept="tidal-almanac"] *::before,
  html[data-ui-concept="tidal-almanac"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .fantasy-atmosphere { display: none; }
}