/* ============================================================
   TCA WEBSITE — FLOATING QUILL
   Site-wide decorative element, loaded on every PUBLIC page via
   includes/header.php (this file) + includes/footer.php (markup +
   quill-float.js). Deliberately NOT included on /admin — admin
   pages use admin-header.php/admin-footer.php instead, so this
   never appears over the CMS.

   Structure (see quill-float.js for the scroll-driven positioning):
     .quill-float                 fixed, positioned every frame by JS
       .quill-float__twist        rotateY "turning in the air" — needs
                                   the parent's perspective below
         .quill-float__sway       Z-rotate wobble + horizontal drift
           .quill-float__bob      vertical bob
             img                  the feather art itself

   Three independently-timed CSS animations (5.8s / 3.4s / 4.1s, not
   round numbers or clean multiples of each other) instead of one —
   a single synced loop reads as mechanical almost immediately;
   staggered periods take close to a minute to repeat.
   ============================================================ */

.quill-float {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;
  height: 260px;
  pointer-events: none; /* decorative only — must never block clicks/taps */
  z-index: 400;         /* above page content, below nav (1000), mobile-nav (999), back-to-top (500) */
  will-change: transform, opacity;
  perspective: 700px;
  transition: opacity 0.4s ease;
}

.quill-float__twist {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: quillTwist 5.8s ease-in-out infinite;
}

.quill-float__sway {
  width: 100%;
  height: 100%;
  animation: quillSway 3.4s ease-in-out infinite;
}

.quill-float__bob {
  width: 100%;
  height: 100%;
  animation: quillBob 4.1s ease-in-out infinite;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.22));
}

.quill-float__bob img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Y-axis: the actual "turning in space" motion. Kept within +/-32deg so
   the flat image never needs to show a nonexistent back edge. */
@keyframes quillTwist {
  0%   { transform: rotateY(-32deg); }
  50%  { transform: rotateY(32deg); }
  100% { transform: rotateY(-32deg); }
}

@keyframes quillSway {
  0%   { transform: rotate(-6deg) translateX(-4px); }
  50%  { transform: rotate(5deg) translateX(4px); }
  100% { transform: rotate(-6deg) translateX(-4px); }
}

@keyframes quillBob {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* Shrunk and kept out of the way of thumbs on small screens — a 70px
   fixed decorative element is proportionally much bigger on a phone,
   and this site's mobile nav / CTA buttons need the space more. */
@media (max-width: 640px) {
  .quill-float {
    width: 64px;
    height: 166px;
    opacity: 0.7;
  }
}

/* Off entirely below ~420px height (landscape phones, small embedded
   webviews) — not enough vertical room for a floating decoration to
   read as anything but clutter. */
@media (max-height: 420px) {
  .quill-float { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .quill-float__twist,
  .quill-float__sway,
  .quill-float__bob {
    animation: none;
  }
  .quill-float {
    transition: none;
  }
}