/* =========================================================
   TH4URA — Visual Research Project
   Organic Distortion System — separate visual universe
   ========================================================= */

@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=clash-display@500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --void:   #0a0a0a;
  --ink:    #e8e8e6;
  --ink-dim:#8a8a86;
  --forest: #385e1f;
  --aura:   #abff3c;
  --burn:   #ff3d00;
  --blood:  #8a0a0a;

  --t-primary: 'General Sans', 'Inter', sans-serif;
  --t-strong:  'Clash Display', 'General Sans', sans-serif;
  --t-serif:   'Instrument Serif', serif;
  --t-mono:    'IBM Plex Mono', monospace;

  --ease: cubic-bezier(.16,1,.3,1);
}

.th4{ background:var(--void); color:var(--ink); font-family:var(--t-primary); overflow-x:hidden; }
.th4 *,.th4 *::before,.th4 *::after{ box-sizing:border-box; }
.th4 img{ max-width:100%; display:block; }
.th4 a{ color:inherit; text-decoration:none; }
.th4 ::selection{ background:var(--aura); color:#0a0a0a; }
.th4 em{ font-family:var(--t-serif); font-style:italic; color:var(--aura); font-weight:400; }

.th4 .grain{
  position:fixed; inset:0; z-index:40; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- minimal chrome: back link + section dots ---------- */
.th4-back{
  position:fixed; top:26px; left:26px; z-index:200; display:flex; align-items:center; gap:10px;
  font-family:var(--t-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim);
  transition:color .3s;
}
.th4-back:hover{ color:var(--aura); }

.th4-dots{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:200;
  display:flex; flex-direction:column; gap:16px;
}
.th4-dots a{
  width:7px; height:7px; border-radius:50%; border:1px solid var(--ink-dim); transition:all .35s var(--ease);
}
.th4-dots a.active{ background:var(--aura); border-color:var(--aura); box-shadow:0 0 10px var(--aura); transform:scale(1.3); }
@media (max-width:800px){ .th4-dots{ display:none; } }

/* ---------- hero ---------- */
.th4-hero{
  position:relative; height:100svh; min-height:620px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; overflow:hidden;
  padding:90px 20px;
  background:var(--void) url('../img/th4ura/hero-bg.jpg') center/cover no-repeat;
}
.th4-hero .content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.th4-hero .sigil{
  width:min(16vw,130px); margin-bottom:-14px; position:relative; z-index:2;
  filter:drop-shadow(0 0 26px rgba(171,255,60,.45));
  animation:th4float 7s ease-in-out infinite;
}
@keyframes th4float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
.th4-hero h1{
  position:relative; z-index:2; font-family:var(--t-strong); font-weight:600; font-size:clamp(40px,9vw,140px);
  letter-spacing:-.01em; line-height:1; color:var(--ink);
}
.th4-hero .sub{
  position:relative; z-index:2; margin-top:14px; font-family:var(--t-mono); font-size:12px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--aura);
}
.th4-hero .tagline{
  position:relative; z-index:2; margin-top:22px; font-family:var(--t-mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink-dim); text-transform:uppercase;
}
.th4-hero .scrolldown{
  position:relative; z-index:2; font-family:var(--t-mono); font-size:10px; letter-spacing:.2em;
  color:var(--ink-dim); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px;
  flex:none; margin-top:36px;
}
.th4-hero .scrolldown .line{ width:1px; height:34px; background:var(--aura); opacity:.6; animation:th4scroll 1.8s ease-in-out infinite; }
@keyframes th4scroll{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 50.01%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ---------- shared section scaffolding ---------- */
.th4-section{ padding:140px 8vw; position:relative; scroll-margin-top:40px; border-top:1px solid rgba(232,232,230,.08); }
.th4-label{ font-family:var(--t-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--aura); display:flex; align-items:center; gap:14px; margin-bottom:28px; }
.th4-label::before{ content:''; width:26px; height:1px; background:var(--aura); }
.th4-section h2{ font-family:var(--t-strong); font-weight:700; font-size:clamp(30px,4.6vw,64px); line-height:1.05; max-width:900px; }
.th4-section .lede{ margin-top:26px; font-size:18px; line-height:1.85; color:var(--ink-dim); max-width:640px; }
.th4-section .lede em{ display:block; margin-top:14px; font-size:22px; }

/* ---------- Collaborations ---------- */
.th4-roles{ margin-top:50px; display:flex; flex-wrap:wrap; gap:12px; max-width:820px; }
.th4-roles span{
  font-family:var(--t-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(232,232,230,.25); border-radius:100px; padding:11px 20px; color:var(--ink-dim);
  transition:all .35s var(--ease);
}
.th4-roles span:hover{ border-color:var(--aura); color:var(--aura); }

/* ---------- Open Call ---------- */
.th4-call-grid{ margin-top:60px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(232,232,230,.1); border:1px solid rgba(232,232,230,.1); }
.th4-call-card{
  background:var(--void); padding:50px 40px; transition:background .5s; border:none; cursor:pointer;
  display:block; width:100%; text-align:left; font-family:inherit; color:inherit;
}
.th4-call-card:hover{ background:#111; }
.th4-call-card .k{ font-family:var(--t-mono); font-size:11px; color:var(--ink-dim); letter-spacing:.14em; text-transform:uppercase; }
.th4-call-card h3{ font-family:var(--t-strong); font-weight:700; font-size:30px; margin:16px 0 18px; }
.th4-call-card p{ font-size:14.5px; line-height:1.75; color:var(--ink-dim); margin-bottom:26px; }
.th4-call-card .go{ font-family:var(--t-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--aura); display:inline-flex; gap:10px; align-items:center; }
.th4-call-card .go .arrow{ transition:transform .4s var(--ease); }
.th4-call-card:hover .go .arrow{ transform:translateX(6px); }
.th4-call-note{ margin-top:34px; font-family:var(--t-mono); font-size:11.5px; line-height:2; color:var(--ink-dim); max-width:640px; }
.th4-call-note span{ color:var(--burn); }
@media (max-width:800px){ .th4-call-grid{ grid-template-columns:1fr; } }

/* ---------- Experiences (future teaser) ---------- */
.th4-exp{ text-align:center; padding:160px 8vw; }
.th4-exp h2{ font-family:var(--t-serif); font-style:italic; font-weight:400; font-size:clamp(28px,5vw,58px); max-width:820px; margin:0 auto 20px; line-height:1.3; }
.th4-exp .list{ margin-top:40px; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }
.th4-exp .list span{ font-family:var(--t-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.th4-exp .list span:not(:last-child)::after{ content:'/'; margin-left:10px; color:var(--ink-dim); opacity:.4; }

/* ---------- Final CTA + form ---------- */
.th4-final{
  padding:150px 8vw 170px; text-align:center; position:relative;
  display:flex; flex-direction:column; align-items:center;
  background:var(--void) url('../img/th4ura/final-bg.jpg') center/cover no-repeat;
}
.th4-final .glow2{ position:absolute; inset:0; background:radial-gradient(ellipse at center, rgba(171,255,60,.08), transparent 65%); pointer-events:none; }
.th4-final h2{
  position:relative; font-family:var(--t-serif); font-style:italic; font-weight:400;
  font-size:clamp(34px,5.6vw,64px); line-height:1.2; max-width:760px;
}
.th4-final p{ position:relative; margin-top:24px; max-width:440px; color:var(--ink-dim); font-size:15.5px; line-height:1.8; }
.th4-final .th4-cta-btn{ margin-top:42px; }

.th4-form{
  position:relative; margin:56px auto 0; max-width:640px; text-align:left;
  border:1px solid rgba(232,232,230,.14); border-radius:4px; padding:44px;
}
.th4-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px; }
.th4-form label{ display:block; font-family:var(--t-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:10px; }
.th4-form input, .th4-form select, .th4-form textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(232,232,230,.25); color:var(--ink);
  font-family:var(--t-primary); font-size:15.5px; padding:10px 2px; outline:none; transition:border-color .3s;
}
.th4-form select{ cursor:pointer; }
.th4-form select option{ background:var(--void); }
.th4-form input:focus, .th4-form select:focus, .th4-form textarea:focus{ border-color:var(--aura); }
.th4-form textarea{ resize:vertical; min-height:100px; }
.th4-form .full{ margin-bottom:26px; }
@media (max-width:600px){ .th4-form{ padding:28px; } .th4-form .row{ grid-template-columns:1fr; gap:0; } }

.th4-cta-btn{
  display:inline-block; font-family:var(--t-mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; padding:17px 34px;
  border:1px solid var(--aura); border-radius:100px; color:var(--aura); transition:all .4s var(--ease); cursor:pointer; background:none;
}
.th4-cta-btn.solid{ background:var(--aura); color:#0a0a0a; }
.th4-cta-btn:hover{ background:var(--aura); color:#0a0a0a; box-shadow:0 0 30px rgba(171,255,60,.4); }

/* ---------- Modal (Open Call / final CTA) ---------- */
.th4-modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:24px; visibility:hidden; opacity:0; transition:opacity .4s var(--ease), visibility .4s; }
.th4-modal.open{ visibility:visible; opacity:1; }
.th4-modal-backdrop{ position:absolute; inset:0; background:rgba(5,6,4,.82); backdrop-filter:blur(6px); }
.th4-modal-box{
  position:relative; width:100%; max-width:640px; max-height:88vh; overflow:auto;
  background:var(--void); border:1px solid rgba(232,232,230,.16); border-radius:8px; padding:44px;
  transform:translateY(18px) scale(.97); transition:transform .4s var(--ease);
}
.th4-modal.open .th4-modal-box{ transform:translateY(0) scale(1); }
.th4-modal-box h3{ font-family:var(--t-strong); font-weight:700; font-size:clamp(22px,3.4vw,32px); margin-bottom:6px; }
.th4-modal-close{
  position:absolute; top:20px; right:20px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(232,232,230,.2);
  color:var(--ink-dim); cursor:pointer; transition:all .3s; font-size:14px;
}
.th4-modal-close:hover{ border-color:var(--aura); color:var(--aura); }
.th4-modal-box .th4-form{ margin:24px 0 0; border:none; padding:0; max-width:none; }
@media (max-width:600px){ .th4-modal-box{ padding:28px; } }

.th4-foot{
  border-top:1px solid rgba(232,232,230,.1); padding:30px 8vw; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:14px; font-family:var(--t-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim);
}

.th4-r{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.th4-r.in{ opacity:1; transform:none; }

@media (max-width:800px){
  .th4-section{ padding:90px 6vw; }
  .th4-exp{ padding:100px 6vw; }
  .th4-final{ padding:100px 6vw 140px; }
}