/* Load AFTER assets/css/style.css. Scoped to the opt-in root class. */
/* Reserve the scrollbar gutter unconditionally: --tokai-curve-height below is driven by
   100vw, which on non-overlay scrollbars includes the scrollbar's width. Without this, a
   sub-pixel change in page height (e.g. from a font swap) can toggle the scrollbar on/off,
   which changes 100vw, which changes padding driven by --tokai-curve-height, which changes
   the page height again - a feedback loop that makes the layout height inconsistent between loads. */
html.tokai-effects { scrollbar-gutter: stable; --tokai-curve-height: calc(100vw * 140 / 1440); }
.tokai-effects .pageBg { background: radial-gradient(ellipse at center,#fff 33%,#f7fbef 51%,#e4f1d1 78%,#d3e8b5 100%); }
.tokai-effects .kv__deco { animation: none !important; will-change: transform; }
.tokai-effects .kv__decoList, .tokai-effects body.is-kvScrolled .kv__decoList { opacity: calc(1.2 - var(--kv-progress)); }
.tokai-effects .kv__deco--cart { display: none; }
.tokai-effects .kv__main, .tokai-effects body.is-kvScrolled .kv__main { opacity: calc(1.2 - var(--kv-progress)); }
.tokai-effects .kv__scrollHint { transition: opacity .45s ease; }
.tokai-effects .kv__scrollHint.tokai-cue-hidden { opacity: 0 !important; pointer-events: none; }
html[data-tokai-entry="loading"]::before { content:""; position:fixed; inset:0; z-index:10000; background:#f7faef; }
.tokai-entrance { position:fixed; inset:0; z-index:10001; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#f7faef; color:#009333; opacity:1; pointer-events:all; transition:opacity .45s ease; }
.tokai-entrance__number { font:112px/1 Georgia,serif; }
.tokai-entrance__caption { font:13px Georgia,serif; letter-spacing:.2em; margin-top:8px; }
.tokai-entrance__line { width:100px; height:2px; overflow:hidden; background:#dbe9c8; margin-top:28px; }
.tokai-entrance__line::after { content:""; display:block; width:50%; height:100%; background:#009333; animation:tokai-loading 1s ease-in-out infinite; }
html[data-tokai-entry="ready"] .tokai-entrance { opacity:0; pointer-events:none; }
html[data-tokai-entry="loading"] .kv__main { opacity:0; }
html[data-tokai-entry="ready"] .kv__main { animation:tokai-logo-in 1.5s .35s both; }
@keyframes tokai-loading { from{transform:translateX(-100%)} to{transform:translateX(200%)} }
@keyframes tokai-logo-in { from{opacity:0} to{opacity:calc(1.2 - var(--kv-progress)); }}
/* Original section contours; never use cover, border-radius, or desktop-only content:none. */
.tokai-effects .campaign { padding-bottom:0; }
.tokai-effects .campaign::after,
.tokai-effects .members::after,
.tokai-effects .history::before,
.tokai-effects .history::after,
.tokai-effects .concept::before,
.tokai-effects .concept::after {
  content:""; display:block; width:100%; height:var(--tokai-curve-height); aspect-ratio:auto;
  background-repeat:no-repeat; background-size:100% 100%; background-position:center; border-radius:0; pointer-events:none;
}
.tokai-effects .campaign::after { background-image:url("../images/members-curve.svg"); margin-bottom:-1px; }
.tokai-effects .members::after { background-color:var(--color-green-dark,#009333); background-image:url("../images/newcustomer-imgGroup13.svg"); bottom:-1px; }
.tokai-effects .members { padding-bottom:max(17.5rem,calc(5rem + var(--tokai-curve-height))); }
.tokai-effects .history::before { background-image:url("../images/history-curve.svg"); transform:scaleX(-1); top:-1px; }
.tokai-effects .history::after { background-image:url("../images/voice-imgExclude.svg"); bottom:-1px; }
.tokai-effects .concept::before { background-image:url("../images/brand-curve.svg"); top:-1px; }
/* When the voice section is removed, .history sits directly before .concept.
   Its own ::after box is what actually straddles the transparent history background,
   so recolor it to white there; .concept::before sits inside .concept's own opaque
   white box (which .tokai-effects .concept sets to overflow:hidden), so any
   background-image on it there would just repaint .concept's own white anyway. */
.tokai-effects .history:has(+ .concept)::after { background-image:url("../images/voice-imgExclude-white.svg"); }
.tokai-effects .history + .concept::before { background-image:none; }
.tokai-effects .concept::after { background-image:url("../images/footer-imgExclude.svg"); bottom:-1px; }
.tokai-effects .concept { padding-top:max(7rem,var(--tokai-curve-height)); background-color:white; overflow:hidden; }
/* Enable only once the replacement SVG has actually been mounted. */
.tokai-effects .concept__wrapper.tokai-ribbon-mounted { position:relative; isolation:isolate; background-image:none; overflow:visible; }
.tokai-effects .concept__inner { position:relative; z-index:2; }
.tokai-ribbon { position:absolute; top:0; left:0; width:100%; height:auto; aspect-ratio:1440 / 955; z-index:0; pointer-events:none; }
.tokai-ribbon__trace { stroke-dasharray:1000; stroke-dashoffset:1000; }
.tokai-ribbon__complete { opacity:0; }
.tokai-ribbon.is-playing .tokai-ribbon__trace { animation:tokai-ribbon-draw var(--tokai-ribbon-duration,1.6s) linear both; }
.tokai-ribbon.is-playing .tokai-ribbon__complete { animation:tokai-ribbon-finish var(--tokai-ribbon-duration,1.6s) steps(1,end) both; }
@keyframes tokai-ribbon-draw { 0%{stroke-dashoffset:1000} 20%{stroke-dashoffset:780} 78%{stroke-dashoffset:190} 100%{stroke-dashoffset:0} }
@keyframes tokai-ribbon-finish { 0%{opacity:0} 100%{opacity:1} }
@media(max-width:767px) {
  html.tokai-effects { --tokai-curve-height:calc(100vw * 38 / 390); }
  /* Existing style.css hides this on mobile. This rule restores it. */
  .tokai-effects .campaign::after { content:""; display:block; background-image:url("../images/members-curve-mobile.svg"); }
  .tokai-effects .concept { padding-top:max(8rem,var(--tokai-curve-height)); }
  .tokai-ribbon { width:190%; left:-45%; top: 11%; }
  .tokai-effects .members { padding-bottom:max(16vw,calc(3rem + var(--tokai-curve-height))); }
  /* .kv has no scroll runway on mobile (height:auto), so --kv-progress never advances.
     Fall back to the scrollY-driven --tokai-logo-opacity set by codex-effects.js instead.
     !important is required to win over the tokai-logo-in entrance animation's filled end state. */
  .tokai-effects .kv__main, .tokai-effects body.is-kvScrolled .kv__main,
  .tokai-effects .kv__decoList, .tokai-effects body.is-kvScrolled .kv__decoList {
    opacity: max(var(--tokai-logo-opacity, 1), 0.2) !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  .tokai-entrance, .tokai-effects .kv__scrollHint { transition:none; }
  .tokai-entrance__line::after, html[data-tokai-entry="ready"] .kv__main { animation:none; }
  .tokai-ribbon__trace { stroke-dashoffset:0; }
  .tokai-ribbon__complete { opacity:1; }
  .tokai-ribbon.is-playing .tokai-ribbon__trace, .tokai-ribbon.is-playing .tokai-ribbon__complete { animation:none; }
}

/* Latest FV tuning only: preserve reviewed curves, ribbon and scroll transitions above. */
.tokai-effects .kv__deco { transform-origin:center; opacity:.96; filter:none; }
.tokai-effects .kv__deco[data-tokai-focus="far"] { filter:blur(2px); opacity:.9; }
.tokai-effects .kv__decoList { z-index:0; isolation:isolate; }
.tokai-effects .kv__main { z-index:3; }
@media(max-width:767px) { .tokai-effects .kv__deco[data-tokai-focus="far"] { filter:blur(1px); } }
@media(prefers-reduced-motion:reduce) { .tokai-effects .kv__deco { transform:none !important; } }

/* A few small distant objects fill the upper/lower lanes without crowding the logo. */
.tokai-effects .kv__deco--ambientGlow { width:clamp(40px,5vw,80px); height:auto; bottom:auto; right:auto; pointer-events:none; }
.tokai-effects .kv__deco--ambient1 { left:12%; top:12%; }
.tokai-effects .kv__deco--ambient2 { left:72%; top:20%; }
.tokai-effects .kv__deco--ambient3 { left:32%; top:83%; }
.tokai-effects .kv__deco--ambient4 { left:88%; top:74%; }
@media(max-width:767px) {
  .tokai-effects .kv__deco--ambientGlow { width:38px; }
  .tokai-effects .kv__deco--ambient1 { left:8%; top:16%; }
  .tokai-effects .kv__deco--ambient3 { left:78%; top:84%; }
  .tokai-effects .kv__deco--ambient2, .tokai-effects .kv__deco--ambient4 { display:none; }
}