@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap');

    :root {
        --accent: #23B7EA;
        --accent-dark: #1591BC;
        --stamp-red: #D32F2F;
        --bg: #F9F7F1;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: 'Helvetica Neue', Arial, sans-serif;
        background-color: var(--bg);
        color: #333;
        line-height: 1.6;
        overflow-x: hidden;
    }
    h1, h2, h3 { font-family: 'Lora', Georgia, 'Times New Roman', serif; color: var(--accent); }

    section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 2px dashed #ccc;
        position: relative;
        overflow: hidden;
    }

    /* ---------- Section 1: Hero full image ---------- */
    .hero-section {
        padding: 0;
        color: white;
        background: #0d3b66;
    }
    .hero-section .hero-full-img {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        object-fit: cover;
        display: block;
    }
    /* ---------- Section 2: Itinerary full image ---------- */
    .itinerary-section {
        padding: 0;
        background: #0d3b66;
    }
    .itinerary-section img {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        object-fit: cover;
        display: block;
    }

    /* ---------- Stations 3-8 ---------- */
    .station {
        padding: 60px 20px;
        align-items: center;
    }
    .station-container {
        max-width: 1100px;
        width: 100%;
        display: flex;
        gap: 40px;
        align-items: center;
    }
    .station-left {
        flex: 1;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .station-text {
        flex: 0 0 auto;
    }
    .station-camera {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        position: relative;
    }
    .station-right {
        flex: 1;
        min-width: 300px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        align-self: center;
    }
    .station-right img {
        width: 100%;
        height: auto;
        max-height: 80vh;
        object-fit: cover;
        display: block;
    }

    .time-stamp {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--stamp-red);
        margin-bottom: 10px;
        display: inline-block;
        border: 1px solid var(--stamp-red);
        padding: 5px 15px;
        border-radius: 20px;
    }
    .title { font-size: 2.2rem; margin-bottom: 16px; }
    .quote {
        font-style: italic;
        font-size: 1.05rem;
        color: #555;
        border-left: 4px solid var(--accent);
        padding-left: 15px;
        margin-bottom: 16px;
    }

    .btn-capture {
        background-color: var(--accent);
        color: white;
        border: none;
        padding: 12px 24px;
        font-size: 1rem;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        margin-top: 15px;
    }
    .btn-capture:hover { background-color: var(--accent-dark); transform: translateY(-2px); }
    .btn-capture:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }

    .camera-box {
        width: 100%;
        aspect-ratio: 4/3;
        background-color: #eee;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    video { width: 100%; height: 100%; object-fit: cover; display: none; }
    .stamp-overlay {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 80px;
        height: 80px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="none" stroke="%23D32F2F" stroke-width="4"/><text x="50" y="55" font-size="12" fill="%23D32F2F" font-family="Arial" text-anchor="middle" font-weight="bold">CHỨNG NHẬN</text></svg>');
        background-size: cover;
        opacity: 0.8;
        display: none;
    }

    @media (max-width: 800px) {
        .station-container { flex-direction: column; }
        .station-right { order: -1; min-height: 260px; }
        .title { font-size: 1.7rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .btn-capture { transition: none; }
    }
  /* ================= FINAL RESULT ================= */
  #final{
    background:linear-gradient(180deg,#0d3a63 0%,#0a2c4d 40%,#3a2a12 100%);
    padding:12vh 6vw 14vh; display:flex; flex-direction:column; align-items:center;
    text-align:center;
  }
  #final .eyebrow{opacity:1;transform:none;color:rgba(255, 255, 255, 0.7);}
  #final h2{
    font-family:var(--serif);font-style:italic;font-size:clamp(30px,5vw,54px);
    color:#fff;margin:0 0 16px;
  }
  #final p.lead{max-width:560px;color:rgba(255,255,255,.85);font-size:14px;line-height:1.7;margin:0 0 40px;}

  .frame-wrap{
    position:relative; width: 100%; max-width: 800px; margin:0 auto 30px;
    filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));
    container-type:inline-size;
  }
  .frame-wrap img.frame-bg{width:100%;display:block;border-radius:10px;}
  .slot{
    position:absolute; overflow:hidden; border-radius:4px;
    z-index: 10;
    background:#0002;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  }
  .slot img{width:100%;height:100%;object-fit:cover;}
  .slot .empty{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#dfe9f0,#dfe9f0 8px,#eef4f8 8px,#eef4f8 16px);
    color:#7a8a96;font-size:14px;font-weight:800;
  }
  /* slot coordinates as % of frame image */
  slot.s1{left:7.2%; top:6%; width:39.6%; height:23%;}
  .slot.s2{left:53.86%; top:12.16%; width:40.8%; height:19.3%;}
  .slot.s3{left:5.25%; top:33.38%; width:40.8%; height:19.3%;}
  .slot.s4{left:53.86%; top:33.38%; width:40.8%; height:19.3%;}
  .slot.s5{left:5.25%; top:54.68%; width:40.8%; height:19.3%;}
  .slot.s6{left:53.86%; top:54.68%; width:40.8%; height:19.3%;}

  .final-fields{
    width: 100%; max-width: 800px; margin:-2vh auto 26px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  }
  .final-fields input{
    flex:1; min-width:160px; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08); color:#fff; font-size:14px;
  }
  .final-fields input::placeholder{color:rgba(255,255,255,.55);}

  .final-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

  footer{
    text-align:center;padding:28px 20px 40px;color:rgba(255,255,255,.55);font-size:12.5px;
    background:#0a2c4d;
  }


<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Âm Vang Cái Răng — Hành trình Thương Hồ Tập Sự</title>
<style>
  :root{
    --sky-top:#2fa8e6;
    --sky-mid:#1f6fae;
    --sky-deep:#0d3a63;
    --river-deep:#0a2c4d;
    --gold:#f3a71b;
    --gold-light:#ffd873;
    --sun:#f9930e;
    --terracotta:#c0392b;
    --paper:#fbf3df;
    --paper-dark:#f0e2bd;
    --ink:#0d2b45;
    --ink-soft:#254a68;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--ink);
    color:var(--paper);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}

  /* ---------- top progress / nav ---------- */
  .passport-bar{
    position:fixed;top:0;left:0;right:0;z-index:500;
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 18px;
    background:linear-gradient(180deg,rgba(10,30,50,.88),rgba(10,30,50,0));
    pointer-events:none;
  }
  .passport-bar .brand{
    font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:11px;letter-spacing:.3px;color:var(--gold-light);
    text-shadow:0 1px 4px rgba(0,0,0,.5);
    pointer-events:auto;
  }
  .stamp-tracker{
    display:flex;gap:6px;pointer-events:auto;
    background:rgba(10,30,50,.45);backdrop-filter:blur(6px);
    padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.15);
  }
  .stamp-dot{
    width:9px;height:9px;border-radius:50%;
    background:rgba(255,255,255,.25);
    border:1px solid rgba(255,255,255,.4);
    transition:.4s;
  }
  .stamp-dot.done{background:var(--gold);border-color:var(--gold-light);box-shadow:0 0 8px var(--gold);}

  /* ---------- traveling boat ---------- */
  #boat-rail{
    position:fixed; right:14px; top:0; height:100vh; width:70px;
    z-index:400; pointer-events:none;
    perspective:700px;
  }
  #boat-rail.hide{display:none;}
  #boat{
    position:absolute; left:0; top:8%;
    width:64px; transform-style:preserve-3d;
    filter:drop-shadow(0 10px 10px rgba(0,0,0,.45));
    transition:top .05s linear;
  }
  @keyframes bob{
    0%,100%{ transform: rotateX(18deg) rotateZ(-4deg) translateY(0px);}
    50%{ transform: rotateX(18deg) rotateZ(4deg) translateY(-6px);}
  }
  #boat svg{width:100%;height:auto;animation:bob 3.2s ease-in-out infinite;}

  /* ---------- generic section ---------- */
  section{position:relative;width:100%;}
  .fullbleed{
    min-height:100vh; display:flex; align-items:flex-end;
    background-size:cover;background-position:center;
    position:relative;
  }
  .fullbleed::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(6,20,35,.15) 0%, rgba(6,20,35,.35) 45%, rgba(6,20,35,.92) 100%);
  }
  .fullbleed .content{position:relative;z-index:2;width:100%;padding:8vh 8vw 9vh;}

  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:12.5px;letter-spacing:2.5px;text-transform:uppercase;
    color:var(--gold-light);font-weight:700;margin-bottom:14px;
    opacity:0;transform:translateY(14px);transition:.7s ease;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-light);display:inline-block;}
  h2.stop-title{
    font-family:var(--serif);font-style:italic;font-weight:700;
    font-size:clamp(34px,6vw,68px); margin:0 0 18px; line-height:1.05;
    color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.35);
    opacity:0;transform:translateY(20px);transition:.8s ease .05s;
  }
  p.stop-copy{
    max-width:620px;font-size:clamp(15px,1.6vw,18px);line-height:1.75;
    color:rgba(255,255,255,.92); margin:0 0 30px;
    opacity:0;transform:translateY(20px);transition:.8s ease .1s;
  }
  .in-view .eyebrow,.in-view h2.stop-title,.in-view p.stop-copy,.in-view .capture-panel{
    opacity:1;transform:translateY(0);
  }
  .capture-panel{
    opacity:0;transform:translateY(20px);transition:.8s ease .16s;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  }

  .stamp-btn{
    display:inline-flex;align-items:center;gap:10px;
    background:#3a2400; color:#fff; border:none;
    padding:14px 22px;border-radius:999px;font-weight:700;font-size:14.5px;
    box-shadow:0 8px 20px rgba(0,0,0,.35);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .stamp-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 26px rgba(0,0,0,.4);}
  .stamp-btn:disabled{opacity:.6;cursor:default;}
  .stamp-btn.secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.5);}

  .thumb-wrap{
    position:relative;width:92px;height:92px;border-radius:14px;overflow:hidden;
    border:3px solid var(--gold-light); background:rgba(0,0,0,.3);
    box-shadow:0 6px 16px rgba(0,0,0,.4);
  }
  .thumb-wrap img{width:100%;height:100%;object-fit:cover;}
  .thumb-stamp{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(10,30,20,.15);
  }
  .thumb-stamp svg{width:46px;height:46px;}

  /* camera modal */
  .cam-modal{
    position:fixed;inset:0;z-index:900;
    background:rgba(4,14,24,.88); backdrop-filter:blur(6px);
    display:none;align-items:center;justify-content:center;flex-direction:column;
    padding:20px;
  }
  .cam-modal.open{display:flex;}
  .cam-box{
    width:min(92vw,480px); background:#08151f;border-radius:22px;overflow:hidden;
    border:2px solid var(--gold); box-shadow:0 20px 60px rgba(0,0,0,.6);
  }
  .cam-video-wrap{position:relative;background:#000;aspect-ratio:4/3;}
  .cam-video-wrap video, .cam-video-wrap canvas, .cam-video-wrap img.captured{
    width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  }
  .cam-frame-hint{
    position:absolute;inset:14px;border:2px dashed rgba(255,216,115,.7);border-radius:14px;pointer-events:none;
  }
  .cam-controls{display:flex;gap:10px;padding:16px;justify-content:center;flex-wrap:wrap;}
  .cam-title{padding:16px 18px 0;font-family:var(--serif);font-style:italic;font-size:20px;color:var(--gold-light);}
  .cam-msg{padding:0 18px 12px;font-size:13px;color:#e8d9b0;opacity:.85;line-height:1.5;}
  .cam-close{position:absolute;top:14px;right:16px;background:none;border:none;color:#fff;font-size:14px;z-index:5;}
  input[type=file].hidden-file{display:none;}

  /* ================= HERO ================= */
  #hero{
    height:100vh;min-height:640px;
    background-image:url('url('assets/asset_e15179b5.jpg')');
    background-size:cover;background-position:center 62%;
    display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
    text-align:center;position:relative;
  }
  #hero::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(6,20,35,.05) 0%,rgba(6,20,35,.1) 55%,rgba(6,20,35,.85) 100%);
  }
  .hero-inner{position:relative;z-index:2;padding:0 6vw 7vh;max-width:820px;}
  .hero-kicker{
    font-size:12.5px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-light);
    font-weight:700;margin-bottom:16px;
  }
  .hero-sub{
    font-size:clamp(14px,1.7vw,18px);color:rgba(255,255,255,.9);
    max-width:560px;margin:0 auto 30px;line-height:1.7;
  }
  .hero-cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--terracotta);color:#fff8ec;border:none;
    padding:16px 30px;border-radius:999px;font-weight:700;font-size:11px;
    box-shadow:0 10px 26px rgba(192,57,43,.45);
    letter-spacing:.3px;
  }
  .hero-cta:hover{filter:brightness(1.08);}
  .scroll-cue{
    margin-top:34px;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.75);
    display:flex;flex-direction:column;align-items:center;gap:6px;
  }
  .scroll-cue span.line{width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent);
    animation:scrollpulse 1.8s ease-in-out infinite;}
  @keyframes scrollpulse{0%{opacity:.2;transform:scaleY(.5);}50%{opacity:1;transform:scaleY(1);}100%{opacity:.2;transform:scaleY(.5);}}

  /* ================= MAP SECTION ================= */
  #map-section{
    background:linear-gradient(180deg,var(--sky-top) 0%, var(--sky-mid) 45%, var(--river-deep) 100%);
    padding:11vh 0 0; overflow:hidden;
  }
  .map-head{text-align:center;padding:0 6vw;margin-bottom:6vh;}
  .map-head .eyebrow{opacity:1;transform:none;justify-content:center;display:flex;}
  .map-head h2{
    font-family:var(--serif);font-style:italic;font-size:clamp(30px,5vw,52px);
    margin:0 0 14px;color:#fff;
  }
  .map-head p{max-width:600px;margin:0 auto;color:rgba(255,255,255,.85);font-size:11px;line-height:1.7;}

  .map-stage{
    position:relative;width:100%;max-width:1180px;margin:0 auto;
    height:min(150vw, 980px);
  }
  .wave-svg{position:absolute;inset:0;width:100%;height:100%;}

  .anchor{
    position:absolute; display:flex; flex-direction:column; align-items:center;
    cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  }
  .anchor .pole-icon{
    width:var(--iw); transform-origin: 50% 4%;
    transition: filter .3s;
    animation: idle-sway 5s ease-in-out infinite;
    animation-delay: var(--delay,0s);
  }
  .anchor:hover .pole-icon, .anchor:focus-visible .pole-icon, .anchor.tapped .pole-icon{
    animation: swing .8s ease-in-out;
  }
  @keyframes idle-sway{
    0%,100%{transform:rotate(-2deg);}
    50%{transform:rotate(2deg);}
  }
  @keyframes swing{
    0%{transform:rotate(0deg);}
    20%{transform:rotate(16deg);}
    45%{transform:rotate(-13deg);}
    65%{transform:rotate(8deg);}
    82%{transform:rotate(-5deg);}
    100%{transform:rotate(0deg);}
  }
  .anchor .tag{
    margin-top:10px;text-align:center;padding:6px 12px;border-radius:10px;
    background:rgba(8,24,40,.55); backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.18);
    opacity:.85; transition:.3s;
  }
  .anchor:hover .tag{opacity:1;background:rgba(8,24,40,.8);border-color:var(--gold-light);}
  .anchor .tag .t-title{display:block;font-weight:700;font-size:12.5px;color:#fff;line-height:1.3;white-space:nowrap;}
  .anchor .tag .t-time{display:block;font-size:11px;color:var(--gold-light);font-style:italic;margin-top:2px;}
  .anchor .stop-num{
    position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;
    background:var(--gold);color:#3a2400;font-size:10.5px;font-weight:800;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.4);
    opacity:0; transform:scale(.5); transition:.3s;
  }
  .anchor.done .stop-num{opacity:1;transform:scale(1);}

  .map-bridge{width:100%;display:block;margin-top:-2px;}

  /* ================= STOP SECTIONS bg vars ================= */
  #stop1{background-image:url('url('assets/asset_23399d41.jpg')');}
  #stop2{background-image:url('url('assets/asset_741c3560.jpg')');}
  #stop3{background-image:url('url('assets/asset_3b2efcf3.jpg')');}
  #stop4{background-image:url('url('assets/asset_884226ad.jpg')');}
  #stop5{background-image:url('url('assets/asset_ca22e835.jpg')');}
  #stop6{background-image:url('url('assets/asset_4b5f28e8.jpg')');}

  /* ================= FINAL RESULT ================= */
  #final{
    background:linear-gradient(180deg,#0d3a63 0%,#0a2c4d 40%,#3a2a12 100%);
    padding:12vh 6vw 14vh; display:flex; flex-direction:column; align-items:center;
    text-align:center;
  }
  #final .eyebrow{opacity:1;transform:none;}
  #final h2{
    font-family:var(--serif);font-style:italic;font-size:clamp(30px,5vw,54px);
    color:#fff;margin:0 0 16px;
  }
  #final p.lead{max-width:560px;color:rgba(255,255,255,.85);font-size:14px;line-height:1.7;margin:0 0 40px;}

  .frame-wrap{
    position:relative; width: 100%; max-width: 800px; margin:0 auto 30px;
    filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));
    container-type:inline-size;
  }
  .frame-wrap img.frame-bg{width:100%;display:block;border-radius:10px;}
  .slot{
    position:absolute; overflow:hidden; border-radius:4px;
    z-index: 10;
    background:#0002;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  }
  .slot img{width:100%;height:100%;object-fit:cover;}
  .slot .empty{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    background:repeating-linear-gradient(45deg,#dfe9f0,#dfe9f0 8px,#eef4f8 8px,#eef4f8 16px);
    color:#7a8a96;font-size:14px;font-weight:800;
  }
  /* slot coordinates as % of frame image */
  .slot.s1{left:5.25%; top:12.16%; width:40.8%; height:19.3%;}
  .slot.s2{left:53.86%; top:12.16%; width:40.8%; height:19.3%;}
  .slot.s3{left:5.25%; top:33.38%; width:40.8%; height:19.3%;}
  .slot.s4{left:53.86%; top:33.38%; width:40.8%; height:19.3%;}
  .slot.s5{left:5.25%; top:54.68%; width:40.8%; height:19.3%;}
  .slot.s6{left:53.86%; top:54.68%; width:40.8%; height:19.3%;}

  .final-fields{
    width: 100%; max-width: 800px; margin:-2vh auto 26px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  }
  .final-fields input{
    flex:1; min-width:160px; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.08); color:#fff; font-size:14px;
  }
  .final-fields input::placeholder{color:rgba(255,255,255,.55);}

  .final-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

  footer{
    text-align:center;padding:28px 20px 40px;color:rgba(255,255,255,.55);font-size:12.5px;
    background:#0a2c4d;
  }

  /* responsive tweaks */
  @media (max-width:720px){
    #boat-rail{width:44px;right:6px;}
    #boat{width:42px;}
    .fullbleed .content{padding:7vh 6vw 8vh;}
    .map-stage{height:170vw;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .anchor .pole-icon{animation:none;}
    #boat svg{animation:none;}
  }


  .station {
    opacity: 0;
    transform: translateY(30px);
    transition: 0.8s ease;
  }
  .station.in-view {
    opacity: 1;
    transform: translateY(0);
  }



/* Animation classes */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.slide-in-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.slide-in-left.visible { opacity: 1; transform: translateX(0); }
.slide-in-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.slide-in-right.visible { opacity: 1; transform: translateX(0); }
.scale-in { opacity: 0; transform: scale(0.9); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.scale-in.visible { opacity: 1; transform: scale(1); }

  .pass-text-layer{
    position:absolute; left:54%; top:80%; width:40.5%; height:15%; z-index:30;
    color:#ffffff; font-family:'Lora', Georgia, 'Times New Roman', serif; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  }
  #previewName{ font-style:italic; font-size:4cqi; font-weight:bold; line-height:1.2; margin-bottom:0.5cqi; }
  #previewDate, #previewLocation{ font-size:2.5cqi; line-height:1.2; }

@keyframes stampIn {
    0% { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
#stampOverlay.show-stamp, .stamp-overlay.show-stamp {
    opacity: 1 !important;
    animation: stampIn 0.25s ease-in forwards;
}

    /* Initial states for children */
  .station .title { opacity: 0; transform: translateY(-30px); transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .station .desc { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .station .camera-box { opacity: 0; transform: scale(0.85); transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .station .btn-capture { opacity: 0; transform: translateY(20px) scale(0.9); transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .station .station-right img { opacity: 0; transform: scale(0.95) translateX(40px); transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* In-view states with staggered delays */
  .station.in-view .title { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
  .station.in-view .desc { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
  .station.in-view .camera-box { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
  .station.in-view .btn-capture { opacity: 1; transform: translateY(0) scale(1); transition-delay: 0.4s; }
  .station.in-view .station-right img { opacity: 1; transform: scale(1) translateX(0); transition-delay: 0.2s; }


/* Section Colors */
#section-3 { --accent: #e3793c; }
#section-4 { --accent: #3480c1; }
#section-5 { --accent: #2d388f; }
#section-6 { --accent: #fade49; }
#section-7 { --accent: #e3793c; }
#section-8 { --accent: #2b388d; }