/* MAYOR TRAITEUR — shared kernel. Version themes override the tokens. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);
  font-size:var(--fs-base,1rem);line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--bg)}

:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.7s;
  --pad:clamp(1.25rem,5vw,5rem);
  --max:1440px;
  --gutter:clamp(1rem,2vw,2rem);
}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{width:100%;max-width:1760px;margin-inline:auto;padding-inline:var(--pad)}

/* ---------- scroll reveal ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,var(--rv-y,32px),0);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
  transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease);transition-delay:var(--rv-d,0ms)}
[data-reveal="clip"].in{clip-path:inset(0 0 0 0)}
[data-reveal="scale"]{opacity:0;transform:scale(1.06)}
[data-reveal="scale"].in{opacity:1;transform:scale(1)}

/* ---------- split text ---------- */
.split{display:block}
/* word mode: each word masked but flowing inline so lines wrap naturally */
/* .ln is a reveal mask: pad right so italic/negative-tracking overhang isn't clipped */
.split .ln{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;
  padding-right:.06em;margin-right:-.06em;white-space:nowrap;hyphens:none}
.split .wd{display:inline-block;transform:translate3d(0,110%,0) rotate(3deg);
  transition:transform 1s var(--ease);transition-delay:var(--d,0ms);will-change:transform}
.split.in .wd{transform:none}
/* char mode: single masked line */
.split[data-split="char"] .ln{display:block}
.split .ch{display:inline-block;transform:translate3d(0,105%,0);
  transition:transform .8s var(--ease);transition-delay:var(--d,0ms)}
.split.in .ch{transform:none}

/* ---------- magnetic / cursor ---------- */
.mag{display:inline-flex;will-change:transform;
  transition:transform .5s var(--ease),background-color .4s,color .4s,border-color .4s}
#cursor{position:fixed;top:0;left:0;width:var(--cur,10px);height:var(--cur,10px);
  border-radius:50%;background:var(--accent);pointer-events:none;z-index:9999;
  mix-blend-mode:var(--cur-blend,difference);
  transform:translate3d(-50%,-50%,0);transition:width .35s var(--ease),height .35s var(--ease),
  opacity .3s,background-color .3s;opacity:0}
#cursor.on{opacity:1}
#cursor.grow{--cur:64px}
@media (hover:none),(prefers-reduced-motion:reduce){#cursor{display:none!important}}

/* ---------- page transition ---------- */
#curtain{position:fixed;inset:0;z-index:9998;background:var(--curtain,var(--fg));
  transform:scaleY(0);transform-origin:bottom;pointer-events:none}
#curtain.out{transform:scaleY(1);transform-origin:bottom;transition:transform .6s var(--ease-io)}
#curtain.in{transform:scaleY(0);transform-origin:top;transition:transform .7s var(--ease-io)}

/* ---------- marquee ---------- */
.marquee{display:flex;overflow:hidden;white-space:nowrap;user-select:none;gap:0}
.marquee__t{display:flex;gap:var(--mq-gap,3rem);padding-right:var(--mq-gap,3rem);
  animation:mq var(--mq-dur,32s) linear infinite;will-change:transform}
.marquee:hover .marquee__t{animation-play-state:var(--mq-hover,paused)}
@keyframes mq{to{transform:translate3d(-100%,0,0)}}

/* ---------- media ---------- */
.media{position:relative;overflow:hidden;background:var(--muted,#eee)}
.media img{width:100%;height:100%;object-fit:cover}
.media--z img{transition:transform 1.2s var(--ease)}
.media--z:hover img{transform:scale(1.05)}
.par{will-change:transform}

/* ---------- form ---------- */
.f-row{position:relative;margin-bottom:1.75rem}
.f-row input,.f-row textarea,.f-row select{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--rule);padding:1rem 0 .65rem;outline:none;
  transition:border-color .4s var(--ease)}
.f-row textarea{resize:vertical;min-height:110px}
.f-row label{position:absolute;left:0;top:1rem;pointer-events:none;color:var(--dim);
  transition:transform .4s var(--ease),font-size .4s var(--ease),color .4s;transform-origin:left top}
.f-row input:focus~label,.f-row textarea:focus~label,
.f-row input:not(:placeholder-shown)~label,.f-row textarea:not(:placeholder-shown)~label,
.f-row select:valid~label{transform:translateY(-1.15rem) scale(.72);color:var(--accent)}
.f-row input:focus,.f-row textarea:focus,.f-row select:focus{border-color:var(--accent)}
.f-row.err input,.f-row.err textarea{border-color:#c0392b}
.f-msg{font-size:.75rem;color:#c0392b;margin-top:.35rem;display:none}
.f-row.err .f-msg{display:block}

/* ---------- utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;z-index:10000;padding:1rem 1.5rem;background:var(--fg);color:var(--bg)}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .split .wd,.split .ch{transform:none!important}
  .marquee__t{animation:none!important}
}
