/*
 * Combatwear Factory 3.9.0 — isometric illustration layout.
 *
 * Sizing and placement only. The scenes themselves are inline SVG printed by
 * inc-illustrations.php, and the faint background placements are generated
 * there as data URIs and appended to this stylesheet.
 *
 * Motion here is scoped under html.cf-motion, the same failsafe class the 3.8.0
 * motion layer uses: with JavaScript off, every illustration is simply present
 * and still.
 */

.cf-ill{display:block;width:100%;height:auto;max-width:100%}

/* ---------- hero panel: stands in for a missing photograph ---------- */

.hero-card.cf-ill-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:
    radial-gradient(120% 90% at 70% 20%,rgba(188,32,44,.16),rgba(188,32,44,0) 62%),
    linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  min-height:0;
  overflow:hidden;
}
.hero-card.cf-ill-panel .cf-ill{max-width:520px;margin-inline:auto}

/* A caption-only hero panel keeps its text and gains a small scene above it. */
.hero-card.cf-ill-caption{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  padding:24px;
}
.hero-card.cf-ill-caption .cf-ill-sm{width:150px;max-width:52%;margin-bottom:2px}

/* ---------- beside a section heading ---------- */

.section-head.cf-ill-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:44px;
  max-width:none;
}
.cf-ill-head-text{max-width:780px;min-width:0}
.cf-ill-head-art{flex:0 0 auto;width:190px}
.cf-ill-head-art .cf-ill{width:100%}

/* On a tinted section the artwork sits on the section's own ground, so it needs
   no panel of its own — only a little breathing room. */
@media(max-width:980px){
  .section-head.cf-ill-head{gap:26px}
  .cf-ill-head-art{width:140px}
}
@media(max-width:760px){
  /* Below tablet the heading needs the full width; the scene would only push
     the first line of copy off the screen. */
  .cf-ill-head-art{display:none}
  .section-head.cf-ill-head{display:block}
}

/* ---------- the enquiry block ---------- */

.cf-ill-inquiry{width:210px;max-width:60%;margin:0 0 18px}
.cf-ill-inquiry .cf-ill{width:100%}
@media(max-width:980px){.cf-ill-inquiry{width:170px;margin-bottom:14px}}
@media(max-width:620px){.cf-ill-inquiry{width:140px}}

/* ---------- the 404 page ---------- */

.cf-ill-404{width:min(340px,72vw);margin:6px 0 28px}

/* ---------- motion ---------- */

@keyframes cfIllIn{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cfIllFloat{0%{transform:translateY(0)}100%{transform:translateY(-9px)}}

/* The hero scene rises in once, then breathes very slowly. The float lives on
   an inner wrapper-free element, so it never fights the entrance animation. */
html.cf-motion .hero-card.cf-ill-panel{animation:cfIllIn .85s cubic-bezier(.16,1,.3,1) .18s both}
html.cf-motion .hero-card.cf-ill-panel .cf-ill{animation:cfIllFloat 6.5s ease-in-out 1.1s infinite alternate}
html.cf-motion .hero-card.cf-ill-caption .cf-ill-sm{animation:cfIllFloat 7s ease-in-out 1.2s infinite alternate}

/* Heading scenes ride the existing reveal: the .section-head is already one of
   the blocks the motion layer observes, so the artwork only needs a small extra
   delay to arrive just after the words. */
html.cf-motion .cf-ill-head-art{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1) .18s,transform .7s cubic-bezier(.16,1,.3,1) .18s}
html.cf-motion .section-head.cf-in .cf-ill-head-art{opacity:1;transform:translateY(0)}

html.cf-motion .cf-ill-inquiry{animation:cfIllFloat 8s ease-in-out 1s infinite alternate}

/* A pointer over a heading scene tips it very slightly — enough to feel alive,
   not enough to distract from the copy. */
@media(hover:hover){
  html.cf-motion .cf-ill-head-art .cf-ill,
  html.cf-motion .cf-ill-inquiry .cf-ill{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  html.cf-motion .cf-ill-head-art:hover .cf-ill,
  html.cf-motion .cf-ill-inquiry:hover .cf-ill{transform:translateY(-5px) scale(1.03)}
}

@media(prefers-reduced-motion:reduce){
  html.cf-motion .hero-card.cf-ill-panel,
  html.cf-motion .hero-card.cf-ill-panel .cf-ill,
  html.cf-motion .hero-card.cf-ill-caption .cf-ill-sm,
  html.cf-motion .cf-ill-inquiry{animation:none!important}
  html.cf-motion .cf-ill-head-art{opacity:1!important;transform:none!important}
}

@media print{
  .cta:after,.cf-inquiry:after,.site-footer:after{display:none!important}
}