/* The gallery doesn't need to fill the full viewport width — a first pass tried that (dropping
   the sitewide max-width entirely), but the tiles read better narrower and taller. 1630px is
   sized specifically around js/home.js's height:600 + the default expandRatio (0.52): those two
   put the active tile at ~800px wide, and expandRatio's active-tile share of the gallery's own
   width is always exactly the expandRatio value regardless of tile count — so gallery width =
   800 / 0.52 + gaps (4 x 10px) = ~1580px. Adding the sitewide side padding already on main
   (var(--space-4) = 24px each side, unchanged below) back on top of that gives ~1630px — "a
   little larger than the tile group," using padding this rule already had rather than adding
   more. If height or expandRatio change, this number needs recalculating alongside them.
   Title and gallery still automatically share the same left edge — both are plain block-level
   children of this same padded, now-centred (inherited margin:0 auto) container. */
/* reactbits.dev's Grainient (js/grainient.js), fixed full-viewport and behind everything else on
   the page. body's own opaque white background (sitewide default, css/base.css) would otherwise
   paint over it, so that's cleared to transparent here, page-scoped — nothing else on the site
   sits behind a background layer like this, so there's no shared rule to reuse. main is left
   transparent (its own tiles/text sit on top of the animated background by design); .site-nav is
   given its own solid background just below, per request, so the top bar reads as a plain fixed
   header rather than the moving gradient showing through it. */
body[data-page="home"] {
  background: transparent;
}

.home-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Touch-only (js/home.js skips initGrainient entirely there, adding this class instead of
   starting the animation) — a plain static image, no canvas/animation cost. */
.home-background--static {
  background-image: url('/Assets/Resources/Homepage/bg.jpeg');
  background-size: cover;
  background-position: center;
}

/* Scoped to Home rather than added to .site-nav itself in base.css — every other page still wants
   the nav transparent against its own plain white body background (no visual difference there),
   and this is the only page with anything moving behind it that the bar needs covering. */
body[data-page="home"] .site-nav {
  background: var(--color-bg);
}

body[data-page="home"] main {
  max-width: 1630px;
  display: flex;
  flex-direction: column;
  /* Tightened from var(--space-4) — reclaims 8px on each of the title-gallery and gallery-pages
     gaps, part of the vertical budget js/home.js's gallery-height calc() relies on to fit the
     whole hero within one screen on short viewports (13" MacBook-class laptops). If this changes,
     that calc's chrome total needs recalculating alongside it. */
  gap: var(--space-3);
}

.home-hero__title {
  margin: 0;
  /* Bigger than the sitewide h1 clamp (2.5rem-4.5rem) — this is the one hero title on the site,
     not a section heading matching every other page's title scale. */
  font-size: clamp(3rem, 8vw, 6.5rem);
}

/* Selection highlight (dragging over text with the mouse) uses the sitewide grey/dark-text combo
   everywhere else — swapped to the site's red/white here specifically for the hero page, per
   request. */
body[data-page="home"] ::selection {
  background-color: var(--color-accent);
  color: #fff;
}

/* GradientText's own moving-gradient fill replaces the sitewide h1 colour entirely — size,
   uppercase, letter-spacing all still come from the plain sitewide h1 rule for free. */
.home-hero__gallery {
  width: 100%;
}

/* A plain link row, not a restyled copy of the pill nav — deliberately simpler, per request
   ("light grey text, black hover"), with the underlying typography (uppercase, letter-spacing)
   kept consistent with the sitewide pill-nav labels so it still reads as the same site.
   Centred per request; this also happens to keep it clear of the floating disclaimer button in
   most realistic cases (checked directly at 1280px — a viewport narrow enough that <main> fills
   almost edge to edge — since a centred group's own leftmost link sits well right of the
   viewport's actual left edge, unlike the old left-aligned layout, which needed an explicit
   padding-left reservation to avoid the button's fixed bottom-left corner). */
.home-hero__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.home-hero__pages a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-body);
  /* No real bold Gill Sans MT face exists — 600 was forcing synthesized faux-bold. Was 600. */
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color 0.4s ease 0.1s;
  /* The sitewide body rule turns this on for Gill Sans MT (matches the original Wix site's own
     rendering there), but at this size/weight it makes the text look bolder than intended —
     same fix, same reasoning, as the Lyrics Hymns/Alpha Games pages scoping it back off for Gill
     Sans Light. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

.home-hero__pages a:hover,
.home-hero__pages a:focus-visible {
  color: #000;
  transition-duration: 0.2s;
  transition-delay: 0s;
}

/* Touch-only devices show every gallery tile's label permanently (js/accordion-gallery.js) and
   get a Lyrics tile added specifically to cover what this row would otherwise be the only way to
   reach (js/home.js) — this row becomes pure duplication there, not a fallback for anything.
   Left untouched on hover-capable devices, where a tile's label is still only a transient hover
   preview and this stays the one reliable place to see every section at a glance. */
@media (hover: none) {
  .home-hero__pages {
    display: none;
  }
}

/* Disclaimer trigger — single-button take on reactbits.dev's "Glass Icons" (that component is
   built as a grid of several icons with no click/open behaviour of its own; only the per-button
   glass/3D-peel styling is reused here, sized and positioned as one floating corner button, with
   js/home.js supplying the open/close behaviour neither source component has). Fixed instead of
   inside <main> — it's meant to float over the page, not take a place in the hero's own layout
   flow. */
.home-disclaimer-btn {
  position: fixed;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 20;
  /* Shrunk from 4.5em — on short viewports the gallery is calc()'d to fit the whole hero above
     the fold (js/home.js), which pushes the gallery's own bottom edge right up against this
     button's fixed corner; a smaller footprint here needs less clearance reserved below the
     gallery. .home-disclaimer-card's offset and the mobile nav-row gutter below both reference
     this same 3.75em and need updating alongside it if this changes again. */
  width: 3.75em;
  height: 3.75em;
  font-size: 1rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  perspective: 24em;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

.home-disclaimer-btn__back,
.home-disclaimer-btn__front {
  position: absolute;
  inset: 0;
  border-radius: 1.25em;
  transition:
    opacity 0.3s cubic-bezier(0.83, 0, 0.17, 1),
    transform 0.3s cubic-bezier(0.83, 0, 0.17, 1);
}

.home-disclaimer-btn__back {
  /* Black per request — kept as a (very dark) gradient rather than a flat fill, matching the
     glass-icon "back" layer's own original depth cue rather than losing it entirely. */
  background: linear-gradient(hsl(0, 0%, 18%), hsl(0, 0%, 4%));
  box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);
  transform: rotate(15deg);
  transform-origin: 100% 100%;
  will-change: transform;
}

.home-disclaimer-btn__front {
  background-color: hsla(0, 0%, 100%, 0.15);
  box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;
  backdrop-filter: blur(0.75em);
  -webkit-backdrop-filter: blur(0.75em);
  display: flex;
  transform-origin: 80% 50%;
  will-change: transform;
  color: #fff;
}

.home-disclaimer-btn__icon {
  margin: auto;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-disclaimer-btn__icon svg {
  width: 100%;
  height: 100%;
}

.home-disclaimer-btn:hover .home-disclaimer-btn__back,
.home-disclaimer-btn:focus-visible .home-disclaimer-btn__back,
.home-disclaimer-btn[aria-expanded="true"] .home-disclaimer-btn__back {
  transform: rotate(25deg) translate3d(-0.5em, -0.5em, 0.5em);
}

.home-disclaimer-btn:hover .home-disclaimer-btn__front,
.home-disclaimer-btn:focus-visible .home-disclaimer-btn__front,
.home-disclaimer-btn[aria-expanded="true"] .home-disclaimer-btn__front {
  transform: translate3d(0, 0, 2em);
}

/* The disclaimer card itself — reactbits.dev's "Spotlight Card" (css/spotlight-card.css supplies
   .card-spotlight and its cursor-glow ::before; this just positions and sizes it for this
   specific use). "Opens from the corner" — anchored to the same corner as the trigger button,
   scaling in from that point (transform-origin bottom left) rather than just appearing, and
   staying out of layout flow (position:fixed) so it floats over whatever's beneath it. */
.home-disclaimer-card {
  position: fixed;
  left: var(--space-4);
  bottom: calc(var(--space-4) + 3.75em + var(--space-3));
  z-index: 19;
  width: min(320px, calc(100vw - var(--space-4) * 2));
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  transform-origin: bottom left;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  /* Red per request, overriding .card-spotlight's own near-black default (css/spotlight-card.css)
     — border darkened to match rather than left at that rule's own dark grey, which read oddly
     against red. */
  background-color: var(--color-accent);
  border-color: hsl(4, 90%, 30%);
}

/* Touch-only: moved to the bottom-right corner instead. Every gallery tile's label (accent bar +
   text) hugs its own tile's *left* edge (js/accordion-gallery.js's .ag-panel__label is a flex row
   with no justify-content, so it defaults to flex-start) — the right-hand side of a tile is
   always empty space, photo only, no text. Moving here means the button can still visually
   overlap a tile's edge on a short viewport, but never the label itself. The card is mirrored to
   match, so it still opens from the same corner as its trigger — including the peel-effect
   transform-origins, so the 3D "peel apart" animation still looks correct pointing away from
   this now-different corner instead of towards it. */
@media (hover: none) {
  .home-disclaimer-btn {
    left: auto;
    right: var(--space-4);
  }

  .home-disclaimer-btn__back {
    transform-origin: 0% 100%;
  }

  .home-disclaimer-btn__front {
    transform-origin: 20% 50%;
  }

  .home-disclaimer-card {
    left: auto;
    right: var(--space-4);
    transform-origin: bottom right;
  }
}

.home-disclaimer-card.is-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.home-disclaimer-card p {
  margin: 0;
  position: relative;
  z-index: 2;
}

.home-disclaimer-card a {
  color: #fff;
  font-weight: 600;
  position: relative;
  z-index: 2;
}

@media (max-width: 600px) {
  .home-hero__pages {
    gap: var(--space-3);
    /* Still centred per request, but within the width to the right of a reserved left gutter
       (padding-left) matching the floating disclaimer button's footprint — plain full-width
       centring reopens the exact overlap the previous round's flex-start fix existed to prevent
       (confirmed directly: centred text's wrapped lines land under the button at the scroll
       position where the row first comes fully into view). This keeps the row visually centred
       in the space actually free to use, rather than flush against the left edge. */
    justify-content: center;
    padding-left: calc(3.75em + var(--space-3));
  }
}

/* Lyrics tile (js/home.js), touch-only — its crop needs to differ by the tile's own shape, not
   just a fixed position: short/wide (portrait phone) keeps the heading ("the lyrics of KELE
   OKEREKE") at top; tall/narrow (landscape) switches to the dense song-title wall at the bottom
   instead, per request. */
.ag-panel__media-img--lyrics {
  object-position: center top;
}

@media (hover: none) and (min-width: 521px) {
  .ag-panel__media-img--lyrics {
    object-position: center bottom;
  }
}