/* ============================================================
   Climate Blueprint — temp landing (cb-site)
   Standalone site for the climate-blueprint.tv domain.
   Mobile-first; dark, clean. Separate look from RESI.
   ============================================================ */

:root {
  --cb-bg:       #2b2b2b;   /* charcoal */
  --cb-ink:      #e7e2d7;   /* warm cream text (matches the asset cream #DBD7CE) */
  --cb-ink-soft: #aaa499;   /* muted */
  --cb-orange:   #e8763c;   /* accent — periods + CTA */
  --cb-font:     "Plus Jakarta Sans", system-ui, sans-serif;
  --cb-serif:    "Crimson Pro", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--cb-bg); color: var(--cb-ink); font-family: var(--cb-font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---- shell ---- */
.cb {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(1.25rem, 5vw, 2.75rem);
  background: rgba(22, 22, 22, 0.55);   /* scrim over the bg video — keeps text/logos readable */
}

/* full-screen looping background video */
.cb-bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: translateZ(0); will-change: transform; backface-visibility: hidden; }

/* ---- header ---- */
.cb__header { display: flex; align-items: center; justify-content: center; margin-top: 6vh; }
.cb__logo { display: inline-block; transition: opacity .25s ease, transform .25s ease; }
.cb__logo:hover { opacity: 0.78; transform: translateY(-1px); }
.cb__logo img { height: clamp(1.9rem, 6.7vw, 2.5rem); width: auto; display: block; }

/* ---- main (mobile: stacked) ---- */
.cb__main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 6vh, 3.5rem); }

.cb__hero { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.cb__title {
  margin: 0; color: var(--cb-ink); font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2.3rem); line-height: 1.06; letter-spacing: -0.035em;
}
.cb__title .dot {
  display: inline-block; width: 0.17em; height: 0.17em;
  margin-left: 0.05em; border-radius: 50%;
  background: var(--cb-orange); vertical-align: -0.02em;
}

.cb__cta {
  background: var(--cb-orange); color: #fff; font-weight: 700;
  font-size: clamp(0.72rem, 1.9vw, 0.8rem);          /* ~30% smaller */
  padding: 0.7em 1.25em; border-radius: 0.4rem;
  box-shadow: 0 6px 18px rgba(232, 118, 60, 0.28);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, filter .25s ease;
}
.cb__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(232, 118, 60, 0.42); filter: brightness(1.05); }
.cb__cta:active { transform: translateY(0) scale(0.97); box-shadow: 0 3px 10px rgba(232, 118, 60, 0.3); filter: brightness(0.97); transition-duration: .08s; }

/* ---- posters: 3D wheel — HORIZONTAL (tablet/iPad/mobile); VERTICAL override on desktop ---- */
.cb__posters {
  position: relative;
  width: 100%; max-width: 760px;
  height: clamp(180px, 37vh, 420px);          /* vh-bounded so the ticker never gets pushed off */
  margin-inline: auto;
  perspective: 1300px;
  cursor: grab; touch-action: pan-y; visibility: hidden;   /* JS reveals after first render */
}
.cb__posters.is-dragging { cursor: grabbing; }
.cb__poster {
  /* width capped by viewport HEIGHT too → posters scale down on short/narrow screens */
  position: absolute; top: 50%; left: 50%; width: clamp(118px, min(42vw, 23vh), 240px); height: auto;
  transform-origin: center center;
  transition: none;                 /* all motion is driven by JS rAF */
  will-change: transform, opacity;
  cursor: inherit;
}
.cb__poster img { width: 100%; height: auto; display: block; border-radius: 0.55rem; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55); transition: filter .35s ease; }
.cb__poster:hover img { filter: brightness(1.05); }   /* very subtle hover */
.cb__poster.is-center { z-index: 3; }
.cb__poster.is-hidden { opacity: 0; pointer-events: none; }

/* off-centre posters: gradient blur (sharp inner → blurred outer) + dark gradient overlay.
   Strength is driven per-poster from JS (--blur-op / --ov-op) so it scrubs in continuously. */
.cb__poster::before, .cb__poster::after {
  content: ""; position: absolute; inset: 0; border-radius: 0.55rem; pointer-events: none;
}
.cb__poster::before {
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  opacity: calc(var(--blur-op, 0) * 0.5); z-index: 1;
}
.cb__poster::after { opacity: var(--ov-op, 0); }
.cb__poster.is-above::before { -webkit-mask: linear-gradient(to left, transparent 30%, #000 90%); mask: linear-gradient(to left, transparent 30%, #000 90%); }
.cb__poster.is-below::before { -webkit-mask: linear-gradient(to right, transparent 30%, #000 90%); mask: linear-gradient(to right, transparent 30%, #000 90%); }
.cb__poster.is-above::after  { background: linear-gradient(to left, transparent 18%, rgba(8, 8, 8, 0.85) 100%); z-index: 2; }
.cb__poster.is-below::after  { background: linear-gradient(to right, transparent 18%, rgba(8, 8, 8, 0.85) 100%); z-index: 2; }
@media (prefers-reduced-motion: reduce) { .cb__poster { transition: none; } }

/* poster lightbox — click a poster to view it centered */
.cb-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; background: rgba(0, 0, 0, 0.82);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
  cursor: zoom-out;
}
.cb-lightbox.is-open { opacity: 1; visibility: visible; }
.cb-lightbox__img { max-height: 80vh; max-width: 92vw; width: auto; height: auto; border-radius: 0.4rem; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6); }

/* ---- countries ---- */
.cb__countries { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(1rem, 4vw, 2.5rem); flex-wrap: wrap; }
.cb__flags { display: flex; align-items: flex-start; gap: clamp(1.5rem, 6vw, 3.5rem); }
.cb__group { display: flex; align-items: flex-start; gap: clamp(1.25rem, 4vw, 2.25rem); }

.cb__country { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--cb-ink-soft); transition: color .3s ease; }
.cb__country:hover { color: var(--cb-ink); }
.cb__country img { height: clamp(1.4rem, 5.5vw, 1.9rem); width: auto; }
.cb__country span { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.5rem; font-weight: 600; }

/* producer logos — same height as the flag icons */
.cb__producer { display: flex; align-items: flex-start; }
.cb__producer img { height: clamp(1.4rem, 5.5vw, 1.9rem); width: auto; }   /* = island-icon height, all uniform */
.cb__producer--text { flex-direction: column; line-height: 1.0; text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(0.62rem, 2.5vw, 0.78rem); font-weight: 700; text-align: center; color: #dbd7ce; }

/* Twenty Twenty is a white PNG embedded in an SVG → tint to cream via mask (uses its shape). */
.cb__producer--ttf {
  display: inline-block;
  height: clamp(1.4rem, 5.5vw, 1.9rem);
  aspect-ratio: 1224 / 661;
  background-color: #dbd7ce;
  -webkit-mask: url(assets/twenty-twenty.svg) center / contain no-repeat;
          mask: url(assets/twenty-twenty.svg) center / contain no-repeat;
}

/* RESI R + ODI carry more ink weight → render ~20% smaller so they read the same size. */
.cb__producer img[src*="resi-r"],
.cb__producer img[src*="odi"] { height: clamp(1.12rem, 4.4vw, 1.52rem); }

/* ---- Bottom logo ticker: slow, seamless loop, vertically centered, 80% opacity ---- */
.cb__ticker { overflow: hidden; margin-inline: calc(clamp(1.25rem, 5vw, 2.75rem) * -1); }   /* full-bleed: cancel .cb padding */
.cb__ticker-track { display: flex; width: max-content; opacity: 0.8; will-change: transform; animation: cb-ticker 60s linear infinite; }
/* each copy fills a full viewport with logos evenly spread → no blank gap, no in-view dupes */
.cb__ticker-copy { flex: 0 0 auto; min-width: 100vw; display: flex; align-items: center; justify-content: space-evenly; gap: clamp(2rem, 6vw, 5rem); }
.cb__ticker-copy > * { flex: 0 0 auto; }
.cb__ticker:hover .cb__ticker-track { animation-play-state: paused; }
@keyframes cb-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cb__ticker-track { animation: none; } }

/* ============================================================
   Desktop ( >= 1200px ) — centred hero + VERTICAL poster wheel pinned right.
   Below 1200px (tablet / iPad / mobile) the wheel stays HORIZONTAL (base rules).
   ============================================================ */
@media (min-width: 1200px) {
  /* Lock to the viewport so the whole thing fits the 16:9 footprint. */
  .cb { height: 100vh; overflow: hidden; }

  .cb__main { position: relative; flex-direction: row; align-items: center; justify-content: center; min-height: 0; }

  /* Title + button centered on the full screen */
  .cb__hero { align-items: center; justify-content: center; text-align: left; max-width: 60%; }
  .cb__title { font-size: clamp(1.9rem, 3.1vw, 3rem); }

  /* Poster wheel → VERTICAL, pinned right, vertically centred */
  .cb__posters {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: clamp(180px, 18vw, 230px);
    height: clamp(420px, 66vh, 600px);
    margin: 0; max-width: none; perspective: 1100px;
  }
  .cb__poster { top: 50%; left: 0; height: auto; width: 100%; }
  .cb__poster img { width: 100%; height: auto; }
  .cb__poster.is-center { transform: translateY(-50%) translateZ(0) rotateX(0deg) scale(1); }
  .cb__poster.is-above  { transform: translateY(-158%) translateZ(-240px) rotateX(42deg) scale(0.92); }
  .cb__poster.is-below  { transform: translateY(58%) translateZ(-240px) rotateX(-42deg) scale(0.92); }
  .cb__poster.is-above::before { -webkit-mask: linear-gradient(to top, transparent 30%, #000 90%); mask: linear-gradient(to top, transparent 30%, #000 90%); }
  .cb__poster.is-below::before { -webkit-mask: linear-gradient(to bottom, transparent 30%, #000 90%); mask: linear-gradient(to bottom, transparent 30%, #000 90%); }
  .cb__poster.is-above::after  { background: linear-gradient(to top, transparent 20%, rgba(8, 8, 8, 0.85) 100%); }
  .cb__poster.is-below::after  { background: linear-gradient(to bottom, transparent 20%, rgba(8, 8, 8, 0.85) 100%); }

  .cb__countries { justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); }
}