/* Homepage layout (v2). Shared pieces live in tokens/base/components/chrome/characters.css. */

/* Emphasis in body copy follows the headline rule: a highlight, not italics */
main em,main mark{font-style:normal;color:inherit;background:linear-gradient(transparent 60%,var(--hl) 60%,var(--hl) 94%,transparent 94%);border-radius:.15em;padding-inline:.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scene-svg.is-offscreen,.scene-svg.is-offscreen *{animation-play-state:paused!important}

/* 1 Hero */
.hero{padding-block:clamp(var(--space-6),6vw,var(--space-8)) clamp(var(--space-7),7vw,var(--space-9))}
.hero__grid{display:grid;gap:clamp(var(--space-6),5vw,var(--space-8));align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.hero h1{max-inline-size:12ch}
.hero .lead{margin-block:var(--space-5) var(--space-6);max-inline-size:34rem}
.hero__art{position:relative;max-inline-size:420px;justify-self:center;inline-size:100%}
.portrait{position:relative;z-index:1;aspect-ratio:4/4.6;border-radius:46% 54% 50% 50% / 42% 44% 56% 58%;overflow:hidden;background:var(--tint-mikan);box-shadow:var(--shadow-lift)}
.portrait img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 18%}
.hero__art .hero-cast{position:relative;z-index:2;margin-block-start:-24%;margin-inline:-6% -2%;inline-size:108%}
.pcap{text-align:center;margin-block-start:var(--space-2);color:var(--color-text-2);font-size:var(--fs-small)}
.pcap b{color:var(--color-text);font-weight:700}

/* 2 A lot is changing */
.changes{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin-block-start:var(--space-6)}
.change{display:flex;flex-direction:column;gap:var(--space-3)}
.change .anim{border-radius:var(--radius-small);background:var(--color-canvas)}
.change h3{font-size:clamp(1.1rem,1.4vw,1.3rem)}
/* The four drawings play twice (about 5 seconds, then stop) each time a card scrolls into view.
   Kept within 5s so no pause control is needed (WCAG 2.2.2). Static without JS; off for reduced motion. */
.anim *{transform-box:fill-box;transform-origin:50% 50%}
@keyframes shuffle-a{0%,20%,100%{transform:none}40%,80%{transform:translateY(52px)}}
@keyframes shuffle-b{0%,20%,100%{transform:none}40%,80%{transform:translateY(-52px)}}
@keyframes morph-sq{0%,30%,100%{opacity:1;transform:none}50%,80%{opacity:0;transform:scale(.6) rotate(45deg)}}
@keyframes morph-ci{0%,30%,100%{opacity:0;transform:scale(.5)}50%,80%{opacity:1;transform:none}}
@keyframes travel{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes drift-l{0%,100%{transform:translateX(-14px)}50%{transform:translateX(14px)}}
@keyframes drift-r{0%,100%{transform:translateX(14px)}50%{transform:translateX(-14px)}}
@keyframes split-tl{0%,100%{transform:none}50%{transform:translate(-14px,-10px)}}
@keyframes split-tr{0%,100%{transform:none}50%{transform:translate(14px,-10px)}}
@keyframes split-bl{0%,100%{transform:none}50%{transform:translate(-14px,10px)}}
@keyframes split-br{0%,100%{transform:none}50%{transform:translate(14px,10px)}}
.morph-ci{opacity:0}
.traveller{offset-distance:100%;offset-rotate:0deg}
.change.is-playing .anim .shuffle-a{animation:shuffle-a 2.4s ease-in-out 2}
.change.is-playing .anim .shuffle-b{animation:shuffle-b 2.4s ease-in-out 2}
.change.is-playing .anim .morph-sq{animation:morph-sq 2.4s ease-in-out 2}
.change.is-playing .anim .morph-ci{animation:morph-ci 2.4s ease-in-out 2}
.change.is-playing .anim .traveller{animation:travel 2.2s ease-in-out calc(var(--i) * .3s) 2 both}
.change.is-playing .anim .drift-l{animation:drift-l 2.4s ease-in-out 2}
.change.is-playing .anim .drift-r{animation:drift-r 2.4s ease-in-out 2}
.change.is-playing .anim .split-tl{animation:split-tl 2.4s ease-in-out 2}.change.is-playing .anim .split-tr{animation:split-tr 2.4s ease-in-out 2}
.change.is-playing .anim .split-bl{animation:split-bl 2.4s ease-in-out 2}.change.is-playing .anim .split-br{animation:split-br 2.4s ease-in-out 2}

/* 3 What is expected */
.expect__intro{font-size:var(--fs-lead);max-inline-size:36rem}
.expect__rows{margin-block:var(--space-5) var(--space-7)}
.expect__rows .xl{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.2;letter-spacing:var(--track-display);max-inline-size:34ch;margin:0}
/* Each expectation gets its own coloured dot, like the 'paths' legend, so the three read as three */
.expect__rows .row{display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-4);align-items:baseline}
.expect__rows .row+.row{margin-block-start:var(--space-4)}
.expect__rows .row::before{content:"";inline-size:.55em;block-size:.55em;border-radius:50%;background:var(--dot);font-size:clamp(1.35rem,2.6vw,2rem);transform:translateY(-.05em)}
.expect__rows .row:nth-child(1){--dot:var(--jp-otan)}.expect__rows .row:nth-child(2){--dot:var(--jp-wasurenagusa-iro)}.expect__rows .row:nth-child(3){--dot:var(--jp-asamidori)}
.expect__trail{display:grid;gap:var(--space-5);align-items:end}
@media (min-width:900px){.expect__trail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.expect__trail .stmt{font-size:var(--fs-lead);max-inline-size:32rem}
.expect__trail .big{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3.6vw,2.8rem);line-height:1.1;letter-spacing:var(--track-display)}
.expect__trail .bridge{font-weight:600}

/* 4 Three ways to work together */
.offer__head h2{font-size:clamp(1.6rem,3vw,2.4rem);max-inline-size:28ch;margin-block-start:var(--space-3)}
.tiles{display:grid;gap:clamp(var(--space-4),2vw,var(--space-6));grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-block-start:var(--space-6)}
.tile .tile__art{min-block-size:0;margin-inline:calc(var(--space-6) * -.5)}
.tile .chips{margin-block:var(--space-2)}
.tile .chip{background:color-mix(in srgb,var(--color-surface) 70%,transparent)}
.tile .go{margin-block-start:auto;padding-block-start:var(--space-2);font-weight:700;color:var(--color-action);text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.2em}
.tile .go i{font-style:normal;display:inline-block;transition:transform var(--dur) var(--ease-spring)}
.tile:hover .go i,.tile:focus-visible .go i{transform:translateX(5px)}
.tile .tag{font-size:1.05rem}
/* Line the three tiles up: title, tagline, chips and link sit on shared rows */
@supports (grid-template-rows:subgrid){@media (min-width:1000px){.tiles{row-gap:0}.tiles>.tile{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:var(--space-3)}.tile .chips{align-self:start;align-content:start}.tile .go{align-self:end}}}

/* 5 Who is TMatsu */
.who__grid{display:grid;gap:clamp(var(--space-6),5vw,var(--space-8));align-items:start}
@media (min-width:900px){.who__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.who .sub{color:var(--color-text-2);margin-block:var(--space-2) var(--space-4)}
.who .hook{font-family:var(--font-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.25;letter-spacing:-.01em}
.who .who-paths{margin-block-start:var(--space-5);max-inline-size:440px}
.lg-h{font-weight:700;margin-block-end:var(--space-3)}
.legend{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
.legend li{display:flex;gap:var(--space-3);align-items:baseline}
.legend i{flex:none;inline-size:14px;block-size:14px;border-radius:50%;transform:translateY(2px)}
.legend b{font-weight:700}
.who .closing-line{margin-block-start:var(--space-5)}
.creds{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-block:var(--space-7) var(--space-5)}
.creds details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur) ease}
.creds details:hover,.creds details:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.creds summary{list-style:none;cursor:pointer;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-5);border-radius:var(--radius-card)}
.creds summary::-webkit-details-marker{display:none}
.creds .ci{flex:none;inline-size:40px;block-size:40px;border-radius:12px;background:var(--tint-asamidori);color:var(--jp-aotake-iro);display:grid;place-items:center}
.creds .ci svg{inline-size:22px;block-size:22px}
.creds .ct{flex:1;display:grid;gap:2px}
.creds .ct b{font-weight:700}
.creds .ct em{background:none;color:var(--color-text-2);font-size:var(--fs-small)}
.creds summary>i{flex:none;font-style:normal;inline-size:30px;block-size:30px;border-radius:50%;background:var(--color-action);color:var(--color-on-action);display:grid;place-items:center;font-weight:700;line-height:1;transition:transform var(--dur) var(--ease-spring)}
.creds details[open] summary>i{transform:rotate(45deg)}
.creds details>p{padding:0 var(--space-5) var(--space-5);font-family:var(--font-display);font-weight:600;line-height:1.5;max-inline-size:none}
.creds .cred-list{list-style:none;margin:0;padding:0 var(--space-5) var(--space-5);display:grid;gap:var(--space-2);font-size:var(--fs-small);line-height:1.45;color:var(--color-text)}
.creds .cred-list li{position:relative;padding-inline-start:14px;max-inline-size:none}
.creds .cred-list li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;inline-size:6px;block-size:6px;border-radius:50%;background:var(--jp-aotake-iro)}

/* 6 In their words */
.voices__head{display:flex;align-items:flex-end;justify-content:flex-start;gap:var(--space-4);flex-wrap:wrap}
.voices__head .listen{inline-size:150px;margin-block-end:-6px}
.tcard{display:flex;flex-direction:column;gap:var(--space-4);block-size:100%;border:4px solid var(--tc,var(--jp-sakura-iro))}
.tcard blockquote{margin:0;font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.4}
.tcard .who2{margin-block-start:auto;font-size:var(--fs-small);color:var(--color-text-2)}
.tcard .who2 b{color:var(--color-text);font-weight:700}
.bdg{display:inline-block;padding:.05em .6em;margin-inline:.3em;border-radius:var(--radius-pill);background:var(--tint-wasurenagusa);color:var(--color-text);font-weight:700;font-size:.8rem}
.voices .carousel{--card:min(86%,360px);margin-block-start:var(--space-5)}
.carousel__btn svg{inline-size:18px;block-size:18px}
.hero-dot{display:none}
@media (min-width:900px){.hero-dot{display:block}}

/* Mobile hero: smaller headline, buttons straight after it, the longer text below */
@media (max-width:899px){
  .hero__grid>div:first-child{display:flex;flex-direction:column;position:relative}
  .hero h1{order:1}
  .hero .actions{order:2;margin-block-start:var(--space-5)}
  .hero .lead{order:3;margin-block:var(--space-6) 0}
}
@media (max-width:600px){
  html:not([lang="ja"]) .hero h1{font-size:2rem;line-height:1.16;max-inline-size:none}
  /* more breathing room around the hero copy */
  .hero{padding-block:var(--space-8) var(--space-8)}
  .hero__grid>div:first-child{padding-inline:12px}
  .hero .actions{margin-block-start:var(--space-6)}
  .hero .lead{margin-block-start:var(--space-7);font-size:1rem;line-height:1.7}
  .hero .actions .btn{white-space:nowrap}
  .hero .actions .btn--lg{padding-inline:1.25em}
  .hero .blob--otan{translate:14% -34%}
}

/* faint shapes behind the headline (phones and tablets only) */
.hero-bg{display:none}
@media (max-width:899px){
  .hero h1,.hero .actions,.hero .lead{position:relative;z-index:1}
  .hero-bg{display:block;position:absolute;z-index:0;inset-block-start:56px;inset-inline-end:-56px;inline-size:min(70%,300px);opacity:.3;pointer-events:none}
  .hero-bg svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
  .hero-bg circle{mix-blend-mode:multiply}
  .hero-bg .hb-l,.hero-bg .hb-r,.hero-bg .hb-sq{transform-box:fill-box;transform-origin:center}
  /* on arrival: blue glides in from the left, pink fades up, they meet; then the slow drift carries on */
  .hero-bg .hb-l{animation:hb-in-l 2.4s cubic-bezier(.22,.8,.3,1) .3s both,drift-l 12s ease-in-out 2.7s infinite}
  .hero-bg .hb-r{animation:hb-in-r 2s ease-out 1s both,drift-r 12s ease-in-out 3s infinite}
  .hero-bg .hb-sq{animation:hb-turn 18s ease-in-out infinite}
}
@keyframes hb-in-l{from{transform:translateX(-340px)}to{transform:translateX(-14px)}}
@keyframes hb-in-r{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(14px)}}
@keyframes hb-turn{0%,100%{transform:rotate(0)}50%{transform:rotate(18deg)}}
@media (prefers-reduced-motion:reduce){.hero-bg *{animation:none!important}}

/* Desktop: English hero headline a size smaller (closer to the Japanese one) */
@media (min-width:900px){
  html:not([lang="ja"]) .hero h1{font-size:clamp(2.75rem,4.4vw,3.75rem);max-inline-size:13ch}
}