/* Mottainai Labs.
   One theme, locked light: cream, green, terracotta, matching the app.
   Tokens come from 2week-demo/web/css/app.css so the site and the product
   read as one system. */

@font-face {
  font-family: 'Onest';
  src: url('assets/onest.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream:     #f5f3ec;
  --card:      #fbfaf4;
  --ink:       #1c1c1a;
  --pine:      #085041;
  --sage:      #5e9a78;
  --terracotta:#c97b3c;   /* graphics and rules */
  --clay-text: #8a4e1e;   /* same accent, dark enough to read as text */
  --dim:       rgba(28, 28, 26, .64);
  --hairline:  rgba(28, 28, 26, .12);

  --measure: 32rem;
  --gutter: clamp(1.5rem, 5vw, 6rem);
  --bar: 64px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* Not a flat field: two very soft brand-tinted washes over the cream so the
     background has tonal movement without reading as a gradient. */
  background:
    radial-gradient(1100px 780px at 10% 6%,  color-mix(in srgb, var(--sage) 13%, transparent), transparent 62%),
    radial-gradient(900px 700px at 92% 70%,  color-mix(in srgb, var(--terracotta) 8%, transparent), transparent 60%),
    var(--cream);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Onest', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Fine grain, so the page reads as paper rather than screen. Fixed and
   pointer-events:none: grain on a scrolling container repaints every frame
   and destroys mobile framerate. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}

/* Italic correction. An italic word's final letter leans right into the space
   after it, so an even gap reads as too tight. A sliver of trailing space puts
   the optical rhythm back. */
i, em { padding-inline-end: .09em; }

a { color: var(--pine); text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--clay-text); outline-offset: 3px; border-radius: 4px; }

/* ---- top bar ---------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--bar);
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--sage) 16%, var(--cream));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--pine) 18%, transparent);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wordmark-glyph { width: 32px; height: auto; flex: none; }

.bar-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }

.bar-link {
  padding: .7rem 0;
  font-size: .9375rem;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
}
.bar-link:hover { color: var(--pine); }

/* ---- typography ------------------------------------------------------- */

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 5.6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--pine);
  text-wrap: balance;
}

h2 {
  margin: 0 0 .85rem;
  font-size: clamp(1.4375rem, 2.4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.18;
  color: var(--pine);
}

p { margin: 0 0 .85rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  margin: 1.1rem auto 0;
  max-width: 30rem;
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.45;
  color: var(--dim);
}

.note { color: var(--dim); font-size: .9375rem; }

.band { padding: clamp(4rem, 10vh, 7rem) var(--gutter); max-width: calc(var(--measure) + var(--gutter) * 2); }

/* ---- buttons ---------------------------------------------------------- */

.cta {
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--pine);
  color: var(--cream);
  border: 1px solid var(--pine);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .18s cubic-bezier(.16,1,.3,1), opacity .18s;
}
.cta:hover { opacity: .9; }
.cta:active { transform: translateY(1px); }

.cta-ghost { background: transparent; color: var(--pine); }
.cta-ghost:hover { background: color-mix(in srgb, var(--pine) 8%, transparent); opacity: 1; }

/* ---- the stage -------------------------------------------------------- */
/* The page opens bare. Scrolling paints the mark on, brings the title card in
   and out, then moves the mark bottom left and later up as copy advances. */

.stage { position: relative; }

.stage-mark {
  position: sticky;
  top: var(--bar);
  height: calc(100dvh - var(--bar));
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 0;
}

.loop-art {
  /* Capped by height as well as width. The mark is 2.04:1, so on a short
     viewport a width-only size makes it too tall and pushes the title below
     the fold. 96vh keeps mark and title on one screen at any window shape. */
  width: min(92vw, 76rem, 96vh);
  transform-origin: center;
}
.loop-svg { display: block; width: 100%; height: auto; }

/* The opening word. Sits over the mark's own box, so it is centred on exactly
   the same axis the ribbon paints along. */
.overture {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  padding: 0 var(--gutter);
}
.overture span {
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  color: var(--pine);
}
.overture small {
  font-size: clamp(.6875rem, .9vw, .8125rem);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Default is the finished mark, so any failure below still shows the logo.
   Dash runs slightly past the full path (1.04) so the flat brush ends overlap
   at the closing join instead of leaving a wedge of artwork unpainted. The
   gap is longer than the dash so nothing wraps into view at the hidden end. */
.paint-path { stroke-dasharray: 1.04 2; stroke-dashoffset: 0; }

.stage-flow {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--bar) - 100dvh);
  padding-top: 200dvh;          /* the mark owns the first two screens */
  padding-bottom: 2vh;
}

.title-card {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;    /* sits under the lifted mark, per the storyboard */
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter) 18vh;
}
.title-card h1 { max-width: 20ch; }

/* Copy sits in the upper right while the mark holds the lower left. */
.step {
  min-height: 78dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-right: var(--gutter);
  margin-left: auto;
  width: min(34rem, 42%);
}

@keyframes paint { from { stroke-dashoffset: 1.04; } to { stroke-dashoffset: 0; } }
@keyframes overture { 0% { opacity: 1; } 62%, 100% { opacity: 0; } }

/* One animation carries the mark's whole journey so the two moves cannot
   fight over the transform property. */
/* Painted centre stage, then off to the left where it stays large and cropped
   by the frame. From there it rises slowly and continuously for the rest of
   the stage, so it drifts up alongside all three copy sections. */
/* One size throughout. The parked scale is the reference; the opening beats
   match it so the mark never appears to jump size between sequences. */
/* Paints at a size that leaves room for the title, so mark and headline share
   one screen with nothing cut off. It then grows to the parked scale as the
   copy sections arrive. */
/* No holds after the paint. Every stop is a single keyframe, so the mark is
   always in motion once painting ends and it travels with the copy rather
   than settling, waiting, then moving again. */
/* Resize happens early, while the title is still scrolling up, and the mark
   holds the centre through the whole title read. It only breaks left once the
   rising text is about to reach it. */
@keyframes journey {
  0%,  16%      { transform: translate(0, 0) scale(1); }             /* painted, centred, alone */
  32%, 54%      { transform: translate(0, -19vh) scale(.58); }       /* resized, holds centre */
  72%           { transform: translate(-27vw, 20vh) scale(1.35); }   /* text arrives, breaks left */
  100%          { transform: translate(-27vw, -18vh) scale(1.35); }  /* drifts up with the sections */
}

/* The title card is a title: it is meant to arrive and leave. Body copy below
   fades in and holds, because dimming text while it is being read reads as a
   rendering fault. */
/* Opacity only. The card rises with normal scroll, so it fades out exactly as
   it reaches and starts to overlap the mark. */
@keyframes titlecard {
  0%,  26%      { opacity: 0; }
  38%, 58%      { opacity: 1; }
  70%, 100%     { opacity: 0; }
}

@keyframes rise {
  0%        { opacity: 0; transform: translateY(20px); }
  26%, 68%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(-14px); }
}

@supports (animation-timeline: view()) {
  .stage { view-timeline-name: --stage; view-timeline-axis: block; }

  .paint-path {
    stroke-dashoffset: 1.04;
    animation: paint linear both;
    animation-timeline: --stage;
    animation-range: contain 0% contain 13%;
  }
  .overture {
    animation: overture linear both;
    animation-timeline: --stage;
    animation-range: contain 0% contain 11%;
  }
  .loop-art {
    animation: journey linear both;
    animation-timeline: --stage;
    animation-range: contain 0% contain 100%;
  }
  .title-card {
    animation: titlecard linear both;
    animation-timeline: --stage;
    animation-range: contain 0% contain 100%;
  }
  .step {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 35% exit 65%;
  }
}

/* Fallback for engines without scroll-driven animations. */
.stage.js .paint-path { stroke-dashoffset: 1.04; }
.stage.js.drawn .paint-path { animation: paint 2s cubic-bezier(.33,1,.68,1) both; }
.stage.js.parked .loop-art {
  transform: translate(-21vw, 24vh) scale(.74);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.stage.js .overture { animation: overture 1.2s ease-in both; }
.stage.js .step { opacity: 0; transform: translateY(22px); }
.stage.js .step.in {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

/* The last section has no following section to cross into, so its full-height
   block leaves dead space before the boxes. Shorten just that one. */
.step:last-of-type { min-height: 46dvh; }

/* ---- legend ----------------------------------------------------------- */

.legend { list-style: none; margin: 0 0 .85rem; padding: 0; display: grid; gap: .85rem; }
.legend li {
  padding-top: .55rem;
  border-top: 2px solid var(--sage);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--dim);
}
.legend li:nth-child(2) { border-top-color: var(--terracotta); }
.legend b { display: block; color: var(--ink); font-weight: 600; }

/* ---- current state ---------------------------------------------------- */

.state { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem 1.5rem; margin: 1.25rem 0; }
.cell b { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.cell span { display: block; font-size: .9375rem; color: var(--dim); }
.cell .eval { color: var(--clay-text); font-weight: 600; }

/* ---- philosophy and contact, side by side ------------------------------ */

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  max-width: 74rem;
  margin-inline: auto;
}

.box {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hairline);
}
.box p { max-width: none; }
.box h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.box [lang="ja"] { letter-spacing: .02em; line-height: 1.3; }

.box-contact { background: color-mix(in srgb, var(--sage) 12%, var(--card)); }
.box-contact p { color: var(--dim); }

.box-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 auto; }
.card-meta { font-size: .9375rem; color: var(--dim); margin: 2rem 0 0; line-height: 1.55; }

/* ---- footer ----------------------------------------------------------- */

.foot {
  padding: 2rem var(--gutter);
  background: var(--pine);
  color: color-mix(in srgb, var(--cream) 76%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: .9375rem;
}
.foot p { margin: 0; max-width: none; }
.foot a { display: inline-block; padding: .6rem 0; color: var(--cream); }
.foot :focus-visible { outline-color: var(--cream); }

/* ---- small screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .stage-mark { position: static; height: auto; padding: 1.5rem var(--gutter) 0; }
  .loop-art { width: 100%; animation: none !important; transform: none !important; }
  .paint-path { animation: none !important; stroke-dashoffset: 0 !important; }
  /* No scroll choreography on phones, so the word would just sit on the mark. */
  .overture { display: none; }
  .stage-flow { margin-top: 0; padding-top: 0; padding-bottom: 0; }
  .title-card {
    min-height: 0; padding: 2rem var(--gutter) 1rem;
    animation: none !important; opacity: 1 !important; transform: none !important;
    text-align: left; align-items: flex-start;
  }
  .title-card .lede { margin-left: 0; }
  .step { width: 100%; min-height: 0; margin-left: 0; padding: 2.5rem var(--gutter); }
  .state { grid-template-columns: 1fr; gap: 1.1rem; }
  .duo { grid-template-columns: 1fr; }
}

/* ---- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .paint-path { animation: none !important; stroke-dashoffset: 0 !important; }
  .loop-art   { animation: none !important; }
  .overture   { animation: none !important; opacity: 0 !important; }
  .title-card { animation: none !important; opacity: 1 !important; transform: none !important; }
  .step       { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cta        { transition: none; }
  .stage.js.parked .loop-art { transition: none; }
}