/*
 * cozy.css — Cozy Collab design system
 * The whole brand floats in white space. Sketches are hand-drawn (wobbly SVG),
 * the wordmark is rainbow, motion is gentle. No colour values live outside this file.
 */

:root {
  /* Canvas — white is sacred */
  --paper:       #ffffff;
  --paper-warm:  #fcfbf9;

  /* Pen ink (sketch faces) */
  --ink:         #1a1a1a;
  --ink-soft:    #6b6b6b;
  --ink-faint:   #b8b8b8;

  /* Rainbow wordmark palette — pulled from the logo letters */
  --r-red:       #e0564e;
  --r-blue:      #3d8bd4;
  --r-green:     #4caf6e;
  --r-yellow:    #e8c24a;
  --r-purple:    #9b6fd0;
  --r-teal:      #3fc1c9;
  --r-pink:      #e26fb0;
  --r-cyan:      #56c2e0;
  --r-olive:     #9aa23f;
  --r-brown:     #a9742f;

  /* Type */
  /* One warm, refined serif throughout (optical sizing auto-adjusts contrast).
     The serif balances the childlike logo — refined against rough. */
  --font-serif: "Space Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Holding page is a single, non-scrolling screen. Content pages (About, etc.) scroll. */
body.holding { overflow: hidden; }

/* ---- Holding page stage ---- */

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 4vmin;
}

/* Logo + the button below it, stacked and centred in the stage. */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
}

/* Constrain by BOTH width and height so the button stays in view on short
   screens (the holding page doesn't scroll). Aspect ratio is preserved. */
.logo {
  max-width: min(82vw, 620px);
  max-height: 56vh;
  width: auto;
  height: auto;
  display: block;
}

/* Entry button to the manifesto — hand-drawn wobbly box (SVG) behind a small label. */
.enter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.8em;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.enter-btn:hover,
.enter-btn:focus-visible { transform: scale(1.06); }
.enter-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pen-box {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.2s ease;
}
.enter-label {
  position: relative;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.enter-btn:hover .enter-label,
.enter-btn:focus-visible .enter-label { color: var(--r-pink); }
.enter-btn:hover .pen-box,
.enter-btn:focus-visible .pen-box { stroke: var(--r-pink); }

/* Layered logo (textjar-style): every .layer overlaps centred in the same cell,
   so transparent PNGs line up exactly on top of each other. See index.html template. */
.stack { display: grid; place-items: center; }
.stack > .layer { grid-area: 1 / 1; }
.stack img { max-width: min(82vw, 640px); max-height: 64vh; width: auto; height: auto; display: block; }

/* Each animatable element: outer .layer gets JS parallax, inner .bob gets idle motion.
   Splitting them keeps the two transforms from fighting over the same element. */
.bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: bob var(--bd, 6s) ease-in-out var(--dl, 0s) infinite;
  will-change: transform;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(var(--rot, 0.5deg)); }
}

/* ---- Nav (built but hidden on the holding page; revealed in Phase 1) ---- */

.nav {
  display: none; /* holding page: not yet */
  gap: 2rem;
  justify-content: center;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 1.5rem;
}
.nav a { color: var(--ink); text-decoration: none; }
.nav a:nth-child(1):hover { color: var(--r-blue); }
.nav a:nth-child(2):hover { color: var(--r-pink); }
.nav a:nth-child(3):hover { color: var(--r-green); }

/* ---- Fine print ---- */

.footer {
  text-align: center;
  padding: 1.25rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* ---- Content pages (About, etc.) ---- */

/* Nav is revealed on real pages (hidden on the holding page). */
body.site .nav { display: flex; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem clamp(1.25rem, 5vw, 3rem);
}
.topbar .nav { padding: 0; }

/* Sparse "coming soon" pages — centred in the viewport. */
.coming-soon {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 2rem 1.5rem 6rem;
}
.coming-soon p { margin: 0; }
.coming-soon .lead {
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem);
  line-height: 1.1;
}

/* Physics-letter canvas (manifesto). Sits above the page but never blocks clicks;
   the topbar stays above it so the nav is always reachable. */
#fx { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.topbar { position: relative; z-index: 10; }
body.fx-collapsible { cursor: pointer; }

/* Manifesto — lovefrom.com's quiet, centred feel, in our serif. Set tight:
   smaller type, snug line-height + letter-spacing, paragraphs close together. */
.manifesto {
  flex: 1;
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 11vh, 7rem) 1.5rem 5rem;
  text-align: center;
}
.manifesto p {
  /* colour is inherited from body (--ink) so .tint-* accents can override it */
  font-size: clamp(0.82rem, 0.76rem + 0.3vw, 0.96rem);
  line-height: 1.5;
  letter-spacing: -0.006em;
  margin: 0 0 1.1rem;
}
.manifesto .lead {
  font-weight: 400;
  font-size: clamp(1.05rem, 0.85rem + 0.7vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 1.8rem;
}
.manifesto .sign {
  font-style: italic;
  margin-top: 2.6rem;
  color: var(--ink-soft);
}

/* The closing invite — stylised apart: larger, italic, with a hand-drawn underline. */
.manifesto .invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-top: 2.4rem;
}
.invite-text {
  font-style: italic;
  font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.invite-line {
  width: 62%;
  max-width: 15rem;
  height: 0.7em;
  overflow: visible;
}

/* ---- Contact page — the four people ---- */
.contact-main {
  flex: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2rem, 8vh, 5rem) 1.5rem 5rem;
  text-align: center;
}
.contact-main .lead { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

/* The four people in a single row (wraps to 2, then 1, on smaller screens). */
.people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
}
@media (max-width: 820px) {
  .people { grid-template-columns: repeat(2, 1fr); row-gap: clamp(2.5rem, 6vw, 3.5rem); }
}
@media (max-width: 440px) {
  .people { grid-template-columns: 1fr; }
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.portrait {
  height: clamp(120px, 17vh, 168px);
  display: flex;
  align-items: flex-end;
  transition: transform 0.25s ease;
}
.portrait img {
  height: 100%;
  width: auto;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
  animation: floaty var(--bd, 6s) ease-in-out var(--dl, 0s) infinite;
  will-change: transform;
}
.person:hover .portrait { transform: rotate(-2deg) scale(1.03); }

/* Each portrait + icon floats on its own gentle, out-of-sync rhythm. */
.people .person:nth-child(1) .portrait img { --bd: 5.6s; --dl: -0.2s; --fy: -9px; --rot: 1.2deg; }
.people .person:nth-child(2) .portrait img { --bd: 6.4s; --dl: -1.4s; --fy: -7px; --rot: -1deg; }
.people .person:nth-child(3) .portrait img { --bd: 5.9s; --dl: -2.1s; --fy: -8px; --rot: 0.9deg; }
.people .person:nth-child(4) .portrait img { --bd: 6.8s; --dl: -0.8s; --fy: -6px; --rot: -1.3deg; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(var(--fy, -6px)) rotate(var(--rot, 0deg)); }
}

.person-name {
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0.9rem 0 0.2rem;
}
.person-role {
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
  max-width: 18rem;
}

/* Hand-drawn link icons (portfolio = globe, LinkedIn = wobbly "in"). */
.person-links { display: flex; gap: 1rem; }
.ic-link {
  display: inline-flex;
  color: var(--ink);
  transition: transform 0.2s ease;
}
.ic-link:hover { transform: scale(1.18); }
.ic {
  width: 30px;
  height: 30px;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  --fy: -3px;
  animation: floaty var(--ibd, 5s) ease-in-out var(--idl, 0s) infinite;
}
.ic-link:nth-child(1) .ic { --ibd: 4.6s; --idl: -0.5s; }
.ic-link:nth-child(2) .ic { --ibd: 5.3s; --idl: -1.9s; }
.pen-ic {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease;
}
.ic-in {
  fill: var(--ink);
  font-style: italic;
  font-size: 13px;
  transition: fill 0.2s ease;
}
.ic-link:hover .pen-ic { stroke: var(--r-blue); }
.ic-link:hover .ic-in { fill: var(--r-blue); }
.ic-link:nth-child(2):hover .pen-ic { stroke: var(--r-pink); }

/* Rainbow word accents, reused across content pages. */
.tint-red    { color: var(--r-red); }
.tint-blue   { color: var(--r-blue); }
.tint-green  { color: var(--r-green); }
.tint-pink   { color: var(--r-pink); }
.tint-purple { color: var(--r-purple); }

/* Gentle staggered rise on load (lovefrom-style settle). */
.rise { animation: rise 0.9s ease both; }
.rise:nth-child(2) { animation-delay: 0.12s; }
.rise:nth-child(3) { animation-delay: 0.24s; }
.rise:nth-child(4) { animation-delay: 0.36s; }
.rise:nth-child(5) { animation-delay: 0.48s; }
.rise:nth-child(6) { animation-delay: 0.60s; }
.rise:nth-child(7) { animation-delay: 0.72s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Projects: hand-drawn characters walking around a plain page ---- */
.sketchbook {
  flex: 1;
  position: relative;
  overflow: hidden;                 /* the walkers pace inside the page */
}

/* A project character that wanders the page (driven by js/walkers.js — random start
   each load, sporadic targets at varied speeds). Nested layers keep the motions apart:
   .walker = position (JS sets transform + a per-leg transition) · .walker-face = flip to
   face the way it's headed · .waddle = step bob (CSS). */
.walker {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: ease-in-out;
}
/* Only the drawing flips to face direction — the label stays upright. */
.walker-img { transition: transform 0.2s ease; }
.waddle {
  display: inline-block;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: waddle var(--waddle, 0.7s) ease-in-out infinite;
}
.walker-card { display: block; text-decoration: none; color: var(--ink); }
/* --fig overrides per character (e.g. reroute runs at half size). */
.walker-card img { display: block; height: var(--fig, clamp(150px, 26vh, 250px)); width: auto; }

@keyframes waddle {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-6px); }
}

/* ---- Project detail pages — "creature peeping up from the bottom" spread ---- */
/* "Sketch outside, real inside": the wandering character rises from the bottom of the
   page — the whole drawing shows (no box), its body running off the bottom edge — while
   a full story paragraph flanks each side. The inner edge of each paragraph hugs the
   head with CSS shape-outside, so the text flows around the wobbly lines, not a column. */
.project {
  flex: 1;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1rem, 4vh, 2.5rem) clamp(1rem, 4vw, 3rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hand-drawn title wordmark (assets/*-title.png), centred up top. */
.spread-title {
  width: clamp(200px, 40vw, 440px);
  height: auto;
  aspect-ratio: 4614 / 1530;        /* reserve the title's height before it loads, so the
                                       text never shifts (and the collapse effect measures
                                       letter positions correctly on first load) */
  display: block;
  margin: 0 auto clamp(0.25rem, 2vh, 1.25rem);
}

/* The stage: a full story paragraph each side; the creature peeps up between them.
   overflow:hidden clips the creature at the stage's bottom edge (so it never spills
   onto the button or footer below) — without a hard box around it on the other sides. */
.spread-stage {
  position: relative;
  overflow: hidden;
  z-index: 1;                         /* text sits above the creature layer */
  width: 100%;
  display: grid;
  /* centre column reserves the head's own space so text never lands on the drawing */
  grid-template-columns: 1fr clamp(300px, 40vw, 540px) 1fr;
  column-gap: clamp(0.75rem, 2.5vw, 2rem);
  align-items: start;
  min-height: 68vh;                   /* room for the head to peep up into */
}

/* The creature, peeping up from the bottom centre. Absolutely placed so it sits behind
   the text; its TOP edge enters at --rise (a % down the stage) and the body runs off the
   bottom, clipped by the stage's overflow — so it reads as peeping up from the page's
   bottom edge. --w sizes it (both tuned per character, inline). Not clipped on the sides
   — the full wobbly drawing shows. The drawing bobs gently. */
.spread-figure {
  position: absolute;
  left: 50%;
  top: var(--rise, 46%);
  width: var(--w, 460px);
  margin-left: calc(var(--w, 460px) / -2);   /* centre without a transform (so bob is free) */
  z-index: 0;
  pointer-events: none;
}
.spread-figure img {
  width: 100%;
  height: auto;
  display: block;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: floaty var(--bd, 6.5s) ease-in-out var(--dl, 0s) infinite;
  will-change: transform;
}

/* A full story paragraph flanking each side; the head peeps up in the centre channel
   between them, so the text frames the drawing without landing on the wobbly lines. */
.frag {
  position: relative;
  z-index: 1;                         /* text always paints above the creature */
  font-size: clamp(0.8rem, 0.72rem + 0.34vw, 0.98rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
}
.frag-l { grid-column: 1; text-align: left;  }
.frag-r { text-align: right; }

/* Right column: the second paragraph with the "learn more" button beneath it, both
   pulled to the right edge — keeps the button on the right and in view. */
.spread-side {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* The "learn more" button sits beneath the right paragraph, above the creature layer. */
.spread-side .enter-btn {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* Mobile: collapse to one centred column; the creature simply sits at the bottom. */
@media (max-width: 760px) {
  /* let the page grow & scroll (desktop clips the peeping creature; mobile shouldn't) */
  .project { overflow: visible; }
  .spread-stage { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; min-height: 0; }
  .frag { text-align: center; max-width: 32rem; }
  .spread-figure {
    position: static;
    width: clamp(240px, 82vw, 360px);
    margin: 1rem auto 0;
    order: 9;
  }
  .spread-side { align-items: center; width: 100%; }
}

/* ---- Respect reduced motion: hold still ---- */

@media (prefers-reduced-motion: reduce) {
  .bob { animation: none; }
  .rise { animation: none; }
  .portrait img, .ic { animation: none; }
  .spread-figure img { animation: none; }
  .waddle { animation: none; }
  .walker, .walker-img { transition: none; }
}