/* =============================================================================
   MAGI MACHINA — Components: buttons, cards, process, metrics, tags, forms.
   Soft white cards on washi, hairlines, one ultramarine.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   <a class="btn"><span class="btn__label"><span class="btn__text" data-i18n>…
   </span></span><span class="btn__icon" aria-hidden="true"></span></a>
   The pill is painted by ::before so it can tighten on hover and give on
   press without moving the label. The label rolls up onto its own copy (a
   text-shadow parked one line below, clipped by .btn__label). The arrow
   leaves by the right while its twin comes in from the left. data-i18n sits
   on the innermost span: i18n writes textContent and would wipe the rest. */
.btn {
  --btn-fg: var(--paper);  /* ink pill, paper text — stays readable when
                              the themes swap ink/paper at night */
  --btn-bg: var(--ink);
  --btn-line: transparent;
  --btn-glow: 0 0 0 0 transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.95em;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btn-fg);
  padding: 1.08em 1.45em 1.08em 1.75em;
  border-radius: var(--radius-pill);
  transition: color var(--dur-xs) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 var(--hair) var(--btn-line), var(--btn-glow);
  transition: inset var(--dur-s) var(--ease), scale var(--dur-xs) var(--ease),
              background-color var(--dur-xs) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.btn__label {
  display: block;
  height: 1.4em;
  line-height: 1.4;
  overflow: hidden;
}
.btn__text {
  display: block;
  text-shadow: 0 1.5em currentColor;
  transition: transform var(--dur-s) var(--ease);
}
.btn__icon,
.link-arrow__icon {
  position: relative;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  overflow: hidden;
}
.btn__icon::before, .btn__icon::after,
.link-arrow__icon::before, .link-arrow__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: transform var(--dur-s) var(--ease);
}
.btn__icon::after,
.link-arrow__icon::after { transform: translateX(-135%); }

.btn:active::before { scale: 0.95; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { inset: 0.125em; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:focus-visible .btn__text { transform: translateY(-1.5em); }
  .btn:focus-visible .btn__icon::before { transform: translateX(135%); }
  .btn:focus-visible .btn__icon::after { transform: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover .btn__text { transform: translateY(-1.5em); }
  .btn:hover .btn__icon::before,
  .link-arrow:hover .link-arrow__icon::before { transform: translateX(135%); }
  .btn:hover .btn__icon::after,
  .link-arrow:hover .link-arrow__icon::after { transform: none; }
}

/* primary — the ultramarine, haloed; at night the accent lightens, so
   the label flips to deep ink to stay readable */
.btn--light { --btn-bg: var(--accent); --btn-fg: #fff; --btn-glow: var(--glow-box); }
:root[data-theme="dark"] .btn--light,
:root[data-theme="magi"] .btn--light { --btn-fg: var(--ocean-2); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-line: var(--line);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { --btn-fg: var(--accent); --btn-line: var(--accent); }
}

/* Form submit: the label rolls to "opening your mail app…" (JS) and the
   arrow becomes a check. */
.btn.is-sent .btn__icon::before,
.btn.is-sent .btn__icon::after {
  -webkit-mask-image: var(--icon-check);
  mask-image: var(--icon-check);
}
.btn.is-sent .btn__icon::before { transform: none; }
.btn.is-sent .btn__icon::after { transform: translateX(-135%); }

/* --- Arrow links ------------------------------------------------------------
   <a class="link-arrow"><span class="link-arrow__text" data-i18n>…</span>
   <span class="link-arrow__icon" aria-hidden="true"></span></a>
   Inline, so a long label wraps with its underline. A faint rule is always
   there; the full-strength one draws in from the left and leaves by the
   right (the background anchor flips instantly, only the size animates). */
.link-arrow {
  display: inline;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-soft);
  padding-bottom: 0.3em;
  background-image: linear-gradient(currentColor, currentColor),
                    linear-gradient(color-mix(in srgb, currentColor 38%, transparent),
                                    color-mix(in srgb, currentColor 38%, transparent));
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  background-position: 100% 100%, 0 100%;
  transition: background-size var(--dur-s) var(--ease);
}
.link-arrow__icon {
  display: inline-block;
  vertical-align: -0.22em;
  margin-left: 0.55em;
}
.link-arrow--down .link-arrow__icon { rotate: 90deg; }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }
}
.link-arrow:focus-visible { background-size: 100% 1px, 100% 1px; background-position: 0 100%, 0 100%; }

/* "Coming soon" under a blog post: a label, not a link. */
.post-card__soon {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* --- Numbered cards -------------------------------------------------------- */
.idx-card {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--paper-3);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
              box-shadow var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease-fade),
              color var(--dur-s) var(--ease-fade);
}
/* Cards answer the pointer: the border warms to the blue and the card lifts
   onto a softer, deeper shadow. Keyboard focus on the card's link gets the
   same answer. Hover only where hover exists (no sticky states on touch). */
.idx-card:has(a:focus-visible),
.case-card:has(a:focus-visible) {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: var(--shadow-lift);
}
@media (hover: hover) and (pointer: fine) {
  .idx-card:hover, .case-card:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: var(--shadow-lift);
  }
  .agent-card:hover { box-shadow: var(--shadow-lift); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .idx-card:hover, .case-card:hover, .agent-card:hover { transform: translateY(-3px); }
}
.idx-card__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.idx-card__title { font-size: var(--fs-md); font-weight: 560; }
.idx-card__title a { transition: color var(--dur-xs) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .idx-card__title a:hover { color: var(--accent); }
}
.idx-card__body { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.65; }

/* --- Agent cards (on the dark band) ----------------------------------------- */
.agent-card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-4);
  background: var(--paper-3);
  color: var(--ink);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease),
              background-color var(--dur-s) var(--ease-fade), color var(--dur-s) var(--ease-fade);
}
.agent-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); position: relative; }
.agent-card__name { font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 580; }
.agent-card__body { color: var(--ink-soft); position: relative; }

/* --- Tags / chips ------------------------------------------------------------- */
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.85em;
  border: var(--hair) solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
  border-radius: 999px;
  white-space: nowrap;
  justify-self: start;      /* a chip hugs its word, even as a grid item */
}

/* --- Process steps --------------------------------------------------------------- */
.process { display: grid; gap: 0; counter-reset: step; }
.process__step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: var(--hair) solid var(--line);
  align-items: start;
}
.process__step:last-child { border-bottom: var(--hair) solid var(--line); }
.process__num {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--accent);
  font-weight: 500;
}
.process__title { font-size: var(--fs-md); font-weight: 560; margin-bottom: var(--sp-1); }
/* Home: the four steps side by side on wide screens — one hairline across,
   a timeline to read left to right instead of a tall list */
@media (min-width: 861px) {
  .process--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--sp-5);
  }
  .process--row .process__step {
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    align-content: start;
  }
  .process--row .process__step:last-child { border-bottom: 0; }
  .process--row .process__title { font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
}
/* Home: the four chantiers on one row on wide screens (2×2 in between,
   stacked on phones); their titles scale down to fit the narrower columns */
.grid--axes { grid-template-columns: 1fr; }
@media (min-width: 861px) { .grid--axes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .grid--axes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
  .grid--axes .idx-card { padding: var(--sp-4) var(--sp-4) var(--sp-4); }
  .grid--axes .idx-card__title { font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.2; }
  .grid--axes .idx-card__body { font-size: 0.95rem; line-height: 1.55; }
}
/* Home formats: one line each (the lists live on the contact page); the
   ownership line and the link to the detail share one row */
.formats__more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  max-width: none;
}
.formats__more .idx-card__tech { margin-top: 0; }
.process__body { color: var(--ink-soft); }

/* --- Metrics --------------------------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); text-align: center; }
.metric { display: grid; gap: var(--sp-1); justify-items: center; }
.metric__value {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-shadow: var(--glow-strong);
}
.metric__value .unit { font-size: 0.45em; font-family: var(--font-mono); letter-spacing: 0; vertical-align: super; opacity: 0.85; }
.metric__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:root[data-theme="dark"] .section--ocean .metric__value,
:root[data-theme="magi"] .section--ocean .metric__value { color: var(--teal-1); }
:root[data-theme="dark"] .section--ocean .metric__label,
:root[data-theme="magi"] .section--ocean .metric__label { color: color-mix(in srgb, var(--sky-1) 55%, transparent); }

/* --- Case cards (use-cases) --------------------------------------------------------------- */
.case-card {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper-3);
  border: var(--hair) solid var(--line-2);
  border-radius: var(--radius);
  align-content: start;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease),
              box-shadow var(--dur-s) var(--ease), background-color var(--dur-s) var(--ease-fade),
              color var(--dur-s) var(--ease-fade);
}
.case-card__flow { display: grid; gap: var(--sp-2); }
.case-card__line { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-2); align-items: baseline; }
.case-card__k {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
.case-card__v { font-size: var(--fs-sm); color: var(--ink-soft); }
.case-card__v strong { color: var(--ink); }
.case-card__result {
  margin-top: var(--sp-2); padding-top: var(--sp-3);
  border-top: var(--hair) solid var(--line-2);
  font-size: var(--fs-base); font-weight: 560; color: var(--accent);
}

/* --- Blog cards -------------------------------------------------------------------------------- */
.post-card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: var(--hair) solid var(--line);
  align-content: start;
}
.post-card__meta {
  display: flex; gap: var(--sp-3); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase;
}
.post-card__title { font-size: var(--fs-md); font-weight: 560; }
.post-card__excerpt { color: var(--ink-soft); }

/* --- Filter bar (use-cases) ----------------------------------------------------------------------- */
.filterbar { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* one pill slides (with a small overshoot) under the active filter */
.filterbar__ind {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: var(--glow-box);
  pointer-events: none;
  transition: translate var(--dur-s) var(--ease-pop), width var(--dur-s) var(--ease-pop),
              height var(--dur-s) var(--ease-pop);
}
.filterbar__btn {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55em 1.1em;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: background var(--dur-xs) var(--ease), color var(--dur-xs) var(--ease),
              border-color var(--dur-xs) var(--ease), box-shadow var(--dur-s) var(--ease),
              transform var(--dur-xs) var(--ease);
}
.filterbar__btn:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .filterbar__btn:hover { border-color: var(--accent); color: var(--accent); }
  .filterbar__btn.is-active:hover { color: #fff; }
}
.filterbar__btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--glow-box); }
.filterbar.has-ind .filterbar__btn.is-active { background: transparent; border-color: transparent; box-shadow: none; }
:root[data-theme="dark"] .filterbar__btn.is-active,
:root[data-theme="magi"] .filterbar__btn.is-active { color: var(--ocean-2); }

/* --- Form ------------------------------------------------------------------------------------ */
.form { display: grid; gap: var(--sp-3); max-width: 38rem; }
.form__row { display: grid; gap: var(--sp-2); }
.form__label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.form__input, .form__textarea {
  width: 100%;
  background: var(--paper-3);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: border-color var(--dur-xs) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.form__input::placeholder, .form__textarea::placeholder { color: var(--ink-faint); opacity: 0.7; }
.form__input:focus, .form__textarea:focus {
  border-color: var(--accent);
}
.form__input:focus-visible, .form__textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.form__textarea { min-height: 8rem; resize: vertical; }
.form__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 600px) { .form__grid2 { grid-template-columns: 1fr; } }


/* --- Reveal on scroll: a small rise into focus (noise → signal) ------------------------------------
   An ANIMATION on the individual translate/opacity/filter properties, never
   `transform` and never `transition`: hovers own `transform` and every card
   keeps its own transition list (the old rule cancelled the lift of 29 cards).
   JS adds .is-in with --i (rank in the batch) and --d0 (wait for the hero),
   then .is-settled, which drops the animation for good. Section heads and
   [data-reveal="stagger"] cascade their children instead of moving as one. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.is-in) { opacity: 0; }
  [data-reveal].is-in:not(.is-settled),
  :is(.section__head, [data-reveal="stagger"]).is-in:not(.is-settled) > * {
    animation: mm-reveal var(--dur-l) var(--ease) backwards;
    animation-delay: calc(var(--d0, 0ms) + var(--i, 0) * var(--stagger) + var(--k, 0) * 70ms);
  }
  :is(.section__head, [data-reveal="stagger"]).is-in:not(.is-settled) { animation: none; }
  .section__head.is-in:not(.is-settled) > .section__mark,
  [data-reveal="stagger"].is-in:not(.is-settled) > .section__mark { animation-name: mm-draw; }
  /* big blocks rise without the blur: a smeared 900 px column is not focus */
  :is(.process, .study, .form, .contact-side-block, .hana-card)[data-reveal] { --reveal-blur: 0px; }
  @keyframes mm-reveal {
    from { opacity: 0; translate: 0 var(--reveal-y); filter: blur(var(--reveal-blur)); }
  }
  @keyframes mm-draw { from { scale: 0 1; } }
}
:is(.section__head, [data-reveal="stagger"]) > :nth-child(2) { --k: 1; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(3) { --k: 2; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(4) { --k: 3; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(5) { --k: 4; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(6) { --k: 5; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(7) { --k: 6; }
:is(.section__head, [data-reveal="stagger"]) > :nth-child(n+8) { --k: 7; }

/* --- FAQ accordion ----------------------------------------------------------------------------------
   Title on the left, questions on the right (golden split, top-aligned so
   the title never jumps). One answer open at a time: the height glides and
   the answer comes into focus (JS, WAAPI); the + folds into a − with a small
   overshoot. Without JS or with reduced motion: native <details>, kept
   exclusive by their shared name. */
.faq { align-items: start; }
@media (min-width: 861px) {
  .faq > .section__head { position: sticky; top: 7rem; margin-bottom: 0; }
}
.faq__list { border-top: var(--hair) solid var(--line); }
.faq__item { border-bottom: var(--hair) solid var(--line); }
.faq__q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__title {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 560;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color var(--dur-xs) var(--ease);
}
.faq__icon {
  position: relative;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-s) var(--ease-pop);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
/* with JS the icon follows the intent (the click), not the native state that
   only flips once the closing animation is over */
.faq__list.is-js .faq__item .faq__icon::after { transform: rotate(90deg); }
.faq__list.is-js .faq__item.is-on .faq__icon::after { transform: rotate(0deg); }
.faq__a > p {
  padding-bottom: var(--sp-4);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 44rem;
}
.faq__q:focus-visible { outline-offset: 4px; border-radius: var(--radius-sm); }
.faq__q:active .faq__icon { transform: scale(0.85); }
.faq__icon { transition: transform var(--dur-xs) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .faq__q:hover .faq__title { color: var(--accent); }
}

/* Second curtain: the technical name of what the card just described in
   plain language. Quiet on purpose. */
.idx-card__tech {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Process: announced duration above the body, delivered artefact below. */
.process__dur {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.process__out {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Closing CTA band. */
.cta-band__inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-4);
}
.cta-band__lead { text-align: center; }
.cta-band__note {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: color-mix(in srgb, var(--sky-1) 62%, transparent);
  max-width: 34rem;
}
:root[data-theme="light"] .cta-band__note { color: var(--ink-soft); }