/* Work: the mrbeastjobs.com hero wall, full bleed, with the same tilt, row speeds and hover.
   Tile clicks open the popup in case.js. Logos sit directly below on the same black. */
/* .work starts 230vh before the end of the hero track, which puts .work-pin at the top of the screen as the explosion
   starts, with the hero still stuck: both hold still while the rows come in (js/work-entrance.js).
   Nothing here paints or takes clicks until then, which is why .work has no background and ignores the pointer.
   The negative scroll margin lands the nav's Work link after the rows have arrived. */
.work { position: relative; z-index: 3; margin-top: -230vh; pointer-events: none; scroll-margin-top: -130vh; }
.work-pin { height: 270vh; }
.work-wall { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; overflow: hidden; isolation: isolate; }
.work-wall::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 60% at 50% 60%, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.62) 100%); opacity: var(--wall-in, 1); }
.work-wall::after { content: ''; position: absolute; inset: auto 0 0; height: 26%; z-index: 1; pointer-events: none; background: linear-gradient(to top, #000, transparent); opacity: var(--wall-in, 1); }

.wall { position: absolute; inset: -14% -8%; z-index: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; transform: rotate(-8deg) scale(1.18); transform-origin: center; pointer-events: none; }
/* The lane stays still while its row runs inside it. Its mask wipes the row into view from one side, so the tiles never move
   faster than the ticker. The soft edge starts past the lane, leaving nothing showing at --row-in 0. */
.wall-lane { --edge: calc(var(--row-in, 1) * 125% - 25%); }
.wall-lane[data-from="-1"]:not([data-in]) { -webkit-mask-image: linear-gradient(to right, #000 var(--edge), transparent calc(var(--edge) + 25%)); mask-image: linear-gradient(to right, #000 var(--edge), transparent calc(var(--edge) + 25%)); }
.wall-lane[data-from="1"]:not([data-in]) { -webkit-mask-image: linear-gradient(to left, #000 var(--edge), transparent calc(var(--edge) + 25%)); mask-image: linear-gradient(to left, #000 var(--edge), transparent calc(var(--edge) + 25%)); }
.wall-row { display: flex; gap: 20px; width: max-content; will-change: transform; }
.wall-row-l { animation: wall-left 75s linear infinite; }
.wall-row-r { animation: wall-right 62s linear infinite; }
.wall-row:hover, .is-paused .wall-row { animation-play-state: paused; }
@keyframes wall-left { to { transform: translateX(-50%); } }
@keyframes wall-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Values match the mrbeastjobs.com .hero-thumb rules. */
.tile { display: block; flex: none; width: 300px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; opacity: 0.4; pointer-events: auto; cursor: pointer; box-shadow: 0 9px 24px -4px rgba(0, 0, 0, 0.55); transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:hover, .tile:focus-visible { opacity: 1; transform: scale(1.08); box-shadow: 0 18px 44px -8px rgba(0, 0, 0, 0.7); position: relative; z-index: 3; }
.tile.is-source { visibility: hidden; }
@media (max-width: 700px) { .tile { width: 210px; opacity: 0.55; } .wall { gap: 16px; } }

.work-copy { opacity: var(--copy-in, 1); visibility: var(--copy-v, visible); position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 90px 0 50px; text-align: center; pointer-events: none; }
.work-copy > * { pointer-events: auto; }
.work-title { font-family: 'Nebula', var(--body); font-size: clamp(76px, 12vw, 240px); font-weight: 400; letter-spacing: normal; line-height: 0.86; -webkit-text-stroke: 0.022em currentColor; pointer-events: none; }
.work-copy .filter { max-width: 1100px; }

/* Logos of companies Norman has worked for. All one color so they read as a set. */
.logos { position: relative; background: var(--ink); pointer-events: auto; padding: clamp(36px, 6vw, 90px) var(--gutter) clamp(60px, 8vw, 120px); }
.nebula-title { color: var(--muted); font-family: 'Nebula', var(--body); font-weight: 400; font-size: clamp(22px, 2.5vw, 38px); line-height: 1.2; text-align: center; text-transform: uppercase; margin-bottom: clamp(28px, 4vw, 56px); padding: 0 var(--gutter); }
/* One continuous list with the same gap between every logo, about six per line. Order comes from js/logos.js. */
/* Space between lines comes from each logo's own margin, not row-gap, so an empty .logo-break line adds no extra gap. */
.logos-grid { --logo-row: clamp(26px, 3.2vw, 48px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: clamp(26px, 5.6vw, 84px); max-width: 1370px; margin: calc(var(--logo-row) / -2) auto; padding: 0; list-style: none; }
.logo { display: flex; margin-block: calc(var(--logo-row) / 2); }
/* Starts a new line where logos.js asks for one, only on screens wide enough to hold the full lines. */
.logo-break { display: none; flex-basis: 100%; height: 0; }
@media (min-width: 1400px) { .logo-break { display: block; } }
.logo img { max-width: 84vw; height: calc(clamp(24px, 2.55vw, 40.5px) * var(--s, 1)); width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.82; transition: opacity 0.2s, transform 0.3s var(--ease); }
.logo:hover img { opacity: 1; transform: scale(1.08); }