/* =========================================================
   Home page redesign — Chanakya Vidyashram CBSE School
   Scoped to the home page (.hp-*) so it never affects the
   shared header / footer or any other page.
   Palette follows style.css: #00a85a, #2d7948, #fff112, #bbba3c
   ========================================================= */

:root {
    --hp-green: #00a85a;
    --hp-green-dark: #2d7948;
    --hp-green-deep: #1f5a35;
    --hp-yellow: #fff112;
    --hp-olive: #bbba3c;
    --hp-ink: #1f2d3a;
    --hp-text: #4a5663;
    --hp-muted: #6b7682;
    --hp-tint: #f1f8f3;
    --hp-line: #e3eee7;
    --hp-radius: 18px;
    --hp-shadow: 0 10px 30px rgba(31, 90, 53, .10);
    --hp-shadow-lg: 0 22px 50px rgba(31, 90, 53, .18);
    --hp-ease: cubic-bezier(.22, .61, .36, 1);
    --hp-space: 96px;
}

@media (max-width: 991px) { :root { --hp-space: 72px; } }
@media (max-width: 575px) { :root { --hp-space: 56px; } }

.hp-main { overflow: hidden; }
.hp-main img { display: block; }

.hp-section {
    position: relative;
    padding: var(--hp-space) 0;
}

/* Keyboard focus stays visible (style.css removes outlines globally) */
.hp-main a:focus-visible,
.hp-main button:focus-visible,
.hp-popup button:focus-visible {
    outline: 3px solid var(--hp-yellow) !important;
    outline-offset: 3px;
}

/* ---------- Shared section heading ---------- */
.hp-head { margin-bottom: 44px; }
.hp-head.is-center { text-align: center; max-width: 860px; margin-left: auto; margin-right: auto; }

.hp-main .hp-eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hp-green);
    line-height: 1.4;
}
.hp-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.hp-main .hp-title {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hp-ink);
    letter-spacing: -.01em;
    position: relative;
    width: fit-content;
    max-width: 100%;
}
.hp-main .hp-head.is-center .hp-title { margin-left: auto; margin-right: auto; }
.hp-main .hp-title span { color: var(--hp-green); }

.hp-bar {
    position: relative;
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 20px;
    border-radius: 4px;
    background: var(--hp-line);
    overflow: hidden;
}
.hp-head.is-center .hp-bar { margin-left: auto; margin-right: auto; }
.hp-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--hp-green), var(--hp-olive));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s .35s var(--hp-ease);
}
.is-visible .hp-bar::after,
.hp-bar.is-visible::after { transform: scaleX(1); }

.hp-main .hp-text {
    margin: 0 0 18px;
    font-size: 16.5px;
    line-height: 1.85;
    color: var(--hp-text);
    text-align: justify;
    hyphens: auto;
}

@media (max-width: 991px) {
    .hp-main .hp-title { font-size: 32px; }
    .hp-head { margin-bottom: 36px; }
}
@media (max-width: 575px) {
    .hp-main .hp-title { font-size: 26px; }
    .hp-main .hp-text { font-size: 15.5px; text-align: left; }
}

/* ---------- Buttons ---------- */
.hp-main .hp-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--hp-green);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 10px 24px rgba(0, 168, 90, .28);
    transition: transform .35s var(--hp-ease), box-shadow .35s var(--hp-ease), color .35s;
}
.hp-main .hp-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hp-green-dark);
    transform: translateX(-101%);
    transition: transform .45s var(--hp-ease);
}
.hp-main .hp-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px rgba(45, 121, 72, .35); }
.hp-main .hp-btn:hover::before { transform: translateX(0); }
.hp-btn svg { width: 11px; height: 11px; transition: transform .35s var(--hp-ease); }
.hp-btn svg path { fill: currentColor; }
.hp-btn:hover svg { transform: translateX(5px); }

/* ---------- Scroll reveal ----------
   One-shot animation (fill: backwards) so it never overrides the
   hover transforms of cards once it has finished.
   Hidden state only applies when JS is running (.hp-js). */
.hp-js [data-reveal] { opacity: 0; }
.hp-js [data-reveal].is-visible {
    opacity: 1;
    animation: hpRevealUp .9s var(--hp-ease) calc(var(--d, 0) * 1ms) backwards;
}
.hp-js [data-reveal="left"].is-visible { animation-name: hpRevealLeft; }
.hp-js [data-reveal="right"].is-visible { animation-name: hpRevealRight; }
.hp-js [data-reveal="zoom"].is-visible { animation-name: hpRevealZoom; }

@keyframes hpRevealUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes hpRevealLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes hpRevealRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes hpRevealZoom { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }

/* =========================================================
   1. Popup
   ========================================================= */
.hp-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 30, 18, .78);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: pointer;
    animation: hpFadeIn .4s ease both;
}
.hp-popup.is-closing { animation: hpFadeOut .35s ease both; }
.hp-popup__box {
    position: relative;
    max-width: min(760px, 92vw);
    animation: hpPopIn .6s .1s var(--hp-ease) both;
}
.hp-popup__box img {
    width: 100%;
    max-height: 84vh;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.hp-popup__close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #d62828;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .3s var(--hp-ease), background .3s, color .3s;
}
.hp-popup__close:hover { transform: rotate(90deg) scale(1.08); background: #d62828; color: #fff; }
body.hp-lock { overflow: hidden; }

@media (max-width: 575px) {
    .hp-popup__close { top: -12px; right: -6px; width: 36px; height: 36px; font-size: 15px; }
}

@keyframes hpFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hpFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes hpPopIn {
    from { opacity: 0; transform: translateY(30px) scale(.92); }
    to { opacity: 1; transform: none; }
}

/* =========================================================
   2. Hero slider
   ========================================================= */
.hp-hero {
    position: relative;
    background: var(--hp-green-deep);
    overflow: hidden;
}
.hp-hero__track {
    position: relative;
    aspect-ratio: 1600 / 651;
    transform: scale(calc(1 + var(--hero-p, 0) * .08));
    transform-origin: 50% 100%;
}
/* darkens as the hero scrolls away */
.hp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #0b2414;
    opacity: calc(var(--hero-p, 0) * .55);
    pointer-events: none;
}
.hp-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.1s ease, visibility 0s 1.1s;
}
.hp-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.1s ease, visibility 0s;
    z-index: 1;
}
.hp-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* slow zoom-out that settles on the full, uncropped banner */
.hp-hero__slide.is-active img { animation: hpKenBurns 6s var(--hp-ease) both; }
@keyframes hpKenBurns { from { transform: scale(1.06); } to { transform: scale(1); } }

.hp-hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: rgba(31, 90, 53, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .4s, transform .4s var(--hp-ease), background .3s, color .3s;
}
.hp-hero__arrow--prev { left: 24px; transform: translateX(-12px); }
.hp-hero__arrow--next { right: 24px; transform: translateX(12px); }
.hp-hero:hover .hp-hero__arrow,
.hp-hero__arrow:focus-visible { opacity: 1; transform: none; }
.hp-hero__arrow:hover { background: var(--hp-yellow); border-color: var(--hp-yellow); color: var(--hp-green-deep); }

.hp-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 3;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
    opacity: calc(1 - var(--hero-p, 0) * 2.5);
}
.hp-hero__dot {
    position: relative;
    width: 34px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: rgba(255, 255, 255, .45);
    overflow: hidden;
    cursor: pointer;
    transition: width .4s var(--hp-ease);
}
.hp-hero__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hp-yellow);
    transform: scaleX(0);
    transform-origin: left;
}
.hp-hero__dot.is-active { width: 64px; }
.hp-hero__dot.is-active::after { animation: hpProgress var(--hp-interval, 5000ms) linear forwards; }
@keyframes hpProgress { to { transform: scaleX(1); } }

@media (max-width: 767px) {
    .hp-hero__arrow { display: none; }
    .hp-hero__dots { bottom: 10px; }
    .hp-hero__dot { width: 22px; height: 4px; }
    .hp-hero__dot.is-active { width: 40px; }
}

/* =========================================================
   3. Achievement ticker
   ========================================================= */
.hp-ticker {
    position: relative;
    display: flex;
    align-items: stretch;
    background: linear-gradient(90deg, var(--hp-green-deep), var(--hp-green-dark), #278e52, var(--hp-green-dark), var(--hp-green-deep));
    background-size: 300% 100%;
    border-bottom: 3px solid var(--hp-yellow);
    overflow: hidden;
    animation: hpGradShift 12s ease-in-out infinite alternate;
}
.hp-ticker::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 12px, transparent 12px 24px);
    animation: hpStripes 1.8s linear infinite;
    pointer-events: none;
}
@keyframes hpGradShift { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes hpStripes { to { background-position: 34px 0; } }
.hp-ticker__badge {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    background: var(--hp-yellow);
    color: var(--hp-green-deep);
    font-size: 24px;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}
.hp-ticker__badge i { animation: hpWiggle 2.8s ease-in-out infinite; }
@keyframes hpWiggle {
    0%, 70%, 100% { transform: rotate(0) scale(1); }
    76% { transform: rotate(-14deg) scale(1.15); }
    82% { transform: rotate(12deg) scale(1.15); }
    88% { transform: rotate(-6deg) scale(1.05); }
}
.hp-ticker__viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hp-ticker__track {
    display: flex;
    width: max-content;
    animation: hpTicker 28s linear infinite;
}
.hp-ticker:hover .hp-ticker__track { animation-play-state: paused; }
.hp-ticker__item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px;
    white-space: nowrap;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
}
.hp-ticker__item i { color: var(--hp-yellow); font-size: 12px; }
@keyframes hpTicker { to { transform: translateX(-50%); } }

@media (max-width: 575px) {
    .hp-ticker__badge { width: 54px; font-size: 18px; }
    .hp-ticker__item { font-size: 14px; padding: 12px 16px; gap: 16px; }
}

/* =========================================================
   4. About / Welcome
   ========================================================= */
.hp-about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
}
.hp-about__media { position: relative; padding: 26px 26px 26px 0; }
.hp-about__media img {
    position: relative;
    z-index: 1;
    width: 100%;
    transition: transform .8s var(--hp-ease);
}
.hp-about__media:hover img { transform: scale(1.02) rotate(-.4deg); }

.hp-about__ring {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 110px;
    height: 110px;
    border: 3px dashed var(--hp-olive);
    border-radius: 50%;
    animation: hpSpin 26s linear infinite;
}
.hp-about__ring::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hp-yellow) 0 35%, transparent 36%);
    animation: hpPulse 2.6s ease-in-out infinite;
}
.hp-about__dots {
    position: absolute;
    left: -18px;
    bottom: 6px;
    z-index: 2;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(var(--hp-green) 2px, transparent 2.5px);
    background-size: 16px 16px;
    opacity: .55;
    animation: hpFloat 6s ease-in-out infinite;
}
.hp-about__leaf {
    position: absolute;
    right: 36px;
    bottom: 0;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50% 0 50% 0;
    background: linear-gradient(135deg, var(--hp-green), var(--hp-green-dark));
    box-shadow: 0 12px 26px rgba(0, 168, 90, .35);
    animation: hpFloat 5s 1s ease-in-out infinite;
}
.hp-main .hp-about__body h2 span {
    display: block;
    margin-bottom: 4px;
    font-size: .55em;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hp-green);
}
.hp-about__body .hp-btn { margin-top: 10px; }

@keyframes hpSpin { to { transform: rotate(360deg); } }
@keyframes hpPulse { 0%, 100% { transform: scale(.8); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes hpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

@media (max-width: 991px) {
    .hp-about__grid { grid-template-columns: 1fr; gap: 44px; }
    .hp-about__media { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 575px) {
    .hp-about__ring { width: 72px; height: 72px; }
    .hp-about__dots { width: 80px; height: 80px; left: -6px; }
    .hp-about__leaf { width: 46px; height: 46px; }
}

/* =========================================================
   5. Admissions (programmes)
   ========================================================= */
.hp-admissions {
    padding: calc(var(--hp-space) + 40px) 0 calc(var(--hp-space) + 20px);
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 241, 18, .10), transparent 32%),
        radial-gradient(circle at 88% 80%, rgba(187, 186, 60, .22), transparent 38%),
        linear-gradient(135deg, var(--hp-green-deep) 0%, var(--hp-green-dark) 55%, #278e52 100%);
    color: #fff;
    isolation: isolate;
}
.hp-admissions::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.5px, transparent 2px);
    background-size: 26px 26px;
    animation: hpDotsPan 6s linear infinite;
}
@keyframes hpDotsPan { to { background-position: 26px 26px; } }
.hp-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 70px;
    line-height: 0;
    pointer-events: none;
}
.hp-wave svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
.hp-wave--top { top: -1px; }
.hp-wave--bottom { bottom: -1px; transform: rotate(180deg); }
.hp-wave .hp-wave__back { fill: var(--hp-olive); opacity: .55; animation: hpWaveDrift 16s linear infinite; }
.hp-wave .hp-wave__front { fill: #fff; animation: hpWaveDrift 26s linear infinite reverse; }
/* the path repeats every 1440 user units, so this loops seamlessly */
@keyframes hpWaveDrift { from { transform: translateX(0); } to { transform: translateX(-1440px); } }

.hp-admissions .hp-title { color: #fff; }
.hp-admissions .hp-bar { background: rgba(255, 255, 255, .2); }
.hp-admissions .hp-bar::after { background: linear-gradient(90deg, var(--hp-yellow), var(--hp-olive)); }
.hp-main .hp-admissions .hp-lead {
    margin: 18px 0 0;
    font-size: 16.5px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}

.hp-programs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}
.hp-program {
    --accent: var(--hp-yellow);
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--hp-radius);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
    transition: transform .5s var(--hp-ease), box-shadow .5s var(--hp-ease);
}
.hp-program--2 { --accent: var(--hp-green-dark); }
.hp-program--3 { --accent: var(--hp-green); }
.hp-program:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0, 0, 0, .28); }

.hp-program__media {
    position: relative;
    aspect-ratio: 446 / 333;
    overflow: hidden;
}
.hp-program__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--hp-ease);
}
.hp-program:hover .hp-program__media img { transform: scale(1.08); }
.hp-program__media::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
}
.hp-program:hover .hp-program__media::after { animation: hpShine 1s ease; }
@keyframes hpShine { to { left: 130%; } }

.hp-program__chip {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 40px;
    background: rgba(255, 255, 255, .94);
    color: var(--hp-green-deep);
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}
.hp-program__chip i { color: var(--hp-green); }

.hp-program__body {
    position: relative;
    flex: 1 1 auto;
    padding: 26px 26px 30px;
}
.hp-program__body::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: var(--accent);
    transform: scaleX(.18);
    transform-origin: left;
    transition: transform .6s var(--hp-ease);
}
.hp-program:hover .hp-program__body::before { transform: scaleX(1); }
.hp-main .hp-program__body h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 600;
    color: var(--hp-ink);
}
.hp-main .hp-program__body p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--hp-text);
}

@media (max-width: 991px) {
    .hp-programs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-program:last-child { grid-column: 1 / -1; max-width: calc(50% - 15px); margin: 0 auto; width: 100%; }
}
@media (max-width: 767px) {
    .hp-wave { height: 44px; }
    .hp-programs { grid-template-columns: 1fr; gap: 24px; }
    .hp-program:last-child { max-width: none; }
}

/* =========================================================
   6. Prospectus / Admission regulation
   ========================================================= */
.hp-regulation__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: center;
}
.hp-main .hp-regulation__intro .hp-text { font-size: 17px; line-height: 1.9; margin: 0; }
.hp-regulation__intro .hp-head { margin-bottom: 26px; }
.hp-main .hp-regulation__intro .hp-title { text-transform: uppercase; }

.hp-aims-wrap { position: relative; }
.hp-aims-deco {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: var(--hp-yellow);
    opacity: .7;
    animation: hpFloat 7s ease-in-out infinite;
}
.hp-aims-deco--2 {
    top: auto;
    right: auto;
    left: -18px;
    bottom: -18px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: none;
    background-image: radial-gradient(var(--hp-olive) 2px, transparent 2.5px);
    background-size: 14px 14px;
    opacity: .8;
    animation-delay: 1.5s;
}
.hp-aims {
    position: relative;
    z-index: 1;
    padding: 36px 34px;
    border-radius: var(--hp-radius);
    background: var(--hp-tint);
    border: 1px solid var(--hp-line);
}
.hp-main .hp-aims__title {
    margin: 0 0 22px;
    font-family: "Poppins", sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--hp-ink);
}
.hp-main .hp-aims__list { margin: 0; padding: 0; counter-reset: aim; }
.hp-main .hp-aims__list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 0 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 90, 53, .06);
    font-size: 16px;
    line-height: 1.65;
    transition: transform .4s var(--hp-ease), box-shadow .4s var(--hp-ease);
}
.hp-main .hp-aims__list li:last-child { margin-bottom: 0; }
.hp-main .hp-aims__list li::after { content: none; }
.hp-main .hp-aims__list li:hover { transform: translateX(6px); box-shadow: var(--hp-shadow); }
.hp-aims__num {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--hp-green), var(--hp-green-dark));
    color: #fff;
    font-size: 15px;
    transition: transform .45s var(--hp-ease), background .45s;
}
.hp-aims__list li:hover .hp-aims__num {
    transform: rotate(-10deg) scale(1.1);
    background: linear-gradient(135deg, var(--hp-olive), var(--hp-green));
}
.hp-main .hp-aims__list li p {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    color: var(--hp-ink);
}

@media (max-width: 991px) {
    .hp-regulation__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 575px) {
    .hp-aims { padding: 26px 18px; }
    .hp-main .hp-aims__list li { padding: 14px; gap: 12px; }
    .hp-main .hp-aims__list li p { font-size: 15px; }
}

/* =========================================================
   7. Facilities
   ========================================================= */
.hp-facilities { background: var(--hp-tint); }
.hp-facilities::before {
    content: "";
    position: absolute;
    left: -120px;
    top: 80px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 168, 90, .10), transparent 70%);
    animation: hpOrb 16s ease-in-out infinite alternate;
}
.hp-fac-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.hp-fac-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
    padding: 32px 28px;
    border-radius: var(--hp-radius);
    background: linear-gradient(150deg, var(--hp-green) 0%, var(--hp-green-dark) 60%, var(--hp-green-deep) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}
.hp-fac-intro > i {
    position: absolute;
    top: 26px;
    right: 22px;
    z-index: -1;
    font-size: 96px;
    color: rgba(255, 255, 255, .10);
    animation: hpFloat 7s ease-in-out infinite;
}
.hp-fac-intro::after {
    content: "";
    position: absolute;
    left: 28px;
    top: 32px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--hp-yellow);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9L12 3zm-7 9.2v4L12 20l7-3.8v-4L12 16l-7-3.8z'/%3E%3C/svg%3E") center / 34px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 1 9l11 6 9-4.9V17h2V9L12 3zm-7 9.2v4L12 20l7-3.8v-4L12 16l-7-3.8z'/%3E%3C/svg%3E") center / 34px no-repeat;
}
.hp-main .hp-fac-intro .hp-title { color: #fff; font-size: 34px; }
.hp-fac-intro .hp-bar { background: rgba(255, 255, 255, .25); }
.hp-fac-intro .hp-bar::after { background: var(--hp-yellow); }
.hp-fac-intro__arrow {
    position: absolute;
    right: 26px;
    bottom: 30px;
    color: var(--hp-yellow);
    font-size: 22px;
    animation: hpNudge 1.8s ease-in-out infinite;
}
@keyframes hpNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

.hp-main .hp-fac {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px 26px 28px;
    border-radius: var(--hp-radius);
    background: #fff;
    border: 1px solid var(--hp-line);
    color: inherit;
    overflow: hidden;
    transition: transform .5s var(--hp-ease), box-shadow .5s var(--hp-ease), border-color .5s;
}
.hp-main .hp-fac::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-green), var(--hp-olive), var(--hp-yellow));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--hp-ease);
}
.hp-main .hp-fac:hover {
    transform: translateY(-8px);
    border-color: transparent;
    box-shadow: var(--hp-shadow-lg);
    color: inherit;
}
.hp-main .hp-fac:hover::before { transform: scaleX(1); }

.hp-fac__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 22px;
    border-radius: 22px;
    background: var(--hp-tint);
    transition: background .5s, border-radius .6s var(--hp-ease), transform .6s var(--hp-ease);
}
.hp-fac__icon img { width: 44px; height: 44px; object-fit: contain; transition: transform .6s var(--hp-ease); }
.hp-fac:hover .hp-fac__icon { background: #fffbd1; border-radius: 50%; transform: rotate(-8deg); }
.hp-fac:hover .hp-fac__icon img { transform: rotate(8deg) scale(1.12); }

.hp-main .hp-fac h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 600;
    color: var(--hp-ink);
    transition: color .3s;
}
.hp-main .hp-fac h3 i {
    font-size: 14px;
    color: var(--hp-green);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .35s, transform .35s var(--hp-ease);
}
.hp-main .hp-fac:hover h3 { color: var(--hp-green-dark); }
.hp-main .hp-fac:hover h3 i { opacity: 1; transform: none; }
.hp-main .hp-fac p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hp-text);
}

@media (max-width: 1199px) {
    .hp-fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-fac-intro { min-height: 220px; }
}
@media (max-width: 575px) {
    .hp-fac-grid { grid-template-columns: 1fr; gap: 18px; }
    .hp-main .hp-fac { padding: 24px 20px; }
}

/* =========================================================
   8. Who we are (video band)
   ========================================================= */
.hp-who { padding: 40px 0; }
.hp-who__band {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1920 / 676;
    min-height: 560px;
    background: url("../img/wave-video.png") center / cover no-repeat;
    isolation: isolate;
}
/* overlay follows the wavy edges of the photo */
.hp-who__band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(25, 78, 45, .94) 0%, rgba(31, 90, 53, .84) 38%, rgba(31, 90, 53, .25) 68%, rgba(31, 90, 53, 0) 85%);
    -webkit-mask: url("../img/wave-video.png") center / cover no-repeat;
    mask: url("../img/wave-video.png") center / cover no-repeat;
}
.hp-who__band > .container { position: relative; z-index: 1; width: 100%; }
.hp-who__band { transform: scale(calc(.94 + .06 * min(1, var(--p, .5) * 2.2))); }
.hp-who__content { max-width: 580px; padding: 70px 0; }
.hp-main .hp-who__content .hp-title { color: #fff; }
.hp-main .hp-who__content .hp-title span { color: var(--hp-yellow); }
.hp-who__content .hp-bar { background: rgba(255, 255, 255, .25); }
.hp-who__content .hp-bar::after { background: var(--hp-yellow); }
.hp-who__content .hp-head { margin-bottom: 24px; }
.hp-main .hp-who__content .hp-text { color: rgba(255, 255, 255, .92); }

.hp-main .hp-play {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 8px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hp-main .hp-play:hover { color: var(--hp-yellow); }
.hp-play__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--hp-yellow);
    color: var(--hp-green-deep);
    font-size: 22px;
    transition: transform .4s var(--hp-ease), background .4s;
}
.hp-play__btn i { margin-left: 4px; }
.hp-play__btn::before,
.hp-play__btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--hp-yellow);
    animation: hpRipple 2.4s ease-out infinite;
}
.hp-play__btn::after { animation-delay: 1.2s; }
.hp-play:hover .hp-play__btn { transform: scale(1.1); background: #fff; }
@keyframes hpRipple {
    from { transform: scale(1); opacity: .9; }
    to { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 991px) {
    .hp-who__band { aspect-ratio: auto; min-height: 0; background-position: 70% center; }
    .hp-who__band::before,
    .hp-who__fx { -webkit-mask-position: 70% center; mask-position: 70% center; }
    .hp-who__band::before { background: rgba(25, 78, 45, .86); }
    .hp-who__content { padding: 90px 0; }
}
@media (max-width: 575px) {
    .hp-who { padding: 10px 0; }
    .hp-who__content { padding: 86px 0 80px; }
    .hp-play__btn { width: 62px; height: 62px; font-size: 18px; }
}

/* =========================================================
   9. Gallery (bento grid)
   ========================================================= */
.hp-gallery { padding-top: calc(var(--hp-space) - 30px); }
.hp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 230px;
    grid-auto-flow: dense;
    gap: 18px;
}
.hp-gallery__item--big { grid-column: span 2; grid-row: span 2; }
.hp-gallery__item--wide { grid-column: span 2; }

.hp-main .hp-gallery__item {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background: var(--hp-tint);
    box-shadow: 0 6px 18px rgba(31, 90, 53, .08);
}
.hp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--hp-ease), filter .6s;
}
.hp-gallery__item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(160deg, rgba(0, 168, 90, .15), rgba(31, 90, 53, .78));
    opacity: 0;
    transition: opacity .5s var(--hp-ease);
}
.hp-gallery__zoom {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    background: var(--hp-yellow);
    color: var(--hp-green-deep);
    font-size: 18px;
    opacity: 0;
    transform: scale(.4) rotate(-90deg);
    transition: opacity .45s, transform .55s var(--hp-ease);
}
.hp-gallery__item:hover img { transform: scale(1.1); }
.hp-gallery__item:hover::before,
.hp-gallery__item:focus-visible::before { opacity: 1; }
.hp-gallery__item:hover .hp-gallery__zoom,
.hp-gallery__item:focus-visible .hp-gallery__zoom { opacity: 1; transform: none; }

@media (max-width: 991px) {
    .hp-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 14px; }
}
@media (max-width: 575px) {
    .hp-gallery__grid { grid-auto-rows: 150px; gap: 10px; }
    .hp-gallery__item--big { grid-row: span 2; }
}

/* =========================================================
   10. Motion layer
   Page states on <html>: hp-wait (popup open) -> hp-intro
   (entrance plays) -> hp-ready. The header rules below only
   apply to the home page because only index.php loads this file.
   ========================================================= */

/* ---------- Scroll progress bar ---------- */
.hp-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--hp-green), var(--hp-olive), var(--hp-yellow));
    box-shadow: 0 0 10px rgba(255, 241, 18, .6);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* ---------- Header: entrance ---------- */
.hp-wait .header,
.hp-wait .quickLinks-item,
.hp-wait .hp-hero__dots,
.hp-wait .hp-ticker { opacity: 0; }

.hp-intro .header { animation: hpHeaderIn .9s var(--hp-ease) both; }
.hp-intro .header .top-line .logo { animation: hpLogoDrop 1.1s .2s cubic-bezier(.34, 1.56, .64, 1) both; }
.hp-intro .header .hamburger { animation: hpPop .6s .5s var(--hp-ease) both; }
.hp-intro .header .header-controls li,
.hp-intro .header .main-nav-list > li { animation: hpDropIn .6s var(--hp-ease) both; }
.hp-intro .header .header-controls li:nth-child(1) { animation-delay: .35s; }
.hp-intro .header .header-controls li:nth-child(2) { animation-delay: .45s; }
.hp-intro .header .header-controls li:nth-child(3) { animation-delay: .55s; }
.hp-intro .header .main-nav-list > li:nth-child(1) { animation-delay: .50s; }
.hp-intro .header .main-nav-list > li:nth-child(2) { animation-delay: .56s; }
.hp-intro .header .main-nav-list > li:nth-child(3) { animation-delay: .62s; }
.hp-intro .header .main-nav-list > li:nth-child(4) { animation-delay: .68s; }
.hp-intro .header .main-nav-list > li:nth-child(5) { animation-delay: .74s; }
.hp-intro .header .main-nav-list > li:nth-child(6) { animation-delay: .80s; }
.hp-intro .header .main-nav-list > li:nth-child(7) { animation-delay: .86s; }
.hp-intro .header .main-nav-list > li:nth-child(8) { animation-delay: .92s; }
.hp-intro .header .main-nav-list > li:nth-child(9) { animation-delay: .98s; }
.hp-intro .quickLinks-item { animation: hpSlideInRight .7s var(--hp-ease) both; }
.hp-intro .quickLinks-item:nth-child(1) { animation-delay: .7s; }
.hp-intro .quickLinks-item:nth-child(2) { animation-delay: .82s; }
.hp-intro .quickLinks-item:nth-child(3) { animation-delay: .94s; }
.hp-intro .hp-hero__dots { animation: hpDotsIn .7s 1s var(--hp-ease) both; }
.hp-intro .hp-ticker { animation: hpTickerIn 1s .45s var(--hp-ease) both, hpGradShift 12s ease-in-out infinite alternate; }

@keyframes hpHeaderIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes hpLogoDrop { from { opacity: 0; transform: translateY(-120%) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes hpDropIn { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes hpSlideInRight { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: none; } }
@keyframes hpPop { from { opacity: 0; transform: scale(.4) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes hpDotsIn { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hpTickerIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Header: ambient ---------- */
/* light sweep across the bar */
.header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .14) 50%, transparent 58%) no-repeat;
    background-size: 300% 100%;
    background-position: 120% 0;
    animation: hpSweep 8s 2.5s ease-in-out infinite;
    pointer-events: none;
}
/* light running along the bottom border */
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--hp-yellow), transparent) no-repeat;
    background-size: 25% 100%;
    animation: hpBorderRun 5s linear infinite;
    pointer-events: none;
}
@keyframes hpSweep { 0% { background-position: 120% 0; } 40%, 100% { background-position: -20% 0; } }
@keyframes hpBorderRun { from { background-position: -35% 0; } to { background-position: 135% 0; } }

/* sticky header drops in when it pins */
@media (min-width: 768px) {
    .header.is-scroll {
        animation: hpHeaderDrop .6s var(--hp-ease) both;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    }
}
@keyframes hpHeaderDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.header .top-line .logo img { transition: transform .6s var(--hp-ease); }
.header .top-line .logo:hover img { transform: scale(1.06) rotate(-4deg); }

.header .header-controls li .fa-phone { animation: hpRing 3.5s ease-in-out infinite; }
@keyframes hpRing {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-18deg); }
    88% { transform: rotate(16deg); }
    92% { transform: rotate(-10deg); }
    96% { transform: rotate(6deg); }
}

.header .header-controls li.admission-open a { position: relative; overflow: hidden; }
.header .header-controls li.admission-open a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    animation: hpSweep 3.2s ease-in-out infinite;
    pointer-events: none;
}

/* menu links: yellow fill rises on hover */
.header .main-nav-list > li > a { position: relative; isolation: isolate; overflow: hidden; }
.header .main-nav-list > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hp-yellow);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .35s var(--hp-ease);
}
.header .main-nav-list > li:hover > a { background: transparent; }
.header .main-nav-list > li:hover > a::before { transform: scaleY(1); }
.header .main-nav-list > li > a i { transition: transform .35s var(--hp-ease); }
.header .main-nav-list > li:hover > a i { transform: rotate(180deg); }

/* dropdowns unfold and their items cascade in */
.header .main-nav-list > li > .tt-dropdown-menu {
    border-radius: 0 0 10px 10px;
    transform: translateY(16px) scale(.98);
    transform-origin: top;
    transition: opacity .35s, visibility .35s, transform .45s var(--hp-ease);
}
.header .main-nav-list > li:hover > .tt-dropdown-menu { transform: none; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li { animation: hpDropItem .45s var(--hp-ease) both; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(2) { animation-delay: .04s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(3) { animation-delay: .08s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(4) { animation-delay: .12s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(5) { animation-delay: .16s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(6) { animation-delay: .20s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(7) { animation-delay: .24s; }
.header .main-nav-list > li:hover > .tt-dropdown-menu > li:nth-child(n+8) { animation-delay: .28s; }
.header .main-nav-list .tt-dropdown-menu li a { transition: color .3s, transform .3s var(--hp-ease); }
.header .main-nav-list .tt-dropdown-menu li:hover a { transform: translateX(8px); }
@keyframes hpDropItem { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.header .hamburger { transition: transform .3s var(--hp-ease); cursor: pointer; }
.header .hamburger:hover { transform: scale(1.12); }

/* mobile off-canvas menu: items slide in when it opens */
@media (max-width: 1199px) {
    .main-nav.active .main-nav-list > li { animation: hpSlideInSm .5s var(--hp-ease) both; }
    .main-nav.active .main-nav-list > li:nth-child(2) { animation-delay: .05s; }
    .main-nav.active .main-nav-list > li:nth-child(3) { animation-delay: .10s; }
    .main-nav.active .main-nav-list > li:nth-child(4) { animation-delay: .15s; }
    .main-nav.active .main-nav-list > li:nth-child(5) { animation-delay: .20s; }
    .main-nav.active .main-nav-list > li:nth-child(6) { animation-delay: .25s; }
    .main-nav.active .main-nav-list > li:nth-child(7) { animation-delay: .30s; }
    .main-nav.active .main-nav-list > li:nth-child(8) { animation-delay: .35s; }
    .main-nav.active .main-nav-list > li:nth-child(9) { animation-delay: .40s; }
}
@keyframes hpSlideInSm { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

.quickLinks-wrap .quickLinks-item:hover .quickLinks-head img { animation: hpIconBounce .6s var(--hp-ease); }
@keyframes hpIconBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px) scale(1.12); } 70% { transform: translateY(2px); } }

/* ---------- Section titles: curtain reveal ---------- */
.hp-main .hp-title { --curtain: var(--hp-green); }
.hp-admissions .hp-title,
.hp-who .hp-title,
.hp-fac-intro .hp-title { --curtain: var(--hp-yellow); }
.hp-main .hp-title::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--curtain);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}
.hp-js .hp-main .hp-title { clip-path: inset(0 100% 0 0); }
.hp-js .hp-main .is-visible .hp-title { animation: hpTitleClip 1.1s .15s cubic-bezier(.77, 0, .18, 1) forwards; }
.hp-js .hp-main .is-visible .hp-title::after { animation: hpCurtain 1.1s .15s cubic-bezier(.77, 0, .18, 1) forwards; }
@keyframes hpTitleClip { 0% { clip-path: inset(0 100% 0 0); } 50%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes hpCurtain {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    50.01% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- Extra reveal styles ---------- */
.hp-js [data-reveal="flip"] { transform-origin: 50% 0; }
.hp-js [data-reveal="flip"].is-visible { animation-name: hpRevealFlip; animation-duration: 1s; }
.hp-js [data-reveal="blur"].is-visible { animation-name: hpRevealBlur; }
.hp-js [data-reveal="clip"].is-visible { animation-name: hpRevealClip; animation-duration: 1.3s; }
.hp-js [data-reveal="tilt"].is-visible { animation-name: hpRevealTilt; }
@keyframes hpRevealFlip { from { opacity: 0; transform: perspective(1000px) rotateX(30deg) translateY(60px); } to { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); } }
@keyframes hpRevealBlur { from { opacity: 0; filter: blur(12px); transform: scale(1.06); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes hpRevealClip { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes hpRevealTilt { from { opacity: 0; transform: translateY(50px) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------- Animated background shapes ----------
   Each section has a .hp-bg layer; --p (0..1, set from JS
   while the section is on screen) drives the parallax. */
.hp-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hp-section > .container { position: relative; z-index: 1; }

.hp-bg > span {
    position: absolute;
    left: var(--x, auto);
    top: var(--y, auto);
    width: var(--w, 80px);
    height: var(--w, 80px);
    translate: 0 calc((var(--p, .5) - .5) * var(--s, 0) * -1px);
}

.hp-orb {
    border-radius: 50%;
    background: radial-gradient(circle, var(--c, rgba(0, 168, 90, .16)) 0%, transparent 70%);
    animation: hpOrb var(--t, 14s) ease-in-out infinite alternate;
}
@keyframes hpOrb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -24px) scale(1.15); }
    100% { transform: translate(-22px, 26px) scale(.94); }
}

.hp-blob {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    background: var(--c, var(--hp-tint));
    animation: hpBlob var(--t, 18s) ease-in-out infinite;
}
@keyframes hpBlob {
    0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0) scale(1); }
    33% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; transform: rotate(60deg) scale(1.06); }
    66% { border-radius: 33% 67% 38% 62% / 64% 52% 48% 36%; transform: rotate(-40deg) scale(.95); }
}

.hp-ring {
    border-radius: 50%;
    border: 2px dashed var(--c, rgba(0, 168, 90, .35));
    animation: hpSpin var(--t, 30s) linear infinite;
}
.hp-ring--solid { border-style: solid; }
.hp-ring--light { --c: rgba(255, 255, 255, .28); }

.hp-bg > .hp-plus {
    --w: 22px;
    background:
        linear-gradient(var(--c, var(--hp-olive)) 0 0) center / 100% 4px no-repeat,
        linear-gradient(var(--c, var(--hp-olive)) 0 0) center / 4px 100% no-repeat;
    animation: hpPlus var(--t, 9s) ease-in-out infinite;
}
@keyframes hpPlus { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-18px); } }

.hp-bg > .hp-tri {
    --w: 30px;
    background: var(--c, var(--hp-yellow));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    opacity: .6;
    animation: hpTri var(--t, 12s) ease-in-out infinite;
}
@keyframes hpTri { 0%, 100% { transform: rotate(0) translate(0, 0); } 50% { transform: rotate(120deg) translate(14px, -16px); } }

.hp-bg > .hp-dotgrid {
    --w: 140px;
    background-image: radial-gradient(var(--c, rgba(0, 168, 90, .35)) 2px, transparent 2.5px);
    background-size: 16px 16px;
    animation: hpDotDrift var(--t, 10s) ease-in-out infinite alternate;
}
@keyframes hpDotDrift { from { transform: translate(0, 0); } to { transform: translate(18px, -18px); } }

.hp-bg > .hp-bubble {
    --w: 12px;
    top: auto;
    bottom: -40px;
    border-radius: 50%;
    background: var(--c, rgba(255, 255, 255, .35));
    animation: hpRise var(--t, 12s) linear infinite;
    animation-delay: var(--dl, 0s);
}
@keyframes hpRise {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    10% { opacity: 1; }
    25% { transform: translate(14px, calc(var(--rise, 700px) * -.25)) scale(.8); }
    50% { transform: translate(-12px, calc(var(--rise, 700px) * -.5)) scale(1); }
    75% { transform: translate(10px, calc(var(--rise, 700px) * -.75)) scale(.9); }
    90% { opacity: .9; }
    100% { transform: translate(0, calc(var(--rise, 700px) * -1)) scale(.7); opacity: 0; }
}

.hp-bg > .hp-gridlines {
    inset: -60px;
    width: auto;
    height: auto;
    background-image:
        linear-gradient(rgba(0, 168, 90, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 90, .07) 1px, transparent 1px);
    background-size: 60px 60px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
    animation: hpGridPan 14s linear infinite;
}
@keyframes hpGridPan { to { transform: translate(60px, 60px); } }

/* hero: soft bokeh + a periodic light sweep over the banner */
.hp-hero__fx { z-index: 2; }
.hp-bg > .hp-hero__shine {
    inset: 0;
    width: auto;
    height: auto;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%) no-repeat;
    background-size: 300% 100%;
    background-position: 120% 0;
    animation: hpSweep 9s 3s ease-in-out infinite;
}

/* who-we-are: particles stay inside the wavy photo shape */
.hp-who__fx {
    -webkit-mask: url("../img/wave-video.png") center / cover no-repeat;
    mask: url("../img/wave-video.png") center / cover no-repeat;
}

@media (max-width: 767px) {
    .hp-bg > .hp-tri,
    .hp-bg > .hp-dotgrid,
    .hp-bg > .hp-bubble:nth-of-type(2n) { display: none; }
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .hp-main *, .hp-main *::before, .hp-main *::after, .hp-popup, .hp-popup * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .hp-js [data-reveal] { opacity: 1; }
    .hp-ticker__track { animation: none; }
    .header, .header *, .header::before, .header::after,
    .quickLinks-item, .quickLinks-item *, .main-nav-list > li { animation: none !important; }
    .hp-js .hp-main .hp-title { clip-path: none; }
    .hp-bg > .hp-bubble, .hp-bg > .hp-hero__shine { display: none; }
}