/* CR Solutions site styles
   fonts - Oswald for headings, Public Sans for body text, IBM Plex Mono for the small labels
   (kept in one file, not split up, easier to manage this way) */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#15191c;
  --cream:#f6f4ee;
  --graphite:#262b2f;
  --amber:#c8751f;
  --slate:#435159;
  --amber-light:#e7a94d;
  --slate-light:#7f8d93;
  --stone:#eeece6;
  --stone-3:#d9d2c2;
  --stone-2:#e2ddd0;
}

html {
	scroll-behavior: smooth;
}

.font-display{font-family:'Oswald', ui-sans-serif, sans-serif;}

body{
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  background-color:var(--stone);
}

.font-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* keyboard focus should stay visible, don't remove this */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline-offset:3px;
  outline:2px solid var(--amber);
  border-radius:2px;
}

/* header bar */
.site-header{
	backdrop-filter: saturate(140%) blur(6px);
	background: rgba(21,25,28,0.97);
}

#mobile-menu{
  transition:transform .35s ease;
  transform:translateX(100%);
}
#mobile-menu.is-open{ transform:translateX(0); }

.site-header .menu-link{
  opacity:.78;
  position:relative;
  color:var(--stone) !important;
}
.site-header .menu-link:hover{opacity:1;}
.site-header .menu-link.cholche{opacity:1;}
.menu-link.cholche::after{
  content:"";
  background:var(--amber);
  position:absolute;
  height:2px;
  left:0; right:0; bottom:-8px;
}

/* buttons */
.button-amber{
  color:var(--ink);
  background:var(--amber);
  font-weight:600;
}
.button-amber:hover{background:var(--amber-light);}
.button-outline{ border:1.5px solid currentColor; }

/* --- scroll-in animation for sections, only fires once per element --- */
.dekha{
  transition:opacity .7s ease, transform .7s ease;
  transform:translateY(18px);
  opacity:0;
}
.dekha.dekha-hoise{
  transform:translateY(0);
  opacity:1;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .dekha{transition:none; transform:none; opacity:1;}
  *{transition-duration:0.001ms !important; animation-duration:0.001ms !important; animation-iteration-count:1 !important;}
}

.chobi-frame{
  overflow:hidden;
  position:relative;
}
.chobi-frame img{ transition:transform .6s ease; }
.chobi-frame:hover img{ transform:scale(1.045); }

/* the manifest / ticket card used on about + contact + home */
.talika{
  background:var(--cream);
  border:1px solid rgba(21,25,28,0.14);
}
.talika-shari + .talika-shari{ border-top:1px dashed rgba(21,25,28,0.18); }
.talika-code{
  letter-spacing:.04em;
  font-family:'IBM Plex Mono', monospace;
}
.talika-stamp{
  transform:rotate(-3deg);
  color:var(--amber);
  border:1.5px solid var(--amber);
}

.tiket-kinar::before{
  content:"";
  background-repeat:repeat-x;
  background-position:center top;
  background-size:22px 18px;
  background-image:radial-gradient(circle, var(--stone) 6px, transparent 6.5px);
  position:absolute;
  top:-9px; left:24px; right:24px;
  height:18px;
}

.dana::after{
  content:"";
  mix-blend-mode:overlay;
  pointer-events:none;
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.upor-kata{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }

.dhap-number{
  color:var(--amber);
  font-family:'IBM Plex Mono', monospace;
}

.field-lekha{
  border:1.5px solid var(--stone-3);
  background:var(--cream);
  color:var(--ink);
}
.field-lekha:focus{ border-color:var(--amber); }

@keyframes riseIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ transform:translateY(0); opacity:1; }
}
.uthe-asha{ animation:riseIn .8s ease both; }
.uthe-asha-ek{ animation-delay:.05s; }
.uthe-asha-tin{ animation-delay:.3s; }
.uthe-asha-dui{ animation-delay:.18s; }
.uthe-asha-char{ animation-delay:.42s; }

::selection{ color:var(--ink); background:var(--amber); }