/* =============================================================================
ICN Technology — Motion Design Layer
File : css/icn-premium-animations.css
Purpose: WebClick-inspired carousel motion plus original ICN animations — Typewriter, Marquee Ticker,
Floating Cards, Magnetic Buttons, Spinning Badge, Scroll Text
This file is an additive layer — remove its .
JS cycles through data-words and types them char by char.
------------------------------------------------------------------ */
.icn-typewriter-wrap {
display: inline-flex;
align-items: center;
gap: 0;
font-size: clamp(1.05rem, 2vw, 1.2rem);
font-weight: 600;
color: var(--icn-anim-blue);
margin-bottom: 10px;
min-height: 1.6em;
max-width: 100%;
flex-wrap: wrap;
row-gap: 2px;
}
.icn-typewriter-label {
color: #334155;
font-weight: 500;
margin-right: 6px;
white-space: nowrap;
}
.icn-typewriter-text {
color: #0A5FD4;
font-weight: 700;
white-space: normal;
overflow: hidden;
overflow-wrap: anywhere;
}
/* blinking cursor */
.icn-typewriter-cursor {
display: inline-block;
width: 2px;
height: 1.1em;
background: #0A5FD4;
margin-left: 2px;
border-radius: 2px;
animation: icnCursorBlink 0.8s step-end infinite;
vertical-align: text-top;
flex-shrink: 0;
}
@keyframes icnCursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ------------------------------------------------------------------
3. INFINITE MARQUEE TICKER (.icn-marquee-section)
Shows tech/service keywords scrolling left continuously.
Added between stat-bar and capability-band in index.php.
------------------------------------------------------------------ */
.icn-marquee-section {
overflow: hidden;
background: linear-gradient(135deg, var(--icn-anim-dark) 0%, #0d2b6e 100%);
padding: 0;
position: relative;
z-index: 1;
}
/* subtle top/bottom gradient fade edges */
.icn-marquee-section::before,
.icn-marquee-section::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.icn-marquee-section::before {
left: 0;
background: linear-gradient(to right, var(--icn-anim-dark), transparent);
}
.icn-marquee-section::after {
right: 0;
background: linear-gradient(to left, var(--icn-anim-dark), transparent);
}
.icn-marquee-track {
display: flex;
width: max-content;
animation: icnMarqueeScroll 28s linear infinite;
will-change: transform;
}
.icn-marquee-track:hover {
animation-play-state: paused;
}
/* Duplicate track so it loops seamlessly */
.icn-marquee-track-inner {
display: flex;
align-items: center;
gap: 0;
padding: 14px 0;
}
.icn-marquee-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.75);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
padding: 0 32px;
border-right: 1px solid rgba(255, 255, 255, 0.12);
transition: color 0.3s;
}
.icn-marquee-item:last-child {
border-right: none;
}
.icn-marquee-item:hover {
color: var(--icn-anim-cyan);
}
.icn-marquee-item i {
font-size: 15px;
color: var(--icn-anim-cyan);
flex-shrink: 0;
}
@keyframes icnMarqueeScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ------------------------------------------------------------------
4. FLOATING CARD ANIMATION (.icn-solution-card)
The Connected Business Ecosystem card — adds a gentle float.
Overrides existing transform to layer on top of the tilt.
------------------------------------------------------------------ */
.icn-solution-card {
animation: icnFloat 4.5s ease-in-out infinite;
will-change: transform;
}
@keyframes icnFloat {
0%, 100% { transform: rotate(-3.5deg) translateY(0px); }
50% { transform: rotate(-3.5deg) translateY(-10px); }
}
/* Ambient glow pulse around the floating card */
.icn-solution-visual::after {
content: '';
position: absolute;
inset: -20px;
border-radius: 36px;
background: radial-gradient(ellipse at center, rgba(10, 95, 212, 0.14) 0%, transparent 70%);
animation: icnGlowPulse 4.5s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes icnGlowPulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); }
}
.icn-solution-visual {
position: relative;
}
/* ------------------------------------------------------------------
5. SPINNING CIRCULAR BADGE (.icn-spin-badge)
A rotating text stamp — "★ ICN TECHNOLOGY • WEB & SOFTWARE •"
Drop anywhere via PHP include or inline HTML.
------------------------------------------------------------------ */
.icn-spin-badge-wrap {
position: relative;
width: 110px;
height: 110px;
flex-shrink: 0;
margin: 0 auto;
}
.icn-spin-badge {
width: 110px;
height: 110px;
animation: icnSpinCW 14s linear infinite;
will-change: transform;
}
.icn-spin-badge text {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.12em;
fill: var(--icn-anim-blue);
text-transform: uppercase;
}
.icn-spin-badge-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
background: linear-gradient(135deg, var(--icn-anim-blue), var(--icn-anim-cyan));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
box-shadow: 0 6px 20px rgba(10, 95, 212, 0.35);
}
@keyframes icnSpinCW {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ------------------------------------------------------------------
6. MAGNETIC BUTTON EFFECT (.icn-mag-btn)
Applied via JS to .icn-primary-btn elements in hero + CTA.
CSS just sets the base transition; JS does the GSAP-like math.
------------------------------------------------------------------ */
.icn-mag-btn {
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
will-change: transform;
cursor: pointer;
}
.icn-mag-btn:hover {
box-shadow: 0 16px 40px rgba(10, 95, 212, 0.35) !important;
}
/* ------------------------------------------------------------------
7. SCROLL-REVEAL TEXT HIGHLIGHT (.icn-scroll-word)
Each word in a heading gets this class via JS;
words fade from #94a3b8 to #0f172a as they scroll into view.
------------------------------------------------------------------ */
.icn-scroll-word {
display: inline-block;
color: #cbd5e1;
transition: color 0.55s ease;
}
.icn-scroll-word.icn-lit {
color: #0f172a;
}
/* ------------------------------------------------------------------
8. SECTION BACKGROUND GRAIN + GRID TEXTURE (.icn-anim-grid-bg)
Subtle CSS-only dot-grid that adds depth behind any section.
------------------------------------------------------------------ */
.icn-anim-grid-bg {
position: relative;
}
.icn-anim-grid-bg::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(10, 95, 212, 0.06) 1px, transparent 1px);
background-size: 28px 28px;
z-index: 0;
pointer-events: none;
}
.icn-anim-grid-bg > * {
position: relative;
z-index: 1;
}
/* ------------------------------------------------------------------
9. STAT COUNTER ODOMETER EFFECT (.icn-stat-count)
Numbers animate from 0 → target when scrolled into view.
JS handles the counting; CSS just styles the element.
------------------------------------------------------------------ */
.icn-stat-count {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
color: var(--icn-anim-blue);
line-height: 1.1;
font-variant-numeric: tabular-nums;
display: inline-block;
}
.icn-stat-suffix {
font-size: 0.55em;
font-weight: 700;
color: var(--icn-anim-cyan);
vertical-align: super;
}
/* ------------------------------------------------------------------
10. RESPONSIVE FALLBACKS
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.icn-marquee-track,
.icn-solution-card,
.icn-spin-badge,
.icn-typewriter-cursor {
animation: none !important;
}
.icn-solution-card {
transform: rotate(-3.5deg) !important;
}
}
@media (max-width: 767px) {
.icn-typewriter-wrap {
min-height: 2.9em;
align-content: flex-start;
}
.icn-marquee-section::before,
.icn-marquee-section::after {
width: 40px;
}
.icn-spin-badge-wrap {
width: 88px;
height: 88px;
}
.icn-spin-badge {
width: 88px;
height: 88px;
}
.icn-spin-badge-icon {
width: 34px;
height: 34px;
font-size: 14px;
}
}
/* ------------------------------------------------------------------
WEBCLICK-INSPIRED HOMEPAGE MOTION
Original ICN styling: slide progress, layered entrances and micro-interactions.
------------------------------------------------------------------ */
.icn-home-slider { isolation: isolate; }
.icn-home-slider::after {
content: "";
position: absolute;
z-index: 1;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 7% 92%, rgba(0, 180, 216, .10), transparent 38%),
linear-gradient(112deg, transparent 45%, rgba(255,255,255,.035) 56%, transparent 67%);
opacity: .7;
animation: icnHeroAtmosphere 12s ease-in-out infinite alternate;
}
.icn-home-slider .icn-hero-art {
translate: var(--icn-parallax-x, 0px) var(--icn-parallax-y, 0px);
transition: translate .4s cubic-bezier(.16, 1, .3, 1);
}
.icn-slide.is-active { animation: icnReferenceSlideIn .72s cubic-bezier(.2,.75,.25,1) both; }
.icn-slide.is-active .icn-hero-copy > * { animation: icnReferenceTextIn .62s cubic-bezier(.16,1,.3,1) both; }
.icn-slide.is-active .icn-hero-copy > :nth-child(1) { animation-delay: .04s; }
.icn-slide.is-active .icn-hero-copy > :nth-child(2) { animation-delay: .10s; }
.icn-slide.is-active .icn-hero-copy > :nth-child(3) { animation-delay: .16s; }
.icn-slide.is-active .icn-hero-copy > :nth-child(4) { animation-delay: .22s; }
.icn-slide.is-active .icn-hero-copy > :nth-child(5) { animation-delay: .28s; }
.icn-slide.is-active .icn-hero-copy > :nth-child(6) { animation-delay: .34s; }
.icn-slide.is-active .icn-hero-art { animation: icnReferenceArtworkIn .82s cubic-bezier(.16,1,.3,1) both; }
.icn-slide.is-active .icn-hero-art img { animation: icnReferenceArtworkFloat 6.2s ease-in-out .82s infinite; }
.icn-slide.is-active .icn-art-badge { animation: icnReferenceBadgeIn .7s ease .36s both; }
.icn-slide-progress {
display: block;
width: clamp(58px, 8vw, 104px);
height: 4px;
overflow: hidden;
border-radius: 99px;
background: rgba(255,255,255,.17);
}
.icn-slide-progress > span {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #00d2ff, #38bdf8 52%, #a855f7);
transform: scaleX(0);
transform-origin: left center;
}
.icn-slide-progress > span.is-running { animation: icnSlideProgress 5s linear both; }
.icn-slide-progress > span.is-paused { animation-play-state: paused; }
.icn-home-statbar > .icn-container > .reveal:nth-child(2) { transition-delay: .08s; }
.icn-home-statbar > .icn-container > .reveal:nth-child(3) { transition-delay: .16s; }
.icn-home-statbar > .icn-container > .reveal:nth-child(4) { transition-delay: .24s; }
.icn-service-card .icn-service-icon { transition: transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease; }
.icn-service-card:hover .icn-service-icon { transform: translateY(-4px) rotate(-5deg); box-shadow: 0 12px 26px rgba(10,95,212,.2); }
.icn-service-card:hover .icn-service-icon i { animation: icnServiceIconPop .48s cubic-bezier(.16,1,.3,1); }
@keyframes icnHeroAtmosphere { from { opacity: .42; background-position: 0 0, 0 0; } to { opacity: .9; background-position: 0 -16px, 18px 0; } }
@keyframes icnReferenceSlideIn { from { opacity: .2; } to { opacity: 1; } }
@keyframes icnReferenceTextIn { from { opacity: 0; transform: translate3d(0,16px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes icnReferenceArtworkIn { from { opacity: 0; transform: translate3d(22px,8px,0) scale(.975); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@keyframes icnReferenceArtworkFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes icnReferenceBadgeIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@keyframes icnSlideProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes icnServiceIconPop { 0%,100% { transform: scale(1); } 45% { transform: scale(1.12) rotate(5deg); } }
@media (max-width: 600px) {
.icn-slide-progress { width: 48px; height: 3px; }
.icn-slide.is-active .icn-hero-copy > * { animation-duration: .48s; }
.icn-home-slider::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.icn-home-slider::after,
.icn-slide.is-active,
.icn-slide.is-active .icn-hero-copy > *,
.icn-slide.is-active .icn-hero-art,
.icn-slide.is-active .icn-hero-art img,
.icn-slide.is-active .icn-art-badge,
.icn-service-card:hover .icn-service-icon i {
animation: none !important;
}
.icn-home-slider .icn-hero-art { translate: none !important; transition: none !important; }
.icn-service-card .icn-service-icon { transition: none !important; }
.icn-slide-progress { visibility: hidden; }
}
/* PROMINENT CAROUSEL MOTION: clearly visible without hover or scrolling. */
.icn-home-slider .icn-slide-progress {
position: absolute;
z-index: 8;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 5px;
border-radius: 0;
background: rgba(7,29,70,.12);
box-shadow: 0 1px 8px rgba(10,95,212,.12);
}
.icn-home-slider .icn-slide-progress > span { background: linear-gradient(90deg,#00d2ff 0%,#0a5fd4 48%,#c03bd1 100%); }
.icn-home-slider .icn-hero-art::after {
content: "01 RESPONSIVE UI\A Desktop · Tablet · Mobile";
position: absolute;
z-index: 4;
top: 8%;
right: 0;
max-width: min(225px, 48%);
padding: 13px 16px;
border: 1px solid rgba(10,95,212,.16);
border-radius: 15px;
background: rgba(255,255,255,.97);
color: #071d46;
font: 800 11px/1.65 Inter, sans-serif;
letter-spacing: .015em;
white-space: pre;
box-shadow: 0 17px 38px rgba(7,29,70,.18), 0 0 0 5px rgba(255,255,255,.32);
pointer-events: none;
animation: icnVisibleFloatChip 3.4s ease-in-out infinite;
}
.icn-home-slider .icn-slide:nth-child(2) .icn-hero-art::after { content: "02 SMART WORKFLOW\A Billing · Inventory · Reports"; }
.icn-home-slider .icn-slide:nth-child(3) .icn-hero-art::after { content: "03 ONLINE STORE\A Secure checkout · UPI ready"; }
@keyframes icnVisibleFloatChip {
0%,100% { transform: translateY(0) rotate(.6deg); box-shadow: 0 17px 38px rgba(7,29,70,.18),0 0 0 5px rgba(255,255,255,.32); }
50% { transform: translateY(-14px) rotate(-.8deg); box-shadow: 0 24px 42px rgba(7,29,70,.22),0 0 0 8px rgba(0,180,216,.10); }
}
.icn-slide.is-active .icn-hero-art img { animation-duration: 4.8s; }
/* ICN original animated service illustrations (local SVG assets). */
.icn-service-card .icn-card-motion {
position: absolute;
z-index: 0;
top: 20px;
right: 18px;
width: clamp(82px, 8vw, 116px);
height: auto;
opacity: .96;
pointer-events: none;
filter: drop-shadow(0 8px 14px rgba(7,29,70,.09));
transition: transform .45s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
.icn-service-card > :not(.icn-card-motion) { position: relative; z-index: 1; }
.icn-service-card:hover .icn-card-motion {
transform: translate3d(-3px,-4px,0) rotate(-2deg) scale(1.04);
filter: drop-shadow(0 13px 18px rgba(7,29,70,.15));
}
@media (max-width: 600px) {
.icn-service-card .icn-card-motion { width: 84px; top: 17px; right: 14px; }
}
@media (max-width: 767px) {
.icn-home-slider .icn-hero-art::after { display: none; }
.icn-home-slider .icn-slide-progress { height: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.icn-home-slider .icn-hero-art::after { animation: none !important; transform: none; }
.icn-service-card .icn-card-motion { transition: none !important; }
}