/* ============================================================
   V4 — Living objects & ornaments
   ============================================================ */

/* ---------- Base object ---------- */
.dobj {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.dobj svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* ---------- Etched background illustrations ---------- */
.etch {
  position: absolute;
  pointer-events: none;
  color: #2c2115;
  z-index: 0;
}
.etch svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

/* ---------- Plaque sprigs ---------- */
.pl-sprig {
  width: 54px;
  height: 16px;
  color: var(--gold);
  opacity: 0.9;
  flex: none;
}
.pl-sprig.flip { transform: scaleX(-1); }

/* ---------- Gilt frame upgrade ---------- */
.frame.gilt {
  padding: 13px;
  background: linear-gradient(135deg, #e7cf94, #a97f2c 22%, #f4e5b8 48%, #8a6a2a 76%, #d8bd77);
  box-shadow: 0 26px 52px -18px rgba(43, 32, 19, 0.62);
}
.frame.gilt::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px dotted rgba(255, 246, 214, 0.85);
  z-index: 3;
}
.gilt-inner {
  position: relative;
  border: 1px solid rgba(122, 92, 40, 0.65);
  background: var(--card);
  padding: 8px;
}

/* ---------- Ticket perforations & serial ---------- */
.perf {
  position: absolute;
  left: 18px;
  right: 18px;
  height: 8px;
  background-image: radial-gradient(circle 4px at 8px 4px, var(--paper-deep) 3.4px, transparent 4.4px);
  background-size: 16px 8px;
  background-repeat: repeat-x;
  z-index: 3;
  pointer-events: none;
}
.perf.top { top: -4px; }
.perf.bot { bottom: -4px; }
.t-serial {
  position: absolute;
  top: 14px;
  right: 8px;
  writing-mode: vertical-rl;
  font-family: "IM Fell English SC", serif;
  font-size: 0.56rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity: 0.9;
}

/* ---------- Fireflies ---------- */
.firefly {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e8c87a;
  box-shadow: 0 0 10px 3px rgba(232, 200, 122, 0.55);
  animation: ff 5s ease-in-out infinite;
  opacity: 0.7;
  pointer-events: none;
}
@keyframes ff {
  0%, 100% { opacity: 0.12; transform: translate(0, 0); }
  50% { opacity: 0.95; transform: translate(12px, -16px); }
}

/* ---------- Clouds in artwork ---------- */
.cloud {
  position: absolute;
  border-radius: 50px;
  background: rgba(250, 244, 222, 0.75);
  filter: blur(1px);
  z-index: 1;
}
.cloud::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 35%;
  width: 60%;
  height: 90%;
  border-radius: 50%;
  background: inherit;
}

/* ---------- Animations ---------- */
@keyframes dobj-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.dobj.bob { animation: dobj-bob 5.5s ease-in-out infinite; }
.dobj.bob-slow { animation: dobj-bob 8s ease-in-out infinite; }

@keyframes dobj-sway {
  0%, 100% { transform: rotate(-1.3deg); }
  50% { transform: rotate(1.3deg); }
}
.dobj.sway {
  transform-origin: 50% 100%;
  animation: dobj-sway 7s ease-in-out infinite;
}

@keyframes dobj-drift {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(7px, -14px) rotate(10deg); }
}
.dobj.drift { animation: dobj-drift 9s ease-in-out infinite; }

@keyframes dobj-drift-x {
  0% { transform: translateX(-14px); }
  50% { transform: translateX(16px); }
  100% { transform: translateX(-14px); }
}
.dobj.drift-x { animation: dobj-drift-x 16s ease-in-out infinite; }

@keyframes flick {
  0%, 100% { transform: scaleY(1); }
  30% { transform: scaleY(1.2) translateY(-1px); }
  60% { transform: scaleY(0.9); }
}
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flick 1.8s ease-in-out infinite;
}

@keyframes steamrise {
  0% { opacity: 0; transform: translateY(6px); }
  40% { opacity: 0.75; }
  100% { opacity: 0; transform: translateY(-9px); }
}
.steam path {
  stroke: #85714f;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  animation: steamrise 3.4s ease-in-out infinite;
}
.steam .s2 { animation-delay: 1.1s; }
.steam .s3 { animation-delay: 2.2s; }

@keyframes flapR {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.45); }
}
.wing { transform-box: fill-box; }
.wing.wr {
  transform-origin: left center;
  animation: flapR 1.1s ease-in-out infinite alternate;
}
.wing.wl {
  transform-origin: right center;
  animation: flapR 1.1s ease-in-out infinite alternate;
}

/* ---------- Placement helpers ---------- */
.z0 { z-index: 0; }
.z5 { z-index: 5; }

@media (max-width: 1020px) {
  .dobj.hide-md { display: none; }
}
@media (max-width: 760px) {
  .dobj.hide-sm { display: none; }
  .dobj { z-index: 4; }
}