:root{
  --cw: 1921;             /* largeur canvas (paysage) */
  --ch: 1080;
  --world-h: 5400;        /* hauteur totale du monde */
  --scale: 1;
  --sky-top: #ACD6E4;     /* bleu ciel du paysage */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ background: var(--sky-top); }
body{ font-family: system-ui, sans-serif; overscroll-behavior-y:none; }

/* hauteur de scroll = durée de l'animation (réglée par JS) */
#scroll-space{ height: 700vh; }

/* fenêtre plein écran épinglée ; clip du voyage */
#viewport{
  position: sticky; top:0;
  width:100%; height:100vh;
  overflow:hidden;
  background: var(--sky-top);
}

/* ajustement à la largeur : le paysage occupe toute la largeur.
   scale appliqué depuis le coin haut-gauche => 1 unité = 1 px canvas. */
#scaler{
  position:absolute; top:0; left:0;
  width: calc(var(--cw) * 1px);
  transform-origin: top left;
  transform: scale(var(--scale));
  will-change: transform;
}

/* le monde : caméra (translation verticale en unités canvas) */
#world{
  position:absolute; top:0; left:0;
  width: calc(var(--cw) * 1px);
  height: calc(var(--world-h) * 1px);
  will-change: transform;
}

#sky{
  position:absolute; inset:0;
  background: linear-gradient(
    to top,
    #ACD6E4 0%,
    #ACD6E4 15%,     /* raccord avec le haut du paysage */
    #b9dceb 24%,
    #9cc8ea 33%,
    #7fb8e6 45%,     /* niveau des nuages */
    #6aa9e2 56%,
    #4f8ad6 62%,     /* on quitte les nuages, ça fonce */
    #37599f 71%,
    #223c78 80%,
    #131d4d 88%,
    #0a0e2e 94%,
    #04051a 100%     /* espace / nuit */
  );
}

#stars,#clouds,#plane,#particles,#photos{ position:absolute; left:0; top:0; width:100%; height:100%; }
#stars > *, #clouds > *, #plane > *, #particles > *{ position:absolute; will-change: transform, opacity; }

/* ---- photos scotchées ---- */
.photo{
  position:absolute;
  background:#fff;
  padding:14px 14px 46px;              /* cadre type polaroïd */
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  transform: rotate(var(--rot,0deg));
  will-change: transform;
}
.photo .pic{ display:block; width:100%; height:auto; background:#e9eef0; }
.photo .cap{ position:absolute; left:0; right:0; bottom:12px; text-align:center;
  font-family: 'Segoe Script','Comic Sans MS',cursive; color:#5b6b70; font-size:20px; }
/* scotch sur les 2 coins du haut */
.photo .tape{
  position:absolute; top:-18px; width:96px; height:34px;
  background: linear-gradient(180deg, rgba(224,220,180,.55), rgba(214,208,168,.5));
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.photo .tape.l{ left:-14px; transform: rotate(-42deg); }
.photo .tape.r{ right:-14px; transform: rotate(42deg); }
/* emplacement vide, cliquable pour uploader */
.photo.empty{
  background: rgba(255,255,255,.45);
  border: 3px dashed rgba(90,110,120,.55);
  box-shadow:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:auto;
}
/* seules les photos captent les clics ; tout le reste laisse passer
   (sinon le div transparent de la bulle intercepte le clic) */
#world{ pointer-events:none; }
.photo{ pointer-events:auto; }
.photo.empty .pic, .photo.empty .cap{ display:none; }
.photo.empty .add{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; aspect-ratio:3/4; color:#5b6b70; font-family:system-ui,sans-serif; text-align:center; }
.photo:not(.empty) .add{ display:none; }
.photo .add .plus{ font-size:54px; line-height:1; font-weight:300; }
.photo .add .txt{ font-size:16px; margin-top:6px; }
.photo.busy{ opacity:.5; }

/* paysage : boîte canvas collée en bas du monde */
#decor{
  position:absolute; left:0; top:0;
  width: calc(var(--cw)*1px); height: calc(var(--ch)*1px);
}
#decor img{ position:absolute; display:block; }  /* placé à sa vraie bbox par JS */

/* rond + persos : boîte canvas en bas du monde, monte au scroll */
#bubble-rig{
  position:absolute; left:0; top:0;
  width: calc(var(--cw)*1px); height: calc(var(--ch)*1px);
  will-change: transform;
}
#bubble-float{ position:absolute; inset:0; will-change: transform; transform-origin:center center; }

.layer{ position:absolute; will-change: transform, opacity; }
.layer img{ display:block; width:100%; height:100%; -webkit-user-drag:none; user-select:none; pointer-events:none; }
.layer-idle{ width:100%; height:100%; will-change: transform; }

/* imbrication des responsabilités de transform (jamais 2 systèmes sur 1 élément) :
   .char = bob idle | .char-lift = décollage (scroll) | .char-react = sursaut (beat) */
.char, .char-lift, .char-react{ position:absolute; inset:0; will-change: transform; }

/* expressions dessinées (bouche O / sourire, yeux écarquillés)
   z-index élevé : DOIT passer au-dessus du visage (sinon masqué par le blanc) */
.expr{ position:absolute; will-change: opacity; opacity:0; z-index: 50; }
.expr svg{ display:block; overflow:visible; }

.doodle{ overflow:visible; }
.star{ transform-origin:center; }