/* ===== TACITURI — home / threshold ===== */

/* ---------- Threshold hero ---------- */
.threshold{
  position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center;
  background:var(--ink-2); overflow:hidden; padding:120px var(--pad) 90px; text-align:center;
}
.threshold-bg{
  position:absolute; inset:-4%; background:url("assets/hero/dragonfly.jpg") center 42%/cover no-repeat;
  filter:grayscale(.3) contrast(1.04) blur(2px); opacity:.62; transform:scale(1.06);
  animation:th-drift 30s ease-in-out infinite alternate;
}
@keyframes th-drift{ from{ transform:scale(1.06) translateY(0); } to{ transform:scale(1.12) translateY(-14px); } }
.threshold-veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 32%, rgba(25,28,33,.18) 0%, rgba(25,28,33,.66) 56%, rgba(20,22,26,.95) 100%),
    linear-gradient(180deg, rgba(20,22,26,.7) 0%, transparent 22%, transparent 60%, rgba(20,22,26,.9) 100%);
}
.threshold-inner{ position:relative; z-index:2; max-width:920px; }

.th-eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.42em; font-size:15px;
  color:var(--d-muted); margin:0 0 2.4rem; padding-left:.42em;
}
.th-title{
  font-family:var(--serif); font-weight:400; color:var(--d-text);
  font-size:clamp(58px,13vw,184px); letter-spacing:.1em; line-height:.96;
  margin:0; padding-left:.1em; text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.th-sub{
  font-family:var(--serif); font-style:italic; color:var(--d-text-2);
  font-size:clamp(21px,2.7vw,33px); letter-spacing:.06em; margin:1.1rem 0 0; font-weight:400;
}
.th-divider{ display:flex; align-items:center; justify-content:center; gap:18px; margin:2.2rem 0; color:var(--bronze-lite); }
.th-divider span{ width:clamp(40px,9vw,120px); height:1px; background:linear-gradient(90deg, transparent, var(--d-line-2)); }
.th-divider span:last-child{ background:linear-gradient(90deg, var(--d-line-2), transparent); }
.th-quote{
  font-family:var(--serif); font-style:italic; color:var(--d-text);
  font-size:clamp(25px,3.6vw,42px); letter-spacing:.01em; margin:0 0 2.8rem; font-weight:300;
}
.th-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.th-scroll{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--d-muted);
}
.th-scroll .mono{ font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--d-muted); }
.th-mouse{ width:18px; height:28px; border:1px solid var(--d-line-2); border-radius:10px; display:flex; justify-content:center; padding-top:5px; }
.th-mouse span{ width:2px; height:6px; background:var(--bronze-lite); border-radius:2px; animation:th-mouse 1.8s var(--ease) infinite; }
@keyframes th-mouse{ 0%{ opacity:0; transform:translateY(-3px);} 40%{ opacity:1;} 80%{ opacity:0; transform:translateY(7px);} 100%{opacity:0;} }

.th-marg{ position:absolute; z-index:2; text-align:left; max-width:210px; color:var(--d-muted); line-height:1.65; }
.th-marg .num{ border-color:var(--d-line-2); color:var(--bronze-lite); }
.th-marg-1{ top:16%; left:6%; }
.th-marg-2{ top:18%; right:6%; text-align:right; }
.th-marg-2 .num{ margin-left:auto; }
@media (max-width:1180px){ .th-marg{ display:none; } }
@media (prefers-reduced-motion:reduce){ .threshold-bg,.th-mouse span{ animation:none; } }

/* ---------- Paper room / gates ---------- */
.paper-room{ background:var(--paper); }
.room-head{ max-width:880px; margin-bottom:clamp(40px,5vw,72px); }
.room-title{ font-size:clamp(26px,3.5vw,46px); color:var(--text); line-height:1.16; }
.gates{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px); }
.gate{
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  background:var(--paper-card); border:1px solid var(--line-soft);
  padding:clamp(26px,2.6vw,40px); min-height:340px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.gate::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--bronze); transition:width .5s var(--ease); }
.gate:hover{ transform:translateY(-6px); border-color:var(--line); box-shadow:0 26px 50px -30px rgba(40,36,28,.55); }
.gate:hover::after{ width:100%; }
.gate-top{ display:flex; align-items:center; justify-content:space-between; width:100%; margin-bottom:30px; }
.gate-num{ color:var(--bronze-2); font-size:15px; letter-spacing:.1em; }
.gate-portal{ width:34px; height:44px; color:var(--text); margin-bottom:22px; transition:color .4s, transform .5s var(--ease); }
.gate:hover .gate-portal{ color:var(--bronze-2); transform:translateY(-3px); }
.gate-title{ font-size:clamp(34px,3.6vw,50px); color:var(--text); margin-bottom:14px; letter-spacing:.01em; }
.gate-desc{ color:var(--text-2); font-size:20px; line-height:1.5; margin:0 0 26px; max-width:34ch; }
.gate-go{ margin-top:auto; display:inline-flex; align-items:center; gap:10px; color:var(--bronze-2); }
.gate-go .ar{ transition:transform .4s var(--ease); }
.gate:hover .gate-go .ar{ transform:translateX(5px); }

/* ---------- Intro room ---------- */
.intro-room{ background:var(--paper-2); }
/* On the dark-themed home page these sections sit on a light (paper)
   background — keep ghost buttons dark so they're visible, not just on hover. */
body.theme-dark .intro-room .btn-ghost,
body.theme-dark .sound-room .btn-ghost{ border-color:var(--line); color:var(--text); }
body.theme-dark .intro-room .btn-ghost:hover,
body.theme-dark .sound-room .btn-ghost:hover{ border-color:var(--bronze); color:var(--bronze-2); }
.intro-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,96px); align-items:start; }
.intro-lead{ font-family:var(--serif); font-size:clamp(24px,3vw,36px); line-height:1.28; color:var(--text); margin:0 0 1.6rem; font-weight:400; }
.intro-body{ color:var(--text-2); margin:0 0 2rem; max-width:54ch; }
.intro-quote{ margin:0; border-left:1px solid var(--bronze); padding:6px 0 6px 30px; }
.intro-quote blockquote{ font-family:var(--serif); font-style:italic; font-size:clamp(22px,2.6vw,30px); line-height:1.32; color:var(--text); margin:0 0 1rem; }
.intro-quote figcaption{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:14px; color:var(--muted); }

/* ---------- Download room ---------- */
.download-room{ background:var(--ink); color:var(--d-text); }
.download-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(36px,6vw,88px); align-items:center; }
.download-book{ margin:0; display:flex; justify-content:center; }
.download-book img{ width:100%; max-width:440px; }
.download-room .eyebrow{ color:var(--d-muted); }
.download-room .eyebrow::before{ background:var(--bronze-lite); }
.download-title{ font-size:clamp(30px,4vw,52px); color:var(--d-text); line-height:1.1; margin-bottom:1.4rem; }
.download-body{ color:var(--d-text-2); max-width:48ch; margin:0 0 2rem; }
.download-meta{ display:flex; gap:26px; flex-wrap:wrap; margin-bottom:2.2rem; padding-top:1.4rem; border-top:1px solid var(--d-line); }
.download-meta .mono{ color:var(--d-muted); }

/* ---------- Sound room ---------- */
.sound-room{ background:var(--paper); }
.sound-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(30px,4vw,54px); flex-wrap:wrap; }
.sound-title{ font-size:clamp(26px,3.4vw,44px); color:var(--text); line-height:1.12; }
.sound-flat{ display:block; position:relative; overflow:hidden; border:1px solid var(--line-soft); }
.sound-flat img{ width:100%; transition:transform 1.2s var(--ease); }
.sound-flat:hover img{ transform:scale(1.03); }
.sound-flat-cap{ position:absolute; left:20px; bottom:16px; color:var(--d-text-2); background:rgba(20,22,26,.5); backdrop-filter:blur(3px); padding:8px 14px; font-size:13.5px; letter-spacing:.1em; }
.stream-cta{ display:flex; align-items:center; gap:22px; margin-top:30px; flex-wrap:wrap; }
.stream-light{ border-color:var(--line); color:var(--muted); }
.stream-light:hover{ border-color:var(--bronze); color:var(--bronze-2); }

@media (max-width:920px){
  .gates{ grid-template-columns:1fr; }
  .gate{ min-height:0; }
  .intro-grid,.download-grid{ grid-template-columns:1fr; }
  .download-book{ max-width:380px; }
}

/* ---------- Mobile hero ---------- */
@media (max-width:600px){
  .threshold{ padding:104px var(--pad) 132px; }
  .th-eyebrow{ margin-bottom:1.5rem; }
  .th-title{ font-size:clamp(42px,15vw,74px); letter-spacing:.04em; }
  .th-sub{ font-size:15px; }
  .th-quote{ font-size:clamp(20px,5.6vw,27px); margin-bottom:2.2rem; }
  .th-actions{ width:100%; gap:12px; }
  .th-actions .btn{ width:100%; justify-content:center; }
  .th-scroll{ bottom:30px; }
}
/* On short viewports the scroll hint would collide with the buttons — drop it. */
@media (max-width:600px) and (max-height:780px){
  .th-scroll{ display:none; }
}