/*
Theme Name: Tour du Monde — Carnet Line Drawing V14
Description: Landing page « site en construction » avec véritable animation SVG line drawing.
Version: 14.0.0
*/
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#fbfaf6}
body{overflow:hidden;font-family:Georgia,"Times New Roman",serif;color:#282520}
.page{position:relative;width:100vw;height:100svh;min-height:620px;background:#fbfaf6;overflow:hidden}
.paper{position:absolute;inset:0;background:
 radial-gradient(circle at 22% 28%,rgba(105,84,55,.035),transparent 28%),
 radial-gradient(circle at 78% 72%,rgba(105,84,55,.03),transparent 30%)}
.paper:after{content:"";position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(90deg,rgba(70,55,35,.025) 0 1px,transparent 1px 8px);pointer-events:none}
.header{position:absolute;z-index:10;top:30px;left:50%;transform:translateX(-50%);width:90%;text-align:center;font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.58}
.canvas{position:absolute;z-index:2;left:50%;top:48%;width:min(1050px,96vw);height:min(690px,72vh);transform:translate(-50%,-50%)}
.canvas svg{width:100%;height:100%;overflow:visible}
.draw-group{opacity:1}
.path{vector-effect:non-scaling-stroke}

/* Each group is actually drawn by animating its SVG path length. */
#routes{animation:groupIn .5s ease .2s both}
#compass{animation:groupIn .5s ease .8s both}
#mountains{animation:groupIn .8s ease 1.1s both}
#island{animation:groupIn .8s ease 1.65s both}
#globe{animation:groupIn .95s ease 2.1s both}
#plane{animation:groupIn .55s ease 2.75s both}
#sign{animation:groupIn .65s ease 3.05s both}

.canvas .path{
 stroke-dasharray:var(--len,900);
 stroke-dashoffset:var(--len,900);
 animation:lineDraw 1.8s cubic-bezier(.45,.05,.2,1) forwards;
}

/* JS assigns a real path length to each path, so the line reveals along its own geometry. */
.copy{position:absolute;z-index:8;left:50%;bottom:7%;transform:translateX(-50%);width:min(650px,90vw);text-align:center;opacity:0;animation:copyIn .9s ease 3.65s forwards}
.kicker{font-size:9px;letter-spacing:.3em;text-transform:uppercase;opacity:.58;margin-bottom:15px}
h1{font-size:clamp(40px,5.7vw,72px);line-height:.92;font-weight:400;letter-spacing:-.045em;margin:0}
h1 em{font-style:italic}
.copy p{font-size:clamp(13px,1.25vw,17px);line-height:1.5;opacity:.72;margin:17px auto 0;max-width:530px}
.date{font-size:9px;letter-spacing:.23em;text-transform:uppercase;opacity:.52;margin-top:14px}
.pill{display:inline-block;margin-top:20px;padding:11px 23px;border:1px solid rgba(40,37,32,.42);border-radius:999px;font-size:9px;letter-spacing:.22em;text-transform:uppercase;opacity:.82}
.loading{position:absolute;z-index:10;bottom:18px;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.23em;text-transform:uppercase;opacity:.45;animation:fadeOut .7s ease 4.2s forwards}

@keyframes lineDraw{to{stroke-dashoffset:0}}
@keyframes groupIn{from{opacity:0}to{opacity:1}}
@keyframes copyIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fadeOut{to{opacity:0}}

@media(max-width:800px){
 .header{top:25px;font-size:8px;letter-spacing:.17em}
 .canvas{width:112vw;height:58vh;top:42%}
 .copy{bottom:6.5%;width:91vw}
 h1{font-size:clamp(37px,11vw,57px)}
 .copy p{font-size:14px}
 .date{font-size:8px;letter-spacing:.16em}
 .pill{font-size:8px;padding:10px 20px}
}
@media(prefers-reduced-motion:reduce){
 .canvas .path{animation:none!important;stroke-dashoffset:0!important}
 .copy{animation:none!important;opacity:1}
 .loading{display:none}
}