/* comic-hero.css — the split-panel comic hero on /logo-generator/.
   The rule that shapes this whole file: the ARTWORK is bitmap, the GEOMETRY is CSS.

   Bitmaps (panel-red / panel-blue / need-a-logo / the two characters) are pure texture and
   figure — they stretch and nobody notices. Everything with a straight edge — the white
   gutter down the middle, the black keyline, the button, all the type — is drawn here, so it
   stays a constant thickness and razor sharp at any screen size and never gets cropped.

   ONE KNOB SCALES EVERYTHING. .chero sets a font-size in viewport units and every size
   inside the panel is expressed in em, so the composition keeps its proportions from a 1280
   laptop to a 4K monitor. To make the whole hero bigger or smaller, change that one line. */

.chero {
    position: relative;
    /* Above sky.css's cloud veil (45), which is a fixed strip masked to fade out at 210px —
       exactly where the burst breaks out above the panel. At z-index 2 the veil painted sky
       over the top of the starburst. Below the nav (50) so the menu still wins. */
    z-index: 46;
    /* Wider than the 1440 content column — the panel deliberately breaks out past the nav. */
    width: min(1760px, 100vw - 32px);
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);

    /* THE KNOB. Whichever of the two is smaller wins, so the art shrinks on a short laptop
       (height-bound) and on a narrow window (width-bound), never overflowing either way. */
    font-size: min(1vw, 1.8vh);

    font-family: 'Bangers', system-ui, cursive;
    -webkit-user-select: none;
            user-select: none;
}

/* ---------- The panel ----------
   70% of the viewport height, as asked. svh (not vh) so mobile browser chrome shrinking
   doesn't make the panel jump. The white background IS the diagonal gutter — the two
   clipped halves below leave a gap and this shows through it. */
.chero__panel {
    position: relative;
    height: 70svh;
    min-height: 460px;                  /* very short laptops: stop shrinking, sit below the fold */
    max-height: 940px;                  /* very tall monitors: stop growing */

    /* --key is the black keyline each half draws around ITSELF. There is deliberately no
       border or shadow on the panel: the two halves are separate comic panels, each fully
       outlined, with white showing between them — not one bordered box split by a gap. */
    --key: 4px;
    background: #fff;                   /* shows through as the gutter between the panels */
}

/* ---------- The two panels ----------
   Each is a pair of layers: an outer black shape, and the texture clipped a --key smaller
   inside it. The black that survives around the edge IS the panel's outline, and because it
   follows the clip path it wraps the diagonal edge as cleanly as the straight ones.

   The four X values are the diagonal. Move all four together to slide the slash; widen the
   gap between the red pair and the blue pair to fatten the gutter between the panels. */
.chero__half {
    position: absolute;
    inset: 0;
    background: #000;
    filter: drop-shadow(5px 5px 0 #000);   /* filter, not box-shadow — follows the clip path */
}
.chero__half--red  { clip-path: polygon(0 0, 47.6% 0, 54.2% 100%, 0 100%); }
.chero__half--blue { clip-path: polygon(49.2% 0, 100% 0, 100% 100%, 55.8% 100%); }

.chero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.chero__bg--red {
    background-image: url('/images/logo-generator/panel-red.webp');
    clip-path: polygon(
        var(--key) var(--key),
        calc(47.6% - var(--key)) var(--key),
        calc(54.2% - var(--key)) calc(100% - var(--key)),
        var(--key) calc(100% - var(--key)));
}
.chero__bg--blue {
    background-image: url('/images/logo-generator/panel-blue.webp');
    clip-path: polygon(
        calc(49.2% + var(--key)) var(--key),
        calc(100% - var(--key)) var(--key),
        calc(100% - var(--key)) calc(100% - var(--key)),
        calc(55.8% + var(--key)) calc(100% - var(--key)));
}

/* ============================================================================
   SOLO VARIANT — one full-width panel instead of two halves (/website-builder/).
   Same engine: same knob, same keyline, same burst-breaks-out-the-top behaviour.
   ============================================================================ */

.chero__half--solo { clip-path: none; }

/* One panel, so the texture is simply inset by the keyline rather than clipped to a shape. */
.chero__bg--yellow {
    inset: var(--key);
    background-image: url('/images/website-builder/panel-yellow.webp');
}

/* ---------- The pitch lines ----------
   Same Bangers treatment as the split hero but inverted: black on yellow instead of white on
   red. The thin cream stroke behind the letters is what keeps them legible where the rays run
   pale behind them — without it the black loses its edge over the lighter wedges. */
.chero__pitch {
    position: absolute;
    z-index: 5;
    right: 3%;
    top: 31%;
    width: 62%;
    text-align: right;
}
.chero__line {
    margin: 0;
    font-size: 2.4em;
    line-height: 1.14;
    text-transform: uppercase;
    color: #111;
    -webkit-text-stroke: .05em #fff6cf;
    paint-order: stroke fill;
    text-shadow: .03em .045em 0 rgba(0, 0, 0, .2);
    transform: skewX(-7deg);
}
.chero__line--gap { margin-top: 1.15em; }

/* The two words the whole comparison turns on: YOU build it, vs HEROSITE builds it. Marked up
   as <em> because that is genuinely emphasis, then drawn as a rule rather than an italic —
   Bangers has no italic, and the block already leans. */
.chero__line em {
    font-style: normal;
    border-bottom: .055em solid currentColor;
}


/* ---------- The "Coming Fall 2026" placard ----------
   Parked in the open yellow at the bottom right rather than over the button, so it reads as a
   sign pinned to the panel instead of something obscuring the call to action. */
.chero__placard {
    position: absolute;
    right: 7%;
    bottom: 7%;
    width: 13%;
    height: auto;
    z-index: 6;
    transform: rotate(-5deg);
    filter: drop-shadow(.25em .3em .35em rgba(0, 0, 0, .4));
}

/* ---------- The two characters ----------
   Anchored to the bottom and sized by PANEL height, so they stand on the floor of the panel
   at every screen size instead of floating or sinking. */
.chero__char {
    position: absolute;
    bottom: 0;
    width: auto;
    z-index: 4;
    pointer-events: none;
}
/* Both break OUT past the keyline so their arms sit over the gutter, the way a figure bleeds
   past the frame in a comic — same idea as the desk captain below.

   The offsets are clamped in px, not left as plain percentages, and that clamp is load-bearing:
   .chero is `min(1760px, 100vw - 32px)`, so between roughly 1792px and 1824px wide there is only
   16px of margin beside the panel. An unclamped -1.6% (28px there) would push the arms past the
   viewport edge and give the whole page a horizontal scrollbar.

   graphic-designer.webp also carries ~5% empty canvas above his hair, so his 84% is compensating
   for that rather than making him bigger. Trim the source and it drops back to ~80%. */
.chero__char--left  { left:  max(-1.6%, -14px); bottom: 2%; height: 84%; }
.chero__char--right { right: max(-1.6%, -14px); bottom: 4%; height: 86%; }
/* Seated at a desk, so he sits flush on the panel floor rather than floating above it. The
   warm shadow is what stops the yellow of his boots and gloves melting into the yellow field. */
/* Deliberately oversized and pushed left so his hair and the chair back break OUT past the
   keyline, the way a figure bleeds over the gutter in a comic. It's what stops the panel
   reading as a flat rectangle with a picture inside it. The file is trimmed tight to his
   pixels, so 103% really is 3% of head above the border, not empty canvas. */
.chero__char--desk  { left: -1.2%; bottom: 0; height: 103%;
                      filter: drop-shadow(0 .45em .65em rgba(120, 70, 0, .4)); }

/* Dashed stand-in shown until char-left/char-right land. Delete this block and the <cfif>
   in index.cfm once the real PNGs are in /images/logo-generator/. */
.chero__char-slot {
    position: absolute;
    z-index: 4;
    border: 3px dashed rgba(255, 255, 255, .75);
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1em;
    font-size: 1.4em;
    letter-spacing: .5px;
    color: #fff;
    text-align: center;
}
.chero__char-slot--left  { left: 2%;  bottom: 2%; height: 72%; width: 17%; }
.chero__char-slot--right { right: 2%; bottom: 8%; height: 85%; width: 27%; }

/* ---------- The Bangers headline type ----------
   White fill, heavy black outline, hard drop shadow, leaning left.

   paint-order puts the stroke DOWN FIRST and the white fill on top of it, so the outline
   grows outward instead of eating into the letterform. Without it (very old browsers) the
   letters just read a little thinner — it degrades quietly.

   Bangers ships no italic, so the lean is a CSS skew rather than a synthesised oblique, which
   keeps the edges clean. It lives on the individual lines, not on the containing block: on
   phones these blocks take a background image, and skewing the block would skew the art too.

   Type sits ABOVE the characters (z 5 vs 4). They shouldn't overlap once the real art is in,
   but if a stray elbow ever reaches the copy, legibility wins over depth. */
.chero__side {
    position: absolute;
    z-index: 5;
}
.chero__side--left  { left: 16%; width: 30%; top: 44%; text-align: center; }
/* Sits higher and narrower than the left block: the inked speech box below is fixed-aspect,
   so it is tall, and it has to clear both the CTA underneath and the hero to its right. */
.chero__side--right { left: 54%; width: 25%; top: 31%; text-align: left; }

.chero__kicker,
.chero__price {
    margin: 0;
    color: #fff;
    line-height: .96;
    text-transform: uppercase;
    -webkit-text-stroke: .085em #000;
    paint-order: stroke fill;
    text-shadow: .05em .05em 0 rgba(0, 0, 0, .75);
    transform: skewX(-7deg);
}
.chero__kicker { font-size: 1.35em; letter-spacing: .5px; margin-bottom: .35em; }

/* The footnote marker. Archivo rather than Bangers (Bangers has no real asterisk glyph worth
   looking at), raised, and counter-skewed +7deg so it stands upright against the leaning line
   it hangs off. It keeps the kicker's inherited outline so it belongs to the same headline. */
.chero__ast {
    display: inline-block;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    vertical-align: .5em;
    margin-left: .1em;
    transform: skewX(7deg);
}

/* ---------- The sources footnote ----------
   Down in the bottom-left of the red panel, clear of the designer. Archivo, not Bangers —
   this is small print, and it should read as small print rather than as more comic shouting.
   The shadow is doing real work: plain white on the lighter rays would otherwise go soft. */
.chero__sources {
    position: absolute;
    /* Boxed into the gap between the designer (ends 18.4%) and the CTA (starts 41.3%). Widen
       this and the list runs under the button. */
    left: 19.5%;
    bottom: 4%;
    width: 20.5%;
    z-index: 5;
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
    text-shadow: 0 .06em .14em rgba(0, 0, 0, .6);
}
.chero__sources b { font-weight: 700; }
.chero__price  { font-size: 3.7em; }
.chero__price--sm { font-size: 3.4em; }

/* Clarke's inked X. It lives inside the left block rather than on the panel, so it travels
   with the prices it is crossing out instead of drifting off them when the layout stacks on
   a phone. The X does all the crossing-out work — there is no CSS strikethrough underneath. */
.chero__x {
    position: absolute;
    left: 30%;      /* centred on the gap between $300 and $2,000, not on top of the $300 */
    top: 26%;
    width: 31%;
    height: auto;
    z-index: 6;
    opacity: .8;    /* lightened so the struck-through prices read through it */
    pointer-events: none;
}

/* ---------- The speech box ----------
   Clarke's hand-inked frame (900x485) as a background, with LIVE text sitting inside it —
   the frame had to be an image to keep the wobble, but "by 4:51pm" is computed per visitor
   so it could never be baked in. aspect-ratio pins the box to the artwork's proportions so
   the inked border scales evenly instead of stretching thick on one axis. */
.chero__say {
    box-sizing: border-box;
    margin: .9em 0 0;
    width: 82%;
    aspect-ratio: 900 / 485;
    padding: 9% 9% 10%;
    display: flex;
    align-items: center;
    justify-content: center;

    background: url('/images/logo-generator/speech-box.webp') center / 100% 100% no-repeat;

    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 500;
    font-size: 1.25em;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: #111;
}
/* The live time. inline-block so it can be scaled — transforms are ignored on inline boxes.
   nowrap keeps "8:10am" whole if it lands on a line break. */
.chero__say strong {
    display: inline-block;
    font-weight: 800;
    white-space: nowrap;
}

/* One short pop each time the minute advances, so the reader catches that it is live rather
   than printed. comic-hero.js adds the class and re-adds it on every change. */
@keyframes chero-tick {
    0%   { transform: scale(1);    color: #111; }
    28%  { transform: scale(1.22); color: var(--herosite-blue); }
    100% { transform: scale(1);    color: #111; }
}
.chero__say strong.is-ticking { animation: chero-tick .55s ease-out; }

/* ---------- The burst ----------
   Deliberately breaks out above the panel's top edge, as drawn. The nav is fixed and 120px
   tall, so the translate is kept modest to stay clear of it. */
.chero__burst {
    position: absolute;
    top: 0;
    left: 46%;
    width: 22em;
    max-width: 24%;
    margin: 0;
    transform: translate(-50%, -26%);
    z-index: 6;
    pointer-events: none;
}
.chero__burst img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .25em .4em rgba(0, 0, 0, .3));
}

/* ---------- The burst: REAL HTML heading, heavily styled ----------
   Live crawlable text (no image replacement) sat on the wordless starburst. The lift over a
   plain web-font heading is all in the treatment:
     - Luckiest Guy, a heavy rounded comic face, far closer to hand-lettering than Bangers.
     - A true 3-D EXTRUDE: a stack of stepped shadows in darker blue builds a solid block side,
       not a flat drop shadow — this is what gives the reference its punch.
     - A black keyline ring (8 offset black shadows) around the blue face.
     - A soft cast shadow under the whole thing for lift.
   Everything is in em so it scales with the panel knob. font-size:1em on the box cancels the
   browser's default h1 2em so `width: 22em` (from .chero__burst) stays sized by the panel. */
.chero__burst--text {
    display: grid;
    place-items: center;
    aspect-ratio: 1400 / 1008;
    padding: 2em 2.4em 2.6em;                /* keep the words off the spikes; em, not % */
    background: url('/images/logo-generator/starburst.webp') center / contain no-repeat;
    font-size: 1em;
}
.chero--solo .chero__burst--text {
    background-image: url('/images/website-builder/starburst.webp');
}
/* Website-builder only: "Need a website?" is a wider phrase than "Need a logo?", so its burst
   needs its own centring. Done entirely in em so it scales with the burst (the panel knob),
   matching everything else in the hero — rather than a panel-percentage left.
     - translateX(5.9em) on the box slides the whole starburst right (the em equivalent of the
       left: 52% Clarke found; verified box centre lands at 52% of the panel).
     - the span nudge re-centres the text inside the starburst (0.58em of the span's own size),
       so the wider word sits dead-centre rather than pushed left by the tilt. */
.chero--solo .chero__burst {
    transform: translate(-50%, -26%) translateX(5.9em);
}
.chero--solo .chero__burst--text > span {
    translate: -0.58em 0;
}
.chero__burst--text > span {
    font-family: 'Luckiest Guy', 'Bangers', system-ui, cursive;
    font-weight: 400;
    font-size: 4.9em;                        /* fills the burst; wraps to ~2 lines */
    line-height: .82;
    letter-spacing: .5px;
    text-align: center;
    text-transform: uppercase;
    color: #4156ec;                          /* softer periwinkle blue */
    transform: rotate(-3deg);                /* a touch of comic tilt */
    text-shadow:
        /* black keyline ring */
        -.035em 0 0 #000,  .035em 0 0 #000,  0 -.035em 0 #000,  0 .035em 0 #000,
        -.035em -.035em 0 #000,  .035em -.035em 0 #000,  -.035em .035em 0 #000,  .035em .035em 0 #000,
        /* 3-D extrude: stepped darker-blue block down-right */
        .05em .05em 0 #0010a0,  .09em .09em 0 #0010a0,  .13em .13em 0 #000c78,
        .17em .17em 0 #000c78,  .21em .21em 0 #000a60,
        /* soft cast shadow */
        .24em .30em .32em rgba(0, 0, 0, .38);
}

/* ---------- The call to action ----------
   Real HTML, not artwork: hover and press states, a proper tap target, and readable by
   Google. Centred on the bottom of the diagonal rather than on the panel, which is what
   makes it look deliberate. */
.chero__cta {
    position: absolute;
    left: 54.8%;
    bottom: 2.5%;      /* low in the panel, so the speech box above it has room to breathe */
    transform: translateX(-50%);
    z-index: 7;

    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    font-size: 2.1em;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    color: #000;
    background: var(--herosite-yellow);
    border: .14em solid #000;
    border-radius: 999px;
    padding: .5em 2.1em;
    box-shadow: .18em .18em 0 #000;
    transition: transform .1s ease, box-shadow .1s ease;
}
.chero__cta:hover,
.chero__cta:focus-visible {
    transform: translateX(-50%) translate(.18em, .18em);
    box-shadow: 0 0 0 #000;
}

/* ---------- The disabled call to action ----------
   Grey instead of yellow, and it refuses the pointer: no href, no hover lift, and the no-entry
   cursor. Note there is deliberately NO pointer-events:none — that would stop the element
   receiving hover at all and the cursor would never change. Blocking the click is the <span>'s
   job (it has nowhere to go); this only has to look and feel unavailable. */
.chero--solo .chero__cta { left: 52%; }

.chero__cta--disabled {
    background: #ddd;
    color: #555;
    border-color: #555;
    box-shadow: .18em .18em 0 #555;
    cursor: not-allowed;
}
.chero__cta--disabled:hover,
.chero__cta--disabled:focus-visible {
    transform: translateX(-50%);        /* stays put: there is nothing to press */
    box-shadow: .18em .18em 0 #555;
}

/* ---------- Phone ----------
   PLACEHOLDER ONLY. Clarke is drawing a separate stacked mobile composition; when that art
   lands this block gets replaced with a proper red-over-blue layout. Until then: keep the
   blue half, drop the diagonal and the designer, and let the pitch stack vertically so the
   page is never broken on a phone. */
@media (max-width: 760px) {
    .chero {
        width: calc(100vw - 20px);
        font-size: min(3.4vw, 1.9vh);
    }

    /* Everything goes back into normal flow and stacks. order:-1 lifts the burst to the top —
       in the source it sits late (it has to paint over the panel on desktop), and on a phone it
       has to read first. */
    .chero__panel {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    /* The panel-wide diagonal is gone; instead each half carries its own texture, so the red/blue
       boundary lands exactly where the copy ends and can never drift out of register. */
    .chero__half,
    .chero__char,
    .chero__char-slot { display: none; }

    .chero__burst {
        order: -1;
        position: static;
        width: 66%;
        max-width: none;
        margin: 1.2em auto .9em;
        transform: none;
    }

    .chero__side {
        position: relative;          /* keeps the X anchored to the prices */
        left: auto;
        top: auto;
        width: auto;
        text-align: center;
    }
    .chero__side--left {
        order: 1;
        /* The deep bottom padding is where the sources footnote lives — it is pulled back up
           into it below, so the small print sits ON the red instead of starting a second
           block whose ray texture would restart and show a seam. */
        padding: 1.6em 6% 5.5em;
        background: url('/images/logo-generator/panel-red.webp') center / cover;
    }
    .chero__sources {
        order: 2;
        position: static;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -4.6em 0 0;
        padding: 0 6% 1.4em;
        text-align: center;
    }
    .chero__side--right {
        order: 3;
        padding: 1.6em 6% 2em;
        background: url('/images/logo-generator/panel-blue.webp') center / cover;
    }

    /* Smaller and further right than on desktop: the block is full-width here, so the same
       percentages would land the X squarely on top of the $300 and bury it. */
    .chero__x { left: 30%; top: 22%; width: 18%; }

    .chero__say {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .chero__cta {
        order: 4;
        position: static;
        align-self: center;
        margin: 1.5em auto;
        transform: none;
    }
    .chero__cta:hover,
    .chero__cta:focus-visible { transform: translate(.18em, .18em); }
}

/* ---------- Phone: the solo variant ----------
   Simpler than the split hero — there is nothing to unstack. The panel just gets shorter,
   the burst leads, and the captain and placard shrink to fit rather than being dropped,
   because with only three elements there is nothing left if you hide them. */
@media (max-width: 760px) {
    /* Everything drops into normal flow and stacks: burst, pitch, captain, stamped button.
       The panel grows to fit rather than holding a fixed height, because four stacked blocks
       of copy will never fit a 62svh box on a phone. */
    .chero--solo .chero__panel {
        display: block;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 28% 5% 7%;      /* clears the burst, which hangs over the top edge */
    }
    /* The split hero hides both of these on a phone; the solo hero needs them back — with
       only a few elements there is nothing left if you drop one. */
    .chero--solo .chero__half,
    .chero--solo .chero__char { display: block; }

    .chero--solo .chero__burst {
        position: absolute;
        top: 0;
        left: 50%;
        width: 72%;
        margin: 0;
        transform: translate(-50%, -18%);
    }

    .chero--solo .chero__pitch {
        position: static;
        width: auto;
        text-align: center;
    }
    .chero--solo .chero__line { font-size: 1.55em; }
    .chero--solo .chero__line--gap { margin-top: .9em; }

    /* Back into flow under the copy. `right: auto` matters: the desktop rule sets `left`, and
       leaving both set over-constrains an auto-width image and the reset is silently ignored. */
    .chero--solo .chero__char--desk {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        display: block;
        width: 76%;
        height: auto;
        margin: 1.1em auto 0;
    }

    /* Button back into flow under the copy. The desktop pill is nowrap and generously padded,
       which overshoots a phone's width, so tighten it rather than letting "TODAY" run off. */
    .chero--solo .chero__cta {
        position: relative;
        left: auto;
        bottom: auto;
        display: block;
        width: max-content;
        max-width: 100%;
        margin: 1.3em auto 0;
        transform: none;
        font-size: 1.7em;
        padding: .5em 1.2em;
    }
    .chero__cta--disabled:hover,
    .chero__cta--disabled:focus-visible { transform: none; }

    /* The placard follows into flow rather than floating over the button. */
    .chero__placard {
        position: relative;
        right: auto;
        bottom: auto;
        display: block;
        width: 38%;
        margin: 1.4em auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chero__cta { transition: none; }
    /* The time still updates — it just changes without the pop. */
    .chero__say strong.is-ticking { animation: none; }
}