/* CoolQuad Mosaic Logo v11 — production */
.cq-logo{
  --cq-photo-webp:url("assets/cq-photos-900.webp");
  --cq-photo-avif:url("assets/cq-photos-900.avif");
  --cq-logo-webp:url("assets/cq-logo-900.webp");
  --cq-logo-avif:url("assets/cq-logo-900.avif");
  --cq-heart:url("assets/cq-sign-heart-300.webp");
  --cq-photo-sprite:none;
  --cq-logo-sprite:var(--cq-logo-webp);
  display:block;
  position:relative;
  width:clamp(220px,18vw,280px);
  aspect-ratio:5/3;
  background:#fff;
  text-decoration:none;
  isolation:isolate;
  contain:layout paint style;
}
@supports (background-image:image-set(url("x.avif") type("image/avif"))){
  .cq-logo{
    --cq-logo-sprite:image-set(var(--cq-logo-avif) type("image/avif"),var(--cq-logo-webp) type("image/webp"));
  }
  .cq-logo.cq-animate{
    --cq-photo-sprite:image-set(var(--cq-photo-avif) type("image/avif"),var(--cq-photo-webp) type("image/webp"));
  }
}
.cq-logo.cq-animate{--cq-photo-sprite:var(--cq-photo-webp)}
.cq-grid{
  position:absolute;inset:0;
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  background:#fff;
}
.cq-tile{
  position:relative;min-width:0;min-height:0;
  background:#fff;perspective:900px;
}
.cq-tile::after{
  content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.13);
}
.cq-card{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform-origin:center;
  transition:transform 1050ms cubic-bezier(.22,.7,.22,1);
  transition-delay:var(--delay);
}
.cq-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background-color:#fff;background-repeat:no-repeat;
  background-size:300% 300%;background-position:var(--x) var(--y);
}
.cq-front{
  transform:translateZ(.5px);
  background-image:var(--cq-photo-sprite);
}
.cq-back{
  transform:rotateY(180deg) translateZ(.5px);
  background-image:var(--cq-logo-sprite);
}
.cq-logo.cq-to-logo .cq-card{transform:rotateY(180deg)}
.cq-logo.cq-static .cq-card{transform:none;transition:none}
.cq-logo.cq-static .cq-front{display:none;background-image:none}
.cq-logo.cq-static .cq-back{
  transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;
}
.cq-heart{
  position:absolute;inset:0;
  display:block;
  background-image:var(--cq-heart);
  background-size:100% 100%;background-repeat:no-repeat;background-position:center;
  animation:cq-heart-blink 1s steps(1,end) infinite;
}
@keyframes cq-heart-blink{0%,100%{opacity:1}50%{opacity:0}}
.cq-wind{
  position:absolute;left:-12%;top:10%;width:15%;height:15%;z-index:9;pointer-events:none;
  opacity:0;border-top:2px solid #57d322;border-bottom:1px solid #57d322;border-radius:50%;
}
.cq-logo.cq-wind-on .cq-wind{animation:cq-wind 1800ms ease-out both}
@keyframes cq-wind{10%{opacity:.6}100%{opacity:0;transform:translate(760%,130%)}}

/* Tablet */
@media (max-width:1024px){
  .cq-logo{width:clamp(190px,24vw,230px)}
}
/* Phone: same 3x3 structure, smaller sprite */
@media (max-width:650px){
  .cq-logo{
    --cq-photo-webp:url("assets/cq-photos-540.webp");
    --cq-photo-avif:url("assets/cq-photos-540.avif");
    --cq-logo-webp:url("assets/cq-logo-540.webp");
    --cq-logo-avif:url("assets/cq-logo-540.avif");
    --cq-heart:url("assets/cq-sign-heart-180.webp");
    width:clamp(150px,46vw,190px);
  }
}
@media (prefers-reduced-motion:reduce){
  .cq-logo .cq-card{transition:none!important}
  .cq-heart{animation:none!important}
  .cq-wind{display:none!important}
}

@supports (background-image:image-set(url("x.avif") type("image/avif"))){
  .cq-logo.cq-animate{
    --cq-photo-sprite:image-set(var(--cq-photo-avif) type("image/avif"),var(--cq-photo-webp) type("image/webp"));
  }
}