/* ─────────────────────────────────────────────────────────────
   corywilliams.com.au — placeholder
   Built on now.corywilliams.com.au's system: same tokens, type,
   headline reveal and tile entrance. Dark first; light follows the
   OS until the visitor picks a side.
   Tokens → base → top bar → hero → tiles → footer → motion
   ───────────────────────────────────────────────────────────── */

/* ── Tokens (now.'s, unchanged) ────────────────────────────────── */
:root {
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --page: 1296px;
  --gutter: 72px;
  --tile: 260px;
  --tile-radius: 60px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

/* dark is also the fallback before the theme script has run */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E100F;
  --ink: 255 252 225;               /* cream, as RGB for alpha mixes */
  --text: rgb(var(--ink));
  --text-70: rgb(var(--ink) / .7);
  --text-55: rgb(var(--ink) / .55);
  --hairline: rgb(var(--ink) / .08);
  --tile-shadow: drop-shadow(0 24px 22px rgb(0 0 0 / .5));
  --c-sleep: #9D95FF;  --c-move: #FF8709;  --c-listen: #FEA6E1;  --c-music: #0AE448;
  --sync-on: #A6FF00;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F5F2EA;
  --ink: 23 21 15;
  --text: rgb(var(--ink));
  --text-70: rgb(var(--ink) / .72);
  --text-55: rgb(var(--ink) / .62);
  --hairline: rgb(var(--ink) / .07);
  --tile-shadow: drop-shadow(0 16px 16px rgb(23 21 15 / .13)) drop-shadow(0 2px 2px rgb(23 21 15 / .07));
  --c-sleep: #5D4FE8;  --c-move: #D95F00;   /* now. uses #F26B00; darkened to clear 3:1 on the cream */  --c-listen: #D6339A;  --c-music: #0E9F3E;
  --sync-on: #0B7F31;   /* now. uses #12A140; darkened to clear 4.5:1 at 17–20px */
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

main, .topbar, .footer { width: min(var(--page), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ── Top bar ──────────────────────────────────────────────────── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 36px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: -.04em; text-decoration: none; }
.topbar-actions { display: flex; align-items: center; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; }

/* top bar speaks in the headline's voice, as on now.: "Currently available for work · ☾ Lights off" */
.sync { color: var(--text-55); white-space: nowrap; }
.sync-time { color: var(--sync-on); transition: color .3s; }
.topbar-sep { width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--ink) / .25); flex: none; }

/* theme switch, as on now.: "☾ Lights off" / "☀ Lights on" */
.theme-switch {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 0;
  letter-spacing: inherit; white-space: nowrap; color: rgb(var(--ink) / .88); transition: color .2s;
}
.theme-switch:hover { color: var(--text); }
.theme-switch:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.theme-icon { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--sun) center / contain no-repeat; mask: var(--sun) center / contain no-repeat; transition: rotate .5s var(--ease-out); }
:root[data-theme="dark"] .theme-icon { -webkit-mask-image: var(--moon); mask-image: var(--moon); }
.theme-switch:hover .theme-icon { rotate: -18deg; }
.theme-word { display: inline-grid; }
.theme-word::before, .theme-word::after { grid-area: 1 / 1; }
.theme-word::before { content: 'Lights on'; }
.theme-word::after { content: 'Lights off'; visibility: hidden; }
:root[data-theme="dark"] .theme-word::before { visibility: hidden; }
:root[data-theme="dark"] .theme-word::after { visibility: visible; }
:root {
  --sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath transform='rotate(-45 50 50)' d='M6 40 L56 45.5 L56 24 L96 50 L56 76 L56 54.5 L6 60 Z'/%3E%3C/svg%3E");
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero { padding-top: 96px; }
.headline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(46px, 7.8vw, 112px); line-height: 1; letter-spacing: -.03em;
  text-align: center; max-width: 1296px; margin-inline: auto; text-wrap: balance;
}
.lede {
  font-size: 20px; line-height: 1.5; color: var(--text-70);
  text-align: center; max-width: 680px; margin: 32px auto 0; text-wrap: pretty;
}

/* load (from now.): hidden until the font is ready, then each word slides up from
   behind its mask in reading order (failsafe: shows anyway after 3s) */
.reveal .headline:not(.is-ready), .reveal .hero:not(.is-in) .lede { opacity: 0; animation: failsafe 0s 3s forwards; }
@keyframes failsafe { to { opacity: 1; } }
:is(.headline, .lede) :is(.w, .wi) { display: inline-block; }
.headline.is-ready .w { clip-path: inset(-.2em -.15em -.22em -.15em); }
.headline.is-ready .wi { animation: rise 1.15s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(100ms + var(--word, 0) * 55ms); }
.hero.is-in .lede .w { clip-path: inset(-.2em -.15em -.3em -.15em); }
.hero.is-in .lede .wi { animation: rise .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--lede-at, 0ms) + var(--word, 0) * 12ms); }
@keyframes rise { from { translate: 0 1.5em; } }
.headline .wp { color: var(--text); }

.hl-sleep { color: var(--c-sleep); } .hl-move { color: var(--c-move); } .hl-listen { color: var(--c-listen); } .hl-music { color: var(--c-music); }

/* desktop: three tiles fanned on an arc */
.fan { position: relative; height: 380px; margin-top: 64px; }
.tile-slot {
  --x: 0px; --y: 0px; --r: 0deg;
  position: absolute; left: 50%; top: 30px;
  width: var(--tile); height: var(--tile); margin-left: calc(var(--tile) / -2);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  filter: var(--tile-shadow);
  transition: transform .6s var(--ease-out);
}
.tile-slot:nth-child(1) { --x: -280px; --y: 30px; --r: -8deg; z-index: 1; }
.tile-slot:nth-child(2) { --x: 0px;    --y: 0px;  --r: 0deg;  z-index: 2; }
.tile-slot:nth-child(3) { --x: 280px;  --y: 30px; --r: 8deg;  z-index: 1; }
@media (hover: hover) and (min-width: 721px) {
  .fan .tile-slot:hover { z-index: 5; }
  .fan .tile-slot:hover .tile { transform: translateY(-10px); }
}

/* entrance (from now.): once the headline has landed, tiles rise into place left to right */
.reveal .hero:not(.is-in) .tile { opacity: 0; animation: failsafe 0s 3.5s forwards; }
.hero.is-in .tile { animation: tile-in .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--tiles-at, 0ms) + var(--i, 0) * 70ms); }
.tile-slot:nth-child(2) .tile { --i: 1; } .tile-slot:nth-child(3) .tile { --i: 2; }
@keyframes tile-in { from { opacity: 0; translate: 0 48px; } 40% { opacity: 1; } }

/* ── Tiles ────────────────────────────────────────────────────── */
.tile {
  --edge: rgb(255 255 255 / .12);
  position: absolute; inset: 0; overflow: hidden; display: block;
  border-radius: var(--tile-radius);
  color: #fff; text-decoration: none;
  transition: transform .5s var(--ease-out);
}
.tile.sq { clip-path: var(--sq-clip); }
.tile::before {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--edge);
}
.tile.sq::before {
  box-shadow: none; background: var(--edge);
  -webkit-mask: var(--sq-edge) 0 0 / 100% 100%; mask: var(--sq-edge) 0 0 / 100% 100%;
}
.tile:focus-visible { outline: none; }
.fan-dots { display: none; }
.tile-slot:has(.tile:focus-visible) { outline: 2px solid var(--text); outline-offset: 6px; border-radius: calc(var(--tile-radius) + 6px); }

.tile-inner { position: absolute; inset: 0; z-index: 1; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.tile-label { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.tile-bottom { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
.tile-sub { grid-column: 1 / -1; }
/* one face for all three names */
.tile-title { font-family: var(--font-display); font-weight: 800; font-size: 52px; letter-spacing: -.04em; line-height: 1; }
.tile-sub { font-size: 13px; opacity: .65; margin-top: 8px; }
.go {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  transition: transform .3s var(--ease-out);
}
.go::before { content: ''; width: 15px; height: 15px; background: #0E100F; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.tile:hover .go { transform: scale(1.08) rotate(0deg); }

.tile-pixel { background: linear-gradient(#2B2560, #110E26); --px: #9D95FF; }
.tile-pixel .tile-label { color: #9D95FF; opacity: 1; }
:root[data-theme="light"] .tile-pixel { background: linear-gradient(#A49BFF, #5D4FE8); --px: #fff; }
:root[data-theme="light"] .tile-pixel .tile-label { color: #fff; opacity: .85; }

.tile-now { background: linear-gradient(#1D2614, #0D110A); --bar: rgb(255 255 255 / .12); --bar-on: #C8FF4D; }
.tile-now .tile-label { color: #C8FF4D; opacity: 1; }
:root[data-theme="light"] .tile-now { background: linear-gradient(#D4F86A, #8FD82E); color: #17150F; --edge: rgb(23 21 15 / .06); --bar: rgb(23 21 15 / .14); --bar-on: #17150F; }
:root[data-theme="light"] .tile-now .tile-label { color: #17150F; opacity: .75; }

.tile-type { background: linear-gradient(#3A2414, #1A0F08); --aa: #FFD166; }
.tile-type .tile-label { color: #FFD166; opacity: 1; }
:root[data-theme="light"] .tile-type { background: linear-gradient(#FFE2B8, #FFB574); color: #17150F; --edge: rgb(23 21 15 / .08); --aa: #F26B00; }
:root[data-theme="light"] .tile-type .tile-label { color: #B85C00; }

/* Pixel: a 6 × 6 loader, the trail runs round the outer ring and back round the inner */
.pixel-grid { position: absolute; top: 24px; right: 24px; z-index: 1; display: grid; grid-template-columns: repeat(6, 10px); gap: 4px; }
.pixel-grid i { width: 10px; height: 10px; border-radius: 2px; background: var(--px); opacity: var(--a, .12); }

/* Now: the awake strip from now., as a live level meter */
.now-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; height: 26px; align-items: end; margin-top: 22px; }
.now-bars i { display: block; height: 100%; border-radius: 2px; background: var(--bar); transform-origin: 50% 100%; transform: scaleY(var(--h, .6)); animation: level var(--d, 1s) ease-in-out var(--dl, 0s) infinite alternate; }
.now-bars i.on { background: var(--bar-on); opacity: .85; }
.now-bars i.now { opacity: 1; }
@keyframes level { from { transform: scaleY(var(--lo, .3)); } to { transform: scaleY(var(--hi, 1)); } }

/* Type: the specimen */
.type-art {
  position: absolute; top: -16px; right: -6px; z-index: 0;
  font-family: var(--font-display); font-weight: 800; font-size: 124px; letter-spacing: -.06em; line-height: 1;
  color: var(--aa); rotate: -10deg; transition: rotate .6s var(--ease-out), translate .6s var(--ease-out);
}
.tile-type:hover .type-art { rotate: -4deg; translate: -4px 4px; }

/* ── Footer ───────────────────────────────────────────────────── */
.footer { margin-top: 120px; padding-top: 72px; border-top: 1px solid rgb(var(--ink) / .1); }
.footer-label { font-family: var(--font-display); font-weight: 500; font-size: 28px; letter-spacing: -.02em; color: var(--text-70); }
.big-link { display: inline-flex; align-items: center; gap: .04em; margin-top: 20px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 10.6vw, 140px); letter-spacing: -.05em; line-height: .95; }
.big-link:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; border-radius: 8px; }
.big-link-text { position: relative; transition: color .3s ease-out; }
/* hover (from now.): one gradient runs across the text and the arrow */
.big-link-text::after, .big-link-arrow::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c-sleep), var(--c-listen), var(--c-move), var(--c-music), var(--c-sleep));
  background-size: calc(var(--w, 100%) * 2) 100%; background-position: calc(var(--ox, 0px) * -1) 0;
  opacity: 0; transition: opacity .3s ease-out;
}
.big-link-text::after {
  content: attr(data-text); right: -.12em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.big-link-arrow {
  position: relative; width: .62em; height: .62em; flex: none; margin-top: .16em;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
  transition: transform .4s var(--ease-out), background-color .3s ease-out;
}
.big-link:is(:hover, :focus-visible) .big-link-text { color: transparent; }
.big-link:is(:hover, :focus-visible) .big-link-arrow { transform: translate(.04em, -.04em); background-color: transparent; }
.big-link:is(:hover, :focus-visible) :is(.big-link-text, .big-link-arrow)::after { opacity: 1; animation: flow 6s linear infinite; }
@keyframes flow { to { background-position: calc(var(--ox, 0px) * -1 - var(--w, 50%) * 2) 0; } }
/* scrolled into view: the big link rises from behind its own mask, like the headline */
.big-link.will-rise { clip-path: inset(-.2em -.2em -.25em -.2em); }
.big-link.will-rise > * { animation: rise 1.15s cubic-bezier(.16, 1, .3, 1) both; animation-play-state: paused; }
.big-link.will-rise > :nth-child(2) { animation-delay: 80ms; }
.big-link.will-rise.is-in > * { animation-play-state: running; }

.footer-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; padding: 20px 0 48px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-55); }
.footer-links { display: flex; gap: 24px; }
.footer-links a { text-decoration: none; color: var(--text-70); font-weight: 500; }
.footer-links a:hover { color: var(--text); }

/* ── 404 (from now.) ──────────────────────────────────────────── */
.not-found main { min-height: calc(100svh - 120px); display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-bottom: 80px; }
.not-found .hero { padding-top: 0; }
.not-found-code { text-align: center; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-55); }
.not-found .headline { margin-top: 20px; text-align: center !important; }
.not-found .big-link { --w: 100%; align-self: center; margin-top: 0; font-size: clamp(36px, 7vw, 96px); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --gutter: 40px; }
}

@media (max-width: 720px) {
  :root { --gutter: 24px; --tile: 260px; }
  .topbar { padding-top: 20px; }
  .wordmark { font-size: 28px; }
  .topbar-actions { font-size: 17px; gap: 12px; }
  .sync-label { display: none; }           /* "Available for work · ☾" */
  .sync-time { display: inline-block; }
  .sync-time::first-letter { text-transform: uppercase; }
  .theme-word { display: none; }
  .theme-icon { width: 18px; height: 18px; }

  .hero { padding-top: 48px; }
  .headline { text-align: left; font-size: 46px; }
  .lede { text-align: left; font-size: 17px; margin-top: 24px; }

  /* the fan becomes a swipeable carousel, same order, centred on Now (from now.) */
  .fan {
    margin: 28px calc(var(--gutter) * -1) 0; height: auto;
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    padding: 24px calc(50% - var(--tile) / 2) 44px;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
  @media (pointer: fine) { .fan { cursor: grab; } }
  .fan .tile-slot {
    position: relative; left: auto; top: auto; margin: 0; flex: none; scroll-snap-align: center;
    transform: translateY(var(--dip, 0px)) rotate(var(--tilt, 0deg)) scale(var(--s, 1));
    opacity: var(--o, 1); transition: none;
  }
  .fan-dots { position: relative; z-index: 6; display: flex; justify-content: center; margin-top: -33px; min-height: 24px; }
  .fan-dots button { display: grid; place-items: center; padding: 9px; }
  .fan-dots button::before { content: ''; width: 6px; height: 6px; border-radius: 3px; background: rgb(var(--ink) / .3); transition: width .3s var(--ease-out), background-color .3s; }
  .fan-dots button:hover::before { background: rgb(var(--ink) / .55); }
  .fan-dots button[aria-current="true"]::before { width: 18px; background: rgb(var(--ink) / .9); }
  .fan-dots button:focus-visible { outline: 2px solid rgb(var(--ink) / .9); outline-offset: -4px; border-radius: 8px; }

  .footer { margin-top: 48px; padding-top: 48px; }
  .footer-label { font-size: 20px; }
  .big-link { font-size: clamp(44px, 15vw, 72px); }
}

@media (max-width: 380px) {
  .headline { font-size: 40px; }
}

/* ── Motion preferences ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .fan .tile-slot { --tilt: 0deg !important; --dip: 0px !important; }
  .reveal .headline:not(.is-ready), .reveal .hero:not(.is-in) :is(.tile, .lede) { opacity: 1; }
}