/* ============================================================
   CUSTOM ENHANCEMENTS
   1) Premium animated "Select Student Class" dropdown
   2) True scroll-triggered animations for every homepage section
   3) Continuous ambient animation for icons & shapes
   ============================================================ */

/* ============================================================
   1. SELECT CLASS DROPDOWN — premium animated look
   ============================================================ */

.form-group-select {
    position: relative;
    border-radius: 16px;
    padding: 2.5px;
    background: linear-gradient(270deg, #DF8428, #172b8c, #ad0224, #DF8428);
    background-size: 300% 300%;
    animation: iscBorderFlow 6s ease infinite;
    box-shadow: 0 10px 24px rgba(23, 43, 140, 0.18);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.form-group-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(223, 132, 40, 0.28);
}

@keyframes iscBorderFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.form-group-select .select-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    color: #DF8428;
    pointer-events: none;
    z-index: 2;
    animation: iscIconBob 2.4s ease-in-out infinite;
    transition: color 0.3s ease;
}

@keyframes iscIconBob {
    0%, 100% { transform: translateY(-50%) rotate(0deg); }
    50%      { transform: translateY(calc(-50% - 4px)) rotate(-8deg); }
}

.form-group-select select#studentClass {
    position: relative;
    width: 100%;
    height: 56px;
    padding: 0 46px 0 46px;
    font-size: 15.5px;
    font-weight: 600;
    color: #1c1c1c;
    background: #fff;
    border: none;
    border-radius: 14px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    letter-spacing: 0.2px;
    transition: background 0.3s ease;
}

.form-group-select select#studentClass:invalid {
    color: #9a9a9a;
    font-weight: 500;
}

.form-group-select select#studentClass option {
    color: #1c1c1c;
    font-weight: 600;
    padding: 10px;
}

.form-group-select select#studentClass:focus {
    background: #fff9f2;
}

/* glowing pulse ring that breathes continuously around the box */
.form-group-select::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(223,132,40,0.45), rgba(23,43,140,0.45));
    opacity: 0;
    filter: blur(10px);
    z-index: -1;
    animation: iscGlowPulse 3.2s ease-in-out infinite;
}

@keyframes iscGlowPulse {
    0%, 100% { opacity: 0; transform: scale(0.97); }
    50%      { opacity: 0.55; transform: scale(1.02); }
}

/* custom chevron, bounces continuously + spins on open */
.form-group-select::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 18px;
    top: 50%;
    color: #DF8428;
    pointer-events: none;
    z-index: 2;
    transform: translateY(-50%);
    animation: iscChevronBounce 2s ease-in-out infinite;
    transition: color 0.3s ease;
}

@keyframes iscChevronBounce {
    0%, 100% { transform: translateY(-50%); }
    50%      { transform: translateY(calc(-50% + 4px)); }
}

.form-group-select:focus-within::after {
    color: #172b8c;
    animation: iscChevronSpin 0.35s ease forwards;
}

@keyframes iscChevronSpin {
    to { transform: translateY(-50%) rotate(180deg); }
}

.form-group-select:focus-within .select-icon {
    color: #172b8c;
}

@media (max-width: 480px) {
    .form-group-select select#studentClass { font-size: 14.5px; }
}


/* ============================================================
   2. TRUE SCROLL-TRIGGERED SECTION ANIMATIONS
   The base theme animates cards once on page-load (not on
   scroll), so by the time you scroll to them they're already
   fully visible. We disable those load-time animations inside
   reveal-controlled sections and replace them with our own
   IntersectionObserver-driven transitions (see script.js).
   ============================================================ */

.reveal .stat-card,
.reveal .feature-card,
.reveal .course-card,
.reveal .blog-card,
.reveal .isc-section-title,
.reveal .isc-slider-container,
.reveal .branches-header,
.reveal .branches-slider-wrapper,
.reveal .features-header,
.reveal .courses-header {
    animation: none !important;
}

.reveal {
    opacity: 1; /* container itself stays visible; children animate */
}

/* --- Blog section: cards stagger up one after another --- */
html.js-anim .reveal[data-anim="stagger-up"] .blog-card {
    opacity: 0 !important;
    transform: translateY(55px) !important;
    transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1);
}

.reveal[data-anim="stagger-up"].in-view .blog-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

html.js-anim .reveal[data-anim="stagger-up"] .blog-card:nth-child(1) { transition-delay: 0.05s; }
html.js-anim .reveal[data-anim="stagger-up"] .blog-card:nth-child(2) { transition-delay: 0.22s; }
html.js-anim .reveal[data-anim="stagger-up"] .blog-card:nth-child(3) { transition-delay: 0.39s; }

/* --- Stats section: cards pop up with a bounce, icon spins in,
       number counts up, and the top accent bar draws itself in --- */
html.js-anim .reveal[data-anim="stat-pop"] .stat-card {
    opacity: 0 !important;
    transform: translateY(60px) scale(0.85) !important;
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(.34,1.56,.64,1);
}

.reveal[data-anim="stat-pop"].in-view .stat-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(1) { transition-delay: 0.05s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(2) { transition-delay: 0.2s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(3) { transition-delay: 0.35s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(4) { transition-delay: 0.5s; }

/* icon spins/scales in just after the card itself starts moving */
html.js-anim .reveal[data-anim="stat-pop"] .stat-icon {
    opacity: 0 !important;
    transform: rotate(-180deg) scale(0.3) !important;
    transition: opacity 0.55s ease 0.15s, transform 0.55s cubic-bezier(.34,1.56,.64,1) 0.15s;
}

.reveal[data-anim="stat-pop"].in-view .stat-icon {
    opacity: 1 !important;
    transform: rotate(0deg) scale(1) !important;
}

html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(2) .stat-icon { transition-delay: 0.3s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(3) .stat-icon { transition-delay: 0.45s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(4) .stat-icon { transition-delay: 0.6s; }

/* number fades + scales up */
html.js-anim .reveal[data-anim="stat-pop"] .stat-number {
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transition: opacity 0.5s ease 0.25s, transform 0.5s ease 0.25s;
}

.reveal[data-anim="stat-pop"].in-view .stat-number {
    opacity: 1 !important;
    transform: scale(1) !important;
}

html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(2) .stat-number { transition-delay: 0.4s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(3) .stat-number { transition-delay: 0.55s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(4) .stat-number { transition-delay: 0.7s; }

/* label fades up */
html.js-anim .reveal[data-anim="stat-pop"] .stat-label {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    transition: opacity 0.5s ease 0.32s, transform 0.5s ease 0.32s;
}

.reveal[data-anim="stat-pop"].in-view .stat-label {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(2) .stat-label { transition-delay: 0.47s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(3) .stat-label { transition-delay: 0.62s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(4) .stat-label { transition-delay: 0.77s; }

/* red top accent bar draws itself in left-to-right */
html.js-anim .reveal[data-anim="stat-pop"] .stat-card::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease 0.1s;
}

.reveal[data-anim="stat-pop"].in-view .stat-card::before {
    transform: scaleX(1);
}

html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(2)::before { transition-delay: 0.25s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(3)::before { transition-delay: 0.4s; }
html.js-anim .reveal[data-anim="stat-pop"] .stat-card:nth-child(4)::before { transition-delay: 0.55s; }

/* --- Features section: header + cards zoom in with a pop --- */
html.js-anim .reveal[data-anim="stagger-zoom"] .features-header {
    opacity: 0 !important;
    transform: translateY(-25px) scale(0.95) !important;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal[data-anim="stagger-zoom"].in-view .features-header {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card {
    opacity: 0 !important;
    transform: scale(0.8) translateY(20px) !important;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.34,1.4,.64,1);
}

.reveal[data-anim="stagger-zoom"].in-view .feature-card {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
}

html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(1) { transition-delay: 0.12s; }
html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(2) { transition-delay: 0.22s; }
html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(3) { transition-delay: 0.32s; }
html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(4) { transition-delay: 0.42s; }
html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(5) { transition-delay: 0.52s; }
html.js-anim .reveal[data-anim="stagger-zoom"] .feature-card:nth-child(6) { transition-delay: 0.62s; }

/* --- Testimonials section: whole block zooms + fades in --- */
html.js-anim .reveal[data-anim="zoom-in"] .isc-section-title {
    opacity: 0 !important;
    transform: scale(0.85) !important;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

html.js-anim .reveal[data-anim="zoom-in"] .isc-slider-container {
    opacity: 0 !important;
    transform: scale(0.9) !important;
    transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.reveal[data-anim="zoom-in"].in-view .isc-section-title,
.reveal[data-anim="zoom-in"].in-view .isc-slider-container {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* --- Courses section: header + cards flip up into place --- */
html.js-anim .reveal[data-anim="flip-up"] .courses-header {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal[data-anim="flip-up"].in-view .courses-header {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

html.js-anim .reveal[data-anim="flip-up"] .course-card {
    opacity: 0 !important;
    transform: perspective(900px) rotateX(40deg) translateY(40px) !important;
    transform-origin: top center;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1);
}

.reveal[data-anim="flip-up"].in-view .course-card {
    opacity: 1 !important;
    transform: perspective(900px) rotateX(0deg) translateY(0) !important;
}

html.js-anim .reveal[data-anim="flip-up"] .course-card:nth-child(1) { transition-delay: 0.1s; }
html.js-anim .reveal[data-anim="flip-up"] .course-card:nth-child(2) { transition-delay: 0.25s; }
html.js-anim .reveal[data-anim="flip-up"] .course-card:nth-child(3) { transition-delay: 0.4s; }
html.js-anim .reveal[data-anim="flip-up"] .course-card:nth-child(4) { transition-delay: 0.55s; }

/* --- Branches section: slides in from the left --- */
html.js-anim .reveal[data-anim="slide-left"] .branches-header {
    opacity: 0 !important;
    transform: translateX(-70px) !important;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.3,1);
}

html.js-anim .reveal[data-anim="slide-left"] .branches-slider-wrapper {
    opacity: 0 !important;
    transform: translateX(-70px) !important;
    transition: opacity 0.7s ease 0.2s, transform 0.7s cubic-bezier(.2,.7,.3,1) 0.2s;
}

.reveal[data-anim="slide-left"].in-view .branches-header,
.reveal[data-anim="slide-left"].in-view .branches-slider-wrapper {
    opacity: 1 !important;
    transform: translateX(0) !important;
}


/* ============================================================
   3. CONTINUOUS AMBIENT ANIMATION — icons & shapes
   ============================================================ */

/* Stat icons gently float up & down forever (targets inner <i> so it
   doesn't conflict with the .stat-icon wrapper's scroll-reveal transform) */
.stat-icon i {
    display: inline-block;
    animation: iscFloatSoft 3.4s ease-in-out infinite;
}
.stat-card:nth-child(2) .stat-icon i { animation-delay: 0.4s; }
.stat-card:nth-child(3) .stat-icon i { animation-delay: 0.8s; }
.stat-card:nth-child(4) .stat-icon i { animation-delay: 1.2s; }

@keyframes iscFloatSoft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Feature icon boxes: slow continuous wobble */
.feature-icon-wrapper {
    animation: iscWobble 4.5s ease-in-out infinite;
}
.feature-card:nth-child(odd) .feature-icon-wrapper { animation-delay: 0.6s; }

@keyframes iscWobble {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25%      { transform: rotate(-4deg) translateY(-3px); }
    75%      { transform: rotate(4deg) translateY(-3px); }
}

/* Feature badges: soft continuous pulse */
.feature-badge {
    animation: iscBadgePulse 2.6s ease-in-out infinite;
}

@keyframes iscBadgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(173,2,36,0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(173,2,36,0); }
}

/* Course badges shimmer continuously */
.course-badge {
    position: relative;
    overflow: hidden;
}
.course-badge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.65), transparent);
    transform: skewX(-20deg);
    animation: iscShimmer 3.5s ease-in-out infinite;
}

@keyframes iscShimmer {
    0%   { left: -150%; }
    60%  { left: 150%; }
    100% { left: 150%; }
}

/* Branch badge icons: gentle continuous sway */
.branch-badge i {
    display: inline-block;
    animation: iscSway 2.8s ease-in-out infinite;
}

@keyframes iscSway {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-12deg); }
}

/* Blog category tags: soft continuous pulse-glow */
.blog-category {
    animation: iscTagGlow 3s ease-in-out infinite;
}

@keyframes iscTagGlow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.18); }
}

/* Hero badge icon: continuous twinkle */
.badge i {
    display: inline-block;
    animation: iscTwinkle 2.2s ease-in-out infinite;
}

@keyframes iscTwinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.25) rotate(15deg); opacity: 0.75; }
}

/* Hero CTA icons: continuous motion so the buttons feel alive */
.btn-primary i {
    display: inline-block;
    animation: iscPhoneRing 1.8s ease-in-out infinite;
    transform-origin: 70% 70%;
}

@keyframes iscPhoneRing {
    0%, 80%, 100% { transform: rotate(0deg); }
    85%  { transform: rotate(-18deg); }
    90%  { transform: rotate(16deg); }
    95%  { transform: rotate(-10deg); }
}

.btn-secondary i {
    display: inline-block;
    animation: iscChartRise 2.4s ease-in-out infinite;
}

@keyframes iscChartRise {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.15); }
}

/* Hero background blobs: bigger, clearly visible drifting motion */
.hero-section::before {
    animation: iscBlobDriftA 9s ease-in-out infinite !important;
    opacity: 0.9;
}

.hero-section::after {
    animation: iscBlobDriftB 11s ease-in-out infinite !important;
    opacity: 0.9;
}

@keyframes iscBlobDriftA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(60px, 50px) scale(1.15); }
    66%      { transform: translate(-30px, 90px) scale(0.92); }
}

@keyframes iscBlobDriftB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-70px, -40px) scale(1.2); }
    66%      { transform: translate(40px, -80px) scale(0.9); }
}

/* extra floating accent shape for visible ambient movement */
.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-container::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 2px dashed rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    top: 8%;
    right: 8%;
    pointer-events: none;
    animation: iscRingSpin 18s linear infinite;
}

@keyframes iscRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.hero-particle {
    animation-duration: 7s !important;
}

.hero-particle:nth-child(odd) {
    animation-direction: alternate;
}


/* ============================================================
   4. HERO TITLE TYPING EFFECT
   ============================================================ */

.typed-text {
    display: inline;
}

.typed-cursor {
    display: inline-block;
    margin-left: 2px;
    font-weight: 400;
    color: #ffd7df;
    animation: iscCursorBlink 0.8s steps(1) infinite;
}

@keyframes iscCursorBlink {
    0%, 50%  { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .typed-cursor { animation: none !important; opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal *,
    .form-group-select,
    .form-group-select *,
    .stat-icon,
    .feature-icon-wrapper,
    .feature-badge,
    .course-badge::after,
    .branch-badge i,
    .blog-category,
    .badge i {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}