:root{
    --bg:#090909;
    --text:#F5F5F2;
    --text-soft:#BEBEBE;
    --accent:#D4AF72;
    --ease-slow: cubic-bezier(.19,1,.22,1);
  }
  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-weight:300;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1{ font-family:'Cormorant Garamond', serif; font-weight:400; letter-spacing:0.01em; }
  ::selection{ background:var(--accent); color:#090909; }

  #loader{
    position:fixed; inset:0;
    background:var(--bg);
    z-index:10000;
    display:flex; align-items:center; justify-content:center;
    transition:opacity 1s var(--ease-slow);
  }
  #loader.hide{ opacity:0; pointer-events:none; }
  .loader-inner{ text-align:center; }
  .loader-dot{
    width:5px; height:5px; margin:0 auto 22px;
    border-radius:50%;
    background:var(--accent);
    animation:breathe 4.2s ease-in-out infinite;
  }
  @keyframes breathe{
    0%,100%{ opacity:0.3; transform:scale(1); }
    50%{ opacity:0.9; transform:scale(1.22); }
  }
  .loader-text{
    font-size:13px;
    letter-spacing:0.14em;
    color:var(--text-soft);
    text-transform:lowercase;
  }

  #intro{
    position:fixed; inset:0;
    background:var(--bg);
    z-index:9000;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    opacity:1;
    transition:opacity 2.3s var(--ease-slow);
    padding:24px;
  }
  #intro.leaving{ opacity:0; pointer-events:none; }
  .intro-title{
    font-size:clamp(28px, 5vw, 52px);
    font-weight:400;
    margin-bottom:18px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 2.1s var(--ease-slow), transform 2.1s var(--ease-slow);
  }
  .intro-title.reveal{ opacity:1; transform:translateY(0); }
  .intro-sub{
    font-size:clamp(13px, 1.6vw, 16px);
    color:var(--text-soft);
    letter-spacing:0.04em;
    margin-bottom:64px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 2.1s var(--ease-slow), transform 2.1s var(--ease-slow);
  }
  .intro-sub.reveal{ opacity:1; transform:translateY(0); }

  .password-form{
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    opacity:0;
    transform:translateY(10px);
    transition:opacity 2.1s var(--ease-slow), transform 2.1s var(--ease-slow);
  }
  .password-form.reveal{ opacity:1; transform:translateY(0); }
  #passwordInput{
    background:none;
    border:1px solid rgba(245,245,242,0.25);
    color:var(--text);
    padding:13px 20px;
    font-size:13px;
    letter-spacing:0.06em;
    border-radius:999px;
    outline:none;
    text-align:center;
    width:190px;
    max-width:56vw;
    font-family:'Inter', sans-serif;
    font-weight:300;
    transition:border-color 0.5s ease;
  }
  #passwordInput::placeholder{ color:var(--text-soft); opacity:0.55; }
  #passwordInput:focus{ border-color:var(--accent); }
  #passwordInput.invalid{ border-color:rgba(197,110,98,0.7); }
  #passwordSubmit{
    background:none;
    border:1px solid rgba(245,245,242,0.25);
    color:var(--text);
    padding:14px 34px;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    cursor:pointer;
    border-radius:999px;
    transition:border-color 0.6s ease, color 0.6s ease, letter-spacing 0.6s ease;
  }
  #passwordSubmit:hover{
    border-color:var(--accent);
    color:var(--accent);
    letter-spacing:0.24em;
  }
  #passwordSubmit:disabled{ opacity:0.5; cursor:default; }

  #hintArea{
    position:relative;
    margin-top:38px;
    width:min(400px, 84vw);
    opacity:0;
    transform:translateY(10px);
    transition:opacity 2.1s var(--ease-slow), transform 2.1s var(--ease-slow);
  }
  #hintArea.reveal{ opacity:1; transform:translateY(0); }
  .hint-text{
    position:absolute;
    left:0; right:0; top:0;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:clamp(13px, 1.5vw, 15px);
    line-height:1.85;
    color:var(--text-soft);
    opacity:0;
    transition:opacity 1.6s var(--ease-slow);
    pointer-events:none;
  }
  .hint-text.show{ opacity:0.8; }