/* ==========================================================================
   GRIHASTHA — design system (v2)
   Locked: glitch logotype (#1), bold thick display type (#6), B&W grain photos.
   Load order: this file, then page styles, then player.js where needed.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Archivo:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap");

:root{
  --ink:#070707;
  --ink2:#0d0d0e;
  --panel:#101011;
  --bone:#e9e6e1;
  --dim:rgba(233,230,225,.46);
  --faint:rgba(233,230,225,.13);
  --line:rgba(233,230,225,.14);
  --ember:#c4361f;
  --cyan:#2bd3d3;
  --display:"Anton", sans-serif;
  --cond:"Bebas Neue", sans-serif;
  --sans:"Archivo", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--ink); color:var(--bone); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--ember); color:#000; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---- film grain ---- */
.grain{ position:fixed; inset:-40%; pointer-events:none; z-index:9000; opacity:.06;
  mix-blend-mode:screen; background-image:url("noise.svg"); background-size:200px 200px;
  animation:grain-shift .5s steps(4) infinite; }
@keyframes grain-shift{
  0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)}
  50%{transform:translate(4%,-4%)} 75%{transform:translate(-3%,5%)} 100%{transform:translate(5%,-2%)} }

/* ---- bold display type ---- */
.display{ font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.84; letter-spacing:-.01em; margin:0; }
.cond{ font-family:var(--cond); font-weight:400; letter-spacing:.01em; line-height:.92; margin:0; }
.mono{ font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; }
.kick{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ember); }

/* ==========================================================================
   GLITCH LOGOTYPE  (locked from concept #1)
   <span class="gl" data-text="GRIHASTHA">GRIHASTHA</span>
   Add .gl--hover to only glitch on hover.
   ========================================================================== */
.gl{ position:relative; display:inline-block; font-family:var(--display); font-weight:400;
  text-transform:uppercase; letter-spacing:-.012em; color:var(--bone); user-select:none; line-height:.82; }
.gl::before,.gl::after{ content:attr(data-text); position:absolute; inset:0; color:var(--bone); background:var(--ink);
  clip-path:inset(0 0 0 0); }
.gl::before{ left:2px; text-shadow:-2px 0 var(--ember); animation:gl1 3.2s infinite linear alternate-reverse; }
.gl::after{ left:-2px; text-shadow:-2px 0 var(--cyan); animation:gl2 2.6s infinite linear alternate-reverse; }
.gl--hover::before,.gl--hover::after{ animation-play-state:paused; opacity:0; }
.gl--hover:hover::before,.gl--hover:hover::after{ animation-play-state:running; opacity:1; }
@keyframes gl1{
  0%,92%,100%{ clip-path:inset(0 0 100% 0); }
  93%{ clip-path:inset(12% 0 62% 0);} 95%{ clip-path:inset(48% 0 30% 0);} 97%{ clip-path:inset(8% 0 78% 0);} }
@keyframes gl2{
  0%,90%,100%{ clip-path:inset(100% 0 0 0); }
  91%{ clip-path:inset(70% 0 12% 0);} 94%{ clip-path:inset(33% 0 44% 0);} 98%{ clip-path:inset(82% 0 4% 0);} }
@media (prefers-reduced-motion: reduce){ .gl::before,.gl::after{ animation:none; opacity:0; } }

/* small wordmark lockup for navs */
.mark{ font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--bone); display:inline-flex; align-items:center; gap:9px; }
.mark b{ color:var(--ember); }

/* ==========================================================================
   PHOTO TREATMENT  (B&W grain baked into the jpg; this adds motion + tone)
   ========================================================================== */
.photo{ position:relative; overflow:hidden; background:#0a0a0a; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.02) brightness(.96);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s; }
.photo--zoom:hover img{ transform:scale(1.05); filter:contrast(1.05) brightness(1); }
.photo::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:url("noise.svg"); background-size:170px 170px; opacity:.05; mix-blend-mode:overlay; }
.photo .cap{ position:absolute; left:12px; bottom:11px; z-index:2; font-family:var(--mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(233,230,225,.7); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav .links{ display:flex; gap:26px; }
.nav .links a{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); transition:color .2s; position:relative; }
.nav .links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--ember); transition:right .25s; }
.nav .links a:hover{ color:var(--bone); }
.nav .links a:hover::after{ right:0; }

/* ==========================================================================
   BUTTONS / LABELS
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; gap:11px; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone); border:1px solid var(--line);
  padding:13px 22px; cursor:pointer; background:rgba(0,0,0,.25); transition:border-color .3s, background .3s; }
.btn:hover{ border-color:var(--ember); background:rgba(196,54,31,.08); }
.btn--solid{ background:var(--ember); border-color:var(--ember); color:#000; font-weight:700; }
.btn--solid:hover{ background:#d8412a; }

.seclabel{ display:flex; align-items:center; gap:18px; }
.seclabel .t{ font-family:var(--mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.seclabel .rule{ height:1px; background:var(--line); flex:1; }
.seclabel .n{ font-family:var(--mono); font-size:12px; color:var(--ember); }

/* back-to-gallery pill */
.gh-back{ position:fixed; left:20px; bottom:18px; z-index:9500; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(233,230,225,.6); border:1px solid var(--line);
  padding:9px 14px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); mix-blend-mode:difference;
  transition:color .25s,border-color .25s; }
.gh-back:hover{ color:#fff; border-color:#fff; }