/* ============================================================
   KOREDE FALEYE - PORTFOLIO | styles.css
   Palette: #0a0a0b / #EDECE8 / #D4FF3F / #8a8a93
   Fonts: Clash Display (display) + General Sans (body)
   ============================================================ */
:root{
  --ink:#0a0a0b;
  --cream:#EDECE8;
  --lime:#D4FF3F;
  --muted:#8a8a93;
  --line:rgba(255,255,255,.1);
  --glass:rgba(16,16,18,.62);
}
*{ -webkit-tap-highlight-color:transparent; }
html{ background:var(--ink); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:"General Sans","Inter",system-ui,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:"Clash Display","Syne",sans-serif; }
::selection{ background:var(--lime); color:#0a0a0b; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0a0a0b; }
::-webkit-scrollbar-thumb{ background:#26262b; border-radius:99px; border:2px solid #0a0a0b; }
::-webkit-scrollbar-thumb:hover{ background:var(--lime); }

/* focus */
:focus-visible{ outline:2px solid var(--lime); outline-offset:4px; border-radius:6px; }

/* grain + glows */
.grain{
  position:fixed; inset:-50%; width:200%; height:200%;
  pointer-events:none; z-index:90; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-8%)}
  30%{transform:translate(3%,-12%)} 50%{transform:translate(8%,4%)}
  70%{transform:translate(-8%,8%)} 90%{transform:translate(4%,3%)}
}
.glow{ position:absolute; border-radius:9999px; filter:blur(120px); pointer-events:none; }

/* hero: faint engineering grid + terminal caret */
.hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,black 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,black 30%,transparent 75%);
}
.trace-caret{ color:var(--lime); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* custom cursor - hidden on touch */
#cursor-dot,#cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:200; border-radius:50%; }
#cursor-dot{ width:8px; height:8px; background:var(--lime); margin:-4px 0 0 -4px; }
#cursor-ring{ width:36px; height:36px; border:1px solid rgba(212,255,63,.7); margin:-18px 0 0 -18px; display:flex; align-items:center; justify-content:center; transition:background .3s,border .3s; }
#cursor-ring.is-hover{ background:rgba(212,255,63,.12); }
#cursor-label{ font-size:10px; letter-spacing:.15em; font-weight:700; color:var(--lime); opacity:0; }
#cursor-ring.is-view{ width:84px; height:84px; margin:-42px 0 0 -42px; background:var(--lime); border-color:var(--lime); }
#cursor-ring.is-view #cursor-label{ opacity:1; color:var(--ink) !important}
@media (hover:none),(pointer:coarse){ #cursor-dot,#cursor-ring{ display:none !important; } }

/* headline */
.h-hero{
  font-size:clamp(3rem,8vw,7rem);
  line-height:.95; letter-spacing:-.02em;
  text-transform:uppercase; font-weight:700;
}
.inline-pill{
  display:inline-block; height:.82em; width:1.9em;
  border-radius:999px; object-fit:cover; vertical-align:-.08em;
  margin:0 .08em; border:1px solid rgba(255,255,255,.2);
}
.split-char{ display:inline-block; will-change:transform; }
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }

/* glass nav */
.glass{ background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav-link{ position:relative; transition:color .3s; }
.nav-link::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px;
  height:2px; background:var(--lime); border-radius:99px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.65,0,.35,1);
}
.nav-link.active{ color:var(--lime); }
.nav-link.active::after{ transform:scaleX(1); }

/* pulse badge */
.pulse-dot{ position:relative; }
.pulse-dot::after{
  content:""; position:absolute; inset:-4px; border-radius:99px;
  border:1px solid var(--lime); animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{transform:scale(.6);opacity:1} 100%{transform:scale(1.4);opacity:0} }

/* marquee */
.marquee-track{ display:flex; width:max-content; will-change:transform; }

/* work cards */
.work-card img{ transition:transform 1s cubic-bezier(.19,1,.22,1),filter .6s; }
.work-card:hover img{ transform:scale(1.07); }
/* View Case is always visible. A hover-only reveal (opacity:0 until card hover)
   made the button invisible on desktop and unfindable on touch, where no hover
   state ever fires. */
.work-card .view-case{
  opacity:1; transform:translateY(0);
  transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.work-card:hover .view-case{ transform:translateY(-2px); }

/* timeline */
.tl-line{ transform-origin:top; }
.tl-dot{ box-shadow:0 0 0 6px rgba(212,255,63,.12); }

/* bento */
.bento-card{ transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .4s,background .4s; }
.bento-card:hover{ transform:translateY(-6px); border-color:rgba(212,255,63,.4) !important; }

/* inputs */
.field{
  width:100%; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1); border-radius:1rem;
  padding:1rem 1.25rem; color:var(--cream); outline:none;
  transition:border-color .3s,background .3s;
}
.field::placeholder{ color:#5b5b64; }
.field:focus{ border-color:var(--lime); background:rgba(212,255,63,.05); }
.field-error{ border-color:#ff5d5d !important; }
.err-msg{ color:#ff8080; font-size:.8rem; margin-top:.4rem; display:none; }
.err-msg.show{ display:block; }

/* filter pills */
.filter-btn{ transition:all .3s; }
.filter-btn.active{ background:var(--lime); color:#0a0a0b; border-color:var(--lime); }

/* chip */
.chip{ border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.45rem .95rem; font-size:.8rem; color:#c9c9d1; background:rgba(255,255,255,.03); transition:all .3s; }
.chip:hover{ border-color:var(--lime); color:var(--lime); }

/* brand icons: force monochrome cream on dark */
.brand-icon{ filter:brightness(0) invert(0.93); }

/* modal */
#case-modal{ transition:opacity .35s; }
#case-modal.hiddenx{ opacity:0; pointer-events:none; }
#modal-panel{
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

/* Make modal panel handle its own scroll cleanly */
#modal-panel{
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* image reveal defaults (JS animates) */
[data-reveal-img]{ clip-path:inset(0 0 0 0); }
[data-reveal]{ opacity:1; }

/* mobile: kill horizontal pin leftovers, stack vertically, keep nav clear */
@media (max-width:767px){
  #works-pin{ overflow:visible !important; }
  #works-track{ transform:none !important; width:100% !important; max-width:100% !important; }
  .work-card{ width:100% !important; }
  .work-card.md\:mt-16{ margin-top:0; }
  /* Nav was pinned at 8px on mobile, tighter than desktop and crowding the
     screen edge. Match desktop and clear notched-phone safe areas. */
  #site-nav{ top:calc(1rem + env(safe-area-inset-top,0px)); }
  /* Longest word ("Engineering") must fit one line: .split-word is inline-block
     with overflow:hidden, so an oversized word wraps per-character inside the
     clipped box ("ENGINEERIN / G"). */
  .h-hero{ font-size:clamp(2.25rem,11vw,4rem); }
}
/* touch devices: never show custom cursor (JS also adds .is-touch) */
html.is-touch #cursor-dot, html.is-touch #cursor-ring{ display:none !important; }

/* reduced motion: kill grain anim */
@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .trace-caret{ animation:none; }
  .marquee-track{ animation:none; }
}