* { margin:0; padding:0; box-sizing:border-box; }
  html, body {
    width:100%; height:100%;
    background: radial-gradient(ellipse at 46% 32%, #3d0e11 0%, #1a0508 32%, #05030a 66%, #000000 100%);
    overflow:hidden;
    font-family: -apple-system, sans-serif;
  }
  .scene { position:relative; width:100vw; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }

  .dragon-wrap {
    position:relative;
    width:64vw;
    max-width:1320px;
    aspect-ratio: 1672 / 941;
    animation: sway 7.5s ease-in-out infinite;
    transform-origin: 50% 60%;
  }
  @keyframes sway {
    0%, 100% { transform: rotate(0deg) translateY(0px); }
    50% { transform: rotate(0.35deg) translateY(-6px); }
  }

  .glow-behind-head {
    position:absolute;
    left:49%; top:34%;
    width:34%; aspect-ratio:1/1;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(255,140,40,0.55) 0%, rgba(255,80,20,0.22) 40%, rgba(255,60,20,0) 72%);
    filter: blur(6px);
    animation: pulseGlow 3.2s ease-in-out infinite;
    pointer-events:none;
    z-index:1;
  }
  @keyframes pulseGlow {
    0%, 100% { opacity:0.55; transform: translate(-50%,-50%) scale(0.92); }
    50% { opacity:1; transform: translate(-50%,-50%) scale(1.08); }
  }

  .dragon-img {
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:2;
    filter: drop-shadow(0 0 55px rgba(255,90,20,0.28)) drop-shadow(0 20px 60px rgba(0,0,0,0.6));
  }

  .fx-svg { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
  .pearl-tint {
    position:absolute;
    left:84.80%; top:67.24%;
    width:7.36%; aspect-ratio:1/1;
    transform: translate(-50%,-50%);
    border-radius:50%;
    background: radial-gradient(circle at 38% 32%, #f4f8fb 0%, #cfe0f0 12%, #7fa4cf 30%, #3d6099 50%, #1c3968 70%, #0a1a3a 88%, #020814 100%);
    mix-blend-mode: color;
    animation: pearlPulse 2.4s ease-in-out infinite;
    z-index:2;
    pointer-events:none;
  }
  .pearl-outer-glow {
    position:absolute;
    left:84.80%; top:67.24%;
    width:9%; aspect-ratio:1/1;
    transform: translate(-50%,-50%);
    border-radius:50%;
    background: radial-gradient(circle, rgba(80,120,180,0.4) 0%, rgba(35,70,130,0.18) 48%, rgba(5,15,40,0) 76%);
    filter: blur(3px);
    mix-blend-mode: screen;
    animation: pearlPulse 2.4s ease-in-out infinite;
    z-index:2;
    pointer-events:none;
  }
  .pearl-shade {
    position:absolute;
    left:84.80%; top:67.24%;
    width:7.36%; aspect-ratio:1/1;
    transform: translate(-50%,-50%);
    border-radius:50%;
    background: radial-gradient(circle at 38% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 18%, rgba(10,25,55,0.5) 48%, rgba(3,8,22,0.9) 100%);
    mix-blend-mode: multiply;
    animation: pearlPulse 2.4s ease-in-out infinite;
    z-index:2;
    pointer-events:none;
  }
  @keyframes pearlPulse {
    0%, 100% { opacity:0.75; transform: translate(-50%,-50%) scale(0.94); }
    50% { opacity:1; transform: translate(-50%,-50%) scale(1.12); }
  }


  .flame { transform-box: fill-box; transform-origin: 100% 50%; }
  .flame1 { fill: url(#fireGradientOuter); animation: flick1 0.6s ease-in-out infinite; }
  .flame2 { fill: url(#fireGradientMid); animation: flick2 0.46s ease-in-out infinite; }
  .flame3 { fill: url(#fireGradientCore); animation: flick3 0.35s ease-in-out infinite; }
  @keyframes flick1 {
    0%,100% { transform: scaleX(1) scaleY(1) translateY(0); opacity:0.85; }
    30% { transform: scaleX(1.15) scaleY(0.9) translateY(-4px); opacity:1; }
    65% { transform: scaleX(0.92) scaleY(1.08) translateY(3px); opacity:0.75; }
  }
  @keyframes flick2 {
    0%,100% { transform: scaleX(1) scaleY(1) translateY(0); opacity:0.9; }
    40% { transform: scaleX(1.2) scaleY(0.86) translateY(4px); opacity:1; }
    75% { transform: scaleX(0.88) scaleY(1.1) translateY(-3px); opacity:0.8; }
  }
  @keyframes flick3 {
    0%,100% { transform: scaleX(1) scaleY(1); opacity:0.95; }
    50% { transform: scaleX(1.25) scaleY(0.82); opacity:1; }
  }
  .ember { transform-box: fill-box; transform-origin: 50% 50%; fill: url(#emberGradient); animation: emberRise 1.7s ease-out infinite; }
  @keyframes emberRise {
    0% { transform: translate(0,0) scale(1); opacity:0.9; }
    100% { transform: translate(var(--ex,-60px), var(--ey,-70px)) scale(0.15); opacity:0; }
  }

  .bg-ember {
    position:absolute; bottom:-10px; width:5px; height:5px; border-radius:50%;
    background: radial-gradient(circle, #ffdca0 0%, #ff8a2f 45%, rgba(255,60,20,0) 75%);
    box-shadow: 0 0 8px 2px rgba(255,140,50,0.55);
    animation-name: floatUp; animation-timing-function: ease-in; animation-iteration-count: infinite;
    pointer-events:none;
  }
  @keyframes floatUp {
    0% { transform: translate(0,0) scale(1); opacity:0; }
    10% { opacity:0.9; }
    88% { opacity:0.35; }
    100% { transform: translate(var(--dx,20px), -108vh) scale(0.3); opacity:0; }
  }
  .grain { position:absolute; inset:0; opacity:0.04; mix-blend-mode:overlay; pointer-events:none; z-index:4; }