/* ============================================================
   Carousel — "life" layer
   Small abstract shape illustrations + gentle motion, in the
   warm paper palette. Shared by every page.
   Shapes are decorative: aria-hidden, pointer-events none.
   ============================================================ */

.shp{ pointer-events:none; user-select:none; display:block; }
.life-layer{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.life-layer > *{ position:absolute; }

/* gentle motion */
@keyframes lifeFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.life-float{ animation: lifeFloat 7s ease-in-out infinite; }
.life-float.d2{ animation-duration:9s; animation-delay:.9s; }
.life-float.d3{ animation-duration:11s; animation-delay:1.7s; }

@keyframes lifeSpin{ to{ transform:rotate(360deg); } }
.life-spin{ animation: lifeSpin 28s linear infinite; transform-origin:center; }

@keyframes lifeTwinkle{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(.65); opacity:.35; } }
.life-twinkle{ animation: lifeTwinkle 3.4s ease-in-out infinite; transform-origin:center; }
.life-twinkle.d2{ animation-delay:1.2s; }

@keyframes lifeSway{ 0%,100%{ transform:rotate(-4deg); } 50%{ transform:rotate(5deg); } }
.life-sway{ animation: lifeSway 8s ease-in-out infinite; transform-origin:center; }

/* hand-drawn underline that draws itself in */
.uline{ position:relative; white-space:nowrap; }
.uline svg{
  position:absolute; left:1%; bottom:-0.12em;
  width:98%; height:0.22em; overflow:visible;
}
.uline path{
  fill:none; stroke:#C98F4F; stroke-width:3.6; stroke-linecap:round;
  stroke-dasharray:300; stroke-dashoffset:300;
  animation: lifeDraw 1s cubic-bezier(0.22,1,0.36,1) .7s forwards;
}
@keyframes lifeDraw{ to{ stroke-dashoffset:0; } }

/* inline spark sitting inside a heading */
.h-spark{ display:inline-block; vertical-align:0.08em; margin:0 0.18em; }

/* hosts */
.hero{ position:relative; }

@media (max-width: 1000px){ .shp-desktop{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .life-float, .life-spin, .life-twinkle, .life-sway{ animation:none; }
  .uline path{ animation:none; stroke-dashoffset:0; }
}