:root{
    --sunset-deep:#2C0836;
    --sunset-mid: #6A0572;
    --sunset-orange:#FF416C;
    --sunset-warm:#FF8C42;
    --sunset-peach:#FFD194;
    --reveal-text:#FFF8E7;
    --muted-white: rgba(255,248,231,0.92);
    --glass: rgba(255,255,255,0.04);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  /* page background: start white (0-50%), JS toggles to orange after 50% scroll */
  body{
    background:#ffffff;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    overflow-x:hidden;
    transition: background 600ms ease;
  }

  .stage1{ height:100vh; position:relative; }
  .stage2{ height:100vh; position:relative; background:#ffffff00; }
  .stage3{ height:100vh; position:relative; overflow:hidden; }

  .door-wrapper{ position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); z-index:100; transition: opacity 0.5s ease, transform 0.3s ease; }
  .door-frame{ position:relative; width:320px; height:520px; border:15px solid #5a2d0c; box-shadow: 0 0 20px rgba(0,0,0,0.3); background:transparent; z-index:5; }
  .door-container{ position:absolute; inset:0; transform-style:preserve-3d; }

  .door{ width:100%; height:100%; background: linear-gradient(135deg,#8B4513,#A0522D,#8B4513); box-shadow: inset 0 0 20px rgba(0,0,0,0.3), 0 0 15px rgba(0,0,0,0.4); transform-origin:left center; transform-style:preserve-3d; overflow:hidden; transition: transform 0.05s linear; }
  .door::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.1) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.1) 3px), repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.05) 3px); z-index:1; }

  .door-panel{ position:absolute; background: linear-gradient(135deg,#A0522D,#8B4513); border:2px solid #5a2d0c; box-shadow: inset 0 0 5px rgba(0,0,0,0.3), 0 0 5px rgba(0,0,0,0.2); border-radius:5px; }
  .door-panel.top-left{ top:30px; left:30px; width:100px; height:150px; }
  .door-panel.top-right{ top:30px; right:30px; width:100px; height:150px; }
  .door-panel.bottom-left{ bottom:30px; left:30px; width:100px; height:150px; }
  .door-panel.bottom-right{ bottom:30px; right:30px; width:100px; height:150px; }

  .door-front{ position:absolute; inset:0; backface-visibility:hidden; z-index:2; }
  .door-back{ position:absolute; inset:0; background:rgb(137, 40, 40); backface-visibility:hidden; transform:rotateY(180deg); z-index:2; }

  .hinge{ position:absolute; width:15px; height:40px; background: linear-gradient(to right,#c0c0c0,#808080,#c0c0c0); border-radius:3px; left:-5px; box-shadow: inset 0 0 3px rgba(0,0,0,0.5), 0 0 5px rgba(0,0,0,0.3); z-index:3; }
  .hinge.top{ top:80px; } .hinge.bottom{ bottom:80px; }

  .door-handle{ position:absolute; width:20px; height:40px; background: linear-gradient(to right,#FFD700,#FFA500,#FFD700); border-radius:10px; right:20px; top:50%; transform:translateY(-50%); z-index:4; box-shadow: inset 0 0 5px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.2); }
  .door-handle::before{ content:""; position:absolute; width:10px; height:10px; background:#FFD700; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }

  /* ====== redesigned reveal text ====== */
  .reveal-text{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:150;
    pointer-events:none;
    text-align:center;
    width:86%;
    max-width:980px;
    will-change: transform, opacity;
    line-height:1.02;
    text-shadow:
      0 6px 20px rgba(0,0,0,0.45),
      0 2px 6px rgba(0,0,0,0.35);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* large "Wealth" word (serif, graceful, meaningful) */
  .quote-main{
    display:block;
    font-family: "Playfair Display", serif;
    font-size: clamp(2rem, 5.6vw, 5.2rem);
    font-weight:800;
    color: var(--muted-white);
    letter-spacing: -0.02em;
    margin-bottom: 0.18rem;
    transform-origin:center;
    opacity:0;
    transform: translateY(8px) scale(0.996);
    animation: revealUp 900ms cubic-bezier(.2,.9,.3,1) forwards 250ms;
  }

  /* supporting line (clean sans) */
  .quote-sub{
    display:block;
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight:600;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.01em;
    opacity:0;
    transform: translateY(8px);
    animation: revealUp 900ms cubic-bezier(.2,.9,.3,1) forwards 340ms;
  }

  /* emphasize the personal clause */
  .quote-highlight{
    display:inline-block;
    font-weight:800;
    margin-left:6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    color: var(--reveal-text);
    box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 -1px 0 rgba(255,255,255,0.02);
    transform: translateY(6px);
    opacity:0;
    animation: revealUp 900ms cubic-bezier(.2,.9,.3,1) forwards 420ms;
    font-size: clamp(0.95rem, 1.9vw, 1.35rem);
  }

  /* subtle shimmer across the main word (glint) */
  .quote-main::after{
    content:"";
    position:absolute;
    left: -2%;
    top: 0;
    width: 120%;
    height: 100%;
    pointer-events:none;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0.02) 100%);
    transform: translateX(-30%) skewX(-8deg);
    mix-blend-mode: screen;
    opacity: 0;
    animation: glint 2.6s ease-in-out 700ms infinite;
  }

  /* small accent line under the quote for punctuation/weight */
  .quote-accent{
    display:block;
    margin: 18px auto 0;
    height:3px;
    width: 72px;
    border-radius:2px;
    background: linear-gradient(90deg, rgba(255,140,66,0.98), rgba(255,65,108,0.98));
    opacity:0;
    transform: translateY(10px);
    animation: revealUp 900ms cubic-bezier(.2,.9,.3,1) forwards 520ms;
  }

  /* animations */
  @keyframes revealUp {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes glint {
    0% { opacity: 0; transform: translateX(-30%) skewX(-8deg); }
    35% { opacity: 1; transform: translateX(10%) skewX(-6deg); }
    65% { opacity: 1; transform: translateX(30%) skewX(-4deg); }
    100% { opacity: 0; transform: translateX(70%) skewX(-2deg); }
  }

  /* responsiveness */
  @media(max-width:900px){
    .quote-main{ font-size: clamp(1.8rem, 6.0vw, 3.8rem); }
    .quote-sub{ font-size: clamp(0.95rem, 2.6vw, 1.25rem); }
    .quote-highlight{ font-size: clamp(0.9rem, 2.4vw, 1.1rem); padding:5px 10px; }
    .quote-accent{ width:48px; }
  }

  @media(max-width:600px){
    .reveal-text{ width:92%; }
    .quote-main{ font-size: clamp(1.6rem, 7.6vw, 2.8rem); }
    .quote-sub{ font-size: clamp(0.85rem, 3.6vw, 1.05rem); }
  }

  /* keep previous scenery etc. unchanged (your original styles follow) */
  .scenery-container{ position:fixed; inset:0; opacity:0; transition:opacity 1s ease; z-index:50; overflow:hidden; pointer-events:none; }
  .scenery{ width:100%; height:100%; background: linear-gradient(to bottom, var(--sunset-deep) 0%, var(--sunset-mid) 25%, var(--sunset-orange) 50%, var(--sunset-warm) 75%, var(--sunset-peach) 100%); position:relative; filter:saturate(1.06); }
  .scenery::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background: radial-gradient(at 70% 80%, rgba(255,200,120,0.18) 0%, rgba(255,130,80,0.08) 20%, transparent 60%); mix-blend-mode: overlay; z-index:10; pointer-events:none; }

  .cloud{ position:absolute; border-radius:100px; opacity:0.95; filter:blur(0.2px); mix-blend-mode: screen; box-shadow: 0 10px 40px rgba(0,0,0,0.18); }
  .cloud::before, .cloud::after{ content:""; position:absolute; border-radius:100px; }
  .cloud1{ width:240px; height:80px; top:12%; left:10%; animation:drift 20s infinite; background: linear-gradient(90deg, rgba(255,220,235,0.95), rgba(180,120,200,0.85)); }
  .cloud1::before{ width:110px; height:110px; top:-40px; left:20px; background:linear-gradient(90deg, rgba(255,240,230,0.9), rgba(255,220,235,0.95)); }
  .cloud1::after{ width:120px; height:70px; top:-25px; right:10px; background:linear-gradient(90deg, rgba(255,230,240,0.9), rgba(180,120,200,0.85)); }
  .cloud2{ width:180px; height:65px; top:28%; right:18%; animation:drift 25s infinite; background: linear-gradient(90deg, rgba(255,210,220,0.95), rgba(230,190,240,0.9)); }
  .cloud2::before{ width:120px; height:90px; top:-30px; left:15px; background:linear-gradient(90deg, rgba(255,230,240,0.9), rgba(180,120,200,0.85)); }
  .cloud2::after{ width:90px; height:60px; top:-20px; right:15px; background:linear-gradient(90deg, rgba(255,220,235,0.95), rgba(255,200,220,0.9)); }
  .cloud3{ width:260px; height:95px; top:6%; left:58%; animation:drift 30s infinite; background: linear-gradient(90deg, rgba(255,230,240,0.96), rgba(180,120,200,0.85)); }
  .cloud3::before{ width:140px; height:115px; top:-45px; left:20px; background:linear-gradient(90deg, rgba(255,240,230,0.95), rgba(240,200,240,0.9)); }
  .cloud3::after{ width:150px; height:80px; top:-30px; right:20px; background:linear-gradient(90deg, rgba(255,220,235,0.95), rgba(235,180,240,0.9)); }
  @keyframes drift{ 0%{ transform:translateX(0) translateY(0); } 50%{ transform:translateX(36px) translateY(-6px); } 100%{ transform:translateX(0) translateY(0); } }

  .full-image-container{ position:absolute; inset:0; opacity:0; transition:opacity 1s ease; z-index:30; }
  .full-image{ width:100%; height:100%; object-fit:cover; display:block; }

  .progress-section{ position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; align-items:center; gap:10px; }
  .scroll-instruction{ font-size:0.9rem; color:#047400; text-align:center; opacity:0.8; animation:pulse 2s infinite; transition:opacity 0.35s ease; }
  @keyframes pulse{ 0%{opacity:0.8} 50%{opacity:0.4} 100%{opacity:0.8} }
  .progress-container{ width:200px; height:4px; background:rgba(0,0,0,0.12); border-radius:2px; overflow:hidden; }
  .progress-bar{ height:100%; width:0%; background: linear-gradient(90deg,#FF8C42 0%, #FF416C 100%); border-radius:2px; transition:width 0.05s linear; box-shadow:0 6px 20px rgba(255,100,60,0.08); }

  @media(max-width:600px){ .reveal-text{ font-size:1.4rem; padding:0 12px; } .door-frame{ width:260px; height:420px; } }

  /* Unmute / Sound button styles (always present) */
  .unmute-btn {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9999;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg,#FF8C42,#FF416C);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    user-select: none;
  }
  .unmute-btn svg { width: 18px; height: 18px; display:block; flex-shrink:0; }
  .unmute-btn .label { font-weight:600; letter-spacing:0.02em; }

  /* variant for muted state */
  .unmute-btn.muted { background: #666; }
  .unmute-btn.muted .label { opacity:0.95; }