/* ============================================================
   RELICONA — Shared design tokens & utilities
   Light + dark themes, i18n, animations
   ============================================================ */

@font-face { font-family:'Cygre'; src:url('fonts/Cygre-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Cygre'; src:url('fonts/Cygre-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }

/* -------- DARK (default) -------- */
:root, [data-theme="dark"]{
  --bg:#0A0908;
  --bg-1:#0F0D0B;
  --bg-2:#15120F;
  --ink:#F7F3EC;
  --ink-2:#C9C3B7;
  --ink-3:#8A847A;
  --ink-4:#55514A;
  --line:rgba(247,243,236,.09);
  --line-soft:rgba(247,243,236,.05);
  --line-strong:rgba(247,243,236,.18);
  --card:rgba(247,243,236,.02);
  --nav-bg:rgba(10,9,8,.55);
  --grain-op:.5;
  --grain-mode:overlay;
}
/* -------- LIGHT -------- */
[data-theme="light"]{
  --bg:#F6F2EC;
  --bg-1:#ECE6DC;
  --bg-2:#E4DDD0;
  --ink:#0A0908;
  --ink-2:#3A342C;
  --ink-3:#6E675C;
  --ink-4:#958E84;
  --line:rgba(10,9,8,.09);
  --line-soft:rgba(10,9,8,.05);
  --line-strong:rgba(10,9,8,.18);
  --card:rgba(10,9,8,.03);
  --nav-bg:rgba(246,242,236,.72);
  --grain-op:.25;
  --grain-mode:multiply;
}

:root{
  --r1:#FF3827; --r2:#FF314F; --r3:#FF4A42;
  --r4:#FF6D30; --r5:#FF961B; --r6:#FFCA00;
  --grad:linear-gradient(92deg,#FF3827 0%,#FF314F 30%,#FF6D30 58%,#FF961B 80%,#FFCA00 100%);
  --grad-v:linear-gradient(180deg,#FF3827 0%,#FF4A42 40%,#FF961B 80%,#FFCA00 100%);
  --grad-soft:linear-gradient(92deg,rgba(255,56,39,.18),rgba(255,150,27,.14),rgba(255,202,0,.12));
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Instrument Serif','Cygre',serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);font-family:'Cygre','Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .4s,color .4s}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--r4);color:#fff}

.heat{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
.mono{font-family:var(--mono);letter-spacing:.04em}

/* grain */
.grain{position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain-op);mix-blend-mode:var(--grain-mode);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ========== NAV ========== */
.navbar{
  position:fixed;top:18px;left:20px;right:20px;z-index:80;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:12px 18px 12px 18px;
  border:1px solid var(--line);
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border-radius:999px;
}
.navbar .logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.01em}
.navbar .logo .mark{width:22px;height:22px;border-radius:50%;position:relative;background:var(--grad);box-shadow:0 0 18px rgba(255,80,30,.55)}
.navbar .logo .mark::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--bg);transition:background .4s}
.navbar .nav-links{justify-self:center;display:flex;gap:2px}
.navbar .nav-links a{padding:10px 14px;font-size:13.5px;color:var(--ink-2);border-radius:999px;transition:color .2s,background .2s}
.navbar .nav-links a:hover{color:var(--ink);background:rgba(128,128,128,.08)}
.navbar .nav-links a.active{color:var(--ink);background:rgba(128,128,128,.12)}
.navbar .nav-right{display:flex;align-items:center;gap:8px}

.lang-pill{display:flex;padding:3px;background:var(--card);border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:11px}
.lang-pill button{padding:5px 10px;border-radius:999px;color:var(--ink-3);transition:color .2s,background .2s}
.lang-pill button.on{background:var(--ink);color:var(--bg)}

.theme-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .3s;
}
.theme-btn:hover{border-color:var(--line-strong);transform:rotate(20deg)}
.theme-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;color:var(--ink-2)}
[data-theme="dark"] .theme-btn .sun{display:block}
[data-theme="dark"] .theme-btn .moon{display:none}
[data-theme="light"] .theme-btn .sun{display:none}
[data-theme="light"] .theme-btn .moon{display:block}

/* hamburger */
.hamb{display:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.hamb span{width:14px;height:1.5px;background:var(--ink);transition:transform .3s,opacity .3s}
.hamb.open span:nth-child(1){transform:translateY(2.75px) rotate(45deg)}
.hamb.open span:nth-child(2){opacity:0}
.hamb.open span:nth-child(3){transform:translateY(-2.75px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:600;font-size:13.5px;transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s,background-position .5s}
.btn svg{width:14px;height:14px}
.btn-heat{color:#fff;background:var(--grad);background-size:220% 100%;box-shadow:0 10px 30px -10px rgba(255,80,30,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-heat:hover{transform:translateY(-1px);background-position:100% 0;box-shadow:0 14px 36px -10px rgba(255,80,30,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:var(--card)}
.btn-ghost:hover{background:rgba(128,128,128,.08);border-color:rgba(128,128,128,.3)}
.btn-big{padding:15px 26px;font-size:14.5px}

/* mobile drawer */
.mnav{
  position:fixed;top:76px;left:20px;right:20px;z-index:79;
  background:var(--nav-bg);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--line);border-radius:24px;padding:20px;
  display:none;flex-direction:column;gap:2px;
  opacity:0;transform:translateY(-10px);transition:opacity .3s,transform .3s;pointer-events:none;
}
.mnav.open{display:flex;opacity:1;transform:translateY(0);pointer-events:auto}
.mnav a{padding:14px 16px;border-radius:14px;font-size:18px;font-weight:600;color:var(--ink);transition:background .2s}
.mnav a:hover{background:rgba(128,128,128,.1)}
.mnav .mrow{display:flex;gap:10px;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}

@media(max-width:960px){
  .navbar .nav-links{display:none}
  .hamb{display:flex}
}

/* mobile nav: shrink the pill so it fits without squeezing */
.navbar .btn-heat{white-space:nowrap}
@media(max-width:640px){
  /* Let the logo sit on the far left and spread remaining controls evenly
     across the rest of the pill, so the bar reads symmetric, not crammed. */
  .navbar{
    top:12px;left:12px;right:12px;
    grid-template-columns:auto 1fr;   /* logo | right group (takes all remaining) */
    gap:10px;padding:7px 10px 7px 14px;
  }
  .navbar .logo{font-size:14.5px;gap:8px;justify-self:start}
  .navbar .logo .mark{width:18px;height:18px}
  .navbar .logo .mark::after{inset:3px}
  .navbar .nav-right{
    display:flex;
    justify-content:space-between; /* even distribution across the right side */
    align-items:center;
    gap:8px;
    width:100%;
  }
  /* theme toggle lives in the hamburger drawer on mobile — remove duplicate */
  .navbar .nav-right .theme-btn{display:none}
  .lang-pill{font-size:10px;padding:2px}
  .lang-pill button{padding:4px 8px}
  .theme-btn{width:30px;height:30px}
  .theme-btn svg{width:14px;height:14px}
  .navbar .btn-heat{padding:8px 12px;font-size:12px;gap:5px}
  .navbar .btn-heat svg{width:12px;height:12px}
  .hamb{width:30px;height:30px}
  .hamb span{width:12px}
}
@media(max-width:420px){
  .navbar{gap:8px;padding:6px 8px 6px 12px}
  .navbar .logo{font-size:13.5px}
  .navbar .btn-heat{padding:7px 12px;font-size:11.5px}
  .navbar .btn-heat svg{display:none}
  .hamb{width:28px;height:28px}
}

/* container */
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
@media(max-width:900px){.wrap{padding:0 24px}}
@media(max-width:520px){.wrap{padding:0 18px}}

/* ========== BOOT ========== */
.boot{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:36px;transition:opacity .8s cubic-bezier(.7,0,.3,1)}
.boot.done{opacity:0;pointer-events:none}
.boot .logo-big{font-weight:600;font-size:clamp(54px,9vw,130px);letter-spacing:-.04em;line-height:1.15;padding-bottom:.08em;overflow:hidden;display:flex}
.boot .logo-big span{display:inline-block;transform:translateY(110%);animation:bootLogo 1.2s cubic-bezier(.2,.9,.2,1) .1s forwards}
.boot .logo-big span:nth-child(2){animation-delay:.14s}
.boot .logo-big span:nth-child(3){animation-delay:.18s}
.boot .logo-big span:nth-child(4){animation-delay:.22s}
.boot .logo-big span:nth-child(5){animation-delay:.26s}
.boot .logo-big span:nth-child(6){animation-delay:.3s}
.boot .logo-big span:nth-child(7){animation-delay:.34s}
.boot .logo-big span:nth-child(8){animation-delay:.38s}
@keyframes bootLogo{to{transform:translateY(0)}}
.boot .boot-row{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.boot .boot-bar{width:240px;height:1px;background:var(--line);position:relative;overflow:hidden}
.boot .boot-bar::after{content:'';position:absolute;inset:0;background:var(--grad);transform:scaleX(0);transform-origin:left;animation:bootBar 1.6s cubic-bezier(.7,0,.2,1) .1s forwards}
@keyframes bootBar{to{transform:scaleX(1)}}
.boot .pct{font-variant-numeric:tabular-nums;color:var(--ink)}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--grad);border-radius:2px}

/* reveals */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.rv.in{opacity:1;transform:translateY(0)}
.rv-1{transition-delay:.05s}.rv-2{transition-delay:.1s}.rv-3{transition-delay:.15s}.rv-4{transition-delay:.2s}.rv-5{transition-delay:.25s}
@media(prefers-reduced-motion:reduce){
  .rv{transition:none!important;opacity:1;transform:none}
}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--grad);pointer-events:none;z-index:150;mix-blend-mode:screen;transform:translate(-50%,-50%);transition:transform .18s cubic-bezier(.2,.9,.2,1),width .18s,height .18s}
.cursor.hover{width:44px;height:44px;mix-blend-mode:difference;background:#fff}
[data-theme="light"] .cursor{mix-blend-mode:multiply}
[data-theme="light"] .cursor.hover{mix-blend-mode:difference}
@media(hover:none),(max-width:960px){.cursor{display:none}body,a,button{cursor:auto!important}}

/* body cursor override only on desktop */
@media(hover:hover) and (min-width:961px){
  body{cursor:none}
  a,button,input,textarea,select,[data-hover]{cursor:none}
}

/* Utility: big heading tight-clip fix */
.big-head{line-height:1.05;padding-bottom:.08em}