.draw-on {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw-stroke 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes draw-stroke {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}
.bloom-petal {
  opacity: 0;
  transform-origin: var(--origin, center);
  transform: scale(0) rotate(-20deg);
  animation: bloom-petal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 1.5s);
}
.bloom-center {
  opacity: 0;
  transform-origin: center;
  animation: fade-in 1s ease-out forwards;
  animation-delay: var(--delay, 2s);
}
.bloom-then-breathe {
  opacity: 0;
  transform: scale(0) rotate(-20deg);
  animation: bloom-petal 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards var(--delay, 1.5s);
}
.bloom-then-twinkle {
  opacity: 0;
  transform: scale(0);
  animation:
    bloom-petal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards var(--delay, 2s),
    iridescent-twinkle 3s ease-in-out 5 both var(--twinkle-delay, 4s);
}
.bloom-then-shimmer {
  opacity: 0;
  transform: scale(0);
  animation:
    bloom-petal 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards var(--delay, 2s),
    iridescent-shimmer 3s ease-in-out 5 both var(--shimmer-delay, 4s);
}
@keyframes bloom-petal {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes petal-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes iridescent-twinkle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes iridescent-shimmer {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
.tail-sway  { animation: tail-sway 8s ease-in-out 3 both; }
.tail-drift { animation: tail-drift 9s ease-in-out 3 both; }
.head-bob   { animation: head-bob 6s ease-in-out 4 both; }

.feather-sway-0 { animation: feather-sway 5s   ease-in-out 4 both; }
.feather-sway-1 { animation: feather-sway 6s   ease-in-out 4 both -1.5s; }
.feather-sway-2 { animation: feather-sway 7s   ease-in-out 3 both -3s; }
.feather-sway-3 { animation: feather-sway 5.5s ease-in-out 4 both -2s; }

.crest-sway   { animation: crest-sway 4s   ease-in-out 5 both; }
.crest-sway-0 { animation: crest-sway 4s   ease-in-out 5 both; }
.crest-sway-1 { animation: crest-sway 5s   ease-in-out 4 both -1s; }
.crest-sway-2 { animation: crest-sway 4.5s ease-in-out 5 both -2s; }

@keyframes tail-sway {
  0%, 100% { transform: rotate(-1.5deg) scale(1); }
  50%      { transform: rotate(1.5deg) scale(1.02); }
}
@keyframes tail-drift {
  0%, 100% { transform: rotate(-0.8deg) scale(1); }
  50%      { transform: rotate(0.8deg) scale(1.015); }
}
@keyframes feather-sway {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
@keyframes crest-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes head-bob {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-2px); }
}
.jali-dot {
  opacity: 0;
  animation: fade-in 1.2s ease-out forwards;
  animation-delay: var(--delay, 1.5s);
}
.jali-shimmer {
  opacity: 0;
  animation: fade-in 1.2s ease-out forwards var(--delay, 1.6s);
}
@keyframes plate-breathe {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 1; }
}
.art svg, .phead__art svg {
  animation: plate-breathe 7s ease-in-out infinite;
}
.lamp-glow {
  opacity: 0;
  animation:
    fade-in 1s ease-out forwards var(--delay, 2.7s),
    lamp-flicker 2.5s ease-in-out 8 both var(--delay, 4s);
}
.lamp-flicker { animation: lamp-flame 1.5s ease-in-out 12 both; transform-origin: center bottom; }
@keyframes lamp-flicker {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes lamp-flame {
  0%, 100% { opacity: 0.7; transform: scale(1) rotate(-2deg); }
  25%      { opacity: 0.9; transform: scale(1.05) rotate(1deg); }
  50%      { opacity: 0.8; transform: scale(0.95) rotate(-1deg); }
  75%      { opacity: 1;   transform: scale(1.03) rotate(2deg); }
}
.bell-sway-0 { animation: bell-sway 3s   ease-in-out 6 both; }
.bell-sway-1 { animation: bell-sway 3.5s ease-in-out 5 both -1s; }
.bell-sway-2 { animation: bell-sway 4s   ease-in-out 5 both -2s; }
.leaf-sway-0 { animation: leaf-sway 4s   ease-in-out 5 both; }
.leaf-sway-1 { animation: leaf-sway 5s   ease-in-out 4 both -1.5s; }
.leaf-sway-2 { animation: leaf-sway 4.5s ease-in-out 5 both -2.5s; }
@keyframes bell-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes leaf-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
.arm-carve  { animation: arm-carve 1.5s ease-in-out 12 both; }
.chip-fly-0 { animation: chip-fly 1.5s ease-out 12 both; }
.chip-fly-1 { animation: chip-fly 1.8s ease-out 10 both -0.5s; }
.chip-fly-2 { animation: chip-fly 1.6s ease-out 11 both -0.9s; }
@keyframes arm-carve {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-8deg); }
}
@keyframes chip-fly {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.6); }
  25%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(18px, -22px) scale(1.1); }
}
.twinkle {
  transform-box: fill-box;
  opacity: .8;
  transform-origin: center;
  animation: twinkle-settle 17s ease-in-out both;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle-settle {
  0%   { opacity: 0;   transform: scale(.7); }
  10%  { opacity: 1;   transform: scale(1.1); }
  22%  { opacity: .35; transform: scale(.82); }
  35%  { opacity: 1;   transform: scale(1.08); }
  48%  { opacity: .4;  transform: scale(.86); }
  61%  { opacity: 1;   transform: scale(1.06); }
  76%  { opacity: .5;  transform: scale(.9); }
  100% { opacity: .8;  transform: scale(1); }
}
.twinkle-dot {
  opacity: 0;
  animation: fade-in 1.4s ease-out forwards;
  animation-delay: var(--delay, 2s);
}
.breathe-glow  { animation: breathe-glow 8s ease-in-out 3 both; transform-origin: center; }
.relief-breathe{ animation: relief-breathe 20s ease-in-out 2 both; }
.breathe-center{ animation: breathe-center 6s ease-in-out 3 both; }
@keyframes twinkle-star {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
@keyframes twinkle-dot {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.9; }
}
@keyframes breathe-glow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes relief-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.12; }
  50%      { transform: scale(1.05); opacity: 0.16; }
}
@keyframes breathe-center {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}
.rotate-ccw-45 { animation: rotate-ccw 45s linear 1 both; }
.rotate-ccw-50 { animation: rotate-ccw 50s linear 1 both; }
.rotate-ccw-75 { animation: rotate-ccw 75s linear 1 both; }
.rotate-cw-60  { animation: rotate-cw  60s linear 1 both; }
.rotate-cw-90  { animation: rotate-cw  90s linear 1 both; }
@keyframes rotate-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes rotate-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
.art-gate .draw-on,
.art-gate .bloom-petal,
.art-gate .bloom-center,
.art-gate .bloom-then-breathe,
.art-gate .bloom-then-twinkle,
.art-gate .bloom-then-shimmer,
.art-gate .jali-dot,
.art-gate .jali-shimmer,
.art-gate .lamp-glow,
.art-gate .twinkle,
.art-gate .twinkle-dot {
  animation-play-state: paused;
}
.art-gate.is-in .draw-on,
.art-gate.is-in .bloom-petal,
.art-gate.is-in .bloom-center,
.art-gate.is-in .bloom-then-breathe,
.art-gate.is-in .bloom-then-twinkle,
.art-gate.is-in .bloom-then-shimmer,
.art-gate.is-in .jali-dot,
.art-gate.is-in .jali-shimmer,
.art-gate.is-in .twinkle-dot {
  animation-play-state: running;
}
.art-gate.is-in .lamp-glow,
.art-gate.is-in .twinkle {
  animation-play-state: running;
}
.art, .hero__art, .phead__art { transform: translateZ(0); backface-visibility: hidden; }
.art svg, .phead__art svg { overflow: visible; }
.art svg, .hero__art svg, .phead__art svg { will-change: opacity; }
@media (max-width: 760px) {
  .art, .phead__art, .hero__art {
    width: clamp(180px, 56vw, 330px) !important;
  }
  .art[style*="right:"]  { right: 4% !important; left: auto !important; }
  .art[style*="left:"]   { left: 4% !important; right: auto !important; }
  .art[data-art="peacock-grove"] {
    width: 132vw !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  .phead__art { right: -4% !important; }
}
.band > .wrap,
.phead > .wrap,
.hero > .wrap,
section > .wrap,
.foot > .wrap {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .art,
  .phead__art,
  .hero__art {
    z-index: 0 !important;
    opacity: 0.62 !important;
  }
  .art { max-width: 100vw; }
  .art[data-art="peacock-grove"] { width: 112vw !important; }
}
.art[data-art="peacock-grove"] { z-index: 0 !important; }

@media (max-width: 760px) {
  .art[data-art="peacock-grove"] {
    width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
  }
}
@media (max-width: 760px) {
  .art,
  .phead__art,
  .hero__art {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(70vw, 320px) !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 4px auto clamp(16px, 3.5vw, 26px) !important;
    opacity: 0.92 !important;
    z-index: 0 !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }
  .art[data-art="peacock-grove"] {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    margin-inline: 0 !important;
  }
  .phead .art + .wrap { padding-top: 0; }
}
@media (max-width: 760px) {
  .art[data-art="peacock-grove"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 0.85 !important;
  }
  .band:has(> .art[data-art="peacock-grove"]) {
    min-height: 0;
    height: clamp(200px, 46vw, 260px);
    padding-block: 0;
    overflow: hidden;
  }
}
.art-gate .tail-sway,
.art-gate .tail-drift,
.art-gate .head-bob,
.art-gate [class*="feather-sway"],
.art-gate [class*="crest-sway"],
.art-gate [class*="bell-sway"],
.art-gate [class*="leaf-sway"],
.art-gate .lamp-flicker,
.art-gate .chisel,
.art-gate .chip,
.art-gate > svg {
  animation-play-state: paused;
}
.art-gate.is-in .tail-sway,
.art-gate.is-in .tail-drift,
.art-gate.is-in .head-bob,
.art-gate.is-in [class*="feather-sway"],
.art-gate.is-in [class*="crest-sway"],
.art-gate.is-in [class*="bell-sway"],
.art-gate.is-in [class*="leaf-sway"],
.art-gate.is-in .lamp-flicker,
.art-gate.is-in .chisel,
.art-gate.is-in .chip,
.art-gate.is-in > svg {
  animation-play-state: running;
}
.art-gate.is-out .tail-sway,
.art-gate.is-out .tail-drift,
.art-gate.is-out .head-bob,
.art-gate.is-out [class*="feather-sway"],
.art-gate.is-out [class*="crest-sway"],
.art-gate.is-out [class*="bell-sway"],
.art-gate.is-out [class*="leaf-sway"],
.art-gate.is-out .lamp-flicker,
.art-gate.is-out .chisel,
.art-gate.is-out .chip,
.art-gate.is-out > svg {
  animation-play-state: paused;
}
@media (max-width: 760px) {
  .art .bloom-center,
  .panel__art .bloom-center,
  .art .bloom-petal,
  .panel__art .bloom-petal,
  .art .bloom-then-breathe,
  .art .bloom-then-twinkle,
  .art .bloom-then-shimmer,
  .art .jali-dot,
  .panel__art .jali-dot,
  .art .jali-shimmer,
  .panel__art .jali-shimmer,
  .art .lamp-glow,
  .panel__art .lamp-glow,
  .panel__art .bloom-then-breathe {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .art .twinkle,
  .art .twinkle-dot,
  .panel__art .twinkle,
  .panel__art .twinkle-dot {
    animation: none !important;
    opacity: 0.85 !important;
    transform: none !important;
  }
  .art [class*="feather-sway"],
  .panel__art [class*="feather-sway"],
  .art [class*="leaf-sway"],
  .panel__art [class*="leaf-sway"],
  .art [class*="bell-sway"],
  .panel__art [class*="bell-sway"] {
    animation: none !important;
  }
  @keyframes sway-phone {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
  }
  @keyframes drift-phone {
    0%, 100% { transform: rotate(-2.2deg) scale(1); }
    50%      { transform: rotate(2.2deg) scale(1.02); }
  }
  @keyframes bob-phone {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-3px); }
  }
  .art [class*="crest-sway"],
  .panel__art [class*="crest-sway"] {
    animation: sway-phone 4.5s ease-in-out infinite !important;
  }
  .art .tail-sway,
  .art .tail-drift,
  .panel__art .tail-sway,
  .panel__art .tail-drift {
    animation: drift-phone 7s ease-in-out infinite !important;
  }
  .art .head-bob,
  .panel__art .head-bob {
    animation: bob-phone 5s ease-in-out infinite !important;
  }
}
.art-gate.is-out,
.art-gate.is-out * {
  animation-play-state: paused !important;
}