/* ════════════════════════════════════════════════
   THRYD — pages/landing.css
   Video Hero · Pillars · Tagline · Features · Mystery
   ════════════════════════════════════════════════ */

/* ── STYLE PILLARS ───────────────────────────── */
#hero{
  height:100vh;width:100%;
  display:flex;position:relative;overflow:hidden;
}
.pillar{
  flex:1;height:100%;position:relative;
  overflow:hidden;
  transition:flex .75s cubic-bezier(.16,1,.3,1);
  border-right:1px solid rgba(26,23,20,0.06);
}
.pillar:last-child{border-right:none}
.pillar:hover{flex:4.5}

.pillar-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:grayscale(100%) brightness(0.48);
  transition:filter .75s ease;
  will-change:transform;
}
.pillar:hover .pillar-bg{filter:grayscale(15%) brightness(0.62);}
.pillar-core:hover      .pillar-bg{filter:grayscale(5%)  brightness(0.55)}
.pillar-minimal:hover   .pillar-bg{filter:grayscale(30%) brightness(0.6)  sepia(.08)}
.pillar-statement:hover .pillar-bg{filter:grayscale(0%)  brightness(0.55) saturate(1.4)}
.pillar-accents:hover   .pillar-bg{filter:grayscale(5%)  brightness(0.55) sepia(.25) saturate(1.3)}

.pillar-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,8,6,.88) 0%,rgba(10,8,6,.35) 45%,transparent 72%);
}
.pillar-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:42px 36px;z-index:10;
}
.pillar-n{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;color:rgba(245,241,235,.3);
  display:block;margin-bottom:8px;
}
.pillar-name{
  font-family:var(--display);
  font-size:clamp(26px,3.5vw,48px);
  letter-spacing:.06em;color:#fff;
  display:block;line-height:1;
  opacity:.18;transform:translateY(10px);
  transition:opacity .55s,transform .55s,font-size .55s;
}
.pillar:hover .pillar-name{opacity:1;transform:translateY(0);font-size:clamp(44px,6vw,80px);}
.pillar-kws{
  display:flex;gap:0;flex-wrap:wrap;
  margin-top:10px;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s .1s,transform .4s .1s;
}
.pillar:hover .pillar-kws{opacity:1;transform:translateY(0)}
.pillar-kw{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,241,235,.5);
}
.pillar-kw+.pillar-kw::before{content:' · ';opacity:.4;margin:0 6px}
.pillar-enter{
  display:inline-block;margin-top:20px;
  padding:9px 22px;
  background:var(--cream);color:var(--ink);
  font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;
  opacity:0;transform:translateY(8px);
  transition:opacity .4s .18s,transform .4s .18s,background .2s;
}
.pillar:hover .pillar-enter{opacity:1;transform:translateY(0)}
.pillar-enter:hover{background:var(--rust);color:#fff}
.hero-hint{
  position:absolute;bottom:30px;left:52px;z-index:20;
  font-family:var(--mono);font-size:9px;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,241,235,.35);
  animation:fadeUp 1s ease 1.2s both;
}

/* ── TAGLINE SECTION ─────────────────────────── */
.tagline-section{
  padding:160px 52px 140px;
  position:relative;overflow:hidden;
}
.tagline-bg-word{
  position:absolute;top:50%;left:-2%;
  transform:translateY(-50%);
  font-family:var(--display);
  font-size:30vw;line-height:1;
  color:rgba(26,23,20,0.035);
  pointer-events:none;white-space:nowrap;
  letter-spacing:-.02em;user-select:none;
}
.tagline{
  font-family:var(--display);
  font-size:clamp(56px,9vw,136px);
  line-height:.88;letter-spacing:.02em;
  max-width:920px;position:relative;
}
.tagline .serif-it{
  font-family:var(--serif);
  font-style:italic;font-weight:300;
  font-size:.88em;color:var(--rust);
}
.tagline-more{
  display:inline-block;
  margin-top:32px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);
  text-decoration:none;
  border-bottom:1px solid rgba(196,92,46,0.4);
  padding-bottom:4px;
  position:relative;
  z-index:1;
  transition:color .2s,border-color .2s;
}
.tagline-more:hover{
  color:var(--rust);
  border-color:var(--rust);
}
.tagline-aside{
  position:absolute;right:52px;bottom:0;
  font-family:var(--mono);font-size:11px;
  color:var(--muted);letter-spacing:.12em;
  line-height:1.9;max-width:200px;text-align:right;
}

/* ── THREE FEATURES ──────────────────────────── */
.three-wrap{
  padding:0 52px 160px;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;
  background:var(--border);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.feat{
  background:var(--bg);
  padding:60px 48px 56px;
  position:relative;overflow:hidden;
}
.feat:hover{background:var(--cream)}
.feat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rust);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.feat:hover::before{transform:scaleX(1)}
.feat-n{
  font-family:var(--display);font-size:110px;
  line-height:1;color:rgba(26,23,20,.04);
  position:absolute;top:12px;right:16px;
  letter-spacing:-.02em;pointer-events:none;
}
.feat-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--rust);margin-bottom:20px;display:block;
}
.feat-title{
  font-family:var(--display);font-size:44px;
  letter-spacing:.04em;line-height:1;margin-bottom:18px;
}
.feat-line{
  font-family:var(--serif);font-style:italic;
  font-weight:300;font-size:20px;
  color:var(--ink2);line-height:1.4;
}

/* ── MYSTERY LINE ────────────────────────────── */
.mystery-wrap{
  padding:140px 52px;
  display:flex;align-items:center;
  justify-content:space-between;
  gap:60px;
  border-bottom:1px solid var(--border);
}
.mystery-quote{
  font-family:var(--serif);font-style:italic;
  font-weight:300;
  font-size:clamp(32px,4.5vw,64px);
  line-height:1.2;max-width:680px;color:var(--ink);
}
.mystery-quote span{color:var(--rust)}
.mystery-sub{
  font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);flex-shrink:0;text-align:right;line-height:2;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media(max-width:900px){
  .tagline-section,.mystery-wrap{padding:80px 24px}
  .tagline-aside{display:none}
  .three-wrap{grid-template-columns:1fr;padding:0 24px 80px}
  .mystery-wrap{flex-direction:column;gap:32px}
  .mystery-sub{text-align:left}
  .pillar.active-pillar{flex:4.5}
  .pillar.active-pillar .pillar-bg{filter:grayscale(15%) brightness(0.62)}
  .pillar.active-pillar .pillar-name{opacity:1;transform:translateY(0);font-size:clamp(44px,6vw,80px)}
  .pillar.active-pillar .pillar-kws{opacity:1;transform:translateY(0)}
  .pillar.active-pillar .pillar-enter{opacity:1;transform:translateY(0)}
}