/* cedar.css — Cedar on the ledge: standing on the ask field's top edge on
   the Cedar tab (public/household/assistant.html), on top of home.css.
   Used by the preview now, and by the app once Cedar is mounted.

   Cedar always faces left (Conner, 2026-09-25). Nothing mirrors it, by day
   or by lamplight; the carving's own light is from up and to the right,
   which is the day's window. After dark it's matched to the lamp instead:
   dimmed a little and set into the dark cloth. */

.add { overflow: visible; }
/* The field's band of linen reaches up behind Cedar, so what scrolls slides
   under the ledge instead of through the cow. */
.add::before {
  top: -104px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px);
  mask-image: linear-gradient(180deg, transparent 0, #000 64px);
}

.cedar {
  /* How the page's light falls on the carving, from the same variables as
     everything else (applyLight in home.js), so it moves with the hour:
     - a touch less saturated than the source, to sit on linen
     - warmed toward evening, as the room's grade is
     - dimmed after dark, where the day's light would glow, keeping its
       warmth (a lamp is warm; greying it made it muddy)
     - a soft shadow cast on the linen behind, as the field casts, deeper
       by lamplight so the edges settle into the dark cloth
     A lamp-coloured rim on the edges toward the lamp was tried and read
     as a sticker's outline, so there's none. */
  --cedar-light:
    saturate(calc(0.94 + 0.06 * var(--night, 0)))
    sepia(calc(0.08 * var(--warm, 0)))
    brightness(calc(1 - 0.2 * var(--night, 0)))
    drop-shadow(calc(var(--cast-x, 0px) * 3) calc(var(--cast-y, 0px) * 3) 4px rgba(12, 7, 3, calc(0.14 + 0.2 * var(--night, 0))));
  position: absolute;
  /* Facing left, it stands at the right edge of the page and looks across
     the field toward the words as they're typed (Conner, 2026-09-25:
     "shift closer to the right edge"). Its hooves end where the field does:
     they stop 3.5px inside the frame, so 10px puts them over the field's
     right edge, 14px in. Standing on its own floor, above the field, it can
     stand over Send. */
  right: 10px;
  /* Cedar stands on a floor of its own shadow, just above the field, not on
     the field's rim (Conner, 2026-09-25: standing on the rim, the depth
     between the near and far hooves didn't read as standing on anything).
     The front hooves end 3.4px above the frame's foot; this lifts them 10px
     clear of the field. */
  bottom: calc(100% - 18px + 6.6px);
  width: 116px; height: 108.67px;              /* one frame at 1x; fixed so nothing jumps */
  pointer-events: none;
  z-index: 1;
}
/* The still frame: first paint, reduced motion, no JS. */
.cedar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../img/cedar/rest.webp) 0 0 / 100% 100% no-repeat;
  filter: var(--cedar-light);
}
.cedar.live::after { content: none; }
.cedar-body { position: absolute; inset: 0; transform-origin: 50% 97%; filter: var(--cedar-light); }
.cedar.live .cedar-body { animation: cedar-breathe 4.6s ease-in-out infinite; }
@keyframes cedar-breathe { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.004, 1.013); } }
@media (prefers-reduced-motion: reduce) { .cedar.live .cedar-body { animation: none; } }
.cedar-frame { position: absolute; inset: 0; background-repeat: no-repeat; }

/* The floor: a soft pool of shadow Cedar stands in, deep enough to hold
   both pairs of hooves (the far pair ends 7px above the frame's foot, the
   near pair 3.4px), so the depth between them reads as ground. It's wider
   than the hooves and nudged away from the light, like any cast shadow. */
.cedar::before {
  content: '';
  position: absolute;
  left: 22%; right: -10%;
  bottom: -4px; height: 18px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 7, 3, calc(0.3 + 0.2 * var(--night, 0))), rgba(12, 7, 3, calc(0.12 + 0.1 * var(--night, 0))) 62%, rgba(12, 7, 3, 0));
  transform: translateX(calc(var(--cast-x, 0px) * 5));
  filter: blur(2px);
}

/* Where the hooves meet that floor: under all four (they span 41% to 97%
   of the frame), darker and tighter, between the far and near hoof lines. */
.cedar-shadow {
  position: absolute;
  left: 38%; right: 1%;
  bottom: 0; height: 9px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(12, 7, 3, calc(0.34 + 0.14 * var(--night, 0))), rgba(12, 7, 3, 0));
  transform: translateX(calc(var(--cast-x, 0px) * 3));
  filter: blur(1px);
}