/* Pass 2 — The Arrangement (six rooms), The Climb, and the hero.
   Enhancement layer only: the runtime bundle is untouched. Every hidden
   state below is applied by a class the script adds, so if the script never
   runs nothing disappears — the page just stays as it was.
   House motion law: cubic-bezier(0.32,0,0.24,1), 90 BPM, one beat = 0.66s. */

/* ── Hero: scroll parallax off ────────────────────────────────────────────
   The runtime writes a plain inline style on every scroll frame; a CSS
   !important rule outranks it permanently, so there is no fight and no
   rAF loop left running. This is the element's natural resting state. */
[data-gt-noparallax] {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* ── The Climb: the line must track the scroll, not trail it ──────────────
   A CSS transition on a scroll-linked property lags and rubber-bands on a
   fast scroll. The runtime already updates this value every frame, so
   removing the transition makes it exact rather than choppy. */
[data-gt-noease] { transition: none !important; }

/* The component is lazy-mounted when the section scrolls into view, so a
   script that looks for it at boot finds nothing. The attribute selector
   catches it whenever it appears: the drawn line is the polyline carrying a
   dash array, its static ghost has none. */
polyline[stroke-dasharray] { transition: none !important; }

/* ── The Arrangement ──────────────────────────────────────────────────── */

/* Give the row real horizontal room. The builder caps it at 1120px, which
   left six tiles at ~171px and forced the copy to wrap into ragged shapes.
   Widening the row and its heading together keeps their left edges aligned. */
@media (min-width: 1200px) {
  [data-gt-worlds],
  [data-gt-lead] { max-width: min(1440px, calc(100vw - 120px)) !important; }
  /* Lower the builder's 204px floor so all six share one row rather than
     wrapping and stranding the sixth. At 1440 that is ~225px each. */
  [data-gt-worlds] > a { min-width: 150px !important; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  [data-gt-worlds] > a { min-width: 200px !important; }
}

/* ── Symmetry ──────────────────────────────────────────────────────────
   Tiles hold different amounts of copy, so left alone every internal band
   lands at a different height and the row reads ragged. Stretch the tiles
   to a common height, then pin the footer to the bottom of each one so the
   status chip and the Step Inside button sit on the same line across all
   six, whatever the copy above them does. */
[data-gt-worlds] { align-items: stretch !important; }
[data-gt-worlds] > a { align-self: stretch !important; }

[data-gt-worlds] [data-gt-part="body"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
[data-gt-worlds] [data-gt-part="top"]  { flex: 0 0 auto !important; }
[data-gt-worlds] [data-gt-part="foot"] { margin-top: auto !important; }

/* A uniform motif band, so the artwork sits on one line across the row. */
[data-gt-worlds] [data-gt-part="motif"] { flex: 0 0 150px !important; height: 150px !important; }

/* Reserve two lines for the title so the claim and excerpt below it start
   at the same height whether the name runs one line or two. */
@media (min-width: 810px) {
  [data-gt-worlds] [data-gt-role="title"] { min-height: 2.4em; }
}

/* Status chips are uppercase across the set. */
[data-gt-worlds] [data-gt-role="chip"] { text-transform: uppercase; }
/* A forthcoming title is not LIVE, so it does not get the gold. */
[data-gt-worlds] [data-gt-role="chip"][data-gt-state="soon"] {
  color: rgba(243, 238, 228, 0.62) !important;
}

/* ── Failsafe ───────────────────────────────────────────────────────────
   A tile that is not actively animating is always fully opaque. This
   outranks any leftover hidden rule, including a stale stylesheet cached
   from an earlier build, so the blank-tile fault cannot come back. */
[data-gt-worlds] > a:not(.gt-rise) { opacity: 1 !important; }

/* ── Entrance ───────────────────────────────────────────────────────────
   Deliberately built so that a tile CANNOT end up invisible.

   The previous version used a persistent `opacity: 0` class that a second
   class was supposed to switch on. When the runtime re-rendered a tile it
   kept the hidden class and dropped the visible one, so the tile stayed at
   zero opacity for good — visible only on hover, because the builder's own
   hover effect writes `opacity: 1` inline. That is the bug being fixed.

   Here the resting state is simply visible. Nothing is hidden by default;
   an element is only ever transparent while it is actively animating, and
   the animation's end state is the resting state, so any failure — script
   error, dropped class, no trigger — leaves the tile on screen. */
@keyframes gtRise {
  from { opacity: 0; transform: translateY(22px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
@keyframes gtRiseHead {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes gtRiseThread {
  from { opacity: 0; transform: scaleX(0.06); }
  to   { opacity: 1; transform: none; }
}
.gt-rise        { animation: gtRise 0.6s cubic-bezier(0.32, 0, 0.24, 1) var(--gt-delay, 0s) both; }
.gt-rise-head   { animation: gtRiseHead 0.56s cubic-bezier(0.32, 0, 0.24, 1) var(--gt-delay, 0s) both; }
.gt-rise-thread { animation: gtRiseThread 0.66s cubic-bezier(0.32, 0, 0.24, 1) var(--gt-delay, 0s) both;
                  transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  .gt-rise, .gt-rise-head, .gt-rise-thread { animation: none !important; }
}

/* ── Parallax on the two book covers ───────────────────────────────────
   Transform only, on a small image rather than a full-bleed backdrop, so
   it stays cheap to composite. Positions are written by script every
   frame, so there is deliberately no transition here — a transition on a
   scroll-linked value is what makes motion lag behind the scroll. */
/* will-change is applied by script only while the image is moving. */
@media (prefers-reduced-motion: reduce) {
  [data-gt-parallax] { transform: none !important; will-change: auto !important; }
}