/* ══════════════════════════════════════════════════════════════
   PHASE 3 — SHOWCASE / GALLERY / CONTACT
══════════════════════════════════════════════════════════════════ */

/* ── SHOWCASE ── */
.showcase-section {
    position: relative;
    min-height: 100vh;
    background: var(--bg-ink);
    color: #fff;
    overflow: hidden;
}
.sc-brackets .cb { border-color: rgba(255,255,255,0.14); }

/* Gate */
.sc-gate {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-ink);
}
.sc-gate-inner { text-align: center; max-width: 720px; padding: 40px 24px; }
.sc-gate-label {
    color: rgba(255,255,255,0.3);
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: 28px;
}
.sc-gate-title {
    font-family: var(--font-display);
    font-size: clamp(60px,11vw,150px);
    line-height: 0.88;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 22px;
}
.sc-gate-sub {
    color: rgba(255,255,255,0.3);
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: 40px;
}
.sc-enter-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--bg-ink);
    background: var(--accent-2);
    border: none;
    padding: 14px 34px;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.sc-enter-btn:hover { background: #fff; transform: translateX(4px); }

/* Body */
.sc-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.sc-body-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: calc(var(--topbar-h) + 28px) 52px 28px;
    gap: 0;
}
.sc-chapter {
    color: rgba(255,255,255,0.25);
    font-size: 9px;
    letter-spacing: 0.16em;
    margin-bottom: 18px;
    flex-shrink: 0;
}

/* Station line map */
.sc-linemap {
    position: relative;
    flex-shrink: 0;
    margin-bottom: 14px;
    padding: 10px 0 18px;
}
.sc-line-track {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(10px + 5px);
    height: 1.5px;
    background: rgba(255,255,255,0.12);
}
.sc-line-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.45s ease;
}
.sc-train {
    position: absolute;
    top: calc(10px + 5px);
    width: 14px;
    height: 14px;
    background: var(--accent-2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    box-shadow: 0 0 10px rgba(232,176,4,0.6);
    will-change: left;
    transition: left 0.45s cubic-bezier(0.4,0,0.2,1);
}
.sc-stations {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.sc-station {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.sc-station-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    background: var(--bg-ink);
    transition: border-color 0.3s, background 0.3s;
}
.sc-station.active .sc-station-dot {
    border-color: var(--accent);
    background: var(--accent);
}
.sc-station-label {
    font-family: var(--font-mono);
    font-size: 7.5px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    transition: color 0.3s;
}
.sc-station.active .sc-station-label { color: var(--accent-2); }

/* Ticker */
.sc-ticker-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 14px;
    overflow: hidden;
}
.sc-ticker-label {
    color: rgba(255,255,255,0.25);
    font-size: 8px;
    letter-spacing: 0.16em;
    flex-shrink: 0;
}
.sc-ticker-text {
    color: var(--accent-2);
    font-size: 9px;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Panel area */
.sc-panel-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}

/* Instruction card */
.sc-instr {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
}
.sc-instr-inner {
    border: 1px solid rgba(255,255,255,0.1);
    padding: 28px 40px;
    text-align: center;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
}
.sc-instr-label {
    color: rgba(255,255,255,0.3);
    font-size: 9px;
    letter-spacing: 0.16em;
    margin-bottom: 22px;
}
.sc-instr-items {
    display: flex;
    gap: 36px;
    justify-content: center;
}
.sc-instr-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.sc-ii-key {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--accent-2);
    line-height: 1;
}
.sc-ii-text {
    font-size: 7.5px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.14em;
}

/* Project panels */
.sc-panels { position: absolute; inset: 0; }
.sc-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    padding-right: 4px;
}
.sc-panel.is-active { opacity: 1; pointer-events: auto; }
.sc-panel-tag {
    color: rgba(255,255,255,0.28);
    font-size: 8px;
    letter-spacing: 0.16em;
    margin-bottom: 4px;
}
.sc-panel-title {
    font-family: var(--font-display);
    font-size: clamp(32px,5.5vw,80px);
    line-height: 0.9;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 10px;
}
.sc-panel-sub {
    font-size: 0.42em;
    font-family: var(--font-mono);
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
    margin-left: 6px;
}
.sc-panel-outcome {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--accent-2);
    border-left: 2px solid var(--accent-2);
    padding-left: 12px;
    margin-bottom: 14px;
    line-height: 1.6;
}
.sc-panel-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.sc-panel-bullets li {
    font-family: var(--font-body);
    font-size: 13px;
    color: rgba(255,255,255,0.58);
    line-height: 1.55;
    padding-left: 16px;
    position: relative;
}
.sc-panel-bullets li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 14px;
    top: -1px;
}
.sc-hl { color: #fff; font-weight: 600; }
.sc-panel-stats {
    display: flex;
    gap: 22px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sc-stat { border-left: 2px solid rgba(31,111,235,0.4); padding-left: 12px; }
.sc-stat-val {
    font-family: var(--font-display);
    font-size: clamp(24px,3.5vw,44px);
    color: #fff;
    line-height: 1;
}
.sc-stat-unit {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.1em;
}
.sc-stat-label {
    font-family: var(--font-mono);
    font-size: 7.5px;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.sc-panel-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-top: 4px;
}
.sc-dd-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--accent-2);
    background: none;
    border: 1px solid rgba(232,176,4,0.4);
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.sc-dd-btn:hover { background: var(--accent-2); color: var(--bg-ink); }
.sc-panel-stamp { color: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.22); }

/* Controls */
.sc-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    flex-shrink: 0;
}
.sc-nav-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255,255,255,0.18);
    background: none;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.sc-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.sc-nav-btn svg { width: 15px; height: 15px; }
.sc-counter {
    color: rgba(255,255,255,0.35);
    font-size: 10px;
    letter-spacing: 0.1em;
}
#sc-idx { color: var(--accent-2); }
.sc-cnt-sep { margin: 0 4px; opacity: 0.35; }

/* Deep-dive overlay */
.sc-dd {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-ink);
    display: flex;
    flex-direction: column;
}
.sc-dd[aria-hidden="true"] { display: none; }
.sc-dd-close {
    position: fixed;
    top: calc(var(--topbar-h) + 18px);
    right: 28px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.45);
    background: none;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, border-color 0.2s;
    z-index: 201;
}
.sc-dd-close svg { width: 13px; height: 13px; }
.sc-dd-close:hover { color: #fff; border-color: rgba(255,255,255,0.38); }
.sc-dd-scroll {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--topbar-h) + 72px) 64px 64px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
}
.sc-dd-tag {
    color: rgba(255,255,255,0.28);
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-bottom: 16px;
}
.sc-dd-title {
    font-family: var(--font-display);
    font-size: clamp(44px,7vw,100px);
    line-height: 0.88;
    color: #fff;
    margin-bottom: 24px;
}
.sc-dd-outcome {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--accent-2);
    border-left: 2px solid var(--accent-2);
    padding-left: 14px;
    margin-bottom: 28px;
    line-height: 1.7;
}
.sc-dd-sec-title {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
    margin: 22px 0 14px;
}
.sc-dd-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}
.sc-dd-bullets li {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255,255,255,0.62);
    line-height: 1.6;
    padding-left: 18px;
    position: relative;
}
.sc-dd-bullets li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 11px;
    top: 3px;
}
.sc-dd-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.sc-dd-stat { border-left: 2px solid rgba(31,111,235,0.35); padding-left: 14px; }
.sc-dd-stat-val {
    font-family: var(--font-display);
    font-size: clamp(38px,5vw,60px);
    color: #fff;
    line-height: 1;
}
.sc-dd-stat-unit {
    font-family: var(--font-mono);
    font-size: 9px;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.1em;
}
.sc-dd-stat-label {
    font-family: var(--font-mono);
    font-size: 8px;
    color: rgba(255,255,255,0.28);
    letter-spacing: 0.12em;
    margin-top: 2px;
}
.sc-dd-placeholder {
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(255,255,255,0.18);
    letter-spacing: 0.12em;
    border: 1px dashed rgba(255,255,255,0.1);
    padding: 28px;
    text-align: center;
    margin-top: 24px;
}


/* ── GALLERY ── */
.gallery-section {
    position: relative;
    min-height: 100vh;
    background: var(--bg-ink);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gal-title-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;              /* sits above scattered labels (z:1) */
    line-height: 0.88;
    user-select: none;
}
/* "FALSE" — amber back-word, fully opaque */
.gal-title-back {
    font-family:            var(--font-display);
    font-size:              clamp(72px, 16vw, 230px);
    font-weight:            900;
    color:                  var(--accent-2);
    -webkit-text-fill-color: var(--accent-2);
    opacity:                1;
    letter-spacing:         0.01em;
}
/* "COLOR" — portfolio blue front-word; the false-color pairing */
.gal-title-front {
    font-family:            var(--font-display);
    font-size:              clamp(72px, 16vw, 230px);
    font-weight:            900;
    color:                  var(--accent);
    -webkit-text-fill-color: var(--accent);
    opacity:                1;
    letter-spacing:         0.01em;
    margin-top:             -0.14em;
}
/* scattered category labels — sit behind the title */
.gal-labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.gal-label {
    position: absolute;
    left: var(--lx);
    top: var(--ly);
    color: rgba(255,255,255,0.10);
    font-size: 8.5px;
    letter-spacing: 0.22em;
    white-space: nowrap;
    transform: translate(-50%,-50%);
}
.gal-prompt {
    position: absolute;
    bottom: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    color: rgba(255,255,255,0.32);
    font-size: 9px;
    letter-spacing: 0.22em;
    white-space: nowrap;
    pointer-events: none;
}
#gal-pool {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}
.gal-card {
    position: fixed;
    width: clamp(240px, 22vw, 360px);   /* was 130-210 — now much more visible */
    aspect-ratio: 4 / 3;
    background: rgba(11,14,20,0.92);
    border: 1px solid rgba(31,111,235,0.35);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    will-change: transform, opacity;
    transform: translate(-50%, -50%) rotate(var(--crot, 0deg));
    backdrop-filter: blur(2px);
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55);
}
.gal-card-img {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.gal-card-img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* When src loads, image sits on top of the gradient; when it 404s,
       inline onerror hides it and the gradient shows through. */
}
.gal-card-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    padding: 8px 12px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.55);
    text-transform: uppercase;
}
/* Static mobile grid — kept off by default now that the touch
   trail works on phones. Only used as a fallback for reduced-motion. */
.gal-mob-grid {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: calc(var(--topbar-h) + 60px) 20px 40px;
    z-index: 5;
    position: relative;
    width: 100%;
}
.gal-mob-card {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(31,111,235,0.08);
    border: 1px solid rgba(31,111,235,0.18);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
}
.gal-mob-card img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.gal-mob-card span {
    position: absolute; left: 8px; bottom: 8px;
    padding: 3px 7px;
    background: rgba(11,14,20,0.65);
    color: var(--bg-paper);
    z-index: 1;
}
/* Touch devices: keep the FALSE COLOR title + labels + prompt visible
   and let the touch trail spawn cards. Only the reduced-motion path
   below swaps in the static grid. */
@media (hover: none) {
    #gal-prompt { display: block; }
    #gal-pool   { display: block; }
    .gal-labels { display: block; }
    .gal-mob-grid { display: none; }
    .gal-title-wrap { display: flex; }
    /* Touch-tuned card — narrower so multiple can trail a finger stroke */
    .gal-card { width: clamp(180px, 55vw, 260px); }
    /* Ensure the whole section is a valid touch surface */
    .gallery-section { touch-action: pan-y; }
}


/* ── CONTACT ── */
/* ===== CONTACT — kinetic siena.film-style ===== */
.contact-section {
    position:        relative;
    min-height:      100vh;
    background:      var(--accent);       /* blueprint blue — same as Projects */
    color:           var(--bg-paper);     /* cream text on blue */
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    padding:         6vh 4vw;
    overflow:        hidden;
}

.contact-section .ct-eyebrow {
    font-family:    var(--font-mono);
    font-size:      12px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    margin:         0 0 3vh;
    opacity:        0.85;
}

/* ruled-line headline block — top/bottom borders, single mid rule behind text */
.contact-section .ct-hero {
    position:      relative;
    border-top:    2px solid var(--bg-paper);
    border-bottom: 2px solid var(--bg-paper);
    padding:       3.2vh 0;
    margin:        1vh 0;
}
.contact-section .ct-rule {
    position:  absolute;
    left:      0;
    right:     0;
    top:       50%;
    height:    2px;
    background: var(--bg-paper);
    opacity:   0.9;
    transform: translateY(-50%);
    z-index:   0;
}

.contact-section .ct-headline {
    position:        relative;
    z-index:         1;
    font-family:     var(--font-display);
    font-weight:     400;
    font-size:       clamp(52px, 11.5vw, 190px);
    line-height:     1.02;
    letter-spacing:  -0.01em;
    text-transform:  uppercase;
    margin:          0;
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.08em 0.28em;
    justify-content: center;
}
.contact-section .ct-word { display: inline-flex; }

/* link row */
.contact-section .ct-row {
    display:      flex;
    flex-wrap:    wrap;
    gap:          3vw;
    margin-top:   6vh;
    border-top:   2px solid var(--bg-paper);
    padding-top:  2.4vh;
}
.contact-section .ct-col {
    display:         flex;
    flex-direction:  column;
    gap:             0.5em;
    text-decoration: none;
    color:           var(--bg-paper);
    min-width:       200px;
}
.contact-section .ct-label {
    font-family:    var(--font-mono);
    font-size:      11px;
    letter-spacing: 0.28em;
    opacity:        0.7;
}
.contact-section .ct-value {
    font-family:      var(--font-mono);
    font-size:        clamp(14px, 1.5vw, 19px);
    font-weight:      500;
    position:         relative;
    padding-bottom:   3px;
    background-image: linear-gradient(var(--bg-paper), var(--bg-paper));
    background-size:     0% 2px;
    background-position: 0 100%;
    background-repeat:   no-repeat;
    transition:          background-size 0.35s ease;
    will-change:         transform;
}
.contact-section .ct-col:hover .ct-value { background-size: 100% 2px; }

/* footer / signature */
.contact-section .ct-footer {
    margin-top: 5vh;
    text-align: right;
}
.contact-section .ct-sign {
    font-family: var(--font-hand);
    font-size:   clamp(26px, 3.5vw, 44px);
    color:       var(--accent-2);
    opacity:     0.95;
}


/* ── spatial depth / parallax stage ── */
#contact { perspective: 1100px; perspective-origin: 50% 50%; }

#contact .ct-stage {
    transform-style: preserve-3d;
    will-change:     transform;
}

/* each layer at its own depth — larger Z = more parallax */
#contact .ct-eyebrow { transform: translateZ(40px);  will-change: transform; }
#contact .ct-hero    { transform: translateZ(90px);  will-change: transform; }
#contact .ct-row     { transform: translateZ(55px);  will-change: transform; }
#contact .ct-footer  { transform: translateZ(25px);  will-change: transform; }

/* mid rule sits behind the type */
#contact .ct-rule    { transform: translate(0,-50%) translateZ(-20px); }

@media (prefers-reduced-motion: reduce) {
    #contact .ct-stage { transform: none !important; }
}

@media (max-width: 640px) {
    .contact-section .ct-row      { flex-direction: column; gap: 4vh; }
    .contact-section .ct-headline { justify-content: flex-start; }
}


/* ── COARSE POINTER — retain the interactive trail on phones/tablets.
   The static grid is only used as a fallback for reduced-motion users. */
@media (pointer: coarse) {
    #gal-pool     { display: block !important; }
    #gal-prompt   { display: block !important; }
    .gal-mob-grid { display: none    !important; }
    .gal-title-wrap { display: flex  !important; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .sc-body-inner { padding: calc(var(--topbar-h) + 18px) 20px 20px; }
    .sc-panel-title { font-size: clamp(28px,7vw,52px); }
    .sc-panel-stats { gap: 14px; }
    .sc-dd-scroll { padding: calc(var(--topbar-h) + 60px) 24px 40px; }
    .sc-dd-stats { gap: 16px; }
    .sc-dd-stat-val { font-size: clamp(32px,5vw,48px); }
    .contact-section { padding: 5vh 5vw; }
}
@media (max-width: 480px) {
    .sc-station-label { display: none; }
    .sc-panel-title { font-size: clamp(26px,8vw,42px); }
    .sc-enter-btn { font-size: 10px; padding: 12px 22px; }
    .sc-gate-title { font-size: clamp(48px,14vw,100px); }
    .gal-mob-grid { grid-template-columns: 1fr; }
}
@media (max-width: 390px) {
    .sc-gate-title { font-size: clamp(42px,12vw,70px); }
    .sc-body-inner { padding: calc(var(--topbar-h) + 12px) 14px 14px; }
    .sc-panel-title { font-size: clamp(24px,9vw,38px); }
    .sc-nav-btn { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .sc-gate { display: none !important; }
    .sc-body { position: static !important; opacity: 1 !important; pointer-events: auto !important; }
    .sc-panel.is-active { opacity: 1 !important; }
    .sc-train { transition: none !important; }
    .sc-line-fill { transition: none !important; }
    /* No animated trail if user prefers reduced motion — show the
       static grid instead so the section still surfaces the imagery. */
    #gal-pool     { display: none !important; }
    #gal-prompt   { display: none !important; }
    .gal-labels   { display: none !important; }
    .gal-title-wrap { display: none !important; }
    .gal-mob-grid { display: grid !important; }
}


/* Hero-X retired — the topographic landing lives in style.css (.hero-*)
   and its animation in js/hero.js. All .hero-x / .hx-* rules removed. */