/* Animated SVG illustrations (markup in ../js/illustrations.js). cinema.css
   overrides the colours. */

.il {
  --il-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.k {
  stroke: var(--ink, #111);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.k.thin {
  stroke-width: 3.5;
}

.k.w {
  stroke: #fff;
}

.il * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Cooking pot */
.il-pot .steam path {
  animation: steam 2.4s ease-in-out infinite;
}
.il-pot .s2 { animation-delay: 0.5s; }
.il-pot .s3 { animation-delay: 1s; }
.il-pot .flames path {
  transform-origin: bottom;
  animation: flicker 0.5s ease-in-out infinite alternate;
}
.il-pot .f2 { animation-delay: 0.2s; }
.il-pot .f3 { animation-delay: 0.35s; }

/* Car */
.il-car .body { animation: bob 0.35s ease-in-out infinite alternate; }
.il-car .wheel { animation: spin 0.7s linear infinite; }
.il-car .lines path { animation: whoosh 0.9s ease-out infinite; }
.il-car .l2 { animation-delay: 0.3s; }
.il-car .l3 { animation-delay: 0.6s; }
.il-car .road {
  stroke-dasharray: 22 16;
  animation: dash-left 0.6s linear infinite;
}

/* Microchip */
.il-chip .traces .t {
  stroke-width: 4;
  stroke-dasharray: 8 9;
  animation: dash-flow 1.1s linear infinite;
}
.il-chip .n { animation: blink 1.6s ease-in-out infinite; }
.il-chip .n2, .il-chip .n7 { animation-delay: 0.2s; }
.il-chip .n3, .il-chip .n8 { animation-delay: 0.4s; }
.il-chip .n4, .il-chip .n9 { animation-delay: 0.6s; }
.il-chip .n5, .il-chip .n10 { animation-delay: 0.8s; }
.il-chip .n6 { animation-delay: 1s; }
.il-chip .core { animation: glow 1.6s ease-in-out infinite; }

/* Shopping bag */
.il-bag .swing {
  transform-box: view-box;
  transform-origin: 100px 16px;
  animation: swing 2.2s ease-in-out infinite alternate;
}

/* Construction */
.il-crane .trolley { animation: trolley 4.5s ease-in-out infinite; }
.il-crane .blk { animation: pop 500ms var(--il-ease) both; }
.il-crane .b1 { animation-delay: 0.3s; }
.il-crane .b2 { animation-delay: 0.6s; }
.il-crane .b3 { animation: drop 700ms cubic-bezier(0.34, 1.4, 0.64, 1) 1.2s both; }

/* Aeroplane */
.il-plane .tilt { transform: rotate(-18deg); }
.il-plane .fly { animation: takeoff 2.6s cubic-bezier(0.45, 0, 0.2, 1) both; }
.il-plane .clouds path { animation: drift 4.5s linear infinite; }
.il-plane .c2 { animation-duration: 6s; }
.il-plane .runway { animation: dash-left 0.5s linear infinite; }

/* Heart */
.il-heart .beat { animation: heartbeat 1.3s ease-in-out infinite; }
.il-heart .ecg {
  stroke-dasharray: 220;
  animation: draw-loop 1.3s linear infinite;
}
.il-heart .pulse { animation: ripple 1.3s ease-out infinite; }

/* Growing graph */
.il-graph .bar {
  transform-origin: bottom;
  animation: grow 700ms var(--il-ease) both;
}
.il-graph .r2 { animation-delay: 0.15s; }
.il-graph .r3 { animation-delay: 0.3s; }
.il-graph .r4 { animation-delay: 0.45s; }
.il-graph .trend {
  stroke-dasharray: 200;
  animation: draw 1s var(--il-ease) 0.7s both;
}
.il-graph .arrow { animation: fade-in 400ms ease 1.5s both; }

/* Sparkles */
.il-sparkles .gem { animation: float 3s ease-in-out infinite alternate; }
.il-sparkles .sp { animation: twinkle 1.8s ease-in-out infinite; }
.il-sparkles .b { animation-delay: 0.45s; }
.il-sparkles .c { animation-delay: 0.9s; }
.il-sparkles .d { animation-delay: 1.2s; }
.il-sparkles .e { animation-delay: 0.7s; }

/* Spotlights and confetti */
.il-spotlight .beam {
  opacity: 0.4;
  animation: sweep 2.4s ease-in-out infinite alternate;
}
.il-spotlight .bl { transform-origin: left bottom; }
.il-spotlight .br {
  transform-origin: right bottom;
  animation-direction: alternate-reverse;
}
.il-spotlight .star { animation: pulse 1.2s ease-in-out infinite alternate; }
.il-spotlight .cf { animation: confetti 2.6s linear infinite; }
.il-spotlight .c2 { animation-delay: -0.9s; }
.il-spotlight .c3 { animation-delay: -1.7s; }
.il-spotlight .c4 { animation-delay: -0.4s; }
.il-spotlight .c5 { animation-delay: -2.2s; }
.il-spotlight .c6 { animation-delay: -1.3s; }

/* Book */
.il-book .page {
  transform-box: view-box;
  transform-origin: 100px 110px;
  animation: page-turn 3s ease-in-out infinite alternate;
}
.il-book .bookmark {
  transform-origin: top;
  animation: swing 1.8s ease-in-out infinite alternate;
}

/* Basket */
.il-basket .it { animation: drop-in 700ms cubic-bezier(0.34, 1.5, 0.64, 1) both; }
.il-basket .i1 { animation-delay: 0.3s; }
.il-basket .i2 { animation-delay: 0.85s; }
.il-basket .i3 { animation-delay: 1.4s; }

/* ---------- Keyframes ---------- */

@keyframes steam {
  0% { opacity: 0; transform: translateY(12px); }
  40% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes flicker {
  to { transform: scaleY(1.2) scaleX(0.92); }
}
@keyframes bob {
  to { transform: translateY(-2.5px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes whoosh {
  0% { opacity: 0; transform: translateX(14px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-18px); }
}
@keyframes dash-left {
  to { stroke-dashoffset: 38; }
}
@keyframes dash-flow {
  to { stroke-dashoffset: -34; }
}
@keyframes blink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@keyframes glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
@keyframes swing {
  from { transform: rotate(-6deg); }
  to { transform: rotate(6deg); }
}
@keyframes trolley {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-34px) translateY(6px); }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.4); }
}
@keyframes drop {
  from { opacity: 0; transform: translateY(-60px); }
}
@keyframes takeoff {
  from { opacity: 0; transform: translate(-40px, 44px); }
  20% { opacity: 1; }
}
@keyframes drift {
  from { transform: translateX(16px); }
  to { transform: translateX(-16px); }
}
@keyframes heartbeat {
  0%, 60%, 100% { transform: scale(1); }
  15% { transform: scale(1.08); }
  30% { transform: scale(1); }
  45% { transform: scale(1.05); }
}
@keyframes draw-loop {
  from { stroke-dashoffset: 220; }
  70%, to { stroke-dashoffset: 0; }
}
@keyframes ripple {
  from { opacity: 0.9; transform: scale(0.9); }
  to { opacity: 0; transform: scale(1.3); }
}
@keyframes grow {
  from { transform: scaleY(0); }
}
@keyframes draw {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes float {
  to { transform: translateY(-6px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes sweep {
  from { transform: rotate(-12deg); }
  to { transform: rotate(10deg); }
}
@keyframes pulse {
  to { transform: scale(1.12) rotate(8deg); }
}
@keyframes confetti {
  from { opacity: 0; transform: translateY(-10px) rotate(0deg); }
  10% { opacity: 1; }
  85% { opacity: 1; }
  to { opacity: 0; transform: translateY(190px) rotate(540deg); }
}
@keyframes page-turn {
  0%, 15% { transform: scaleX(1); }
  85%, 100% { transform: scaleX(-1); }
}
@keyframes drop-in {
  from { opacity: 0; transform: translateY(-70px); }
}

@media (prefers-reduced-motion: reduce) {
  .il * {
    animation: none !important;
  }
}