/*
Theme Name: Terykon Animated v0.3
Theme URI: https://terykon.com
Author: Terykon
Description: Animated dark editorial WordPress theme for Terykon — independent Ukraine-based analysis.
Version: 0.3.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terykon
*/

:root{
  --bg:#090a09;
  --ink:#f3eddf;
  --muted:#b9af9f;
  --coal:#151612;
  --coal2:#10120e;
  --ember:#e2683f;
  --gold:#c59a5b;
  --line:#35382f;
  --paper:#efe1c8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 0%,rgba(226,104,63,.16),transparent 30%),
    radial-gradient(circle at 80% 10%,rgba(197,154,91,.12),transparent 28%),
    linear-gradient(180deg,#11130f,#090a09 42%);
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  background:#090a09;
  z-index:999;
  pointer-events:none;
  animation:pageFade 1s ease-out forwards;
}
@keyframes pageFade{to{opacity:0;visibility:hidden}}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:100% 4px;
  mix-blend-mode:overlay;
  z-index:50;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1180px,calc(100% - 10vw));margin:0 auto}
.ambient{
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 14%,rgba(226,104,63,.15),transparent 24%),
    radial-gradient(circle at 72% 12%,rgba(197,154,91,.12),transparent 25%),
    radial-gradient(circle at 55% 82%,rgba(94,98,87,.22),transparent 38%);
  filter:blur(24px);
  animation:ambientMove 18s ease-in-out infinite alternate;
}
@keyframes ambientMove{from{transform:translate(-2%,-1%) scale(1)}to{transform:translate(2%,1.5%) scale(1.05)}}
.reveal{
  opacity:0;
  transform:translateY(28px);
  filter:blur(6px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1),filter .9s cubic-bezier(.16,1,.3,1);
}
.reveal.in{opacity:1;transform:none;filter:none}
.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:18px 5vw;
  background:rgba(9,10,9,.88);
  border-bottom:1px solid rgba(243,237,223,.12);
  backdrop-filter:blur(14px);
  transition:padding .35s,border-color .35s,background .35s;
}
.site-header.scrolled{
  padding-top:13px;
  padding-bottom:13px;
  background:rgba(9,10,9,.97);
  border-color:rgba(226,104,63,.25);
}
.logo-wrap{display:flex;align-items:center;gap:14px;min-width:max-content}
.custom-logo{max-height:58px;width:auto}
.logo-fallback{
  display:flex;
  flex-direction:column;
  line-height:.84;
  letter-spacing:-.085em;
  font-size:40px;
  font-weight:950;
  text-transform:uppercase;
}
.logo-fallback small{
  margin-top:7px;
  color:var(--gold);
  letter-spacing:.19em;
  font-size:10px;
  font-weight:900;
}
.primary-nav{display:flex;align-items:center;gap:18px}
.primary-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;color:var(--muted);font-size:13px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}
.primary-nav a{position:relative;padding:6px 0}
.primary-nav a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.primary-nav a:hover{color:var(--ink)}
.primary-nav a:hover:after{transform:scaleX(1)}
.header-support{
  background:var(--ember);
  color:#140d09;
  font-weight:950;
  text-transform:uppercase;
  font-size:12px;
  padding:11px 15px;
  border-radius:2px;
  transition:transform .25s,box-shadow .25s;
}
.header-support:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(226,104,63,.23)}
.menu-toggle{display:none;background:transparent;color:var(--ink);border:1px solid rgba(243,237,223,.18);padding:10px 12px;text-transform:uppercase;letter-spacing:.12em;font-size:11px}

.hero{
  min-height:780px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  border-bottom:1px solid var(--line);
}
.hero-copy{
  padding:78px 5vw 48px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.subtitle,.kicker,.label{
  color:var(--gold);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:950;
}
h1,h2,h3{margin:0;color:var(--ink)}
.hero h1{
  font-family:Georgia,serif;
  font-size:104px;
  line-height:.78;
  letter-spacing:-.08em;
  margin:24px 0;
}
.word{
  display:inline-block;
  opacity:0;
  transform:translateY(36px);
  filter:blur(8px);
  animation:wordIn .82s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes wordIn{to{opacity:1;transform:none;filter:none}}
.lead{
  max-width:850px;
  color:#ded4c1;
  font-family:Georgia,serif;
  font-size:25px;
  line-height:1.45;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{
  display:inline-block;
  background:var(--ink);
  color:#090a09;
  padding:13px 18px;
  font-weight:950;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.05em;
  position:relative;
  overflow:hidden;
}
.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-120%);transition:transform .72s}
.btn:hover:before{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn.alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hero-visual{
  position:relative;
  overflow:hidden;
  border-left:1px solid var(--line);
  background:
    linear-gradient(180deg,rgba(9,10,9,.10),rgba(9,10,9,.85)),
    linear-gradient(145deg,#393c31,#141610 65%);
}
.terykon-shape{
  position:absolute;
  left:8%;
  right:8%;
  bottom:8%;
  height:76%;
  clip-path:polygon(50% 0%,92% 88%,8% 88%);
  background:
    radial-gradient(circle at 50% 28%,rgba(226,104,63,.45),transparent 22%),
    linear-gradient(145deg,#5c604f,#20241d 60%,#0b0c0b);
  border:1px solid rgba(243,237,223,.18);
  filter:drop-shadow(0 45px 90px rgba(0,0,0,.45));
  opacity:0;
  transform:translateY(28px) scale(.98);
  animation:mountainIn 1.25s .4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes mountainIn{to{opacity:1;transform:translateY(0) scale(1)}}
.ash-lines{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(178deg,transparent,transparent 32px,rgba(243,237,223,.055) 33px),
    repeating-linear-gradient(92deg,transparent,transparent 45px,rgba(197,154,91,.045) 46px);
  animation:ashDrift 16s linear infinite alternate;
}
@keyframes ashDrift{from{transform:scale(1.02) translate(-1%,-1%)}to{transform:scale(1.08) translate(1%,1%)}}
.glowline{
  position:absolute;
  left:-20%;
  right:-20%;
  top:36%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,104,63,.8),transparent);
  animation:scan 5.8s ease-in-out infinite;
  opacity:0;
}
@keyframes scan{
  0%,20%{transform:translateY(-210px);opacity:0}
  40%{opacity:.7}
  80%,100%{transform:translateY(320px);opacity:0}
}
.note{
  position:absolute;
  right:8%;
  top:11%;
  width:270px;
  padding:18px;
  background:var(--paper);
  color:#17130e;
  transform:rotate(2deg) translateY(-12px);
  opacity:0;
  box-shadow:0 25px 60px rgba(0,0,0,.38);
  animation:noteIn 1s .85s ease forwards;
}
@keyframes noteIn{to{opacity:1;transform:rotate(2deg) translateY(0)}}
.note strong{display:block;font-family:Georgia,serif;font-size:25px;line-height:1;letter-spacing:-.04em;margin-bottom:8px}
.note p{font-family:Georgia,serif;color:#4d4438;line-height:1.42;margin:0}
.caption{
  position:absolute;
  left:5vw;
  right:5vw;
  bottom:5vw;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid rgba(243,237,223,.22);
  color:#ded4c1;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:950;
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stat{padding:26px 5vw;background:#10120e;border-right:1px solid var(--line);transition:background .35s,transform .35s}
.stat:last-child{border-right:0}
.stat:hover{background:#171a14;transform:translateY(-2px)}
.stat strong{display:block;font-family:Georgia,serif;font-size:42px;color:var(--gold);line-height:1}
.stat span{display:block;margin-top:8px;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:900}
.fade-divider{height:92px;background:linear-gradient(180deg,transparent,rgba(226,104,63,.09),transparent);position:relative;overflow:hidden}
.fade-divider:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(243,237,223,.08),transparent);transform:translateX(-100%);animation:pass 6.5s ease-in-out infinite}
@keyframes pass{0%,18%{transform:translateX(-100%);opacity:0}45%{opacity:1}82%,100%{transform:translateX(100%);opacity:0}}
.mission{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;padding:56px 5vw;border-bottom:1px solid var(--line)}
.label{color:var(--ember);margin-bottom:12px}
.mission h2{font-family:Georgia,serif;font-size:58px;line-height:.9;letter-spacing:-.06em}
.mission p{font-size:19px;line-height:1.65;color:#d6cdbc;margin:0 0 18px}
.columns{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.column{padding:34px 5vw 38px;border-right:1px solid var(--line);background:var(--coal);position:relative;overflow:hidden;transition:transform .35s,background .35s}
.column:last-child{border-right:0}
.column:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(226,104,63,.08));opacity:0;transition:opacity .35s}
.column:hover{background:#191b16;transform:translateY(-4px)}
.column:hover:after{opacity:1}
.column h3{position:relative;z-index:1;font-family:Georgia,serif;font-size:34px;line-height:.98;letter-spacing:-.045em;margin:0 0 14px}
.column p{position:relative;z-index:1;color:var(--muted);line-height:1.58}
.feed{padding:48px 5vw;display:grid;grid-template-columns:1.7fr 1fr;gap:28px}
.feature,.mini,.box{background:#10120e;border:1px solid var(--line);transition:transform .35s,border-color .35s,background .35s,box-shadow .35s}
.feature{min-height:520px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.feature:hover,.mini:hover,.box:hover{transform:translateY(-5px);border-color:rgba(226,104,63,.42);background:#171a14;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.feature:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 12%,rgba(226,104,63,.24),transparent 26%),linear-gradient(135deg,transparent 0 48%,rgba(243,237,223,.07) 48.2% 48.7%,transparent 49%);transition:transform 1.2s}
.feature:hover:before{transform:scale(1.06)}
.feature>*{position:relative}
.feature-image{position:absolute;inset:0;opacity:.23}
.feature-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(.1) contrast(1.1)}
.kicker{color:var(--gold)}
.feature h2{font-family:Georgia,serif;font-size:54px;line-height:.93;letter-spacing:-.055em;margin:12px 0;max-width:850px}
.feature p,.mini p,.box p{color:var(--muted);line-height:1.58}
.right-feed{display:flex;flex-direction:column;gap:18px}
.mini,.box{padding:22px}
.mini h3,.box h3{font-family:Georgia,serif;font-size:31px;line-height:.98;letter-spacing:-.045em;margin:10px 0}
.support-strip{margin:0 5vw 56px;padding:30px;color:#17130e;background:var(--paper);display:grid;grid-template-columns:1.4fr .9fr;gap:24px;position:relative;overflow:hidden}
.support-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(226,104,63,.18),transparent);transform:translateX(-120%);animation:paperPass 7s ease-in-out infinite}
@keyframes paperPass{0%,45%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
.support-strip>*{position:relative}
.support-strip h2{font-family:Georgia,serif;font-size:42px;line-height:.95;letter-spacing:-.045em;margin:0 0 12px;color:#17130e}
.support-strip p{font-family:Georgia,serif;color:#4d4438;line-height:1.5;font-size:18px}
input{width:100%;padding:14px;border:1px solid #b8aa94;margin:6px 0 12px;background:white}
.darkbtn{display:inline-block;background:#111;color:white;padding:12px 16px;font-weight:950;text-transform:uppercase;font-size:12px}

.article-list{padding:52px 5vw;border-top:1px solid var(--line)}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.article-card{background:#10120e;border:1px solid var(--line);overflow:hidden;transition:.35s}
.article-card:hover{transform:translateY(-5px);border-color:rgba(226,104,63,.42);background:#171a14}
.article-card img{width:100%;aspect-ratio:1.55;object-fit:cover}
.article-card-body{padding:18px}
.meta{color:var(--gold);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;margin-bottom:9px}
.article-card h3{font-family:Georgia,serif;font-size:26px;line-height:.98;letter-spacing:-.045em;margin:0 0 10px}
.article-card p{color:var(--muted);font-size:14px}

.video-wrap{position:relative;aspect-ratio:16/9;background:#111;border:1px solid var(--line);overflow:hidden}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.single-wrap,.page-wrap,.archive-wrap{padding:72px 5vw}
.single-header,.page-header,.archive-header{max-width:980px;margin-bottom:34px}
.single-header h1,.page-header h1,.archive-header h1{font-family:Georgia,serif;font-size:clamp(52px,8vw,98px);line-height:.82;letter-spacing:-.075em}
.single-layout{display:grid;grid-template-columns:minmax(0,800px) 300px;gap:56px}
.content{font-family:Georgia,serif;color:#e1d7c6;font-size:21px;line-height:1.72}
.content a{color:var(--ember);text-decoration:underline;text-underline-offset:4px}
.featured-figure{margin:0 0 34px}
.featured-figure img{width:100%;max-height:720px;object-fit:cover}
figcaption{color:var(--muted);font-size:12px;margin-top:8px}
.sidebar-card{background:#10120e;border:1px solid var(--line);padding:18px;margin-bottom:18px}
.sidebar-card span{display:block;color:var(--gold);font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:900;margin-bottom:9px}
.sidebar-card p{color:var(--muted);font-size:14px}
footer{display:flex;justify-content:space-between;gap:24px;padding:34px 5vw;color:var(--muted);border-top:1px solid var(--line)}
footer strong{color:var(--ink)}
.veil{position:fixed;inset:0;background:rgba(9,10,9,.82);backdrop-filter:blur(0);opacity:0;z-index:998;pointer-events:none;transition:opacity .45s,backdrop-filter .45s}
.veil.active{opacity:1;backdrop-filter:blur(8px)}

@media(max-width:1050px){
  .hero,.mission,.feed,.support-strip,.single-layout{grid-template-columns:1fr}
  .hero-visual{min-height:620px;border-left:0;border-top:1px solid var(--line)}
  .stats,.columns,.article-grid{grid-template-columns:1fr}
  .stat,.column{border-right:0;border-bottom:1px solid var(--line)}
  .hero h1{font-size:66px}
  .primary-nav{display:none;position:absolute;left:5vw;right:5vw;top:76px;padding:18px;background:rgba(9,10,9,.98);border:1px solid var(--line)}
  .primary-nav.is-open{display:block}
  .primary-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .menu-toggle{display:block}
}
@media(max-width:640px){
  .hero h1{font-size:54px}
  .lead{font-size:20px}
  .site-header{padding-left:18px;padding-right:18px}
  .logo-fallback{font-size:30px}
  footer{display:block}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;filter:none}
  body:before{display:none}
}


/* Mouse atmospheric trail — v0.3 */
.cursor-halo,
.cursor-dot,
.mouse-ash{
  pointer-events:none;
  position:fixed;
  z-index:62;
}
.cursor-halo{
  width:260px;
  height:260px;
  left:0;
  top:0;
  border-radius:50%;
  opacity:0;
  transform:translate3d(-50%,-50%,0);
  background:
    radial-gradient(circle,
      rgba(226,104,63,.20) 0%,
      rgba(226,104,63,.10) 22%,
      rgba(197,154,91,.055) 44%,
      transparent 70%);
  filter:blur(14px);
  mix-blend-mode:screen;
  transition:opacity .28s ease;
}
.cursor-dot{
  width:8px;
  height:8px;
  left:0;
  top:0;
  border-radius:999px;
  opacity:0;
  transform:translate3d(-50%,-50%,0);
  background:rgba(226,104,63,.72);
  box-shadow:
    0 0 18px rgba(226,104,63,.55),
    0 0 40px rgba(226,104,63,.24);
  transition:opacity .22s ease;
}
body.pointer-active .cursor-halo,
body.pointer-active .cursor-dot{
  opacity:1;
}
.mouse-ash{
  left:0;
  top:0;
  width:var(--s,3px);
  height:var(--s,3px);
  border-radius:50%;
  opacity:.55;
  transform:translate3d(-50%,-50%,0);
  background:rgba(243,237,223,.72);
  box-shadow:0 0 12px rgba(226,104,63,.26);
  animation:ashTrail .95s ease-out forwards;
}
@keyframes ashTrail{
  0%{
    opacity:.55;
    transform:translate3d(-50%,-50%,0) scale(1);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--dx, 20px)), calc(-50% + var(--dy, -20px)), 0) scale(.18);
  }
}
@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .cursor-halo,
  .cursor-dot,
  .mouse-ash{
    display:none!important;
  }
}