/* ===== Обсидиан — design system for «Совет рун» landing ===== */
:root{
  --bg:#0a0b0c;
  --bg2:#0d0f10;
  --stone:#131517;
  --stone2:#16191c;
  --ink:#e9e6df;
  --muted:#8a8b87;
  --faint:rgba(233,230,223,.55);
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);

  /* accent — overridable by Tweaks */
  --accent:#d08a4a;
  --accent2:#e7a85f;
  --glow:rgba(208,138,74,.5);
  --glow-soft:rgba(208,138,74,.22);

  --disp:'Playfair Display',Georgia,serif;
  --body:'Cormorant Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --rune:'Noto Sans Runic','Cormorant Garamond',serif;

  --maxw:1240px;
  --gut:clamp(22px,5vw,90px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
noscript{display:none !important;}

/* ambient grain / vignette over whole page */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(circle at 78% 8%, rgba(208,138,74,.07), transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(70,74,80,.10), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,0,0,.45) 100%);
}
.page{position:relative; z-index:1;}

/* ---- shared atoms ---- */
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.24em; font-size:11px; font-weight:500;}
.rune{font-family:var(--rune);}
.accent{color:var(--accent2);}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut);}

.eyebrow{display:inline-flex; align-items:center; gap:14px; color:var(--accent2); margin-bottom:26px;}
.eyebrow .dash{width:36px; height:1px; background:var(--accent); display:inline-block;}
.eyebrow.center{justify-content:center;}

.h-display{font-family:var(--disp); font-weight:500; letter-spacing:-.015em; line-height:1.02; margin:0;}
.section-title{font-family:var(--disp); font-weight:500; font-size:clamp(34px,4.4vw,54px); letter-spacing:-.01em; margin:0; line-height:1.04;}
.section-lead{font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--faint); font-weight:400;}

.ember-text{color:transparent; background:linear-gradient(180deg,var(--accent2),var(--accent)); -webkit-background-clip:text; background-clip:text;
  text-shadow:0 0 40px var(--glow-soft); font-style:italic;}
.rune-glow{color:var(--accent2); text-shadow:0 0 30px var(--glow), 0 0 70px var(--glow-soft);}

/* buttons */
.btn{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:500;
  padding:16px 32px; border:1px solid transparent; transition:.22s ease; display:inline-flex; align-items:center; gap:10px;}
.btn.fill{background:linear-gradient(180deg,var(--accent2),var(--accent)); border-color:var(--accent2); color:#150d05;
  box-shadow:0 0 30px var(--glow-soft);}
.btn.fill:hover{box-shadow:0 0 46px var(--glow); transform:translateY(-1px);}
.btn.ghost{background:none; border-color:var(--line2); color:var(--ink);}
.btn.ghost:hover{border-color:var(--accent); color:#fff;}
.btn.sm{padding:12px 22px; font-size:11px;}

/* section rhythm */
.section{padding:clamp(72px,9vw,128px) 0; position:relative;}
.section-head{margin-bottom:clamp(44px,5vw,70px);}

hr.rule{border:0; border-top:1px solid var(--line); margin:0;}

/* scroll reveal — base state is VISIBLE (failsafe); only elements explicitly
   marked .pre are hidden, then animate in via .in. This guarantees content is
   never stuck invisible if a transition can't run. */
.reveal{opacity:1; transform:none;}
.reveal.pre{opacity:0; transform:translateY(26px);}
.reveal.pre.in{opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);}
.reveal.pre.d1{transition-delay:.08s;} .reveal.pre.d2{transition-delay:.16s;}
.reveal.pre.d3{transition-delay:.24s;} .reveal.pre.d4{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.pre{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

.no-anim .reveal, .no-anim .reveal.pre{opacity:1 !important; transform:none !important; transition:none !important;}

/* ambient flicker for hero rune (subtle) */
@keyframes emberFlicker{
  0%,100%{opacity:1; filter:none;}
  45%{opacity:.94;}
  70%{opacity:.99;}
}
@media (prefers-reduced-motion: no-preference){
  .flicker{animation:emberFlicker 6s ease-in-out infinite;}
}