/* Shared effects for prishivindustries.com (colors live in each page's Tailwind config) */

/* Hero photo: slow zoom */
.kenburns { animation: kenburns 22s ease-out both; transform-origin: 60% 50%; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Scroll-in reveal. Only hidden once JS has confirmed it can reveal it again. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }

/* Product-name marquee band */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.text-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }

/* Technical-drawing line art */
.blueprint { color: #0058D6; }
.blueprint .part { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.blueprint .thin { fill: none; stroke: currentColor; stroke-width: .8; opacity: .7; }
.blueprint .center { fill: none; stroke: currentColor; stroke-width: .8; stroke-dasharray: 10 3 2 3; opacity: .6; }
.blueprint .dim { fill: none; stroke: #16181D; stroke-width: .8; opacity: .55; }
.blueprint text { font: 500 9.5px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #16181D; opacity: .7; letter-spacing: .04em; }
.js .blueprint.draw .part, .js .blueprint.draw .thin { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.4s ease; }
.js .blueprint.draw.is-in .part, .js .blueprint.draw.is-in .thin { stroke-dashoffset: 0; }

/* Horizontal card rail */
.rail { scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* Hero scroll cue */
.scroll-cue span { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(220%); } }

/* Header: stays on top at a fixed size, gains a shadow and reading progress on scroll */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(228,229,226,.9); transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.site-header.is-scrolled { background: rgba(255,255,255,.94); border-color: transparent; box-shadow: 0 12px 32px -14px rgba(7,26,63,.28); }
.site-header-bar { height: 5rem; }
.site-logo { height: 3rem; }
@media (min-width: 640px) {
  .site-logo { height: 3.5rem; }
}
.header-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #0058D6, #FDB506); transform: scaleX(var(--progress, 0)); transform-origin: left; }

.nav-link { position: relative; padding: .5rem 0; font-size: .875rem; font-weight: 600; color: #455B78; transition: color .2s ease; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #FDB506; transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-link:hover, .nav-link.is-active { color: #16181D; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }

#menu-btn .icon-close, .menu-open #menu-btn .icon-open { display: none; }
.menu-open #menu-btn .icon-close { display: block; }
.mobile-menu:not(.hidden) { animation: menu-in .25s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Brand polish (blue #0058D6, gold #FDB506, navy #071A3F) ---------- */
::selection { background: #FDB506; color: #16181D; }
:focus-visible { outline: 2px solid #0058D6; outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #0058D6 #E4E5E2; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #EEF0F2; }
::-webkit-scrollbar-thumb { background: linear-gradient(#0058D6, #003E96); border-radius: 10px; border: 2px solid #EEF0F2; }

/* Hero: content rises in on load, brand-coloured glows drift behind it */
.hero-in { animation: hero-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-aurora span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; mix-blend-mode: screen; }
.hero-aurora span:nth-child(1) { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -10%; top: -25%; background: #0058D6; animation: drift-a 18s ease-in-out infinite alternate; }
.hero-aurora span:nth-child(2) { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; right: -6%; bottom: -30%; background: #FDB506; opacity: .22; animation: drift-b 22s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-30%, -26%) scale(1.2); } }

/* Highlighted headline words shimmer in the logo colours */
h1 .text-signal {
  background: linear-gradient(100deg, #FDB506 20%, #FFE08A 40%, #F59E0B 60%, #FDB506 80%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 7s linear infinite;
}
h2 .text-cobalt, h2 span.text-cobalt {
  background: linear-gradient(100deg, #0058D6 20%, #3D8BFF 45%, #003E96 70%, #0058D6 90%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: -250% 0; } }

/* Cards: lift, blue-to-gold border glow, cursor spotlight */
.fx-card { position: relative; isolation: isolate; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; }
.fx-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, #0058D6 0%, #0058D6 35%, #3D8BFF 60%, #FDB506 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease; }
.fx-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(0,88,214,.09), transparent 45%);
  opacity: 0; transition: opacity .4s ease; }
.fx-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 28px 50px -24px rgba(0,62,150,.38); }
.fx-card:hover::before, .fx-card:hover::after { opacity: 1; }
.fx-card:hover .fx-icon { transform: rotate(-6deg) scale(1.08); background: linear-gradient(135deg, #0058D6, #003E96); border-color: transparent; }
.fx-card:hover .fx-icon svg { color: #fff; }
.fx-icon, .fx-icon svg { transition: transform .4s cubic-bezier(.2,.7,.2,1), background .4s ease, color .4s ease; }

/* Buttons: light sweep on hover */
.fx-btn { position: relative; overflow: hidden; isolation: isolate; }
.fx-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.fx-btn:hover::after { animation: sweep .85s ease; }
@keyframes sweep { to { left: 130%; } }

/* Blue call-to-action bands: slow moving gradient */
section.bg-cobalt { background: linear-gradient(120deg, #0058D6, #003E96 35%, #0A6CFF 65%, #0058D6); background-size: 300% 300%; animation: pan 14s ease-in-out infinite; }
@keyframes pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Marquee edges fade out */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }

/* Back to top with scroll progress ring */
.to-top { position: fixed; right: 1.5rem; bottom: 5.75rem; z-index: 45; width: 3rem; height: 3rem; border-radius: 9999px; background: #fff; color: #0058D6;
  display: grid; place-items: center; box-shadow: 0 12px 28px -10px rgba(7,26,63,.35); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background-color .3s ease, color .3s ease; }
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #0058D6; color: #fff; }
.to-top svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top svg.ring circle { fill: none; stroke-width: 3; }
.to-top svg.ring .track { stroke: #E4E5E2; }
.to-top svg.ring .bar { stroke: url(#tt-grad); stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 - 138.2 * var(--progress, 0)); }
@media (min-width: 1360px) { .to-top { bottom: 1.75rem; right: 1.75rem; } }

/* Products: sticky category bar with search */
.cat-nav { position: sticky; top: 5rem; z-index: 40; background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid #E4E5E2; }
.cat-link { position: relative; white-space: nowrap; padding: .5rem 1rem; border-radius: 9999px; font-size: .875rem; font-weight: 600; color: #455B78; transition: color .25s ease, background-color .25s ease; }
.cat-link:hover { color: #16181D; background: #EEF3FF; }
.cat-link.is-active { color: #fff; background: linear-gradient(135deg, #0058D6, #003E96); box-shadow: 0 8px 18px -8px rgba(0,88,214,.6); }
.cat-link.is-empty { opacity: .35; pointer-events: none; }
.cat-search { transition: box-shadow .25s ease, border-color .25s ease; }
.cat-search:focus-within { border-color: #0058D6; box-shadow: 0 0 0 4px rgba(0,88,214,.12); }
.is-filtered-out { display: none !important; }
mark.hit { background: rgba(253,181,6,.4); color: inherit; border-radius: 3px; padding: 0 1px; }

@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; }
  .hero-aurora span, h1 .text-signal, h2 .text-cobalt, section.bg-cobalt { animation: none; }
  .fx-card, .fx-card:hover, .to-top { transition: none; transform: none; }
  .fx-btn:hover::after { animation: none; }
  .site-header, .nav-link::after { transition: none; }
  .mobile-menu:not(.hidden) { animation: none; }
  .kenburns, .marquee-track, .scroll-cue span { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .blueprint.draw .part, .js .blueprint.draw .thin { stroke-dashoffset: 0; transition: none; }
}