/* Animated hero for the Contact page, loaded only by the page that shows it
   (moved out of styles.css so other pages don't download it). */

/* ----------------------------------------------------------- Contact hero */
/* Animated hero on /contact: a musician sends a problem report from their
   tablet, it lands in the Page Turner inbox, and a reply comes back. Art is
   drawn at 1200x600; public/hero.js scales it via --ct-scale. Rules below
   are as designed. */
.ct-hero{--ct-accent:#4f8cff;--ct-dur:7s;--ct-bg:#f3f5fa;--ct-line:rgba(22,33,58,0.22);--ct-scale:1;position:relative;width:100%;max-width:1200px;aspect-ratio:2/1;margin:0 auto;overflow:hidden;border-radius:16px;background:var(--ct-bg)}
.ct-hero.ct-dark{--ct-bg:#0e1626;--ct-line:rgba(255,255,255,0.22)}
.ct-hero > .ct-cnt{position:absolute;left:0;top:0;transform-origin:0 0;transform:scale(var(--ct-scale))}
.ct-cnt .ct-comp{animation:ct-comp var(--ct-dur) cubic-bezier(.3,1.1,.4,1) infinite}
@keyframes ct-comp{0%,4%{transform:translateY(115%)}12%,27%{transform:translateY(0);opacity:1}31%,100%{transform:translateY(0) scale(.6);opacity:0}}
.ct-cnt .ct-v0,.ct-cnt .ct-v1,.ct-cnt .ct-v2{animation:ct-v var(--ct-dur) ease-out infinite}
.ct-cnt .ct-v1{animation-name:ct-v1}
.ct-cnt .ct-v2{animation-name:ct-v2}
@keyframes ct-v{0%,13%{opacity:0}15%,100%{opacity:1}}
@keyframes ct-v1{0%,17%{opacity:0}19%,100%{opacity:1}}
@keyframes ct-v2{0%,21%{opacity:0}23%,100%{opacity:1}}
.ct-cnt .ct-send{animation:ct-send var(--ct-dur) ease-out infinite}
@keyframes ct-send{0%,24%{transform:scale(1)}26%{transform:scale(.88)}28%,100%{transform:scale(1)}}
.ct-cnt .ct-env{animation:ct-env var(--ct-dur) cubic-bezier(.45,0,.25,1) infinite}
@keyframes ct-env{0%,28%{transform:translateX(0) scale(.4);opacity:0}31%{transform:translateX(0) scale(1);opacity:1}43%{transform:translateX(330px) scale(1);opacity:1}46%,100%{transform:translateX(360px) scale(.5);opacity:0}}
.ct-cnt .ct-newrow{animation:ct-row var(--ct-dur) cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes ct-row{0%,45%{transform:translateX(-14px);opacity:0}49%,92%{transform:translateX(0);opacity:1}97%,100%{opacity:0}}
.ct-cnt .ct-badge{animation:ct-badge var(--ct-dur) cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes ct-badge{0%,46%{transform:scale(0)}50%,92%{transform:scale(1)}96%,100%{transform:scale(0)}}
.ct-cnt .ct-rep{animation:ct-rep var(--ct-dur) cubic-bezier(.45,0,.25,1) infinite}
@keyframes ct-rep{0%,58%{transform:translateX(0) scale(.4);opacity:0}61%{transform:translateX(0) scale(1);opacity:1}72%{transform:translateX(-300px) scale(1);opacity:1}75%,100%{transform:translateX(-330px) scale(.5);opacity:0}}
.ct-cnt .ct-ok{animation:ct-ok var(--ct-dur) cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes ct-ok{0%,73%{transform:scale(0);opacity:0}77%,88%{transform:scale(1);opacity:1}93%,100%{transform:scale(.8);opacity:0}}
.ct-cnt .ct-ring{animation:ct-ring var(--ct-dur) ease-out infinite}
@keyframes ct-ring{0%,74%{transform:translate(-50%,-50%) scale(.4);opacity:0}77%{opacity:.45}92%{transform:translate(-50%,-50%) scale(1.6);opacity:0}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
.ct-chip-fol{background:#ffffff;color:#16213a;box-shadow:0 0 0 1px rgba(22,33,58,.12)}
/* Site integration, matching the other heroes: no background, soft edge
   fades, cropped to the 1040x510 area around the artwork (hero.js reads
   --ct-view-w), larger labels, and hidden until scaled. Light theme uses the
   art's own light-mode connector color. */
.legal .ct-hero {
  margin: 0 auto 24px;
  aspect-ratio: 1040 / 510;
  --ct-bg: transparent;
  --ct-view-w: 1040;
  --ct-crop-x: -90px;
  --ct-crop-y: -35px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
                      linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent),
              linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.legal .ct-hero > .ct-cnt { transform: scale(var(--ct-scale)) translate(var(--ct-crop-x), var(--ct-crop-y)); }
/* !important because the art sets the chip's transform inline. */
.legal .ct-hero .ct-chip { transform: translateX(-50%) scale(1.5) !important; transform-origin: 50% 100%; }
.js .ct-hero:not(.pt-ready) > .ct-cnt { visibility: hidden; }
:root[data-theme="light"] .ct-hero { --ct-line: rgba(22, 33, 58, 0.22); }