/* Shared hero and icon animations for site-wide use */
:root{--ha-blue:#2563eb;--ha-purple:#7c3aed;--ha-ease:cubic-bezier(.2,.9,.2,1)}

.hero, .about-header, #hero { opacity:0; transform: translateY(10px); transition: opacity .7s var(--ha-ease), transform .7s var(--ha-ease); }
.hero.is-visible, .about-header.is-visible, #hero.is-visible { opacity:1; transform: translateY(0); }

/* gentle floating for hero artwork */
.hero .hero-svg-card, .hero-svg-wrap, .about-illustration { animation:ha-float 6s ease-in-out infinite; transform-origin:center; }
@keyframes ha-float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* highlight icons used across About and smaller cards */
.highlight-icon, .apt-icon, .hsb-icon, .nm-icon { display:flex; align-items:center; justify-content:center }
.highlight-icon-svg, .apt-icon img, .hsb-icon img { width:34px; height:34px; display:block }

/* small entrance for icon cards */
.icon-entrance{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ha-ease),transform .45s var(--ha-ease)}
.icon-entrance.is-visible{opacity:1;transform:none}

/* subtle pulse for CTA buttons when visible */
.btn-pulse{transition:transform .18s ease, box-shadow .18s ease}
.btn-pulse.is-visible{transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,99,235,.12)}

/* responsive tweaks */
@media(max-width:900px){.highlight-icon-svg,.apt-icon img{width:28px;height:28px}}

/* Ensure hero images are not too large */
.hero .hero-img, .hero-img { max-width:100%; height:auto }

/* Fullscreen hero layout (match home hero size) */
.hero.hero-full, #hero.hero-full { min-height: 100vh; padding-top: 0; display:flex; align-items:center }
.hero.hero-full .hero-inner, #hero.hero-full .hero-inner { padding-top: 6vh }

/* Lab-specific overlay using ::after */
.hero.hero-full::after, #hero.hero-full::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index:1; }

/* AI lab — subtle neural gradient + drifting noise */
.hero[data-lab="ai"]::after { background: radial-gradient(circle at 20% 20%, rgba(124,58,237,0.08), transparent 20%), radial-gradient(circle at 80% 80%, rgba(59,130,246,0.06), transparent 25%); mix-blend-mode: screen; animation:ha-ai 12s linear infinite; }
@keyframes ha-ai { 0%{opacity:.9}50%{opacity:1}100%{opacity:.9} }

/* Space lab — moving starfield */
.hero[data-lab="space"]::after { background: transparent; }
.hero[data-lab="space"]::before { content: ''; position:absolute; inset:0; background-image: radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.9), transparent), radial-gradient(1.5px 1.5px at 40% 60%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.6), transparent); background-size: 600px 400px; animation:ha-stars 30s linear infinite; z-index:1; pointer-events:none }
@keyframes ha-stars { from{transform:translateY(0)} to{transform:translateY(-300px)} }

/* Arts & Craft lab — floating paint blobs */
.hero[data-lab="arts-craft"]::after { background: radial-gradient(circle at 10% 30%, rgba(255,187,102,0.12), transparent 12%), radial-gradient(circle at 70% 60%, rgba(236,72,153,0.08), transparent 14%); animation:ha-paint 8s ease-in-out infinite; }
@keyframes ha-paint { 0%{opacity:.9}50%{opacity:1; transform:translateY(-6px)}100%{opacity:.9} }

/* Electronics lab — subtle moving circuit lines */
.hero[data-lab="electronics"]::after { background-image: linear-gradient(90deg, rgba(14,165,233,0.03) 1px, transparent 1px); background-size: 40px 40px; opacity:.9; animation:ha-circuit 6s linear infinite; }
@keyframes ha-circuit { 0%{background-position:0 0}100%{background-position:40px 40px} }

/* Composite lab — rotating geometric overlay */
.hero[data-lab="composite"]::after { background: conic-gradient(from 90deg at 50% 50%, rgba(124,58,237,0.04), rgba(14,165,233,0.03)); animation:ha-rotate 20s linear infinite; }
@keyframes ha-rotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

/* Management lab — animated chart bars */
.hero[data-lab="management"]::after { background-image: linear-gradient(90deg, rgba(37,99,235,0.06) 0 20%, transparent 20%), linear-gradient(90deg, rgba(124,58,237,0.04) 0 40%, transparent 40%); background-size: 100% 100%; animation:ha-bars 3s ease-in-out infinite; }
@keyframes ha-bars { 0%{opacity:0.85}50%{opacity:1}100%{opacity:0.85} }

/* ICT & Coding — digital grid */
.hero[data-lab="ict"]::after, .hero[data-lab="coding-data"]::after { background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 48px 48px; opacity:.9 }

/* Centering utility for sections */
.text-center .section-title, .text-center .section-sub { text-align: center; }
.text-center .features-grid { display:flex; gap:28px; justify-content:center; align-items:flex-start; flex-wrap:wrap }
.text-center .feature-card { max-width:320px; text-align:center }