:root{
    --night: #11141c;
    --night-2: #191d27;
    --dust: #e4d7bd;
    --dust-dim: #9a8e78;
    --dust-faint: #6b6355;
    --amber: #d3a15c;
    --amber-soft: #b98a4e;
    --amber-glow: rgba(211,161,92,.5);
    --ember: #c06a4a;
    --paper: #f1e4c6;
    --paper-ink: #2b2013;
    --paper-ink-soft: #5a4c34;
  }

  *{ box-sizing:border-box; }

  html, body{
    margin:0;
    height:100%;
    background: var(--night);
    color: var(--dust);
    font-family:'Spectral', serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  body{
    background:
      radial-gradient(ellipse 720px 520px at 50% 38%, rgba(211,161,92,.10) 0%, transparent 68%),
      linear-gradient(175deg, var(--night-2) 0%, var(--night) 55%, #0c0e13 100%);
    background-attachment: fixed;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
    mix-blend-mode: overlay;
    pointer-events:none;
    z-index:1;
  }

  #spotlight{
    position:fixed;
    inset:0;
    pointer-events:none;
    background: radial-gradient(circle 380px at 50% 44%, rgba(211,161,92,.16), transparent 72%);
    transition: opacity 2.4s ease;
    z-index:0;
  }

  #stage{
    position:relative;
    z-index:2;
    min-height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 48px 22px;
    opacity:0;
    transform: translateY(10px);
    transition: opacity 1.1s ease, transform 1.1s ease;
  }
  #stage.in{ opacity:1; transform:translateY(0); }

  .screen{
    width:100%;
    max-width: 560px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* ---------------- CLOCK ---------------- */
  .clock-wrap{ display:flex; flex-direction:column; align-items:center; }
  .clock-face-outer{
    position:relative;
    filter: drop-shadow(0 0 26px rgba(211,161,92,.28)) drop-shadow(0 20px 30px rgba(0,0,0,.55));
  }
  .clock-face-outer svg{ display:block; }

  .hourHand, .minuteHand, .secondHand{
    transform-origin: 100px 100px;
  }
  .hesitate{
    animation: hesitateWobble 1.6s ease-in-out;
  }
  @keyframes hesitateWobble{
    0%{ transform: rotate(var(--base,0deg)); }
    15%{ transform: rotate(calc(var(--base,0deg) + 2deg)); }
    30%{ transform: rotate(calc(var(--base,0deg) - 1.4deg)); }
    45%{ transform: rotate(calc(var(--base,0deg) + 1deg)); }
    60%{ transform: rotate(calc(var(--base,0deg) - 0.6deg)); }
    75%{ transform: rotate(calc(var(--base,0deg) + 0.4deg)); }
    100%{ transform: rotate(var(--base,0deg)); }
  }

  .rewinding{
    transition: transform 3.4s cubic-bezier(.4,0,.2,1);
  }

  /* ---------------- TYPOGRAPHY ---------------- */
  .eyebrow{
    font-family:'Spectral', serif;
    font-style:italic;
    font-weight:300;
    font-size: .96rem;
    color: var(--dust-dim);
    margin: 26px 0 10px;
    letter-spacing:.01em;
  }
  h1.big{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: clamp(2.1rem, 8vw, 3rem);
    line-height:1.22;
    color: var(--dust);
    margin: 0;
    max-width: 460px;
    text-shadow: 0 0 40px rgba(211,161,92,.18);
  }
  .phase-title{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: clamp(1.9rem, 7vw, 2.7rem);
    color: var(--dust);
    margin: 34px 0 0;
    letter-spacing:.015em;
    text-shadow: 0 0 40px rgba(211,161,92,.16);
  }
  .prose{
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.95;
    color: var(--dust);
    text-align:left;
    max-width: 480px;
  }
  .prose p{ margin:0 0 17px; }
  .prose p:last-child{ margin-bottom:0; }
  .prose.centered{ text-align:center; }

  .prose.drop p:first-of-type::first-letter{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:600;
    font-size: 3.3em;
    line-height:.7;
    float:left;
    padding: .06em .1em 0 0;
    color: var(--ember);
  }

  .em-line{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: 1.35rem;
    color: var(--amber);
    line-height:1.6;
    text-align:center;
    margin-top:24px;
  }

  /* ---------------- BUTTONS ---------------- */
  .ghost-btn{
    appearance:none;
    background:transparent;
    border: 1px solid var(--amber-soft);
    color: var(--dust);
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: 1.08rem;
    letter-spacing:.03em;
    padding: 13px 36px;
    border-radius: 1px;
    cursor:pointer;
    transition: background .5s ease, color .5s ease, border-color .5s ease, opacity .5s ease, box-shadow .5s ease;
  }
  .ghost-btn:hover{
    background: rgba(211,161,92,.14);
    color: var(--amber);
    border-color: var(--amber);
    box-shadow: 0 0 24px rgba(211,161,92,.22);
  }
  .btn-row{ display:flex; gap:16px; margin-top:42px; }
  .continue-row{ margin-top: 54px; }

  /* ---------------- FRAMES / COLLAGE ---------------- */
  .frame{
    background: var(--paper);
    padding: 8px 8px 8px;
    box-shadow: 0 0 0 1px rgba(211,161,92,.15), 0 30px 55px -18px rgba(0,0,0,.7), 0 0 34px -6px rgba(211,161,92,.16);
    display:inline-block;
  }
  .frame img{ display:block; width:100%; filter: sepia(.12) saturate(1.08) contrast(1.03) brightness(.98); }

  .collage-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; }
  .collage-4{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
  .rot-l{ transform: rotate(-1.6deg); }
  .rot-r{ transform: rotate(1.4deg); }

  /* Y-START: half-crop for side-by-side source images */
  .y-half{ overflow:hidden; }
  .y-half img{ display:block; width:200%; filter: sepia(.12) saturate(1.08) contrast(1.03) brightness(.98); }
  .y-half img.y-r{ transform: translateX(-50%); }
  /* Y-END */

  .fullbleed{
    position:relative;
    width:100%;
    height: 58vh;
    max-height: 480px;
    overflow:hidden;
    box-shadow: 0 0 0 1px rgba(211,161,92,.15), 0 30px 60px -18px rgba(0,0,0,.7);
  }
  .fullbleed img{
    width:100%; height:100%; object-fit:cover;
    filter: sepia(.12) saturate(1.08) contrast(1.03) brightness(.9);
  }
  .fullbleed .scrim{
    position:absolute; left:0; right:0; bottom:0; height:52%;
    background: linear-gradient(to top, rgba(6,5,4,.86), transparent);
  }
  .fullbleed .caption{
    position:absolute; left:0; right:0; bottom:0;
    padding: 28px 28px 26px;
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: 1.24rem;
    line-height:1.55;
    color: var(--dust);
  }

  /* ---------------- LETTER ---------------- */
  .letter{
    background: var(--paper);
    color: var(--paper-ink);
    padding: 48px 34px 40px;
    box-shadow: 0 0 0 1px rgba(211,161,92,.18), 0 34px 70px -20px rgba(0,0,0,.75), 0 0 48px -10px rgba(211,161,92,.14);
    max-width: 500px;
    width:100%;
    clip-path: polygon(0% 2.4%, 5% 0%, 10% 1.6%, 15% 0%, 20% 1.8%, 25% 0%, 30% 1.4%, 35% 0%, 40% 1.8%, 45% 0%, 50% 1.2%, 55% 0%, 60% 1.8%, 65% 0%, 70% 1.4%, 75% 0%, 80% 1.8%, 85% 0%, 90% 1.4%, 95% 0%, 100% 1.8%, 100% 100%, 0% 100%);
  }
  .letter .prose{ color: var(--paper-ink); }
  .letter .prose.drop p:first-of-type::first-letter{ color: var(--ember); }
  .letter .em-line{ color: var(--ember); }

  /* ---------------- WHATSAPP BUBBLE ---------------- */
  .wa-bubble{
    background: #dcf8c6;
    color:#1c1c1c;
    padding: 16px 18px 24px;
    border-radius: 12px 12px 12px 3px;
    max-width: 330px;
    width:100%;
    margin: 0 auto;
    position:relative;
    font-family:'Spectral', serif;
    font-weight: 300;
    font-size: 1.04rem;
    line-height:1.75;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.7), 0 0 30px -8px rgba(211,161,92,.18);
    text-align:left;
  }
  .wa-meta{
    position:absolute; right:14px; bottom:8px;
    font-size:.68rem;
    color:#5b7a5a;
    display:flex; align-items:center; gap:4px;
    font-family:'Spectral', serif;
  }
  .wa-meta svg{ display:block; }

  /* ---------------- QUOTE ---------------- */
  .quote{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:500;
    font-size: 1.3rem;
    line-height:1.6;
    color: var(--dust);
    max-width: 460px;
  }

  /* ---------------- ENDING ---------------- */
  #blackout{
    position:fixed; inset:0;
    background: #060505;
    opacity:0;
    transition: opacity 2.6s ease;
    pointer-events:none;
    z-index: 900;
  }
  #finalText{
    position:fixed; inset:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    padding: 0 30px;
    pointer-events:none;
    z-index: 901;
  }
  #finalText span{
    font-family:'Cormorant', serif;
    font-style:italic;
    font-weight:400;
    font-size: clamp(1.5rem, 5.8vw, 2rem);
    color: var(--amber);
    opacity:0;
    transition: opacity 2s ease;
    position:absolute;
    text-shadow: 0 0 30px rgba(211,161,92,.35);
  }

  @media (max-width:420px){
    .collage-2{ gap:10px; }
    .letter{ padding: 38px 22px 32px; }
    .fullbleed{ height:50vh; }
  }

  @media (prefers-reduced-motion: reduce){
    #stage{ transition:none; }
    .rewinding{ transition:none; }
    .hesitate{ animation:none; }
  }

  /* ===== X-START: enhancement styles (delete every X block to restore original) ===== */
  .x-clip{ overflow:hidden; }
  .x-clip img, .fullbleed img{ animation: xKenBurns 20s ease-in-out infinite alternate; }
  @keyframes xKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.065); } }
  #xDust{ position:fixed; inset:0; z-index:1; pointer-events:none; }
  #xPreloader{ position:fixed; inset:0; z-index:300; background:var(--night); display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; color:var(--dust-dim); font-family:'Cormorant',serif; font-style:italic; font-size:1.12rem; letter-spacing:.07em; transition:opacity 1.4s ease; }
  #xPreloader .xp-clock{ width:36px; height:36px; border:1.5px solid var(--amber-soft); border-radius:50%; opacity:.85; position:relative; }
  #xPreloader .xp-clock::after{ content:""; position:absolute; left:calc(50% - 1px); top:50%; width:2px; height:12px; background:var(--amber); transform-origin:top center; animation:xSpinBack 2.2s linear infinite; }
  @keyframes xSpinBack{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }
  #xAudio{ position:fixed; right:16px; bottom:14px; z-index:40; background:none; border:1px solid rgba(211,161,92,.32); color:var(--dust-dim); font-family:'Spectral',serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; cursor:pointer; border-radius:2px; opacity:.7; transition:color .4s, border-color .4s; }
  #xAudio:hover{ color:var(--amber); border-color:var(--amber-soft); }
  #xReplay{ position:fixed; left:50%; bottom:9vh; transform:translateX(-50%); z-index:930; background:none; border:1px solid rgba(211,161,92,.4); color:var(--dust-dim); font-family:'Cormorant',serif; font-style:italic; font-size:1.05rem; padding:10px 24px; cursor:pointer; opacity:0; border-radius:2px; transition:opacity 2.2s ease, color .4s; }
  #xReplay:hover{ color:var(--amber); }
  .x-reveal{ opacity:0; transform:translateY(9px); }
  .x-reveal.x-in{ opacity:1; transform:none; transition:opacity 1.05s ease, transform 1.05s ease; }
  @media (prefers-reduced-motion: reduce){
    .x-clip img, .fullbleed img{ animation:none; }
    .x-reveal{ opacity:1; transform:none; }
  }
  /* ===== X-END ===== */

  /* ===== X-START: design polish (softer transitions, vignette + warmth, typography, text boxes) ===== */
  @media (prefers-reduced-motion: no-preference){
    #stage{ transition: opacity 1.5s cubic-bezier(.37,0,.24,1), transform 1.5s cubic-bezier(.37,0,.24,1); }
  }

  /* deeper, warmer photo tone */
  .frame img, .fullbleed img, .x-clip img, .y-half img{
    filter: sepia(.2) saturate(1.13) contrast(1.05) brightness(.95) !important;
  }
  /* vignette + warm wash over each framed photo (kept inside the paper mat) */
  .frame{ position:relative; }
  .frame::after{
    content:""; position:absolute; inset:8px; pointer-events:none; z-index:2;
    background:
      radial-gradient(ellipse at 50% 40%, transparent 48%, rgba(16,8,1,.44) 100%),
      linear-gradient(180deg, rgba(211,161,92,.07), rgba(120,70,20,.05));
    mix-blend-mode: multiply;
  }
  .fullbleed::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
    background: radial-gradient(ellipse at 50% 38%, transparent 44%, rgba(10,5,1,.52) 100%);
    mix-blend-mode: multiply;
  }
  .fullbleed .scrim, .fullbleed .caption{ z-index:3; }

  /* typography */
  .prose{ font-size:1.1rem; line-height:2.02; letter-spacing:.004em; }
  .prose p{ margin:0 0 19px; }
  .phase-title{ letter-spacing:.02em; }
  .em-line{ font-size:1.5rem; line-height:1.5; margin-top:28px; }
  .fullbleed .caption{ font-size:1.3rem; line-height:1.6; padding:32px 30px 30px; }

  /* letter / paper text boxes */
  .letter{
    padding: 54px 42px 48px;
    background:
      radial-gradient(130% 90% at 50% -10%, rgba(255,250,236,.55), transparent 58%),
      var(--paper);
    box-shadow:
      0 0 0 1px rgba(139,106,53,.30),
      inset 0 0 70px rgba(150,110,55,.10),
      0 42px 82px -22px rgba(0,0,0,.78),
      0 0 64px -12px rgba(211,161,92,.18);
  }
  .letter .prose{ line-height:1.98; }

  /* whatsapp bubble refinement */
  .wa-bubble{
    background: linear-gradient(180deg, #e6fbd1, #d2f2bc);
    border-radius: 14px 14px 14px 4px;
    line-height: 1.82;
    padding: 18px 20px 26px;
    box-shadow: 0 24px 48px -18px rgba(0,0,0,.72), 0 0 34px -10px rgba(211,161,92,.2);
  }
  @media (prefers-reduced-motion: reduce){
    #stage{ transition: none; }
  }
  /* ===== X-END ===== */