/* 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; }
/* Phone rows (wall.js phoneRows) carry the same designs, half a lap apart (33 of the 66 phone tiles, far wider than any
   screen), so no design shows twice at once. They pause together so they never drift out of step. */
.wall:has(.wall-row-phone:hover) .wall-row-phone { 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; --tile-o: 0.4; opacity: var(--tile-o); 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; }
/* Phone clips (wall.js rows with shape 'portrait'): 9:16, exactly as tall as the 16:9 tiles, so every row is the same height. */
.tile.is-portrait { width: auto; height: calc(300px * 9 / 16); aspect-ratio: 9 / 16; }
.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: 240px; --tile-o: 0.55; } .tile.is-portrait { width: auto; height: calc(240px * 9 / 16); } .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(49px, 7.68vw, 154px); /* 20% under clamp(61px, 9.6vw, 192px), itself 20% under 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; }

/* A filter other than All is on (.is-filtered from work-filter-view.js): PORTFOLIO fades out, the chips drop to the foot
   of the wall (the script slides them there), and the dimming mostly lifts so the work is clear to pick from. The black
   gradient at the bottom stays, taller, so the chips keep their contrast. */
.work-title { transition: opacity 0.45s var(--ease); }
.work-wall::before { transition: opacity 0.45s var(--ease); }
.is-filtered .work-title { opacity: 0; }
.is-filtered .work-copy .filter { position: absolute; left: 50%; bottom: clamp(22px, 4vh, 44px); width: calc(100% - 2 * var(--gutter)); translate: -50% 0; }
.is-filtered.work-wall::before { opacity: calc(var(--wall-in, 1) * 0.15); }
.is-filtered.work-wall::after { height: 34%; }
.is-filtered .tile { --tile-o: 0.95; }
/* Work outside the chosen filter stays in its place, 80% see-through and not clickable (wall.js applyFilter). */
.is-filtered .tile.is-dim { --tile-o: 0.2; pointer-events: none; }

/* 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); }