/* OHI SUSHI — icônes, motion design partagé (voir l'API en tête de js/motion.js) */

/* ---------- Icônes (sprite img/icons.svg) ---------- */
.icon{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.2em;flex:none}
[dir="rtl"] .icon-flip-rtl{transform:scaleX(-1)}

/* ---------- data-reveal (l'état caché n'existe que si html.js-motion) ---------- */
.js-motion [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(14px)}
.js-motion [data-reveal="fade"]:not(.is-revealed){transform:none}
.js-motion [data-reveal]{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-motion [data-reveal="stagger"]:not(.is-revealed){opacity:1;transform:none}
.js-motion [data-reveal="stagger"]{transition:none}
.js-motion [data-reveal="stagger"] > *{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--reveal-i,0) * 60ms)}
.js-motion [data-reveal="stagger"]:not(.is-revealed) > *{opacity:0;transform:translateY(14px)}

/* ---------- data-split : mots qui montent derrière un masque ---------- */
.mo-w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em .16em;margin-block:-.06em -.16em}
.mo-wi{display:inline-block;will-change:transform}
.js-motion .mo-split .mo-wi{transition:transform .8s var(--ease),opacity .8s var(--ease);transition-delay:calc(var(--wi,0) * 70ms)}
.js-motion .mo-split:not(.is-revealed) .mo-wi{transform:translateY(108%);opacity:0}
.js-motion .mo-split.is-revealed .mo-wi{will-change:auto}

/* ---------- data-draw : traits qui se dessinent ---------- */
.js-motion .mo-draw .mo-draw-s{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease),opacity .3s linear;transition-delay:calc(var(--di,0) * 120ms)}
.js-motion .mo-draw:not(.is-revealed) .mo-draw-s{stroke-dashoffset:1;opacity:0}

/* ---------- data-float : flottement lent ---------- */
@keyframes mo-float{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,var(--float-amp,-10px),0) rotate(var(--float-rot,.8deg))}
  100%{transform:translate3d(0,0,0) rotate(0deg)}
}
[data-float]{animation:mo-float 7s ease-in-out infinite;animation-delay:var(--float-delay,0s)}

/* ---------- data-parallax / data-magnetic (propriété `translate`, compatible transform) ---------- */
[data-parallax]{will-change:translate}
[data-magnetic]{transition:translate .45s var(--ease)}
[data-magnetic].mo-mag-on{transition:translate .15s linear}

/* ---------- data-marquee ---------- */
.mo-mq{overflow:hidden;--mq-gap:2.5rem}
.mo-mq-track{display:flex;width:max-content}
.mo-mq-group{display:flex;flex:none;align-items:center;gap:var(--mq-gap);padding-inline-end:var(--mq-gap)}
.mo-mq-run .mo-mq-track{animation:mo-mq var(--mq-dur,30s) linear infinite}
.mo-mq-run.mo-mq-rtl .mo-mq-track{animation-name:mo-mq-rtl}
.mo-mq-run:hover .mo-mq-track,.mo-mq-run:focus-within .mo-mq-track,.mo-mq-off .mo-mq-track{animation-play-state:paused}
@keyframes mo-mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mo-mq-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}

/* ---------- Barre de progression de scroll ---------- */
.mo-progress{position:fixed;top:var(--header-h);inset-inline:0;z-index:91;height:2px;background:var(--plum);transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
[dir="rtl"] .mo-progress{transform-origin:100% 50%}
.mo-progress.is-on{opacity:.85}

/* ---------- Rideau d'accueil (≤ 600 ms, se retire seul, jamais bloquant) ---------- */
html.mo-intro::before,html.mo-intro::after{content:"";position:fixed;pointer-events:none}
html.mo-intro::before{inset:0;z-index:1000;background:var(--rice);animation:mo-curtain-out .42s var(--ease) .16s both}
html.mo-intro::after{z-index:1001;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;background:url("../img/site/hanko.svg") no-repeat center/contain;animation:mo-hanko-out .24s ease-out .06s both}
@keyframes mo-curtain-out{to{transform:translate3d(0,-100%,0)}}
@keyframes mo-hanko-out{to{opacity:0;transform:scale(.9)}}

/* ---------- Transition douce entre pages ---------- */
html.js-motion body{transition:opacity .15s ease-out}
html.is-leaving body{opacity:0}

/* ---------- Soulignement façon trait de pinceau (titres) ---------- */
.ink-underline{
  display:inline;padding-bottom:.18em;
  background:url("../img/site/ink-stroke.svg") no-repeat 50% 100% / 100% .32em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
[dir="rtl"] .ink-underline{background-position:100% 100%}
.js-motion .ink-underline[data-reveal]{opacity:1;transform:none;transition:background-size .6s var(--ease) .15s}
.js-motion .ink-underline[data-reveal]:not(.is-revealed){background-size:0% .32em}

/* ---------- Mobile : plus calme ---------- */
@media (max-width: 899px){
  .js-motion .mo-split .mo-wi{transition-duration:.6s;transition-delay:calc(var(--wi,0) * 45ms)}
  [data-float]{--float-amp:-5px;--float-rot:.4deg;animation-duration:9s}
  [data-parallax]{will-change:auto}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal],.js-motion [data-reveal] > *,
  .js-motion .mo-split .mo-wi{opacity:1 !important;transform:none !important;transition:none !important}
  .js-motion .mo-draw .mo-draw-s{stroke-dashoffset:0 !important;opacity:1 !important;transition:none !important}
  .js-motion .ink-underline[data-reveal]{background-size:100% .32em !important}
  [data-float],.mo-mq-track{animation:none !important}
  [data-parallax],[data-magnetic]{translate:none !important}
  .mo-mq{overflow-x:auto}
  html.js-motion body{transition:none}
  html.is-leaving body{opacity:1}
  html.mo-intro::before,html.mo-intro::after{display:none}
}