/* ============================================================
   home.css — fixed hero panel (left) + scrolling content (right).
   Also used by motion.html (same layout, GIF grid).
   ============================================================ */

body.home { background:var(--bg); }

.home-split {
  display:grid;
  /* 22% wide, but never narrower than the one-line menu needs (r6) */
  grid-template-columns:minmax(380px, 22%) 1fr;
  align-items:start;
}
/* Grid items default to min-width:auto, so a wide no-wrap child (the marquee
   track, or an image's intrinsic width) can blow the column out far past the
   viewport. Pin them to 0 so the columns actually shrink on small screens. */
.hero-panel, .home-content { min-width:0; }

/* ---------------- LEFT: fixed hero panel ---------------- */
.hero-panel {
  position:sticky; top:0;
  height:100vh;
  background:var(--bg); color:var(--ink);
  border-right:1px solid var(--border);
  padding:34px 38px;
  display:flex; flex-direction:column;
  overflow:hidden;
}

.hp-nav { display:flex; flex-direction:column; gap:20px; flex-shrink:0; }
.hp-brand {
  font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:20px;
  letter-spacing:0.02em; text-transform:uppercase; color:var(--ink); text-decoration:none;
 white-space:nowrap;}
.hp-brand span { color:var(--accent); }
/* Menu must always stay on ONE line (r6) — the panel's min width below guarantees it */
.hp-links { display:flex; gap:16px; flex-wrap:nowrap; white-space:nowrap; }
.hp-links a {
  color:var(--mid); text-decoration:none; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase; transition:color 0.15s;
}
.hp-links a:hover, .hp-links a.on { color:var(--ink); }

.hp-hero { flex-shrink:0; padding-top:24px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--soft); padding:5px 14px; border-radius:100px; margin-bottom:16px;
}
.hero-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero-eyebrow-text {
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  font-weight:500; color:var(--mid);
}
.hero-title {
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:clamp(40px, 3.6vw, 66px);
  line-height:0.85; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);
}
.hero-title .italic { font-style:italic; color:var(--accent); }
.hero-title .outline { -webkit-text-stroke:2px var(--ink); color:transparent; }
.hero-desc { font-size:13px; line-height:1.7; color:var(--mid); max-width:340px; margin-top:18px; }

.hero-actions { display:flex; gap:8px; margin-top:20px; flex-wrap:wrap; }
.hp-social { display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.hp-social a { font-size:12px; color:var(--mid); text-decoration:none; }
.hp-social a:hover { color:var(--accent); }

/* ---------------- RIGHT: scrolling content ---------------- */
.home-content { padding:44px clamp(22px,3vw,48px) 64px; background:var(--bg); min-height:100vh; }
.content-block { margin-bottom:72px; }
.block-label { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); margin-bottom:12px; }

.cov-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:16px; flex-wrap:wrap; }
.port-title { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mid); font-weight:500; }
.filters { display:flex; gap:6px; flex-wrap:wrap; }
.filter-btn { padding:7px 16px; border-radius:100px; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; cursor:pointer; border:none; background:var(--soft); color:var(--mid); font-family:'DM Sans',sans-serif; transition:all 0.15s; text-decoration:none; display:inline-block; }
.filter-btn.on { background:var(--ink); color:#fff; }
.filter-btn:hover:not(.on) { color:var(--ink); }

/* Illustration/Motion view toggle — a single sliding segmented control, not two separate buttons.
   Height/vertical-padding/font-size match .filter-btn (category chips) exactly. */
.view-toggle { position:relative; display:inline-flex; background:var(--soft); border-radius:100px; padding:0; }
/* Real element (not ::before) so GSAP has a DOM node to tween — see view-toggle.js.
   Static resting position is still plain CSS so it's correct with JS disabled/unloaded. */
.view-pill {
  position:absolute; top:0; left:0; bottom:0; width:50%;
  background:var(--ink); border-radius:100px;
}
.view-toggle.pos-motion .view-pill { transform:translateX(100%); }
.view-opt {
  position:relative; z-index:1; flex:1 1 0; min-width:0; padding:7px 28px; border-radius:100px; font-size:11px; letter-spacing:0.05em;
  text-transform:uppercase; font-weight:500; font-family:'DM Sans',sans-serif; color:var(--mid);
  text-decoration:none; text-align:center; white-space:nowrap; transition:color 0.2s;
  display:flex; align-items:center; justify-content:center;   /* exact centre of the black selection, both axes */
}
.view-opt.on { color:#fff; }

/* Motion page only: pauses/resumes every cover video's loop (motion-preview-toggle.js) */
.preview-toggle {
  display:inline-flex; align-items:center; gap:9px; background:none; border:none; padding:0; cursor:pointer;
  font-family:'DM Sans',sans-serif;
}
.pt-track { position:relative; width:34px; height:19px; border-radius:100px; background:var(--soft); transition:background 0.25s; flex-shrink:0; }
.pt-thumb { position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:var(--mid); transition:transform 0.25s ease, background 0.25s; }
.preview-toggle.on .pt-track { background:var(--ink); }
.preview-toggle.on .pt-thumb { transform:translateX(15px); background:#fff; }
.pt-label { font-size:11px; letter-spacing:0.05em; text-transform:uppercase; font-weight:500; color:var(--mid); transition:color 0.2s; }
.preview-toggle.on .pt-label { color:var(--ink); }

/* work covers — fluid: they scale with the viewport at every resolution */
.cov-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 1.8vw, 30px);
  margin-bottom:clamp(30px, 4vw, 60px);
}
.cov {
  position:relative; min-width:0; aspect-ratio:4/5;
  overflow:hidden; display:block; text-decoration:none;
  background:var(--soft); border-radius:0; cursor:pointer;   /* square boxes (r5) */
  transition:transform 0.25s;
}
.cov.stagger-a { transform:translateY(clamp(16px, 2.4vw, 40px)); }   /* staggered middle column (JS-computed from visible tiles, see covers.js restagger()) */
.cov:hover { transform:translateY(-4px); }
/* covers.js's filt() adds .flipping to .cov-grid for the duration of a GSAP Flip
   reflow — the hover-lift transition above would otherwise fight Flip's own
   per-frame transform tween on the same property. Also suspends .cov-media's
   reveal-lift transition (below) so a filter instantly showing a never-before-
   seen tile doesn't replay that drift on top of the reorder. */
.cov-grid.flipping .cov, .cov-grid.flipping .cov-media { transition:none !important; }
.cov.stagger-a:hover { transform:translateY(clamp(12px, 2vw, 36px)); }

/* scroll-in reveal: covers.js observes each tile and adds .in-view the first time
   it enters the viewport; fades/lifts it in with a per-tile stagger delay. Opacity-
   only on .cov itself so it never fights the translateY used above for grid
   stagger + hover — the small upward drift lives on .cov-media instead (see
   below), which has no other transform of its own to conflict with. */
.cov { opacity:0; transition:transform 0.25s, opacity 1.1s ease-out, filter 1.1s ease-out; filter:blur(6px); }
.cov.in-view { opacity:1; filter:blur(0); }
@media (prefers-reduced-motion:reduce) {
  .cov { opacity:1; filter:none; transition:transform 0.25s; }
  .cov-media { transform:none; transition:none; }
}
/* Two nested layers so cov-parallax.js's scroll-driven transform (on .cov-parallax)
   never fights the CSS hover-zoom transform (on the img/video itself) — GSAP sets
   an inline transform, which would silently win over any CSS rule targeting the
   same element. .cov-media is the static overflow:hidden mask; .cov-parallax is
   120% tall so the parallax travel never reveals empty space at the top/bottom. */
.cov-media { position:absolute; inset:0; overflow:hidden; transform:translateY(20px); transition:transform 1.1s cubic-bezier(0.16,1,0.3,1); }
.cov.in-view .cov-media { transform:translateY(0); }
.cov-parallax { position:absolute; left:0; top:-10%; width:100%; height:120%; }
.cov-parallax img, .cov-parallax video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.45s ease; }
.cov:hover .cov-parallax img, .cov:hover .cov-parallax video { transform:scale(1.04); }
.cov-inner { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:14px 16px; opacity:0; transition:opacity 0.2s; background:linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.1) 50%, transparent 100%); }
.cov:hover .cov-inner { opacity:1; }
.cov-cat { font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--yellow); margin-bottom:3px; }
.cov-name { font-size:13px; font-weight:500; color:#fff; line-height:1.3; }
.cov-type { font-size:11px; color:rgba(255,255,255,0.55); margin-top:2px; }

/* (client strip lives in site.css — it's on every page now) */

/* ============ CLICK-TO-FLIP SHOWCASE ============ */
.cov-modal { position:fixed; inset:0; z-index:600; display:none; align-items:center; justify-content:center; perspective:2000px; padding:20px; }
.cov-modal.open { display:flex; }

/* emphasised background fade */
.cov-backdrop {
  position:absolute; inset:0;
  background:rgba(10,11,14,0); backdrop-filter:blur(0px);
  transition:background 0.55s ease, backdrop-filter 0.55s ease;
}
/* .backdrop-in is added a couple of frames after .open (see covers.js open()/
   close()), not at the same instant — a CSS transition can't animate across
   the display:none -> flex switch itself (there's no "before" frame painted
   to interpolate from), so tying the dark/blur straight to .open just
   snapped in instantly despite the transition rule below. */
.cov-modal.open.backdrop-in .cov-backdrop { background:rgba(10,11,14,0.78); backdrop-filter:blur(7px); }

/* Reveal used to be a 3D card-flip (front face -> rotateY(180deg) -> back face).
   Replaced with a GSAP Flip zoom-grow from the clicked cover's exact position/size
   (see covers.js open()/close()) since the two techniques both drive `transform`
   and can't run at once. .flip-front is now unused (kept in the DOM harmlessly;
   flipImg is still set in case it's wanted again) — .flip-back is the only
   visible face and no longer needs the counter-rotation. */
.flip-card {
  position:relative; z-index:2;
  width:min(94vw, 980px); aspect-ratio:var(--fb-ratio, 16/10);
}

.flip-face { position:absolute; inset:0; overflow:hidden; border-radius:0; }  /* square (r5) */

.flip-front { display:none; }

/* back — enlarged image (left) + text details (right) */
.flip-back { background:#0B0C0E; color:#fff; display:grid; grid-template-columns:1fr 1fr; }
.fb-media { grid-column:1; grid-row:1; position:relative; background:#000; overflow:hidden; display:flex; align-items:center; justify-content:center; }
/* image settles in bottom-to-top with a gentle slowdown once the zoom-grow (see
   covers.js open()) has mostly settled */
.fb-media img, .fb-media video {
  width:100%; height:100%; object-fit:cover; display:block;
  transform:translateY(28px); opacity:0;
  transition:transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
  transition-delay:0.2s;
}
.cov-modal.open .fb-media img, .cov-modal.open .fb-media video { transform:translateY(0); opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .fb-media img, .fb-media video { transform:none; opacity:1; transition:none; }
}

/* Right text box — tinted with the current image's dominant colour (r6).
   JS sets --fb-bg / --fb-fg / --fb-muted / --fb-tag on this element. */
.fb-text {
  grid-column:2;
  padding:clamp(24px,3vw,42px); display:flex; flex-direction:column;
  background:var(--fb-bg, #0B0C0E); color:var(--fb-fg, #fff);
  transition:background 0.45s ease, color 0.45s ease;
}
.fb-main { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:12px; min-height:0; }
.fb-cat { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--fb-tag, var(--green)); }
.fb-title { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:clamp(28px,3vw,44px); line-height:0.92; text-transform:uppercase; }
.fb-body { font-size:13px; line-height:1.8; color:var(--fb-muted, rgba(255,255,255,0.62)); }
.fb-tags { display:none; flex-direction:column; gap:6px; margin-top:14px; }
.fb-tag-chip {
  font-size:12px; font-weight:500; letter-spacing:0.01em;
  color:var(--fb-muted, rgba(255,255,255,0.68));
}

/* opt-in per-cover layout (data-layout="stack"): text panel below the media, not beside it */
.flip-card.stack { aspect-ratio:auto; width:min(94vw,720px); height:min(88vh,760px); }
.flip-back.stack { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
.flip-back.stack .fb-media { grid-column:1; grid-row:1; }
.flip-back.stack .fb-text { grid-column:1; grid-row:2; overflow-y:auto; }

/* footer row: CTA only — carousel controls (arrows + bullets) overlay the image itself,
   nested inside .fb-media (see HTML) so the image keeps its full height */
.fb-foot { display:flex; align-items:center; gap:16px; padding-top:22px; }
.fb-carousel {
  display:none; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(0,0,0,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:12px 24px; border-radius:100px; width:fit-content;
}
.flip-back.multi .fb-carousel { display:flex; }
.fb-arrow {
  width:30px; height:30px; border:none;
  background:transparent; color:#fff;
  font-size:20px; font-weight:700; line-height:1;
  cursor:pointer; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.15s, color 0.15s;
}
.fb-arrow:hover { background:rgba(255,255,255,0.18); }
.fb-dots { display:flex; align-items:center; gap:8px; }
.fb-dot {
  width:8px; height:8px; padding:0; border-radius:50%;
  border:1.5px solid #fff; background:transparent; cursor:pointer;
  transition:background 0.15s, transform 0.15s;
}
.fb-dot.on { background:#fff; transform:scale(1.2); }
.fb-cta {
  margin-left:auto; background:var(--fb-fg, #fff); color:var(--fb-bg, #0B0C0E);
  padding:12px 24px; border-radius:100px; font-size:13px; font-weight:500;
  text-decoration:none; white-space:nowrap;
}
.fb-cta:hover { background:var(--accent); color:#fff; }

/* opt-in (JS): single-image covers with no written description show the image
   only — the text panel is hidden and the CTA floats over the image instead */
.fb-cta-float { display:none; position:absolute; right:24px; bottom:24px; z-index:2; background:rgba(0,0,0,0.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff; }
.fb-cta-float:hover { background:var(--accent); color:#fff; }
.flip-back.no-desc .fb-media { grid-column:1 / -1; grid-row:1 / -1; }
.flip-back.no-desc .fb-media img, .flip-back.no-desc .fb-media video { object-fit:contain; }   /* card is sized to the media's own ratio (JS) — never crop */
.flip-back.no-desc .fb-text { display:none; }
.flip-back.no-desc .fb-cta-float { display:inline-flex; align-items:center; }

.flip-close { position:fixed; top:22px; right:26px; z-index:3; background:none; border:none; color:#fff; font-size:30px; cursor:pointer; line-height:1; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1100px) {
  .cov-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cov.stagger-a { transform:none; }
  .cov.stagger-b { transform:translateY(clamp(14px,2vw,32px)); }
  .cov.stagger-b:hover { transform:translateY(10px); }
  .cov.stagger-a:hover:not(.stagger-b) { transform:translateY(-4px); }
}
@media (max-width:900px) {
  .home-split { grid-template-columns:1fr; }
  .hero-panel {
    position:static; height:auto; overflow:visible;
    border-right:none; border-bottom:1px solid var(--border);
    padding:26px 22px 32px;
  }
  .hp-hero { padding-top:26px; }
  .home-content { padding-top:32px; }

  .flip-card { aspect-ratio:auto; width:min(100%,560px); height:min(82vh,660px); }
  .flip-back { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .fb-text { grid-column:1; grid-row:2; padding:20px 22px; gap:10px; overflow-y:auto; }
  .fb-body { font-size:12.5px; line-height:1.6; }
}
@media (max-width:640px) {
  .cov-grid { grid-template-columns:1fr; gap:18px; margin-bottom:20px; }
  .cov, .cov.stagger-a, .cov.stagger-b { transform:none; }
  .cov:hover, .cov.stagger-a:hover, .cov.stagger-b:hover { transform:none; }
  .cov:hover img { transform:none; }        /* no sticky hover-zoom on touch */
  .cov-inner { opacity:1; }                  /* captions always visible on touch */
  .hero-title { font-size:44px; }
  .flip-close { top:14px; right:16px; font-size:26px; }
  .cov-modal { padding:12px; }
  .fb-foot { flex-wrap:wrap; gap:12px; padding-top:16px; }
  .fb-cta:not(.fb-cta-float) { margin-left:0; width:100%; text-align:center; }
  /* .fb-cta-float is position:absolute (right:24px/bottom:24px) -- combining
     that with width:100% (as the plain .fb-cta rule above does) pushed its
     left edge 24px past the container's own left edge instead of centering
     it. left+right insets stretch it symmetrically instead. */
  .fb-cta-float { left:16px; right:16px; width:auto; text-align:center; }
}