:root{
    --navy-deep:#070B14;
    --navy-mid:#0F1830;
    --navy-line:#22314f;
    --rose:#E8927C;
    --rose-dim:#c97a68;
    --gold:#D4A857;
    --ivory:#F2EDE4;
    --slate:#8B95AC;
    --vh: 1vh;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{
    background:var(--navy-deep);
    color:var(--ivory);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    scroll-behavior:smooth;
  }
  body{
    scroll-snap-type:y proximity;
  }
  ::selection{background:var(--rose);color:var(--navy-deep);}

  h1,h2,h3,.display{
    font-family:'Fraunces',serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--gold);
  }

  #bg-canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
  }

  section{
    position:relative;
    z-index:1;
    min-height:calc(var(--vh) * 100);
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 6vw;
  }

  /* ---------- HERO ---------- */
  #hero{
    align-items:center;
    text-align:center;
    padding-top:env(safe-area-inset-top);
    gap:1.1rem;
  }
  #hero .eyebrow{opacity:0;animation:fadeUp 1s ease forwards 0.2s;}
  #hero h1{
    font-size:clamp(2.6rem, 13vw, 5rem);
    line-height:0.98;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 0.45s;
  }
  #hero h1 em{
    font-style:italic;
    color:var(--rose);
  }
  #hero p.lede{
    max-width:34ch;
    font-size:1.02rem;
    color:var(--slate);
    line-height:1.6;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 0.75s;
  }
  .counter{
    margin-top:0.6rem;
    display:flex;
    gap:1.6rem;
    opacity:0;
    animation:fadeUp 1.1s ease forwards 1s;
  }
  .counter .num{
    font-family:'Fraunces',serif;
    font-size:1.7rem;
    color:var(--gold);
    display:block;
  }
  .counter .lbl{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--slate);
  }
  .scroll-cue{
    position:absolute;
    bottom:calc(2rem + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.62rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--slate);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    animation:fadeUp 1s ease forwards 1.4s;
    opacity:0;
  }
  .scroll-cue .line{
    width:1px;height:28px;background:linear-gradient(var(--gold),transparent);
    animation:pulse 1.8s ease-in-out infinite;
  }

  @keyframes fadeUp{
    from{opacity:0;transform:translateY(16px);}
    to{opacity:1;transform:translateY(0);}
  }
  @keyframes pulse{
    0%,100%{opacity:0.3;}
    50%{opacity:1;}
  }

  /* ---------- SECTION HEADERS ---------- */
  .section-head{
    margin-bottom:2rem;
    max-width:80vw;
  }
  .section-head h2{
    font-size:clamp(2rem, 8vw, 3rem);
    margin-top:0.4rem;
  }
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.8s ease, transform 0.8s ease;
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- HISTOIRE (horizontal) ---------- */
  #histoire{padding-left:0;padding-right:0;}
  #histoire .section-head{padding:0 6vw;}
  .rail{
    position:relative;
    display:flex;
    gap:5vw;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2rem 8vw 3rem 6vw;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .rail::-webkit-scrollbar{height:3px;}
  .rail::-webkit-scrollbar-thumb{background:var(--navy-line);}
  .rail::before{
    content:'';
    position:absolute;
    top:50%;left:6vw;right:6vw;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--navy-line) 0 6px, transparent 6px 12px);
    z-index:0;
  }
  .stop{
    scroll-snap-align:center;
    flex:0 0 78vw;
    max-width:340px;
    position:relative;
    z-index:1;
    background:linear-gradient(180deg, var(--navy-mid), var(--navy-deep));
    border:1px solid var(--navy-line);
    border-radius:2px;
    padding:1.8rem 1.6rem 2rem;
  }
  .stop .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--rose);
    margin-bottom:1rem;
    box-shadow:0 0 0 4px rgba(232,146,124,0.15);
  }
  .stop .date{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    color:var(--gold);
    margin-bottom:0.6rem;
    display:block;
  }
  .stop h3{
    font-size:1.4rem;
    margin-bottom:0.7rem;
    font-style:italic;
    color:var(--ivory);
  }
  .stop p{
    color:var(--slate);
    font-size:0.94rem;
    line-height:1.65;
  }
  .rail-hint{
    padding:0 6vw;
    margin-top:-1.5rem;
    font-family:'IBM Plex Mono',monospace;
    font-size:0.6rem;
    letter-spacing:0.14em;
    color:var(--slate);
    text-transform:uppercase;
    opacity:0.6;
  }

  /* ---------- GALERIE (horizontal reel) ---------- */
  #galerie{padding-left:0;padding-right:0;}
  #galerie .section-head{padding:0 6vw;}
  .reel{
    display:flex;
    gap:4vw;
    overflow-x:auto;
    padding:2rem 10vw 3rem 6vw;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .reel::-webkit-scrollbar{height:3px;}
  .reel::-webkit-scrollbar-thumb{background:var(--navy-line);}
  .frame{
    scroll-snap-align:center;
    flex:0 0 68vw;
    max-width:300px;
    aspect-ratio:4/5;
    background:
      linear-gradient(160deg, rgba(232,146,124,0.10), rgba(212,168,87,0.06)),
      var(--navy-mid);
    border:1px solid var(--navy-line);
    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    transform:rotate(var(--tilt,0deg));
  }
  .frame:nth-child(1){--tilt:-2deg;}
  .frame:nth-child(2){--tilt:1.5deg;}
  .frame:nth-child(3){--tilt:-1deg;}
  .frame:nth-child(4){--tilt:2deg;}
  .frame img{
    width:100%;height:100%;object-fit:cover;display:none;
  }
  .frame img[src]:not([src=""]){display:block;}
  .frame .placeholder{
    text-align:center;
    color:var(--slate);
    font-family:'IBM Plex Mono',monospace;
    font-size:0.68rem;
    letter-spacing:0.1em;
    padding:1rem;
  }
  .frame .placeholder .num{
    display:block;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:2.4rem;
    color:var(--rose-dim);
    margin-bottom:0.4rem;
  }
  .frame .corner{
    position:absolute;
    width:14px;height:14px;
    border:1px solid var(--gold);
    opacity:0.5;
  }
  .frame .corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;}
  .frame .corner.br{bottom:10px;right:10px;border-left:0;border-top:0;}

  /* ---------- FINALE ---------- */
  #finale{
    align-items:center;
    text-align:center;
    gap:1.4rem;
    padding-bottom:env(safe-area-inset-bottom);
  }
  #finale h2{
    font-size:clamp(2.2rem, 10vw, 4rem);
    font-style:italic;
    max-width:16ch;
    line-height:1.08;
  }
  #finale h2 .rose{color:var(--rose);}
  #finale p{
    max-width:36ch;
    color:var(--slate);
    line-height:1.7;
    font-size:0.98rem;
  }
  .signature{
    margin-top:1.2rem;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:1.15rem;
    color:var(--gold);
  }
  .signature span{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-style:normal;
    font-size:0.6rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--slate);
    margin-top:0.5rem;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  @media (min-width:700px){
    section{padding:0 10vw;}
    .rail,.reel{padding-left:10vw;}
  }