/* public/css/homepageScene.css
 *
 * Homepage Community Scene -- Phase 3 (public active-scene hero). Scoped
 * entirely to `.home-scene*`/`.home-scene-hero`/`.home-scene-text`
 * selectors -- never touches `.home-hero` (Features.ejs's own legacy
 * hero rule), never redeclares `.home-intro`'s own base rule (this file
 * only ADDS the `.home-intro--scene`-scoped/`.home-scene-hero`-scoped
 * text-color overrides described below), and never touches
 * public/css/goblinville.css or public/css/homepageSceneEditor.css.
 *
 * ── Coordinate system parity (reproduces
 *    public/css/homepageSceneEditor.css's own documented contract
 *    exactly -- see that file's header comment) ────────────────────────
 *
 * `.home-scene__canvas` is the ONE canonical scene: a fixed 16:9 artboard.
 * Every item's x/y is a percentage of THIS element's own width/height,
 * never of the outer `.home-scene` crop viewport -- so a breakpoint
 * change is a pure crop, never a coordinate remap.
 *
 * Anchor: BOTTOM-CENTER -- `.home-scene__item { transform: translate(-50%,
 * -100%); }` (x is horizontal center, y is the floor/feet position) +
 * `.home-scene__item-visual { transform-origin: 50% 100%; }` (scale grows
 * upward from the floor point; flip/scale live on this INNER element so
 * they never fight the outer anchor transform).
 *
 * ── Crop viewport (mirrors the admin editor's own desktop/tablet/mobile
 *    breakpoints and ratios exactly) ────────────────────────────────────
 *
 * `.home-scene` is the crop WINDOW; `.home-scene__canvas` keeps its own
 * fixed 16/9 ratio always and is centered inside it. Desktop's viewport
 * ratio equals the canvas's own (16/9) -- no crop. Tablet (4/3.1) and
 * mobile (9/16) are both narrower than 16/9, so sizing the canvas by
 * `height: 100%` (width following from its own aspect-ratio) makes it
 * wider than the viewport -- a horizontal center-crop, exactly as
 * documented in homepageSceneEditor.css.
 *
 * Breakpoints: desktop >=992px, tablet 768px-991.98px, mobile <=767.98px
 * -- Bootstrap's own vendored `lg` breakpoint (992px, already used
 * elsewhere in this codebase) and Goblinville's own established
 * 767.98px mobile-scene precedent, not new values invented for this file.
 */

.home-scene-hero {
  position: relative;
  max-width: 1100px;
  margin: 1.5rem auto 2rem;
  padding: 0 .25rem;
}

/* ── Viewport (crop window) + canvas (fixed 16:9 canonical scene) ──────── */

.home-scene {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--df-radius, 16px);
  box-shadow: var(--df-shadow, 0 6px 20px rgba(0, 0, 0, .3));
  background: var(--df-surface-alt, #122c12);
  /* Desktop: same ratio as the canvas itself -- no crop. */
  aspect-ratio: 16 / 9;
}

@media (max-width: 991.98px) and (min-width: 768px) {
  .home-scene {
    aspect-ratio: 4 / 3.1;
  }
}

@media (max-width: 767.98px) {
  .home-scene {
    aspect-ratio: 9 / 16;
    max-width: 420px;
    margin: 0 auto;
  }
}

.home-scene__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: 100%;
}

@media (max-width: 991.98px) {
  .home-scene__canvas {
    width: auto;
    height: 100%;
  }
}

.home-scene__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Missing/invalid background: the existing homepage gradient treatment
   stands in, using the SAME brand token every other dark surface on this
   page already uses (var(--df-surface-alt)) rather than an invented color
   -- see services/homepageScenePublicPresentationService.js's own
   BACKGROUND-section comment. */
.home-scene__background--fallback {
  background: linear-gradient(135deg, var(--df-surface-alt, #122c12) 0%, #0b1a0b 100%);
}

/* ── Items: shared bottom-center anchor for every item type ─────────────── */

.home-scene__item {
  --hs-item-base-height: 15%; /* of canvas height, at scale = 1 -- matches homepageSceneEditor.css's --hs-item-base-height exactly */
  position: absolute;
  height: var(--hs-item-base-height);
  transform: translate(-50%, -100%);
  pointer-events: none; /* decorative -- must never intercept a click meant for the CTAs beside it */
}

.home-scene__item-visual {
  transform-origin: 50% 100%;
  height: 100%;
  display: block;
}

.home-scene__item-visual img,
.home-scene__item-visual svg {
  height: 100%;
  width: auto;
  display: block;
}

/* ── Independent desktop/tablet/mobile visibility -- three mutually
   exclusive ranges, applied as plain classes server-side (never
   JS-toggled), so there is no flash-before-CSS-applies. ─────────────── */

@media (min-width: 992px) {
  .home-scene__item--desktop-hidden {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .home-scene__item--tablet-hidden {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .home-scene__item--mobile-hidden {
    display: none;
  }
}

/* ── Marketing-text safe zone: overlaid on desktop/tablet, stacked below
   the scene on mobile (no overlay at all, per this feature's own
   mobile-note precedent in the admin editor). ───────────────────────── */

.home-scene-text {
  padding: 1.1rem .25rem 0;
}

@media (min-width: 768px) {
  .home-scene-text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 38%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(90deg, rgba(10, 20, 10, .74) 0%, rgba(10, 20, 10, .42) 65%, transparent 100%);
  }

  /* Scoped to the scene hero only -- the fallback `.home-intro` hero's own
     base title/lead colors (public/css/style.css) are never touched. */
  .home-scene-hero .home-kicker,
  .home-scene-hero .home-intro__title {
    color: #fff;
  }

  .home-scene-hero .home-intro__lead {
    color: rgba(255, 255, 255, .85);
  }
}

/* Tablet: a wider proportional band than desktop for the same copy on a
   narrower viewport -- matches the admin editor's own documented 38%/48%
   split exactly (public/css/homepageSceneEditor.css). */
@media (min-width: 768px) and (max-width: 991.98px) {
  .home-scene-text {
    width: 48%;
  }
}

/* .btn-3 / .btn-alt (public/css/style.css) both already have solid opaque
   backgrounds -- var(--df-GoblinGold) and var(--df-bg) respectively -- so
   no contrast override is needed for either button here. */