/* PHPdot brand components: header badge + hero elephant animations */
.phpdot-logo {
    --color-primary: #8368fc;
    --icon-line: #fff;
    display: inline-flex; align-items: center;
  }
  .phpdot-logo svg { height: 46px; width: auto; display: block; }
  .phpdot-logo .b-disc { fill: var(--color-primary); transform-box: fill-box;
    transform-origin: center; animation: ps-pop .5s cubic-bezier(.2, .8, .3, 1.15) both; }
  .phpdot-logo .b-line { stroke: var(--icon-line); stroke-dasharray: 100;
    animation: ps-line .7s cubic-bezier(.65, 0, .35, 1) both; }
  .phpdot-logo .b-crown     { animation-delay: .4s }
  .phpdot-logo .b-ear       { animation-delay: .6s }
  .phpdot-logo .b-trunkline { animation-delay: .9s }
  .phpdot-logo .b-tusk { fill: var(--icon-line); opacity: 0;
    animation: ps-fade .4s ease forwards 1.35s; }
  .phpdot-logo .b-star { fill: var(--icon-line); opacity: 0;
    transform-box: fill-box; transform-origin: center;
    animation: ps-pop2 .35s ease forwards 1.65s,
               ps-twinkle 3.6s ease-in-out 2.9s infinite; }
  @keyframes ps-pop  { 0% { opacity: 0; transform: scale(.4) }
                       100% { opacity: 1; transform: scale(1) } }
  @keyframes ps-line { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }
  @keyframes ps-fade { to { opacity: 1 } }
  @keyframes ps-pop2 { 0% { opacity: 0; transform: scale(0) } 70% { transform: scale(1.3) }
                       100% { opacity: 1; transform: scale(1) } }
  @keyframes ps-twinkle { 0%, 100% { opacity: 1; transform: scale(1) }
                          50% { opacity: .45; transform: scale(.8) } }
  @media (prefers-reduced-motion: reduce) {
    .phpdot-logo .b-disc, .phpdot-logo .b-line,
    .phpdot-logo .b-tusk, .phpdot-logo .b-star { animation: none !important; }
    .phpdot-logo .b-disc, .phpdot-logo .b-tusk, .phpdot-logo .b-star { opacity: 1; }
  }

.phpdot-hero-mark { --pd-blue: #8368fc; display: block; }
  .phpdot-hero-mark svg { width: 100%; height: auto; display: block; overflow: visible; }

  .phpdot-hero-mark #elephant .line { stroke: var(--pd-blue); }
  .phpdot-hero-mark #elephant .fill,
  .phpdot-hero-mark #elephant .fills { fill: var(--pd-blue); }

  .phpdot-hero-mark .line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: pd-draw .8s cubic-bezier(.65, 0, .35, 1) forwards;
  }
  .phpdot-hero-mark #head .line          { animation-delay: .05s }
  .phpdot-hero-mark #ears .line          { animation-delay: .3s }
  .phpdot-hero-mark #trunk .line         { animation-delay: .55s }
  .phpdot-hero-mark #trunk-ridges .line,
  .phpdot-hero-mark #eyes .line          { animation-delay: .85s; animation-duration: .45s }

  .phpdot-hero-mark .fill { opacity: 0; animation: pd-fade .45s ease forwards 1.15s; }

  .phpdot-hero-mark .star {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: pd-pop .35s ease forwards 1.25s,
               pd-twinkle 4.4s ease-in-out 2.8s infinite;
  }
  .phpdot-hero-mark .star:nth-of-type(2n) { animation-delay: 1.4s, 3.9s;  animation-duration: .35s, 3.6s }
  .phpdot-hero-mark .star:nth-of-type(3n) { animation-delay: 1.55s, 4.7s; animation-duration: .35s, 5.2s }
  .phpdot-hero-mark .dot { opacity: 0; animation: pd-fade .4s ease forwards 1.5s; }

  .phpdot-hero-mark #trunk     { transform-box: fill-box; transform-origin: 50% 2%; }
  .phpdot-hero-mark #ear-left  { transform-box: fill-box; transform-origin: 95% 20%; }
  .phpdot-hero-mark #ear-right { transform-box: fill-box; transform-origin: 5% 20%; }
  .phpdot-hero-mark:hover #trunk     { animation: pd-sway .9s ease-in-out; }
  .phpdot-hero-mark:hover #ear-left  { animation: pd-flap-left .7s ease; }
  .phpdot-hero-mark:hover #ear-right { animation: pd-flap-right .7s ease; }

  @keyframes pd-draw    { to { stroke-dashoffset: 0 } }
  @keyframes pd-fade    { to { opacity: 1 } }
  @keyframes pd-pop     { 0% { opacity: 0; transform: scale(0) } 70% { transform: scale(1.3) }
                          100% { opacity: 1; transform: scale(1) } }
  @keyframes pd-twinkle { 0%, 100% { opacity: 1; transform: scale(1) }
                          50% { opacity: .45; transform: scale(.78) } }
  @keyframes pd-sway    { 0%, 100% { transform: rotate(0) } 30% { transform: rotate(2.2deg) }
                          70% { transform: rotate(-1.6deg) } }
  @keyframes pd-flap-left  { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(-3deg) } }
  @keyframes pd-flap-right { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(3deg) } }

  @media (prefers-reduced-motion: reduce) {
    .phpdot-hero-mark .line, .phpdot-hero-mark .fill,
    .phpdot-hero-mark .star, .phpdot-hero-mark .dot,
    .phpdot-hero-mark:hover #trunk,
    .phpdot-hero-mark:hover #ear-left,
    .phpdot-hero-mark:hover #ear-right { animation: none !important; }
    .phpdot-hero-mark .line { stroke-dashoffset: 0; }
    .phpdot-hero-mark .fill, .phpdot-hero-mark .star, .phpdot-hero-mark .dot { opacity: 1; }
  }

#elephant .line{fill:none;stroke:#62afcd;stroke-linecap:round;stroke-linejoin:round}#elephant .fills,#elephant .fill{fill:#62afcd;stroke:none}