:root{
    --cover-teal-hi:#155a5c;
    --cover-teal:#0f3d3e;
    --cover-teal-lo:#082627;
    --gold:#d4af37;
    --gold-bright:#f3dd93;
    --gold-dim:#8a6f2b;
    --page:#f4e8cc;
    --page-shadow:#e3d3ac;
    --ink:#4a3524;
    --night:#060f14;
  }

  *{ box-sizing:border-box; }

  html,body{
    height:100%;
    margin:0;
    background:linear-gradient(135deg, rgb(181, 248, 99), rgb(51, 193, 115), rgb(15, 104, 91));
    overflow:hidden;
    font-family:'Cormorant Garamond', serif;
  }

  .stage{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    /*
    background:
      radial-gradient(ellipse at 50% 38%, rgba(21,90,92,0.35) 0%, rgba(6,15,20,0) 55%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.6) 0%, rgba(6,15,20,0) 60%),
      var(--night); */
      background:linear-gradient(135deg, rgb(181, 248, 99), rgb(51, 193, 115), rgb(15, 104, 91));
  }

  /* starfield: layered fixed dots, no JS needed */
  .stars, .stars::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 22%, #d8ecec 0%, transparent 60%),
      radial-gradient(1.5px 1.5px at 78% 15%, #d8ecec 0%, transparent 60%),
      radial-gradient(1px 1px at 33% 68%, #bcd7d7 0%, transparent 60%),
      radial-gradient(1.5px 1.5px at 88% 62%, #d8ecec 0%, transparent 60%),
      radial-gradient(1px 1px at 60% 8%, #bcd7d7 0%, transparent 60%),
      radial-gradient(1.5px 1.5px at 20% 85%, #d8ecec 0%, transparent 60%),
      radial-gradient(1px 1px at 92% 88%, #bcd7d7 0%, transparent 60%),
      radial-gradient(1.5px 1.5px at 48% 92%, #d8ecec 0%, transparent 60%),
      radial-gradient(1px 1px at 6% 55%, #bcd7d7 0%, transparent 60%);
    animation: twinkle 5s ease-in-out infinite;
    pointer-events:none;
  }
  .stars::after{ animation-delay:2.4s; opacity:0.5; transform:scale(1.2) translateY(10px); }

  @keyframes twinkle{
    0%, 100% { opacity:0.55; }
    50% { opacity:1; }
  }

  /* drifting embers/motes — sparse, thematic, not decoration-for-its-own-sake */
  .mote{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle, var(--gold-bright) 0%, rgba(212,175,55,0) 70%);
    opacity:0;
    animation: rise 7s ease-in infinite;
  }
  .mote:nth-child(1){ left:32%; width:5px; height:5px; animation-delay:2.4s; }
  .mote:nth-child(2){ left:64%; width:4px; height:4px; animation-delay:3.6s; }
  .mote:nth-child(3){ left:47%; width:6px; height:6px; animation-delay:4.4s; }
  .mote:nth-child(4){ left:57%; width:3px; height:3px; animation-delay:5.1s; }

  @keyframes rise{
    0%{ bottom:32%; opacity:0; transform:translateX(0); }
    15%{ opacity:0.9; }
    80%{ opacity:0.5; }
    100%{ bottom:78%; opacity:0; transform:translateX(18px); }
  }

  .book-scene{
    position:relative;
    width:min(74vw, 620px);
    aspect-ratio: 3 / 2.05;
    perspective: 2400px;
    z-index:2;
  }

  /* the page sits beneath the covers, revealed as they swing open */
  .page{
    position:absolute;
    inset:0;
    border-radius:6px;
    background:
      radial-gradient(ellipse at 50% 42%, #fbf3dd 0%, var(--page) 60%, var(--page-shadow) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(74,53,36,0.25),
      inset 0 0 60px rgba(74,53,36,0.18),
      0 20px 60px rgba(0,0,0,0.55);
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .page-content{
    text-align:center;
    padding:0 8%;
    opacity:0;
    transform:translateY(10px);
    animation: reveal-text 1.1s ease-out forwards;
    animation-delay: 2.35s;
  }

  @keyframes reveal-text{
    to{ opacity:1; transform:translateY(0); }
  }

  .wordmark{
    font-family:'Cinzel Decorative', serif;
    font-weight:700;
    letter-spacing:0.04em;
    font-size:clamp(1.5rem, 4.2vw, 2.6rem);
    color:var(--ink);
    margin:0;
    line-height:1.15;
  }

  .divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px auto;
    width:60%;
    color:var(--gold-dim);
  }
  .divider .line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  }
  .divider svg{ width:16px; height:16px; flex-shrink:0; }

  .subtitle{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(0.95rem, 1.7vw, 1.15rem);
    color:var(--ink);
    opacity:0.75;
    margin:0;
    letter-spacing:0.03em;
  }

  /* covers */
  .cover{
    position:absolute;
    top:0;
    bottom:0;
    width:50%;
    background:
      linear-gradient(155deg, var(--cover-teal-hi) 0%, var(--cover-teal) 45%, var(--cover-teal-lo) 100%);
    box-shadow:
      inset 0 0 0 1px rgba(212,175,55,0.4),
      inset 0 0 24px rgba(0,0,0,0.45),
      0 10px 40px rgba(0,0,0,0.6);
    backface-visibility:hidden;
    transform-style:preserve-3d;
  }

  .cover::before{
    content:"";
    position:absolute;
    inset:10px;
    border:1.5px solid rgba(212,175,55,0.55);
    border-radius:3px;
    pointer-events:none;
  }

  .cover-left{
    left:0;
    border-radius:6px 0 0 6px;
    transform-origin:left center;
    animation: open-left 1.4s cubic-bezier(.62,.05,.31,1) forwards;
    animation-delay:0.9s;
  }
  .cover-right{
    right:0;
    border-radius:0 6px 6px 0;
    transform-origin:right center;
    animation: open-right 1.4s cubic-bezier(.62,.05,.31,1) forwards;
    animation-delay:0.9s;
  }

  @keyframes open-left{
    0%{ transform:rotateY(0deg); }
    100%{ transform:rotateY(-152deg); }
  }
  @keyframes open-right{
    0%{ transform:rotateY(0deg); }
    100%{ transform:rotateY(152deg); }
  }

  /* emblem centered on the still-closed cover */
  .emblem{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
    opacity:1;
    animation: emblem-fade 0.5s ease-in forwards;
    animation-delay:0.85s;
  }
  @keyframes emblem-fade{
    to{ opacity:0; }
  }

  .emblem svg{
    width:22%;
    filter: drop-shadow(0 0 10px rgba(212,175,55,0.45));
  }

  /* bloom of light timed to the opening */
  .bloom{
    position:absolute;
    left:50%;
    top:50%;
    width:40px;
    height:40px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(243,221,147,0.9) 0%, rgba(243,221,147,0) 70%);
    transform:translate(-50%,-50%) scale(0);
    animation: bloom 1.6s ease-out forwards;
    animation-delay:1.1s;
    pointer-events:none;
    z-index:4;
  }
  @keyframes bloom{
    0%{ transform:translate(-50%,-50%) scale(0); opacity:0.9; }
    60%{ opacity:0.6; }
    100%{ transform:translate(-50%,-50%) scale(22); opacity:0; }
  }

  .spine-shadow{
    position:absolute;
    left:50%;
    top:2%;
    bottom:2%;
    width:14px;
    transform:translateX(-50%);
    background:linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 40%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.35));
    z-index:3;
    pointer-events:none;
  }

  .enter-btn{
    display:inline-block;
    margin-top:22px;
    padding:10px 30px;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:500;
    font-size:1rem;
    letter-spacing:0.04em;
    color:var(--ink);
    text-decoration:none;
    border:1px solid var(--gold-dim);
    border-radius:2px;
    background:linear-gradient(180deg, rgba(212,175,55,0.12), rgba(212,175,55,0.03));
    transition: background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
  }
  .enter-btn:hover{
    background:linear-gradient(180deg, rgba(212,175,55,0.28), rgba(212,175,55,0.1));
    border-color:var(--gold);
    transform:translateY(-1px);
  }
  .enter-btn:focus-visible{
    outline:2px solid var(--gold-dim);
    outline-offset:3px;
  }
  .enter-btn:active{
    transform:translateY(0);
  }

  @media (prefers-reduced-motion: reduce){
    .cover-left, .cover-right, .page-content, .emblem, .bloom, .hint, .mote, .stars, .stars::after{
      animation:none !important;
    }
    .cover-left{ transform:rotateY(-152deg); }
    .cover-right{ transform:rotateY(152deg); }
    .page-content{ opacity:1; transform:none; }
    .emblem{ opacity:0; }
  }