/*
 * ==================================================================
 *  Site developed by Shivonix Technologies, Pune
 *  Website : https://shivonix.com
 *  Contact : info@shivonix.com
 *  (c) Shivonix Technologies — All rights reserved.
 * ==================================================================
 */


/* ============ Concept AI — static site styles ============ */

:root{
  --accent:#E63946;
  --accent-hover:#D90429;
  --dark:#0A0A0A;
  --line:#E5E7EB;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"IBM Plex Sans",sans-serif;
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:#EAECEF;
}
h1,h2,h3,h4,h5{font-family:"Syne",sans-serif;letter-spacing:-0.015em;}
::selection{background:var(--accent);color:#fff;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
img{display:block;max-width:100%;}

/* section anchor offset under sticky header */
section[id],footer[id]{scroll-margin-top:120px;}

/* ---- paper-grain noise overlay ---- */
.noise-overlay::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' 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");
}

/* ---- animated inline underline ---- */
.link-underline{position:relative;}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---- color on load -> subtle grayscale + zoom on hover ---- */
.img-reveal{filter:grayscale(0%);transform:scale(1);
  transition:filter .6s ease-out,transform .7s cubic-bezier(.16,1,.3,1);}
.group:hover .img-reveal{filter:grayscale(100%);transform:scale(1.06);}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(40px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1;transform:none;}

/* ---- kinetic line reveal ---- */
.line-mask{overflow:hidden;display:block;}
.line-mask>span{display:block;transform:translateY(110%);}
.kinetic.play .line-mask>span{animation:rise .9s cubic-bezier(.16,1,.3,1) forwards;}
.kinetic.play .line-mask:nth-child(1)>span{animation-delay:.10s;}
.kinetic.play .line-mask:nth-child(2)>span{animation-delay:.19s;}
.kinetic.play .line-mask:nth-child(3)>span{animation-delay:.28s;}
@keyframes rise{to{transform:translateY(0);}}

/* fade helpers for slide text */
.fade-up{opacity:0;transform:translateY(18px);}
.kinetic.play .fade-up{animation:fadeUp .7s cubic-bezier(.16,1,.3,1) forwards;}
.kinetic.play .fade-up.d1{animation-delay:.45s;}
.kinetic.play .fade-up.d2{animation-delay:.55s;}
@keyframes fadeUp{to{opacity:1;transform:none;}}

/* ---- marquee ---- */
.marquee{display:flex;overflow:hidden;width:100%;}
.marquee-track{display:flex;flex-shrink:0;white-space:nowrap;align-items:center;
  animation:marq 30s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{to{transform:translateX(-50%);}}

/* ---- grid hairlines via gap trick ---- */
.grid-hair{background:var(--line);}
.grid-hair>*{background:#fff;}

/* ---- hero slide image crossfade ---- */
.slide-img{position:absolute;inset:0;opacity:0;transform:scale(1.08);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 6s linear;}
.slide-img.active{opacity:1;transform:scale(1);}

/* ---- dots progress ---- */
.dot{position:relative;height:3px;width:40px;background:#E5E7EB;overflow:hidden;}
.dot .fill{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;}
.dot.done .fill{transform:scaleX(1);background:#9CA3AF;}
.dot.active .fill{animation:prog var(--dur,6s) linear forwards;}
@keyframes prog{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ---- mega panel ---- */
.mega{opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;}
.mega.open{opacity:1;visibility:visible;transform:none;}

/* mobile accordion */
.acc-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1);}

/* search overlay */
.overlay{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;}
.overlay.open{opacity:1;visibility:visible;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
  .reveal{opacity:1;transform:none;}
  .line-mask>span{transform:none;}
  .fade-up{opacity:1;transform:none;}
}