/*!
 * TBOT Home Refresh — portfolio-style treatment for the front page.
 * Keeps the existing layout but turns the major content sections into glassy,
 * mouse-reactive panels (like the portfolio cards) and adds subtle scrims
 * behind standalone text so it stays legible over the live mesh background.
 * CSS only; no content changes.
 */

/* ---- Section panels: groups & columns become glassy hover cards ---------- */
/* Scoped to direct children of the post content so we don't touch the hero
   cover (handled separately) or nested inner blocks. */
.tbot-home .kenta-article-content > .wp-block-group,
.tbot-home .kenta-article-content > .wp-block-columns,
.tbot-home .kenta-article-content > .wp-block-image {
  border-radius: 18px;
  background: rgba(10, 11, 18, 0.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.6rem 1.9rem;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.45s ease, border-color 0.45s ease, background 0.45s ease;
  will-change: transform;
}

.tbot-home .kenta-article-content > .wp-block-group:hover,
.tbot-home .kenta-article-content > .wp-block-columns:hover,
.tbot-home .kenta-article-content > .wp-block-image:hover {
  transform: translateY(-6px);
  background: rgba(14, 15, 24, 0.62);
  border-color: rgba(150, 170, 255, 0.45);
  box-shadow: 0 28px 70px -22px rgba(40, 20, 80, 0.9),
    0 0 0 1px rgba(150, 170, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Smooth image zoom inside home panels, matching the portfolio feel. */
.tbot-home .kenta-article-content > .wp-block-image img,
.tbot-home .kenta-article-content .wp-block-columns img {
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
  border-radius: 12px;
}

.tbot-home .kenta-article-content > .wp-block-image:hover img,
.tbot-home .kenta-article-content .wp-block-columns:hover img {
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.04);
}

/* ---- Text scrims: add a box behind standalone text with no background ----- */
.tbot-home .kenta-article-content > h2.wp-block-heading,
.tbot-home .kenta-article-content > h5.wp-block-heading,
.tbot-home .kenta-article-content > p:not([class*="background-color"]) {
  background: rgba(8, 8, 12, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
  padding: 0.85em 1.2em;
}

/* Eyebrow labels ("WHO AM I?", "RESOLUME ARENA") — tighter pill-like scrim.
   Use a fit-content block so the pill hugs the text yet stays centred (the
   block's own text-align:center is preserved for the label itself). */
.tbot-home .kenta-article-content > p.has-kenta-primary-color {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: rgba(8, 8, 12, 0.4);
  padding: 0.45em 1.1em;
  border-radius: 999px;
}

/* Buttons / separators shouldn't get a panel. */
.tbot-home .kenta-article-content > .wp-block-buttons,
.tbot-home .kenta-article-content > .wp-block-separator,
.tbot-home .kenta-article-content > .wp-block-spacer,
.tbot-home .kenta-article-content > .kb-spacer {
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0;
}

/* Gentle spacing rhythm between the now-boxed sections. */
.tbot-home .kenta-article-content > .wp-block-group,
.tbot-home .kenta-article-content > .wp-block-columns,
.tbot-home .kenta-article-content > .wp-block-image,
.tbot-home .kenta-article-content > h2.wp-block-heading,
.tbot-home .kenta-article-content > h5.wp-block-heading {
  margin-top: 1.6rem;
  margin-bottom: 1.6rem;
}

/* ---- Width control: keep home sections to a comfortable centred column ----
   The theme content runs ~1140px and the bio/press groups break out full-bleed
   (~1265px), which reads too wide over the mesh. Cap every home section to a
   single, consistent reading width and centre it. The hero cover is untouched. */
.tbot-home .kenta-article-content > .wp-block-group,
.tbot-home .kenta-article-content > .wp-block-columns,
.tbot-home .kenta-article-content > .wp-block-image,
.tbot-home .kenta-article-content > .wp-block-buttons,
.tbot-home .kenta-article-content > .wp-block-separator,
.tbot-home .kenta-article-content > h2.wp-block-heading,
.tbot-home .kenta-article-content > h5.wp-block-heading,
.tbot-home .kenta-article-content > p,
.tbot-home .kenta-article-content > pre {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* Neutralise full-bleed (alignfull) groups so they match the column width
   instead of stretching edge-to-edge. The theme applies negative side margins
   to alignfull blocks to break them out of the column, which pins them to the
   left once we cap the width — override with auto margins so they re-centre. */
.tbot-home .kenta-article-content > .wp-block-group.alignfull {
  width: auto !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- Remove the now-redundant vertical spacer blocks --------------------- */
/* The sections are proper glass boxes now, so the empty wp:spacer / kb-spacer
   blocks between them just add dead space. Hide them; the panel margins handle
   the rhythm. (Empty anchor-wrapper divs without these classes are kept so the
   hero nav buttons still have their scroll targets.) */
.tbot-home .kenta-article-content > .wp-block-spacer,
.tbot-home .kenta-article-content > [class*="kb-spacer"] {
  display: none !important;
}

/* ---- Scroll targets: land the hero nav buttons below the reveal header ----
   The site header re-appears on scroll (~55px); without an offset the section
   heading is hidden beneath it when a hero button jumps to its anchor. */
#who-am-i,
#portfolio,
#wire-patches,
#press-pack-rider {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  .tbot-home .kenta-article-content > .wp-block-group,
  .tbot-home .kenta-article-content > .wp-block-columns,
  .tbot-home .kenta-article-content > .wp-block-image,
  .tbot-home .kenta-article-content img {
    transition: none;
  }
}