/* UKAZ, the portfolio of Osama Abu Ukaz
   Layout: a fixed particle field behind everything; the red logo as liquid in the hero; on scroll the
   particles pour down the page and become three featured films; then one section per project, each
   with its own layout; about; a project request form. Behind it all the particles settle into a faint logo.
   A cool slate ground, one red accent. */

/* fonts are served from this site (no outside requests): Doto for titles, Instrument Sans for text */
@font-face { font-family: "Doto"; src: url("fonts/doto-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ground: slate (blue-grey), so the red mark has a cool colour to sit against */
  --stage: #BEC5CD;
  --panel: #B2BAC3;
  --ink: #111418;
  --ink-2: #262B31;
  --muted: #434A53;
  --line: #A2AAB4;
  --red: #A80A0B;
  --red-hi: #E2231F;
  --display: "Doto", ui-monospace, "Courier New", monospace;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 6px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* saved alternative ground: add class="t-concrete" to <html> to switch */
:root.t-concrete { --stage: #D8D5CF; --panel: #CBC8C1; --ink: #151416; --ink-2: #29282B; --muted: #555359; --line: #B5B2AB; --red: #B80B0C; --red-hi: #E2231F; }

* { box-sizing: border-box; }
html { background: var(--stage); scroll-behavior: smooth; scrollbar-gutter: stable; }   /* hiding the scrollbar while a film is open must not shift the page sideways */
/* Lenis (smooth scroll) takes over scrolling when it runs */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body { margin: 0; background: var(--stage); color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: #F4F4F2; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- particle field ---------- */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .bar { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-inline: var(--gutter); padding-block: calc(20px + env(safe-area-inset-top, 0px)) 14px; pointer-events: none; transition: background-color 300ms ease; }
.bar.solid { background: linear-gradient(var(--stage) 55%, transparent); }
.name { font-family: var(--display); font-weight: 900; font-size: 23px; letter-spacing: 0.06em; line-height: 1; pointer-events: auto; text-decoration: none; }
.bar nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-size: 15px; pointer-events: auto; }
.bar nav a { color: var(--muted); text-decoration: none; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .bar nav a:hover { color: var(--ink); } }
.bar nav a.cta { color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 6px 14px; margin-block: -7px; transition: background-color 160ms ease, color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .bar nav a.cta:hover { background: var(--ink); color: var(--stage); } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100dvh; }
.hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; pointer-events: none; }
.intro { max-width: min(100%, 820px); display: grid; gap: 10px; }
.intro h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 76px); line-height: 1; letter-spacing: -0.01em; text-wrap: balance; }
.intro p, .hint { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.hint { font-size: 14px; text-align: right; max-width: 26ch; }
/* the opening: once the logo has filled, the words rise in one after another */
.opening .hero-copy .intro > *, .opening .hero-copy .hint { opacity: 0; transform: translateY(14px); }
.opening.opening-on .hero-copy .intro > *, .opening.opening-on .hero-copy .hint { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.opening.opening-on .hero-copy .intro > :nth-child(2) { transition-delay: 110ms; }
.opening.opening-on .hero-copy .hint { transition-delay: 240ms; }

/* ---------- featured films: each frame is empty until the pour fills it ---------- */
.reel { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 8vh 22vh; display: grid; row-gap: 52vh; }
.shot { display: grid; align-items: end; column-gap: clamp(24px, 4vw, 72px); row-gap: 22px; }
/* each frame keeps the shape of its film: --ar is width / height, set on the element */
.shot-frame { --film: 0; --ar: 1.7778; position: relative; display: block; aspect-ratio: var(--ar); max-width: 100%; border-radius: 2px; overflow: hidden; pointer-events: none; }   /* nearly square, so the picture of particles and the film line up at the corners */
/* no zoom on hover here: the pixels are cut from the unzoomed picture, so a zoomed film jumped as it turned to pixels */
.shot-frame video { width: 100%; height: 100%; object-fit: cover; opacity: var(--film); }
.shot-frame.live { pointer-events: auto; }
.shot-copy { display: grid; gap: 8px; justify-items: start; align-content: end; }
.shot-copy h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
.shot-copy p { margin: 0; color: var(--muted); font-size: 15px; }
.watch { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--ink); font: 500 15px/1.5 var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; text-decoration-thickness: 2px; cursor: pointer; }
.shot-frame.live { cursor: pointer; }
/* a wide film beside its title */
.s1 { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.s1 .shot-frame { grid-column: 2; grid-row: 1; width: 100%; }
.s1 .shot-copy { grid-column: 1; grid-row: 1; }
/* a vertical film (add class "tall" to the shot): sized by the screen height, just off centre */
.shot.tall { grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.4fr); }
.shot.tall .shot-frame { grid-column: 2; grid-row: 1; height: min(80vh, 900px); width: auto; }
.shot.tall .shot-copy { grid-column: 1; grid-row: 1; justify-self: end; }
/* the wide film: centred, full column */
.s3 { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.s3 .shot-frame { width: min(100%, 1180px); }
.s3 .shot-copy { width: min(100%, 1180px); }
.still .shot-frame video { opacity: 1; }

/* ---------- more work: one compact grid ---------- */
.work { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); padding-block: clamp(40px, 8vh, 96px) clamp(64px, 10vh, 120px); display: grid; gap: clamp(24px, 3vw, 36px); }
.work-head { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; }
.work-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.01em; }
.work-head p { margin: 0; color: var(--muted); font-size: 16px; max-width: 40ch; }
/* bento: two wide films on the left, two tall films beside them */
.grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b c" "d b c"; gap: 14px; }
.tile { position: relative; display: block; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: #0B0909; color: #F4F4F2; text-align: left; cursor: pointer; font: inherit; }
.t-wide { aspect-ratio: 16 / 9; }
.tile-media, .tile-media img, .tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.tile-media video { opacity: 0; transition: opacity 300ms ease; }
.tile.previewing .tile-media video { opacity: 1; }
.tile-media { transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile-media { transform: scale(1.035); } }
.tile:active .tile-media { transform: scale(0.99); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 10, 0.72), rgba(8, 8, 10, 0) 48%); pointer-events: none; }
.tile-text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: grid; gap: 4px; }
.tile-title { font-family: var(--display); font-weight: 900; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; }
.tile-meta { font-size: 14px; color: rgba(244, 244, 242, 0.82); }
.tile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- the player ---------- */
.veil { position: fixed; inset: 0; z-index: 10; background: var(--stage); opacity: 0; pointer-events: none; transition: opacity 450ms ease; }
.veil.on { opacity: 1; pointer-events: auto; }
.viewer { position: fixed; inset: 0; z-index: 12; }
.viewer[hidden] { display: none; }
.viewer-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }   /* the film keeps its place when the stills below it arrive */
.viewer-in { max-width: 1180px; margin: 0 auto; padding: clamp(64px, 9vh, 96px) var(--gutter) 72px; display: grid; gap: 28px; }
.viewer-media { --ar: 1.7778; justify-self: center; width: min(100%, calc((100svh - 190px) * var(--ar))); aspect-ratio: var(--ar); border-radius: 2px; overflow: hidden; }
.viewer-media video { width: 100%; height: 100%; display: block; object-fit: cover; background: transparent; opacity: 0; transition: opacity 350ms ease; }
.viewer-text { display: grid; gap: 12px; max-width: 760px; width: 100%; justify-self: center; opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.viewer.ready .viewer-media video { opacity: 1; }
.viewer.ready .viewer-text { opacity: 1; transform: none; }
.viewer-text h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 4vw, 56px); line-height: 1; letter-spacing: -0.01em; }
.viewer-text p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 60ch; }
.viewer-text .v-meta { color: var(--muted); font-size: 15px; }
.viewer-text .v-note { color: var(--muted); font-size: 13px; }
.v-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
.v-extras figure { margin: 0; }
.v-extras img, .v-extras video { width: 100%; display: block; border-radius: var(--radius); background: #0B0909; }
.v-passes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.v-passes video { aspect-ratio: 9 / 16; object-fit: cover; }
.v-extras figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }
.viewer-close { position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); right: var(--gutter); z-index: 13; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--stage) 80%, transparent); color: var(--ink); font: 500 15px/1 var(--text); cursor: pointer; opacity: 0; transition: opacity 300ms ease, background-color 160ms ease, color 160ms ease; }
.viewer.ready .viewer-close, .viewer.closing .viewer-close { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .viewer-close:hover { background: var(--ink); color: var(--stage); } }
html.viewing { overflow: hidden; }

/* ---------- about: who, what I do, how it works ---------- */
.about { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); padding-block: clamp(96px, 16vh, 200px) clamp(48px, 8vh, 96px); display: grid; gap: clamp(40px, 6vw, 72px); }
.about-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px clamp(32px, 5vw, 80px); align-items: end; }
.about h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(32px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -0.01em; text-wrap: balance; }
.about-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.62; max-width: 46ch; }
.services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); counter-reset: svc; }
.services li { padding: 22px 24px 4px 0; display: grid; gap: 8px; align-content: start; counter-increment: svc; }
.services li::before { content: counter(svc, decimal-leading-zero); font: 500 13px/1 var(--text); color: var(--red); }
.services h3 { margin: 0; font: 900 clamp(21px, 1.9vw, 28px)/1.1 var(--display); letter-spacing: 0; }
.services p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 30ch; }
.process { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 18px clamp(32px, 5vw, 80px); border-top: 1px solid var(--line); padding-top: 22px; }
.process h3 { margin: 0; font: 500 15px/1.5 var(--text); color: var(--muted); }
.process ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; }
.process li { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.process li span { display: block; margin-bottom: 4px; font: 900 19px/1.2 var(--display); color: var(--ink); }

/* ---------- start a project ---------- */
.start { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); padding-block: clamp(72px, 12vh, 150px) 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.start-head { display: grid; gap: 16px; position: sticky; top: 110px; }
.start h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5.4vw, 84px); letter-spacing: -0.01em; line-height: 1.02; }
.start-head p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 38ch; }
.start-head .direct { color: var(--muted); font-size: 15px; }
.start-head .direct a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* WhatsApp: a pill like the top bar's "Start a project" */
.start-head .wa + .wa { margin-top: -6px; }
.wa { justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 15px; line-height: 1; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }
.wa svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.wa .wa-num { color: var(--muted); font-variant-numeric: tabular-nums; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .wa:hover { background: var(--ink); color: var(--stage); } .wa:hover .wa-num { color: var(--line); } }
.wa:active { transform: scale(0.97); }
.brief { display: grid; gap: 28px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { display: grid; gap: 8px; }
.field span, .chips legend, .budget label { font-size: 14px; color: var(--muted); }
.field input, .field textarea { width: 100%; font: 400 16px/1.5 var(--text); color: var(--ink); background: color-mix(in srgb, var(--stage) 55%, #fff); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; transition: border-color 160ms ease, box-shadow 160ms ease; }
.field textarea { resize: vertical; min-height: 136px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent); }
.field [aria-invalid="true"] { border-color: var(--red); }
.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 10px; }
.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-set label { position: relative; }
.chip-set input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-set span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--ink-2); background: color-mix(in srgb, var(--stage) 55%, #fff); transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.chip-set input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--stage); }
.chip-set input:active + span { transform: scale(0.97); }
.chip-set input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.budget { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: baseline; }
.budget output { font: 900 clamp(28px, 2.8vw, 40px)/1 var(--display); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.budget input[type="range"] { --fill: 36.4%; grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.budget input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--red), var(--red)) 0 0 / var(--fill) 100% no-repeat, var(--line); }
.budget input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--red); border: 4px solid var(--stage); box-shadow: 0 0 0 1px var(--red); transition: transform 160ms var(--ease-out); }
.budget input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.budget input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.budget input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--red); }
.budget input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 4px solid var(--stage); box-shadow: 0 0 0 1px var(--red); }
.budget input[type="range"]:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.budget-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -2px; color: var(--muted); font-size: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.btn { font: 500 16px/1 var(--text); color: #F4F4F2; background: var(--red); border: 0; border-radius: 999px; padding: 15px 28px; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in srgb, var(--red) 82%, #000); } }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.status { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.status.err { color: var(--red); }
.status a { color: inherit; text-underline-offset: 3px; }
.foot { padding-inline: var(--gutter); padding-block: 24px 40px; color: var(--muted); font-size: 13px; max-width: 1320px; margin: 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .about-head, .process, .start { grid-template-columns: minmax(0, 1fr); }
  .process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-head { position: static; }
  .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a a" "b c" "d d"; gap: 10px; }
  .t-tall { aspect-ratio: 9 / 16; }
}
@media (max-width: 759px) {
  .bar nav a:not(.cta) { display: none; }
  .bar nav a.cta { font-size: 14px; padding: 5px 12px; }
  .field-row, .services, .process ol { grid-template-columns: minmax(0, 1fr); }
  .services li:nth-child(n+2) { border-top: 1px solid var(--line); }
  .hint { text-align: left; }
  .reel { row-gap: 62vh; padding-block: 6vh 18vh; }
  .s1, .shot.tall { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .s1 .shot-frame, .shot.tall .shot-frame { grid-column: auto; grid-row: auto; height: auto; width: min(100%, calc(76svh * var(--ar))); }
  .s1 .shot-copy, .shot.tall .shot-copy { grid-column: auto; grid-row: auto; justify-self: stretch; width: min(100%, calc(76svh * var(--ar))); margin-inline: auto; }
  .viewer-media { width: min(100%, calc((100svh - 170px) * var(--ar))); }
  .tile-text { left: 14px; right: 14px; bottom: 12px; }
}