/* ============================================================================
   marquee-banner.css — homepage PANEL 2.

   LAYOUT: Ash's hand sketch (IMG_2338, 2026-07-27)

     ┌────────────────────────────────────────────────┐
     │ Everything              ╱▤╲    ╱▤╲             │
     │ your                  ╱▤╲  ╲__╱                │
     │ Brand.          ╱▤╲ ╱▤╲                        │
     │ ─── ─                                          │
     │ ─                            ( CTA )( CTA )    │
     └────────────────────────────────────────────────┘

   · LEFT     — eyebrow, headline, then the lead
   · RIGHT    — the service cards, on a tilted drifting rail
   · BOTTOM-R — the two CTAs

   CARD ANATOMY: the "Production Worlds" pattern Ash locked
   (masterproductionhouse.com). Each card, on its LEFT: letterspaced eyebrow →
   bold title → description → pill button with arrow. THUMBNAIL fills the
   card's RIGHT half.

   The tilt + rail motion are Mokko's (`style.css:13111-13150`,
   `@keyframes marquee` at :13490): `rotate(-2deg)`, 65s linear, radius 20px.
   Mokko's own stylesheet is NOT loaded — it ships its own Bootstrap, reset and
   global element styles and would fight Pixy's grid and type scale — so the
   component is re-authored here against Pixy markup.
   ========================================================================== */

/* --- LAYER STACK (Ash 2026-07-27) -----------------------------------------
   Was: a 2-column grid — copy in the left column, rail in the right. That left
   dead space on the left and ran the rail only down the right, so the panel sat
   lopsided and the copy read as sitting ON a grey block rather than over
   anything.

   Now three stacked layers, bottom to top:
     1. the panel's grey background
     2. the card rail, FULL BLEED across the whole panel
     3. the copy (left) and the CTAs (right), both transparent, over the rail
   The copy has no background of its own — it sits on the rail, as sketched. */
.bto-banner.mil-p-160-100 {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #E7E7E4;            /* layer 1 — a touch off the page grey so the
                                     stack reads as layered, not flat */
  min-height: 620px;
  display: flex;
  align-items: center;
}

/* layer 2 — the rail, spanning the full panel width behind everything */
.bto-banner .bto-rail-area {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  pointer-events: none;           /* the copy above stays selectable */
}
.bto-banner .bto-rail-inner { width: 100%; pointer-events: auto; }

/* layer 3 — foreground */
.bto-banner-fg { position: relative; z-index: 2; width: 100%; }

.bto-banner-grid {
  display: grid;
  grid-template-columns: minmax(300px, 44%) 1fr;
  gap: 32px;
  align-items: end;
  min-height: 460px;
}

/* A soft fade under the copy only — NOT a solid block. Without it the headline
   fights whichever white card happens to be drifting behind it. It fades to
   nothing well before the cards, so the layering still reads. */
.bto-banner-copy {
  position: relative;
  align-self: center;
}
.bto-banner-copy::before {
  content: "";
  position: absolute;
  inset: -40px -140px -40px -50vw;
  z-index: -1;
  background: linear-gradient(90deg,
    #E7E7E4 0%, #E7E7E4 62%, rgba(231,231,228,.88) 78%, rgba(231,231,228,0) 100%);
  pointer-events: none;
}

.bto-banner-title {
  font-size: clamp(36px, 4vw, 68px);
  line-height: .94;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.bto-banner-lead { max-width: 40ch; margin: 0; }

/* CTAs sit bottom-right of the panel, per the sketch */
.bto-banner-ctas {
  display: flex;
  justify-content: flex-end;
  align-self: end;
  gap: 16px;
  margin: 0;
}

/* --- the tilted rail ------------------------------------------------------ */
.bto-rail-area { overflow: hidden; }

.bto-rail-inner {
  overflow: hidden;
  /* Ash's reference frame shows a markedly steeper tilt than Mokko's own
     -2deg rail. Raised to -8deg; the area padding below is widened to match,
     since a steeper angle needs proportionally more vertical room before the
     card corners get clipped. */
  transform: rotate(-8deg);
}

.bto-rail {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  will-change: transform;
  animation: bto-rail 65s linear infinite;   /* Mokko's duration */
}

.bto-rail:hover { animation-play-state: paused; }

@keyframes bto-rail {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }      /* the list is duplicated once */
}

/* --- the Production Worlds card ------------------------------------------- */
.bto-pw-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 38%;            /* text left · thumbnail right */
  gap: 18px;
  width: 470px;
  min-height: 214px;
  margin: 0 10px;
  padding: 22px;
  border-radius: 20px;                       /* Mokko's radius */
  background: #fff;
  border: 1px solid rgba(53, 54, 57, .10);
  box-shadow: 0 14px 34px rgba(53, 54, 57, .10);
  text-decoration: none;
  color: inherit;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}

.bto-pw-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(53, 54, 57, .18);
}

.bto-pw-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.bto-pw-eyebrow {
  font: 600 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f1b84b;
  margin: 0 0 10px;
}

.bto-pw-title {
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #353639;
  margin: 0 0 10px;
}

.bto-pw-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #808080;
  margin: 0 0 16px;
}

/* pill button with arrow — same label on all seven cards */
.bto-pw-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 99px;
  border: 1px solid rgba(53, 54, 57, .22);
  font: 600 10px/1 "Outfit", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #353639;
  white-space: nowrap;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.bto-pw-btn svg { width: 11px; height: 11px; fill: currentColor; transition: transform .3s ease; }
.bto-pw-card:hover .bto-pw-btn { background: #353639; border-color: #353639; color: #fff; }
.bto-pw-card:hover .bto-pw-btn svg { transform: translateX(3px); }

.bto-pw-thumb {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(53, 54, 57, .06);
}

.bto-pw-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- responsive ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .bto-banner-grid { grid-template-columns: minmax(260px, 34%) 1fr; gap: 32px; }
  .bto-pw-card { width: 420px; min-height: 200px; }
  .bto-pw-title { font-size: 23px; }
}

@media (max-width: 992px) {
  /* Below 992 the copy would sit on top of the cards with nowhere to breathe,
     so the layers separate: rail back into flow, copy above it. */
  .bto-banner.mil-p-160-100 { display: block; min-height: 0; padding: 48px 0 40px; }
  .bto-banner .bto-rail-area { position: static; margin-top: 28px; }
  .bto-banner-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; min-height: 0; }
  .bto-banner-copy::before { display: none; }
  .bto-banner-lead { max-width: 60ch; }
  .bto-rail-inner { transform: rotate(-4deg); }
  .bto-rail-area { padding: 44px 0; }
  .bto-banner-ctas { justify-content: flex-start; }
  .bto-pw-card { width: 380px; min-height: 186px; padding: 18px; }
}

@media (max-width: 576px) {
  .bto-pw-card { width: 300px; min-height: 168px; grid-template-columns: 1fr 34%; gap: 12px; }
  .bto-pw-title { font-size: 19px; }
  .bto-pw-desc { font-size: 12.5px; margin-bottom: 12px; }
  .bto-pw-btn { height: 34px; padding: 0 14px; }
  .bto-banner-ctas { flex-wrap: wrap; gap: 12px; }
  .bto-banner-ctas > span { flex: 1 1 100%; }
  .bto-banner-ctas .mil-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bto-rail { animation: none; }
  .bto-rail-inner { overflow-x: auto; }
  .bto-pw-card { transition: none; }
}