/* The landing page. One page, nothing to click (Niko, 2026-11-12: "This should only be a landing page. No clicks on
   anything.").
   The look follows the picture he sent the same day ("I want it to feel more like this", "Have my logo just be white"):
   fine upright lines falling from the top, bending in to one point at the middle of a dark sphere, and leaving again
   below in violet; a blue light at the core; four small words at the sphere's four points; grain over all of it. The
   picture is on the drive, creativetechneeks-site/space-landing/refs/ref-2-lines-and-sphere.png, and the numbers in
   space.js were measured from it. His mark stands where the picture has its half sun.
   Under it, the brands he has worked on, all in white ("laid out clean towards the bottom of the page"). The lines end
   where the row begins, so no logo sits on a line.
   Type: "creative" and "techneeks" are in ED Faliraki, his brand font, at the size of the picture's words. His own name
   and city are in Inter, his body face, because ED Faliraki draws a capital N like a Cyrillic letter and "Niko" stops
   reading. The picture uses one small serif for all four words; no serif is in his kit, so none was added. */
/*
Font: 		ED Faliraki
Style: 		Regular
URL: 		https://youworkforthem.com/font/T14482/ed-faliraki
Foundry: 	Emyself Design
Foundry: 	https://youworkforthem.com/designer/1196/emyself-design
Copyright:
Version: 	18
Created:	April 02, 2026
License: 	https://www.youworkforthem.com/font-license
License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
			WebFont license rules. All other parties are strictly restricted
			from using the WebFonts(s) listed without a purchased license.
			All details above must always remain unaltered and visible in your CSS.
*/
@font-face { font-family: "EDFaliraki-Regular"; src: url(/fonts/ed-faliraki-regular.woff2) format("woff2"), url(/fonts/ed-faliraki-regular.woff) format("woff");
             font-weight: normal; font-style: normal; font-display: swap; }
/* Inter, for his name and city. SIL Open Font License, see /fonts/inter-LICENSE.txt. */
@font-face { font-family: Inter; src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* One look, and it is dark. Ground and word colours are sampled from the picture. */
:root { color-scheme: dark; --ground: #0e181a; --ground-low: #0c0f10; --word: #f5fafe; --yellow: #ffe81f; --ink: #0b100e;
        --display: "EDFaliraki-Regular", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html { background: var(--ground-low); }
body { margin: 0; color: var(--word); cursor: default; overflow-x: clip;
       background: linear-gradient(180deg, #0f1a1c 0%, var(--ground) 52%, var(--ground-low) 100%);
       font: 400 16px/1 var(--display); font-synthesis: none; -webkit-font-smoothing: antialiased; }
.tag { position: fixed; z-index: 9; bottom: 14px; left: 14px; background: var(--yellow); color: var(--ink); font: 700 12px/1.5 "Helvetica Neue", Arial, sans-serif;
       padding: 3px 8px; border-radius: 3px; }
main { min-height: 100svh; display: flex; flex-direction: column; }

/* The picture. It takes a fixed share of the screen, and everything in it is sized from its own box. It must not
   stretch to fill what the brands leave: when the brands were sized from the lines and the lines from what the brands
   left, the two chased each other and the lines went blank. */
.hero { position: relative; flex: none; height: max(480px, 84svh); overflow: hidden; }   /* most of the first screen (Niko, 2026-11-12, of the whole picture: "Make this whole section larger"); the first line of brands shows under it and the rest is a short scroll */
/* The lines, the dark sphere and the light at its core are drawn here by space.js. */
.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* The sphere. Its width is the one measure in the picture: the lines are sized from it by the script, and the mark and
   the four words are placed from it here. On his picture the sphere is 58% of the width. The script sets --d from the
   hero's real size (60% of its width or 62% of its height, whichever is less); the value here is the stand-in until
   it does, and all there is if the script never runs. */
.orb { position: absolute; left: 50%; top: 50%; width: var(--d); aspect-ratio: 1; transform: translate(-50%, -50%); --d: min(64vw, 58svh); }
.mark { position: absolute; left: 50%; top: 50%; width: 52%; height: auto; transform: translate(-50%, -50%); overflow: visible;
        transition: opacity 0.9s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }

/* Four words. His name on the sphere's rim at the top and his city on it at the foot, "creative" and "techneeks" either
   side of the mark, so the name of the place reads straight across it (Niko, 2026-11-12: "Lets have Creative be and my full
   name be switched and techneeks and location switched"). No shape sits behind them; a soft shadow in the ground
   colour keeps them clear of the lines. */
h1 { margin: 0; font: inherit; }
.word { position: absolute; margin: 0; white-space: nowrap; transform: translate(-50%, -50%); user-select: none;
        font-size: clamp(15px, calc(var(--d) * 0.046), 32px); letter-spacing: 0.02em;
        text-shadow: 0 0 10px #0a1214, 0 0 22px #0a1214; transition: opacity 0.9s; }
.n { left: 50%; top: 0; }
.s { left: 50%; top: 100%; }
/* "creative" and "techneeks" sit just off the tips of the mark's ring, not out on the rim (Niko, 2026-11-12: "Bring
   creative and techneeks closer to the logo icon"). The ring's tips are at 24% and 76% of the sphere; each word is
   set 4% clear of its tip, "creative" ending there and "techneeks" starting there. */
.w { left: 20%; top: 50%; transform: translate(-100%, -50%); }
.e { left: 80%; top: 50%; transform: translate(0, -50%); }
.n, .s { font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: clamp(12px, calc(var(--d) * 0.031), 20px); letter-spacing: 0.03em; }

/* The brands. Each logo is sized to carry the same visual weight (build.py works out --h from its shape and from how
   heavily it is inked, then a trim by eye), so a long wordmark is set lower than a compact badge, a bold block smaller
   than a thin line of type, and none overpowers the rest; each is hung by where its ink balances (--y), so they sit
   on one line.
   The block was first held to the width of the lines above it. Niko, later on 2026-11-12: "Client logos can go wider
   than the lines if that makes the logo area larger. Let's just place a rule that we don't ever have a single logo
   alone in a row". So the block is wide and the logos large, and the last two logos are tied together (li.pair, made
   by build.py) so the last row can never hold just one. */
.brands { position: relative; list-style: none; margin: 0 auto; padding: 0; width: 100%; max-width: min(92vw, 1180px);
          display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
          --u: clamp(40px, 4vw, 62px); --gap: calc(var(--u) * 0.6); gap: calc(var(--u) * 0.4) var(--gap);
          padding-block: 18px 30px; }
.brands li { display: flex; align-items: center; gap: var(--gap); }
.brands .logo { display: flex; align-items: center; height: var(--u); }
.brands img { display: block; height: calc(var(--u) * var(--h)); width: auto; max-width: none; opacity: 0.88; user-select: none; -webkit-user-drag: none;
              transform: translateY(var(--y, 0%));       /* hung by where its ink balances, not by the middle of its box */
              transition: opacity 0.7s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 30ms); }
.brands .turn { display: none; }                         /* the forced turn is for the other take's two-line row */
@media (max-width: 700px) {
  .hero { height: 82svh; }
  .brands { --u: clamp(32px, 11vw, 46px); padding-block: 24px 56px; }
}

/* Film grain and a slightly darker edge, over everything. The grain tile is made by space.js. */
.grain { position: fixed; inset: 0; pointer-events: none; background-repeat: repeat;
         box-shadow: inset 0 0 22vmax rgb(0 0 0 / 0.3); }

/* The opening, only while motion is on. The script runs it (space.js); these are the states it starts from. */
.intro:not(.lit) .mark { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
.intro:not(.worded) .word { opacity: 0; }
.intro .e { transition-delay: 0.14s; }
.intro .n { transition-delay: 0.28s; }
.intro .s { transition-delay: 0.42s; }
.intro:not(.branded) .brands img { opacity: 0; transform: translateY(calc(var(--y, 0%) + 8px)); }