@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;700&display=swap");

:root{--cream:#fffbf3;--green:#2fbf7f;--dark:#005e31;--mono:"Courier New",Courier,monospace}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--green)}
body{font-family:var(--mono);overflow-x:hidden}.site{min-height:100vh;padding:clamp(28px,4vw,62px) clamp(24px,5vw,90px) 44px}
.identity{text-align:center;position:relative;z-index:5}.signature{width:min(76vw,920px);margin:0 auto;min-height:74px}.signature svg{width:100%;height:auto;display:block;overflow:visible}.tagline{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.08em;font-size:clamp(12px,1.25vw,19px);margin:12px 0 0;opacity:0;animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .65s forwards}
.playground{position:relative;width:min(1180px,100%);height:clamp(540px,58vw,720px);margin:8px auto 0;isolation:isolate}.face-stage{position:absolute;z-index:3;width:clamp(330px,43vw,570px);aspect-ratio:1;left:50%;top:48%;transform:translate(-50%,-50%)}.face-stage svg{width:100%;height:100%;display:block;overflow:visible}.face-stage path{opacity:0}.face-stage path.is-drawing{opacity:1}
.secret{position:absolute;z-index:2;height:auto;pointer-events:auto;user-select:none;-webkit-user-drag:none}.secret-one{width:clamp(190px,23vw,310px);left:2%;top:4%}.secret-two{width:clamp(220px,29vw,390px);left:3%;bottom:2%}.secret-three{width:clamp(210px,28vw,380px);right:0;top:30%}
.reveal-blob{position:fixed;z-index:1;width:clamp(230px,24vw,350px);aspect-ratio:1;background:url("assets/reveal-texture.png") center/contain no-repeat;left:0;top:0;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(.55);transition:opacity .18s ease,transform .42s cubic-bezier(.16,1,.3,1);will-change:left,top,transform,opacity}.reveal-blob.active{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.contact{text-align:center;position:relative;z-index:5;font-size:clamp(13px,1.15vw,17px);line-height:1.5;opacity:0;animation:fadeUp .7s cubic-bezier(.16,1,.3,1) .9s forwards}.contact p{margin:0}.contact .wait{font-weight:700}.contact a{display:block;color:var(--green);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-top:5px}.contact a+ a{margin-top:1px}
.cursor-dot{position:fixed;z-index:1000;width:11px;height:11px;border-radius:50%;background:var(--green);left:0;top:0;pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:width .2s ease,height .2s ease,opacity .15s ease;will-change:left,top}.cursor-dot.visible{opacity:1}a:hover~.cursor-dot{width:14px;height:14px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){body,*{cursor:none!important}}
@media (max-width:760px){.site{padding:28px 20px 36px}.signature{width:min(94vw,650px)}.tagline{font-size:11px;letter-spacing:.045em}.playground{height:auto;min-height:760px;margin-top:0}.face-stage{width:min(92vw,430px);top:39%;}.secret{opacity:1}.secret-one{width:190px;left:0;top:3%}.secret-two{width:235px;left:0;bottom:4%}.secret-three{width:220px;right:-15px;top:61%}.secret::before{content:""}.reveal-blob,.cursor-dot{display:none}.contact{margin-top:0}.secret{filter:none}.secret-one,.secret-two,.secret-three{background:var(--green);border-radius:50%;padding:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}.face-stage path{opacity:1!important}}

/* V2 refinements */
.signature{width:min(62vw,760px);margin:10px auto 0;min-height:66px}
.signature svg{opacity:1}
.signature svg path{visibility:hidden}
.signature.signature-ready svg path{visibility:visible}
.tagline{
  font-family:"DM Sans",Arial,sans-serif;
  font-weight:300;
  font-size:clamp(12px,1.25vw,18px);
  letter-spacing:.025em;
  margin-top:14px;
}
.face-stage{width:clamp(285px,36.5vw,485px)}
.secret{max-width:240px!important;max-height:190px!important;object-fit:contain}
.secret-one{width:clamp(150px,16vw,215px)!important}
.secret-two{width:clamp(175px,18vw,235px)!important}
.secret-three{width:clamp(150px,16vw,215px)!important}
.reveal-blob{
  width:clamp(260px,27vw,390px);
  background-image:url("assets/curseur.png");
  opacity:0;
  will-change:transform,opacity;
}
.contact{
  font-family:"DM Sans",Arial,sans-serif;
  font-size:clamp(16px,1.55vw,22px);
  line-height:1.35;
}
.contact .wait{font-weight:700}
.contact .hello{font-weight:400}
.cursor-dot{width:11px;height:11px;transition:opacity .18s ease}
@media(max-width:760px){
  .signature{width:min(86vw,600px);margin-top:4px}
  .face-stage{width:min(78vw,365px)}
  .contact{font-size:clamp(16px,4.4vw,20px)}
}

/* Cursor V2: full-size texture progressively uncovered by a circular mask */
.reveal-blob{
  opacity:1!important;
  transform:translate3d(-50%,-50%,0)!important;
  clip-path:circle(0% at 50% 50%);
  -webkit-clip-path:circle(0% at 50% 50%);
}
.cursor-dot{will-change:left,top,opacity}
.signature svg path{stroke-linecap:round;stroke-linejoin:round}
.signature .signature-b{
  stroke-dasharray:none!important;
  stroke-dashoffset:0!important;
}

/* V3 */
.reveal-blob{
  width:clamp(280px,30vw,430px)!important;
  aspect-ratio:1024/768!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
  overflow:visible!important;
}

/* V4 — curseur carré, plus grand, sans inertie de position */
.reveal-blob{
  width:clamp(330px,35.5vw,510px)!important;
  aspect-ratio:1/1!important;
  background-image:url("assets/curseur.png")!important;
  background-size:100% 100%!important;
  background-repeat:no-repeat!important;
}

/* V6 — contact links: subtle but unmistakably interactive */
.contact a{
  display:inline-block;
  color:var(--green);
  text-decoration-line:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:
    transform .22s cubic-bezier(.16,1,.3,1),
    text-decoration-thickness .22s ease,
    text-underline-offset .22s ease;
}
.contact a:hover,
.contact a:focus-visible{
  transform:translateY(-2px);
  text-decoration-thickness:3px;
  text-underline-offset:5px;
}
.contact a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:5px;
  border-radius:2px;
}

/* V7 — contact layout */
.contact a{
  display:table;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
}
.contact p + a{
  margin-top:10px;
}
.contact a + a{
  margin-top:5px;
}

/* V8 — preserve the signature's straight stroke endings */
.signature svg path{
  stroke-linecap:butt;
}

/* V9 — only the dot over the i in Maxime keeps rounded ends */
.signature svg path.maxime-i-dot{
  stroke-linecap:round;
}

/* V10 — no SVG fragments before the signature animation starts */
.signature svg path,
.signature svg line,
.signature svg polyline,
.signature svg polygon,
.signature svg circle,
.signature svg ellipse{
  visibility:hidden;
}
.signature svg path.maxime-i-dot{
  stroke-linecap:round;
  transform-box:fill-box;
  transform-origin:center;
}