:root{
    --obsidian:#000000;
    --soft-black:#0A0A0A;
    --white:#FFFFFF;
    --gray-light:#A0A0A0;
    --gray-dark:#2F2F2F;
    --snow-white:#F5F5F5;
    --accent:#EDEDED;
    --red:#E63946;
    --red-deep:#B91C35;
    --font-x: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ios-spring: cubic-bezier(0.34, 1.28, 0.64, 1);
    --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }

  html, body {
    width:100%;
    height:100vh;
    height:100dvh;
    background:var(--obsidian);
    color:var(--white);
    font-family:var(--font-x);
    overflow:hidden;
    -webkit-tap-highlight-color: transparent;
  }

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

  .glow{
    position:fixed;
    top:50%; left:50%;
    width:140vw; height:140vw;
    max-width:1200px; max-height:1200px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 60%);
    pointer-events:none;
    z-index:0;
  }

  .glow-red{
    position:fixed;
    top:50%; left:50%;
    width:150vw; height:150vw;
    max-width:1300px; max-height:1300px;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, rgba(185,28,53,0.18) 0%, rgba(185,28,53,0) 62%);
    pointer-events:none;
    z-index:0;
    opacity:0;
    transition: opacity 2.2s ease;
    animation: heartbeatGlow 4.2s ease-in-out infinite;
  }

  @keyframes heartbeatGlow{
    0%, 100%{ transform:translate(-50%,-50%) scale(1); }
    50%{ transform:translate(-50%,-50%) scale(1.06); }
  }

  .tap-heart{
    position:fixed;
    pointer-events:none;
    z-index:15;
    color:var(--red);
    font-size:16px;
    opacity:0;
    transform:translate(-50%,-50%) scale(0.3) rotate(var(--rot, 0deg));
    animation: floatHeart 1.9s var(--ios-spring) forwards;
  }

  @keyframes floatHeart{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(0.3) rotate(var(--rot, 0deg)); }
    10%{ opacity:1; transform:translate(-50%, calc(-50% - var(--rise) * 0.08)) scale(1.35) rotate(var(--rot, 0deg)); }
    22%{ opacity:1; transform:translate(-50%, calc(-50% - var(--rise) * 0.18)) scale(1) rotate(var(--rot, 0deg)); }
    80%{ opacity:0.85; transform:translate(-50%, calc(-50% - var(--rise) * 0.85)) scale(1.05) rotate(var(--rot, 0deg)); }
    100%{ opacity:0; transform:translate(-50%, calc(-50% - var(--rise))) scale(1.1) rotate(var(--rot, 0deg)); }
  }

  .yes-heart{
    animation-duration: 2.3s;
  }

  .tap-ripple{
    position:fixed;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1.5px solid rgba(230,57,70,0.55);
    transform:translate(-50%,-50%) scale(0.3);
    opacity:0.9;
    pointer-events:none;
    z-index:14;
    animation: rippleOut 0.55s var(--ios-ease) forwards;
  }

  @keyframes rippleOut{
    to{ transform:translate(-50%,-50%) scale(1.7); opacity:0; }
  }

  .tender{
    font-style:italic;
    letter-spacing:0.015em;
  }

  #app{
    position:relative;
    z-index:2;
    width:100%;
    height:100vh;
    height:100dvh;
  }

  .screen{
    position:absolute;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
    opacity:0;
    visibility:hidden;
    transition: opacity 1.1s ease;
  }

  .content{
    width:100%;
    max-width:600px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:0;
  }

  .content > *{
    max-width:100%;
  }

  .screen.active{
    opacity:1;
    visibility:visible;
    position:relative;
  }

  /* ---------- Access gate (countdown + password) ---------- */
  .post-gate{ display:none; }

  .gate-screen{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    z-index:25;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  }
  .gate-screen.active{ display:flex; }

  .password-gate-card{
    width:min(92vw, 420px);
    padding:28px 24px;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:18px;
    background:rgba(0,0,0,0.28);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow:0 22px 70px rgba(0,0,0,0.35);
  }

  .password-gate-card .heading.small{
    margin-bottom:20px;
  }

  .password-form{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:14px;
    opacity:0;
  }

  .password-gate-card .name-input{
    width:100%;
    margin:0 auto;
    opacity:1;
  }

  .password-gate-card .btn{
    width:100%;
    justify-content:center;
    opacity:1;
  }

  .password-gate-card .btn:disabled{
    opacity:0.65;
    cursor:wait;
  }

  .countdown-row{
    display:flex;
    gap:22px;
    margin-top:30px;
  }
  .countdown-unit{
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:54px;
  }
  .countdown-num{
    font-family:var(--font-x);
    font-size:clamp(28px, 8vw, 38px);
    font-weight:700;
    color:var(--white);
    font-variant-numeric:tabular-nums;
    line-height:1;
  }
  .countdown-label{
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gray-light);
    margin-top:6px;
  }

  .gate-error{
    color:var(--red);
    font-size:12px;
    margin-top:16px;
    min-height:16px;
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .gate-error.show{ opacity:1; }

  @keyframes gateShake{
    0%, 100%{ transform:translateX(0); }
    20%{ transform:translateX(-8px); }
    40%{ transform:translateX(7px); }
    60%{ transform:translateX(-5px); }
    80%{ transform:translateX(4px); }
  }
  .gate-shake{ animation:gateShake 0.4s ease; }


  .eyebrow{
    font-family:var(--font-x);
    font-weight:600;
    font-size:13px;
    letter-spacing:0.02em;
    text-transform:none;
    color:var(--gray-light);
    margin-bottom:18px;
    opacity:0;
  }

  .heading{
    font-family:var(--font-x);
    font-weight:700;
    font-size:clamp(26px, 7vw, 40px);
    line-height:1.2;
    letter-spacing:0.005em;
    max-width:640px;
    opacity:0;
  }

  .heading.small{ font-size:clamp(21px, 5.2vw, 28px); font-weight:600; }
  .heading.huge{ font-size:clamp(32px, 9.5vw, 56px); letter-spacing:0.003em; font-weight:700; }

  .subtext{
    font-family:var(--font-x);
    font-weight:400;
    font-size:clamp(15px, 3.8vw, 17px);
    color:var(--gray-light);
    margin-top:16px;
    max-width:480px;
    line-height:1.4;
    letter-spacing:-0.003em;
    opacity:0;
  }

  .fade-up{
    animation: fadeUp 1.4s ease forwards;
  }

  .fade-up.delay-1{ animation-delay:0.4s; }
  .fade-up.delay-2{ animation-delay:0.9s; }
  .fade-up.delay-3{ animation-delay:1.5s; }
  .fade-up.delay-4{ animation-delay:2.1s; }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(16px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* Sequential line reveal (Chapter 02) */
  .sequence-block{
    position:relative;
    min-height:100px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .sequence-line{
    position:absolute;
    left:0; right:0;
    opacity:0;
  }
  .sequence-line.seq-1{ animation: seqFade 2.3s ease forwards; animation-delay:0.3s; }
  .sequence-line.seq-2{ animation: seqFade 2.3s ease forwards; animation-delay:2.7s; }

  @keyframes seqFade{
    0%{ opacity:0; transform:translateY(8px); }
    18%{ opacity:1; transform:translateY(0); }
    78%{ opacity:1; transform:translateY(0); }
    100%{ opacity:0; transform:translateY(-8px); }
  }

  /* Cinematic blur -> sharp reveal for climactic headings */
  .cinematic{
    opacity:0;
    filter:blur(8px);
    transform:scale(0.94) translateY(6px);
    animation: cinematicIn 1.8s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes cinematicIn{
    0%{ opacity:0; filter:blur(8px); transform:scale(0.94) translateY(6px); }
    60%{ opacity:1; filter:blur(1px); }
    100%{ opacity:1; filter:blur(0); transform:scale(1) translateY(0); }
  }

  /* Buttons ease in with a slight tactile scale */
  .btn.fade-up{ animation-name: btnFadeUp; }
  @keyframes btnFadeUp{
    from{ opacity:0; transform:translateY(14px) scale(0.94); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }

  /* Love loading state between screens — iOS-style HUD */
  .love-loader{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.35s ease;
  }
  .love-loader.show{ opacity:1; pointer-events:all; }

  .loader-card{
    position:relative;
    width:96px;
    height:96px;
    border-radius:24px;
    background:rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border:1px solid rgba(255,255,255,0.14);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 20px 50px rgba(0,0,0,0.45);
    transform:scale(0.8);
    opacity:0;
  }
  .love-loader.show .loader-card{
    animation: cardPop 0.45s var(--ios-spring) forwards;
  }
  @keyframes cardPop{
    from{ transform:scale(0.8); opacity:0; }
    to{ transform:scale(1); opacity:1; }
  }

  .loader-stack{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .loader-progress-track{
    width:130px;
    height:4px;
    border-radius:3px;
    background:rgba(255,255,255,0.14);
    overflow:hidden;
    opacity:0;
    transition:opacity 0.3s ease;
  }
  .love-loader.show .loader-progress-track{ opacity:1; }

  .loader-progress-fill{
    height:100%;
    width:0%;
    border-radius:3px;
    background:linear-gradient(90deg, var(--red-deep), var(--red));
  }

  .ios-ring{
    position:absolute;
    width:56px;
    height:56px;
    transform:rotate(-90deg);
    animation: ringRotate 1.3s linear infinite;
  }
  .ring-track{
    fill:none;
    stroke:rgba(255,255,255,0.14);
    stroke-width:3;
  }
  .ring-progress{
    fill:none;
    stroke:var(--red);
    stroke-width:3;
    stroke-linecap:round;
    stroke-dasharray:113;
    stroke-dashoffset:80;
  }
  @keyframes ringRotate{
    to{ transform:rotate(270deg); }
  }

  .loader-heart{
    position:relative;
    z-index:1;
    color:var(--red);
    font-size:22px;
    animation: loaderPulse 1.05s ease-in-out infinite;
  }
  @keyframes loaderPulse{
    0%, 100%{ transform:scale(0.86); opacity:0.65; }
    50%{ transform:scale(1.14); opacity:1; }
  }

  .btn{
    font-family:var(--font-x);
    font-size:17px;
    font-weight:600;
    letter-spacing:-0.01em;
    text-transform:none;
    background:rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color:var(--white);
    border:1px solid rgba(255,255,255,0.14);
    padding:15px 28px;
    border-radius:16px;
    cursor:pointer;
    -webkit-appearance:none;
    transition: border-color 0.3s var(--ios-ease), background 0.3s var(--ios-ease), color 0.3s var(--ios-ease), transform 0.35s var(--ios-spring);
    opacity:0;
  }

  .btn:hover{ background:rgba(255,255,255,0.1); }
  .btn:active{ transform:scale(0.95); }

  .btn-row{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
    width:100%;
  }

  .btn-primary{
    background:var(--white);
    color:var(--obsidian);
    border:1px solid var(--white);
    min-width:230px;
    font-weight:600;
    box-shadow: 0 8px 24px rgba(255,255,255,0.08);
  }
  .btn-primary:hover{ background:#ececec; }

  .btn-secondary{
    min-width:230px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.12);
  }

  .whatsapp-cta{
    display:none;
    width:min(78vw, 320px);
    margin:24px auto 0;
    text-decoration:none;
    text-align:center;
    opacity:0;
  }

  .whatsapp-cta.show{
    display:inline-flex;
    opacity:1;
  }

  .yes-content{
    gap:0;
  }

  .yes-copy{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
  }

  .yes-heartline{
    margin-top:12px;
    margin-bottom:4px;
    font-family:var(--font-x);
    font-size:clamp(34px, 9vw, 52px);
    line-height:1;
    opacity:0;
  }

  .yes-chapter{
    margin-top:18px;
    font-style:italic;
    color:var(--white);
  }

  .yes-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:min(82vw, 340px);
    margin-top:30px;
    opacity:0;
  }

  .yes-actions .btn{
    width:100%;
    min-width:0;
    justify-content:center;
    opacity:1;
  }

  .yes-actions .whatsapp-cta{
    margin:0;
    width:100%;
  }

  .progress{
    position:fixed;
    bottom:calc(34px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:7px;
    z-index:5;
    opacity:0;
    transition:opacity 0.6s ease;
  }
  .progress.show{ opacity:1; }

  .dot{
    width:7px; height:7px;
    border-radius:50%;
    background:rgba(255,255,255,0.28);
    transform:scale(1);
    transition: background 0.4s var(--ios-ease), transform 0.35s var(--ios-spring);
  }
  .dot.active{
    background:var(--white);
    transform:scale(1.15);
  }
  .dot.reachable{
    cursor:pointer;
  }
  .dot.locked{
    cursor:default;
  }

  .snowflake-hidden{
    position:fixed;
    top:calc(20px + env(safe-area-inset-top));
    left:20px;
    width:34px; height:34px;
    z-index:10;
    cursor:pointer;
    opacity:0.85;
    background:rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:100px;
    padding:0;
    -webkit-appearance:none;
    outline:none;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: transform 0.3s var(--ios-spring), background 0.3s ease, opacity 0.8s ease;
  }
  .snowflake-hidden:active{ transform:scale(0.88); }
  .snowflake-hidden:hover{ background:rgba(255,255,255,0.12); }

  .hidden-msg{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.72);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10vw;
    text-align:center;
    z-index:20;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.4s var(--ios-ease);
  }
  .hidden-msg.show{ opacity:1; pointer-events:auto; }
  .hidden-msg p{
    font-family:var(--font-x);
    font-size:clamp(18px,5vw,26px);
    color:var(--white);
    line-height:1.6;
  }

  .sound-toggle{
    position:fixed;
    top:calc(20px + env(safe-area-inset-top));
    right:20px;
    z-index:10;
    font-family:var(--font-x);
    font-size:12px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    color:var(--white);
    background:rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:100px;
    padding:8px 14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:6px;
    opacity:0;
    transition:opacity 0.8s ease, background 0.3s ease, transform 0.3s var(--ios-spring);
  }
  .sound-toggle:active{ transform:scale(0.94); }
  .sound-toggle.show{ opacity:1; }
  .sound-toggle:hover{ color:var(--white); }

  .demo-badge{
    position:fixed;
    top:calc(20px + env(safe-area-inset-top));
    left:50%;
    transform:translateX(-50%);
    z-index:30;
    font-family:var(--font-x);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.06em;
    color:#000;
    background:var(--red);
    padding:6px 14px;
    border-radius:100px;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .demo-reset-btn{
    font-family:var(--font-x);
    font-size:11px;
    font-weight:700;
    letter-spacing:0.02em;
    color:#000;
    background:rgba(0,0,0,0.16);
    border:none;
    border-radius:100px;
    padding:4px 10px;
    cursor:pointer;
    -webkit-appearance:none;
  }
  .demo-reset-btn:active{ transform:scale(0.94); }

  .photo-box{
    width:min(78vw, 320px);
    height:min(78vw, 320px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:24px;
    background:rgba(255,255,255,0.03);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gray-dark);
    font-family:var(--font-x);
    font-size:13px;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    margin-bottom:22px;
    opacity:0;
  }

  .photo-caption{
    font-family:var(--font-x);
    font-style:italic;
    font-size:18px;
    color:var(--gray-light);
    opacity:0;
  }
  .photo-index{
    margin-top:14px;
    font-size:11px;
    letter-spacing:0.15em;
    color:var(--gray-dark);
    opacity:0;
  }

  .name-input{
    background:rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:14px;
    color:var(--white);
    font-family:var(--font-x);
    font-weight:600;
    font-size:clamp(20px,5.5vw,28px);
    text-align:center;
    padding:14px 18px;
    width:min(70vw, 320px);
    outline:none;
    opacity:0;
    transition: border-color 0.3s var(--ios-ease), transform 0.3s var(--ios-spring);
  }
  .name-input:focus{ border-color:rgba(255,255,255,0.3); transform:scale(1.02); }
  .name-input::placeholder{ color:var(--gray-dark); font-weight:500; }

  .proposal-name{
    font-family:"Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
    font-size:clamp(38px, 13vw, 78px);
    line-height:0.95;
    color:var(--white);
    text-shadow:
      0 0 18px rgba(230,57,70,0.28),
      0 12px 38px rgba(0,0,0,0.45);
    margin-top:8px;
    margin-bottom:6px;
    opacity:0;
  }

  .final-signature{
    font-family:var(--font-x);
    font-style:italic;
    font-size:20px;
    color:var(--gray-light);
    margin-top:34px;
    opacity:0;
  }
  .final-date{
    font-family:var(--font-x);
    font-size:11px;
    letter-spacing:0.15em;
    color:var(--gray-dark);
    margin-top:10px;
    opacity:0;
  }

  .heart-mark{
    font-size:22px;
    margin-top:30px;
    color:var(--red);
    opacity:0;
  }

  .heart-red{
    color:var(--red);
    display:inline-block;
    animation: pulse 1.8s ease-in-out infinite;
  }

  @keyframes pulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.12); }
  }

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

  .skip-note{
    position:fixed;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    font-size:10px;
    color:var(--white);
    letter-spacing:0.08em;
    z-index:4;
    opacity:0.85;
  }
  .skip-note .heart-red{
    font-size:10px;
    animation:none;
  }