:root{
    --sky-deep:#5fa3dc;
    --sky-mid:#a7d3f0;
    --sky-light:#e2f1fc;
    --cloud-white:#ffffff;
    --paper-cream:#fdf9f2;
    --ink-navy:#1b3a5c;
    --silver:#c9d3d8;
    --silver-deep:#9fb0bc;
    --line:rgba(27,58,92,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Nunito Sans', sans-serif;
    color:var(--ink-navy);
    background:var(--paper-cream);
    overflow-x:hidden;
  }
  h1,h2,.display{ font-family:'Baloo 2', cursive; }
  a{color:inherit;}
  .reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    background:linear-gradient(180deg, var(--sky-deep) 0%, var(--sky-mid) 45%, var(--sky-light) 80%, var(--paper-cream) 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    overflow:hidden;
    padding:0 20px 40px;
  }

  /* balloon garland strung across the top */
  .garland{
    position:relative;
    width:100%;
    height:96px;
    z-index:3;
  }
  .garland svg{ width:100%; height:100%; display:block; }

  /* floating balloons drifting in the background */
  .balloon{
    position:absolute;
    border-radius:50%;
    opacity:0.85;
  }
  .balloon::after{
    content:"";
    position:absolute;
    width:34%; height:22%;
    top:16%; left:18%;
    background:rgba(255,255,255,0.55);
    border-radius:50%;
  }
  .b1{ width:46px; height:46px; background:#fff; top:20%; left:-70px; animation:drift 30s linear infinite 2s; }
  .b2{ width:30px; height:30px; background:var(--silver); top:32%; left:-70px; animation:drift 24s linear infinite 8s; opacity:0.7;}
  .b3{ width:38px; height:38px; background:var(--sky-mid); top:14%; left:-70px; animation:drift 36s linear infinite 15s; opacity:0.65;}
  .b4{ width:24px; height:24px; background:#fff; top:40%; left:-70px; animation:drift 20s linear infinite 20s; opacity:0.6;}
  @keyframes drift{ to{ transform: translateX(calc(100vw + 140px)); } }

  /* hot air balloons rising */
  .airballoon{
    position:absolute;
    z-index:2;
  }
  .ab1{ left:8%; bottom:-160px; animation:rise 13s ease-in 0.6s forwards; }
  .ab2{ right:9%; bottom:-200px; animation:rise 15s ease-in 2.4s forwards; }
  @keyframes rise{
    0%{ transform:translateY(0) rotate(0deg); opacity:0; }
    10%{ opacity:1; }
    100%{ transform:translateY(-92vh) rotate(-3deg); opacity:1; }
  }

  .eyebrow{
    font-size:13px;
    letter-spacing:0.35em;
    text-transform:uppercase;
    color:var(--cloud-white);
    font-weight:700;
    margin-top:26px;
    margin-bottom:14px;
    z-index:4;
  }
  .hero h1{
    color:var(--cloud-white);
    font-size:clamp(2.8rem, 9vw, 5.6rem);
    font-weight:600;
    line-height:1;
    text-shadow:0 6px 30px rgba(20,60,100,0.25);
    z-index:4;
  }
  .elephant-wrap{
    width:min(240px, 60vw);
    margin:18px 0 6px;
    z-index:4;
    filter:drop-shadow(0 14px 20px rgba(20,60,100,0.18));
  }
  .elephant-wrap svg{ width:100%; height:auto; display:block; }

  .ele-bob{ animation: eleBounce 3.2s ease-in-out infinite; }
  @keyframes eleBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

  .ele-ear{ transform-box: fill-box; }
  .ele-ear-left{ transform-origin:100% 50%; animation: earFlapL 2.6s ease-in-out infinite; }
  .ele-ear-right{ transform-origin:0% 50%; animation: earFlapR 2.6s ease-in-out infinite; }
  @keyframes earFlapL{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(-9deg); } }
  @keyframes earFlapR{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(9deg); } }

  .ele-trunk{ transform-box: fill-box; transform-origin:50% 0%; animation: trunkSwing 2.3s ease-in-out infinite; }
  @keyframes trunkSwing{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(7deg); } }

  .ele-eye{ transform-box: fill-box; transform-origin:center; animation: eleBlink 4.6s ease-in-out infinite; }
  @keyframes eleBlink{ 0%,90%,100%{ transform:scaleY(1); } 95%{ transform:scaleY(0.12); } }

  .ele-balloon{ animation: balloonFloat 3.6s ease-in-out infinite; }
  @keyframes balloonFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

  .sparkle{ transform-box: fill-box; transform-origin:center; animation: sparkleTwinkle 1.9s ease-in-out infinite; }
  @keyframes sparkleTwinkle{ 0%,100%{ opacity:0.15; transform:scale(0.7); } 50%{ opacity:1; transform:scale(1.15); } }

  .hero .sub{
    font-size:clamp(1rem, 2.2vw, 1.3rem);
    font-style:italic;
    font-family:'Baloo 2', cursive;
    color:var(--ink-navy);
    background:rgba(255,255,255,0.6);
    padding:8px 22px;
    border-radius:40px;
    z-index:4;
    margin-bottom:20px;
  }
  .scroll-cue{
    margin-top:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--ink-navy);
    opacity:0.7;
    font-size:11px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    animation:bob 2.2s ease-in-out infinite;
    z-index:4;
  }
  @keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

  .scallop-divider{
    position:absolute;
    left:0; right:0; bottom:-1px;
    height:44px;
    z-index:5;
    line-height:0;
  }
  .scallop-divider svg{ width:100%; height:100%; display:block; }

  .section-icon{
    width:44px; height:44px;
    margin:0 auto 14px;
    color:var(--sky-deep);
    display:block;
  }

  /* ---------- COUNTDOWN ---------- */
  .countdown{ text-align:center; padding-top:70px; }
  .countdown .kicker{
    font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
    color:var(--sky-deep); font-weight:800; margin-bottom:8px;
  }
  .countdown h2{
    font-size:clamp(1.4rem, 3.4vw, 1.9rem);
    font-weight:500;
    color:var(--ink-navy);
    margin-bottom:34px;
  }
  .cd-grid{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .cd-box{
    background:var(--cloud-white);
    border-radius:16px;
    padding:18px 14px;
    min-width:76px;
    box-shadow:0 12px 28px rgba(27,58,92,0.1);
  }
  .cd-num{
    display:block;
    font-family:'Baloo 2', cursive;
    font-size:2rem;
    color:var(--sky-deep);
    font-weight:600;
    line-height:1;
    margin-bottom:6px;
  }
  .cd-label{
    font-size:10px;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--ink-navy);
    opacity:0.6;
    font-weight:700;
  }
  .cd-target{
    margin-top:22px;
    font-size:0.82rem;
    color:var(--ink-navy);
    opacity:0.55;
  }
  .cd-target .value{ font-weight:700; opacity:1; }

  /* ---------- LOCATION ---------- */
  .location{ text-align:center; }
  .location .kicker{
    font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
    color:var(--sky-deep); font-weight:800; margin-bottom:14px;
  }
  .location .card{
    background:var(--cloud-white);
    border-radius:20px;
    padding:40px 30px;
    box-shadow:0 16px 40px rgba(27,58,92,0.1);
  }
  .location h2{ font-size:1.5rem; font-weight:500; color:var(--ink-navy); margin-bottom:10px; }
  .location p{ opacity:0.8; line-height:1.7; margin-bottom:22px; }
  .btn-outline{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border:2px solid var(--sky-deep);
    color:var(--sky-deep);
    font-weight:800;
    font-size:0.9rem;
    padding:13px 26px;
    border-radius:50px;
    text-decoration:none;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .btn-outline:hover{ background:var(--sky-deep); color:#fff; }
  .btn-outline svg{ width:17px; height:17px; }

  .rsvp-buttons{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:8px;
  }
  .btn-whatsapp{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:#3fa96a;
    color:#fff;
    font-weight:800;
    font-size:0.9rem;
    padding:13px 24px;
    border-radius:50px;
    text-decoration:none;
    box-shadow:0 10px 22px rgba(63,169,106,0.3);
    transition:transform 0.2s ease;
  }
  .btn-whatsapp:hover{ transform:translateY(-2px); }
  .btn-whatsapp svg{ width:18px; height:18px; }


  /* ---------- SECTIONS ---------- */
  section{ max-width:760px; margin:0 auto; padding:90px 24px; }
  .welcome{ text-align:center; }
  .welcome h2{
    font-size:clamp(1.6rem, 4vw, 2.2rem);
    font-weight:500;
    margin-bottom:20px;
    color:var(--sky-deep);
  }
  .welcome p{ font-size:1.08rem; line-height:1.85; color:var(--ink-navy); opacity:0.85; }
  .signature{
    color:var(--silver-deep);
    display:block;
    margin-top:26px;
    font-family:'Baloo 2', cursive;
    font-style:italic;
    font-size:1.2rem;
  }

  /* ---------- TICKET / DETAILS ---------- */
  .details{ text-align:center; }
  .details .kicker{
    font-size:12px; letter-spacing:0.3em; text-transform:uppercase;
    color:var(--sky-deep); font-weight:800; margin-bottom:34px;
  }
  .ticket{
    position:relative;
    background:var(--cloud-white);
    border-radius:18px;
    box-shadow:0 20px 50px rgba(27,58,92,0.14);
    display:flex;
    max-width:640px;
    margin:0 auto;
    overflow:hidden;
    transform:rotate(-1.2deg);
  }
  .ticket-main{
    flex:1; padding:34px 30px; text-align:left;
    border-right:2px dashed var(--line); position:relative;
  }
  .ticket-main::after,.ticket-main::before{
    content:""; position:absolute; width:26px; height:26px;
    background:var(--paper-cream); border-radius:50%; right:-13px;
  }
  .ticket-main::after{ top:-13px; }
  .ticket-main::before{ bottom:-13px; }
  .ticket-row{ display:flex; justify-content:space-between; gap:14px; margin-bottom:22px; }
  .ticket-field{ flex:1; }
  .ticket-field .label{
    font-size:10px; letter-spacing:0.15em; text-transform:uppercase;
    color:var(--sky-deep); font-weight:800; margin-bottom:5px;
  }
  .ticket-field .value{ font-family:'Baloo 2', cursive; font-size:1.05rem; font-weight:500; }
  .ticket-route{ display:flex; align-items:center; gap:10px; margin:26px 0 4px; }
  .ticket-route .pt{ font-family:'Baloo 2', cursive; font-size:1.3rem; font-weight:600; }
  .ticket-route svg{ width:24px; height:24px; color:var(--sky-deep); flex-shrink:0; }
  .route-line{
    flex:1; height:1px;
    background:repeating-linear-gradient(90deg, var(--sky-deep) 0 6px, transparent 6px 12px);
  }
  .ticket-stub{
    width:150px; background:var(--sky-light);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:8px; padding:20px 14px; text-align:center;
  }
  .ticket-stub .label{ font-size:10px; letter-spacing:0.15em; text-transform:uppercase; color:var(--sky-deep); font-weight:800; }
  .ticket-stub .big{ font-family:'Baloo 2', cursive; font-size:1.6rem; color:var(--ink-navy); }
  .note-edit{ margin-top:26px; font-size:0.85rem; color:var(--ink-navy); opacity:0.55; }

  /* ---------- RSVP ---------- */
  .rsvp{ text-align:center; }
  .rsvp .card{ background:var(--cloud-white); border-radius:20px; padding:44px 34px; box-shadow:0 16px 40px rgba(27,58,92,0.1); }
  .rsvp h2{ font-size:1.7rem; font-weight:500; color:var(--sky-deep); margin-bottom:14px; }
  .rsvp p{ opacity:0.8; line-height:1.7; margin-bottom:22px; }
  .pill{
    display:inline-block; border:2px dashed var(--sky-mid); border-radius:40px;
    padding:10px 26px; font-weight:700; color:var(--sky-deep); font-size:0.95rem;
  }

  /* ---------- REGISTRY ---------- */
  .registry{ text-align:center; }
  .registry .card{
    background:linear-gradient(160deg, var(--sky-deep), var(--silver-deep));
    border-radius:24px; padding:50px 34px; color:#fff; position:relative; overflow:hidden;
  }
  .registry .card svg.gift{ width:46px; height:46px; margin-bottom:14px; }
  .registry h2{ font-size:1.7rem; font-weight:500; margin-bottom:12px; }
  .registry p{ opacity:0.92; line-height:1.7; margin-bottom:28px; max-width:440px; margin-left:auto; margin-right:auto; }
  .btn{
    display:inline-flex; align-items:center; gap:10px; background:#fff; color:var(--sky-deep);
    font-weight:800; font-size:0.95rem; letter-spacing:0.02em; padding:15px 30px; border-radius:50px;
    text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,0.15);
    transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .btn:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,0.2); }
  .btn svg{ width:18px; height:18px; }

  footer{ text-align:center; padding:60px 24px 70px; }
  .cloud-divider{ width:56px; height:56px; margin:0 auto 22px; color:var(--sky-mid); }
  footer p{ font-family:'Baloo 2', cursive; font-style:italic; font-size:1.3rem; color:var(--sky-deep); }
  footer .names{
    margin-top:10px; font-family:'Nunito Sans', sans-serif; font-style:normal; font-weight:700;
    letter-spacing:0.08em; text-transform:uppercase; font-size:0.8rem; color:var(--ink-navy); opacity:0.6;
  }

  @media (max-width:560px){
    .ticket{ flex-direction:column; transform:rotate(0); }
    .ticket-main{ border-right:none; border-bottom:2px dashed var(--line); padding:26px 20px; }
    .ticket-main::after{ right:auto; left:-13px; bottom:-13px; top:auto; }
    .ticket-main::before{ left:auto; right:-13px; bottom:-13px; }
    .ticket-stub{ width:100%; flex-direction:column; justify-content:center; padding:18px; }
    .ticket-row{ flex-direction:column; gap:16px; }
    .ticket-field .value{ font-size:0.98rem; }
    .ticket-route{ margin:20px 0 2px; }
    .ticket-route .pt{ font-size:1.1rem; }
    section{ padding:70px 18px; }
  }

  @media (prefers-reduced-motion: reduce){
    .balloon, .airballoon, .scroll-cue,
    .ele-bob, .ele-ear-left, .ele-ear-right, .ele-trunk, .ele-eye, .ele-balloon, .sparkle{ animation:none !important; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  @media print{
    .music-toggle{ display:none !important; }
  }

  @media (max-width:480px){
    .music-toggle{ bottom:22px; right:16px; padding:0 16px 0 14px; }
    .music-hint{ right:16px; bottom:82px; }
  }

  /* ---------- SCROLL REVEAL MESSAGE ---------- */
  .reveal-message{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:110px 24px;
    overflow:hidden;
  }
  .message-inner{
    position:relative;
    z-index:2;
    max-width:640px;
    margin:0 auto;
    text-align:center;
  }
  .rm-line{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .rm-line.in{ opacity:1; transform:translateY(0); }

  .rm-script, .rm-script-big{ transition:none; }

  @keyframes rmPop{
    0%{ opacity:0; transform:translateY(24px) scale(0.7) rotate(-4deg); }
    55%{ opacity:1; transform:translateY(-8px) scale(1.1) rotate(2deg); }
    75%{ opacity:1; transform:translateY(3px) scale(0.96) rotate(-1deg); }
    100%{ opacity:1; transform:translateY(0) scale(1) rotate(0deg); }
  }
  @keyframes rmWiggle{
    0%,100%{ transform:rotate(-2deg); }
    50%{ transform:rotate(2deg); }
  }

  .rm-script{
    font-family:'Chewy', cursive;
    font-weight:400;
    font-size:clamp(1.5rem, 4.2vw, 2.3rem);
    color:rgba(95,163,220,0.6);
    line-height:1.3;
  }
  .rm-script.in{ animation:rmPop 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; }

  .rm-caps{
    font-family:'Nunito Sans', sans-serif;
    font-weight:800;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-size:clamp(0.8rem, 2vw, 1rem);
    color:rgba(27,58,92,0.5);
    margin:18px 0;
  }

  .rm-script-big{
    font-family:'Chewy', cursive;
    font-weight:400;
    font-size:clamp(3.2rem, 9.5vw, 5.4rem);
    color:rgba(95,163,220,0.5);
    line-height:1;
    margin:6px 0 14px;
    text-shadow:0 8px 20px rgba(95,163,220,0.2);
  }
  .rm-script-big.in{
    animation:
      rmPop 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards,
      rmWiggle 3s ease-in-out 0.9s infinite;
  }

  /* ---------- MUSIC PLAYER ---------- */
  .music-toggle{
    position:fixed;
    bottom:22px; right:22px;
    z-index:60;
    display:flex;
    align-items:center;
    gap:10px;
    height:54px;
    padding:0 20px 0 16px;
    border-radius:40px;
    border:none;
    background:linear-gradient(135deg, var(--sky-deep), #4a8fce);
    color:#fff;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(27,58,92,0.35);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .music-toggle:hover{ transform:translateY(-2px) scale(1.03); }
  .music-toggle .icon-wrap{
    position:relative;
    width:28px; height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }
  .music-toggle .icon-wrap::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:rgba(255,255,255,0.35);
    animation:musicPulse 1.8s ease-out infinite;
    opacity:0;
  }
  .music-toggle:not(.paused) .icon-wrap::before{ opacity:1; }
  @keyframes musicPulse{
    0%{ transform:scale(0.6); opacity:0.6; }
    100%{ transform:scale(1.6); opacity:0; }
  }
  .music-toggle svg{ width:20px; height:20px; position:relative; z-index:1; }
  .music-toggle .label{
    font-family:'Nunito Sans', sans-serif;
    font-weight:800;
    font-size:0.82rem;
    letter-spacing:0.01em;
    white-space:nowrap;
  }
  .music-toggle .bars{ display:flex; align-items:flex-end; gap:2.5px; height:16px; position:relative; z-index:1; }
  .music-toggle .bars span{
    width:3px;
    background:#fff;
    border-radius:2px;
    animation:musicBar 0.9s ease-in-out infinite;
  }
  .music-toggle .bars span:nth-child(1){ height:6px; animation-delay:0s; }
  .music-toggle .bars span:nth-child(2){ height:16px; animation-delay:0.2s; }
  .music-toggle .bars span:nth-child(3){ height:10px; animation-delay:0.4s; }
  .music-toggle.paused .bars span{ animation-play-state:paused; height:5px !important; }
  @keyframes musicBar{ 0%,100%{ transform:scaleY(0.4); } 50%{ transform:scaleY(1); } }

  .music-hint{
    position:fixed;
    bottom:82px; right:22px;
    z-index:60;
    background:#fff;
    color:var(--ink-navy);
    font-family:'Nunito Sans', sans-serif;
    font-size:0.8rem;
    font-weight:700;
    padding:10px 16px;
    border-radius:14px;
    box-shadow:0 10px 24px rgba(27,58,92,0.2);
    animation:hintBob 1.6s ease-in-out infinite, hintFade 6s ease forwards;
    pointer-events:none;
    max-width:190px;
    text-align:center;
  }
  .music-hint::after{
    content:"";
    position:absolute;
    bottom:-6px; right:22px;
    width:12px; height:12px;
    background:#fff;
    transform:rotate(45deg);
  }
  @keyframes hintBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
  @keyframes hintFade{ 0%,80%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }