html { scroll-behavior: smooth; }

#site-header.scrolled {
  box-shadow: 0 4px 24px rgba(128, 28, 74, 0.12), 0 1px 4px rgba(0,0,0,0.08);
}

/* 3D perspective containers */
.perspective-container { perspective: 1200px; perspective-origin: 50% 50%; }
.transform-3d { transform-style: preserve-3d; will-change: transform, opacity; }
.backface-hidden { backface-visibility: hidden; }

/* ── Hero stat icons: 3D entrance + float ───────────────────────────── */
.hero-icon-3d {
  transform-style: preserve-3d;
  animation:
    icon3dIn   0.75s cubic-bezier(0.23, 1, 0.32, 1) both,
    icon3dFloat 3.5s ease-in-out infinite;
  animation-delay: var(--id, 0s), calc(var(--id, 0s) + 0.75s);
}

@keyframes icon3dIn {
  from {
    opacity: 0;
    transform: perspective(500px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1) scale(5) translateZ(-300px);
  }
  to {
    opacity: 1;
    transform: perspective(500px) matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1) scale(1) translateZ(0px);
  }
}

@keyframes icon3dFloat {
  0%,100% { transform: perspective(300px) rotateY(0deg)   rotateX(0deg)  translateZ(0px);  }
  30%     { transform: perspective(300px) rotateY(18deg)  rotateX(8deg)  translateZ(10px); }
  60%     { transform: perspective(300px) rotateY(-12deg) rotateX(-6deg) translateZ(6px);  }
}

/* Star: scales from left origin — starts big on left, leaf-drifts to its position */
@keyframes icon3dStarLoad {
  0%   { transform: perspective(400px) scale(2)    translateX(-30px) rotateZ(-20deg) rotateX(15deg); }
  20%  { transform: perspective(400px) scale(1.7)  translateX(-20px) rotateZ(14deg)  rotateX(10deg); }
  40%  { transform: perspective(400px) scale(1.45) translateX(-10px) rotateZ(-10deg) rotateX(6deg);  }
  60%  { transform: perspective(400px) scale(1.2)  translateX(-4px)  rotateZ(6deg)   rotateX(2deg);  }
  80%  { transform: perspective(400px) scale(1.05) translateX(-1px)  rotateZ(-2deg)  rotateX(0deg);  }
  100% { transform: perspective(400px) scale(1)    translateX(0px)   rotateZ(0deg)   rotateX(0deg);  }
}

/* Rocket: gentle thrust-bob */
@keyframes icon3dRocket {
  0%,100% { transform: perspective(300px) translateY(0px)  rotateX(0deg)   rotateZ(0deg);  }
  20%     { transform: perspective(300px) translateY(-6px) rotateX(-8deg)  rotateZ(-3deg); }
  50%     { transform: perspective(300px) translateY(-3px) rotateX(3deg)   rotateZ(2deg);  }
  75%     { transform: perspective(300px) translateY(-7px) rotateX(-5deg)  rotateZ(-2deg); }
}

/* Sun: slow Y-axis flip + breathe scale */
@keyframes icon3dSun {
  0%   { transform: perspective(300px) rotateY(0deg)   rotateX(0deg)  scale(1);    }
  25%  { transform: perspective(300px) rotateY(60deg)  rotateX(10deg) scale(1.15); }
  50%  { transform: perspective(300px) rotateY(180deg) rotateX(0deg)  scale(1);    }
  75%  { transform: perspective(300px) rotateY(300deg) rotateX(-10deg) scale(1.1); }
  100% { transform: perspective(300px) rotateY(360deg) rotateX(0deg)  scale(1);    }
}

/* ── Why Choose Us: images slide in from sides ───────────────────────── */
@media (min-width: 768px) {
  .why-img-left  { opacity: 0; }
  .why-img-right { opacity: 0; }
}

.why-img-left.is-visible  { animation: revealWhyLeft  1s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.why-img-right.is-visible { animation: revealWhyRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; }

@keyframes revealWhyLeft {
  from { opacity: 0; transform: translateX(-100px) rotate(-8deg) scale(0.85); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes revealWhyRight {
  from { opacity: 0; transform: translateX(100px) rotate(8deg) scale(0.85); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
}

/* ── Voices: swoop in from top corners ───────────────────────────────── */
@media (min-width: 768px) {
  .vocie-container::before,
  .vocie-container::after { opacity: 0; }
}

.vocie-container.is-visible::before {
  animation: revealVoiceLeft 1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.vocie-container.is-visible::after {
  animation: revealVoiceRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes revealVoiceLeft {
  from { opacity: 0; transform: translate(-80px, -50px) scale(0.3) rotate(-40deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes revealVoiceRight {
  from { opacity: 0; transform: translate(80px, -50px) scale(0.3) rotate(40deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* ── LED / bg-pinkcard: support doodle drops from top-left ───────────── */
@media (min-width: 768px) {
  .bg-pinkcard::before { opacity: 0; }
}

.bg-pinkcard.is-visible::before {
  animation: revealSupportDrop 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
}
@keyframes revealSupportDrop {
  0%   { opacity: 0; transform: translateY(-60px) translateX(-30px) scale(0.4) rotate(-25deg); }
  60%  { opacity: 1; transform: translateY(6px) translateX(4px) scale(1.12) rotate(6deg); }
  80%  { transform: translateY(-3px) translateX(-2px) scale(0.96) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(0) translateX(0) scale(1) rotate(0deg); }
}

/* ── Limited Seats: side doodles fly in ──────────────────────────────── */
@media (min-width: 768px) {
  .limited-img-left  { opacity: 0; }
  .limited-img-right { opacity: 0; }
}

.limited-img-left.is-visible  { animation: revealLimitedLeft  1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
.limited-img-right.is-visible { animation: revealLimitedRight 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both; }

@keyframes revealLimitedLeft {
  from { opacity: 0; transform: translateY(-50%) translateX(-80px) scale(0.5) rotate(-20deg); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1) rotate(0deg); }
}
@keyframes revealLimitedRight {
  from { opacity: 0; transform: translateY(-50%) translateX(80px) scale(0.5) rotate(20deg); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0) scale(1) rotate(0deg); }
}

/* ── Scroll reveal: hide before trigger (desktop only) ──────────────── */
@media (min-width: 768px) {
  .results-box::before,
  .results-box::after,
  .bulb-box::before { opacity: 0; }
  .result-pill::before { opacity: 0; }
}

/* Threestar (top-left): spins in from outside top-left corner */
.results-box.is-visible::before {
  animation: revealStarSpin 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes revealStarSpin {
  from { opacity: 0; transform: translate(-70px, -70px) scale(0.1) rotate(-210deg); }
  to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Trophy (bottom-left): bounces up from below with twist */
.results-box.is-visible::after {
  animation: revealTrophyUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes revealTrophyUp {
  from { opacity: 0; transform: translateY(90px) scale(0.2) rotate(30deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* Bulb (top-right of card): swings in from top-right like a pendulum */
.bulb-box.is-visible::before {
  animation: revealBulbSwing 1.1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both;
}
@keyframes revealBulbSwing {
  0%   { opacity: 0; transform: translate(65px, -65px) scale(0.3) rotate(130deg); }
  55%  { opacity: 1; transform: translate(-5px, 5px)   scale(1.18) rotate(-14deg); }
  78%  { transform: translate(2px, -2px) scale(0.94) rotate(5deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Pill logos: flick in from left with spin, stagger via JS */
.result-pill.is-visible::before {
  animation: revealPillSlide 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes revealPillSlide {
  from { opacity: 0; transform: translateY(-50%) translateX(-60px) scale(0.3) rotate(-25deg); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0)     scale(1)   rotate(0deg);  }
}

/* Result pill logos via ::before — adjust width/height per logo as needed */
.result-pill { position: relative; }
.result-pill::before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 100%; margin-right: 15px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pill-nid::before    { background-image: url('../images/nidrank1.png');        width: 60px; }
.pill-nift::before   { background-image: url('../images/niftrank2.png');       width: 70px; }
.pill-uceed::before  { background-image: url('../images/uceed.png');           width: 80px; }
.pill-parson::before { background-image: url('../images/studentsparson.png');  width: 60px; }
.pill-risd::before   { background-image: url('../images/studentsrhode.png');   width: 110px; }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    #counselling { scroll-margin-top: 20px; }
    @media (max-width: 1023px) { #counselling { scroll-margin-top: 60px; } }
    body { font-family: "Sora", sans-serif; color: #333; }
    .section-heading { font-family: "Sora", sans-serif; font-weight: 700; line-height: 119.7%; text-transform: uppercase; }
    .curved-border { border-radius: 68px 5px 5px 68px; }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .faq-item.active .faq-answer { max-height: 500px; }
    .faq-item .faq-chevron { transition: transform 0.3s ease; display: inline-block; }
    .faq-item.active .faq-chevron { transform: rotate(-90deg); }
    .pill { border: 1px solid #801c4a; border-radius: 25px; padding: 10px 22px; display: inline-flex; align-items: center; gap: 10px; }
    .pill .dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #801c4a; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .pill .dot::after { content: '✓'; color: #801c4a; font-size: 14px; font-weight: 700; line-height: 1; }
    .banner-left::before {
      content: '';
      position: absolute;
      top: -20px;
      right: -21px;
      width: 90px;
      height: 90px;
      background-image: url('../images/star.webp');
      background-size: contain;
      background-repeat: no-repeat;
      transform-style: preserve-3d;
      transform-origin: left center;
      animation: icon3dStarLoad 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
    }
    .hero-wrapper::after{
      content: '';
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 400px;
      background-color: #fff;
      z-index: 2;
    }
    .right-banner::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 30px;
      width: 120px;
      height: 80px;
      background-image: url('../images/rocket.webp');
      background-size: contain;
      background-repeat: no-repeat;
      transform-style: preserve-3d;
      animation: icon3dIn 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.4s both,
                 icon3dRocket 2.8s ease-in-out calc(0.4s + 0.75s) infinite;
    }
    .right-banner::after {
      content: '';
      position: absolute;
      top: 30px;
      right: 30px;
      width: 90px;
      height: 90px;
      background-image: url('../images/sun.webp');
      background-size: contain;
      background-repeat: no-repeat;
      transform-style: preserve-3d;
      animation: icon3dIn 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both,
                 icon3dSun 5s linear calc(0.6s + 0.75s) infinite;
    }
    .results-box{
      background-image: url('../images/marronbg.webp');
      background-position: right;
      background-repeat: no-repeat;
      background-size: cover;
      place-content: center;
    }
    .results-box::before {
      content: '';
      position: absolute;
      top: 30px;
      left: 20px;
      width: 120px;
      height: 120px;
      background-image: url('../images/threestar.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top left;
      pointer-events: none;
    }
    .results-box::after {
      content: '';
      position: absolute;
      bottom: 75px;
      left: 5px;
      width: 90px;
      height: 90px;
      background-image: url('../images/trophy.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: bottom right;
      pointer-events: none;
    }
    .bulb-box::before {
      content: '';
      position: absolute;
      top: -80px;
      right: -80px;
      width: 130px;
      height: 130px;
      background-image: url('../images/bulb.webp');
      background-size: contain;
      background-repeat: no-repeat;
      background-color: #fbf1da;
      border-radius: 50%;
    }

    .bg-pinkcard::before{
      content: '';
      position: absolute;
      left: 15px;
      top: 60px;
      width: 110px;
      height: 100px;
      background-image: url('../images/support.webp');
      background-size: contain;
      background-repeat: no-repeat;
    }

    .faq-wrapper{
      background-image: url('../images/layerbg.webp');
      background-size: cover;
      background-repeat: no-repeat;
    }
    .vocie-container::before{
      content: '';
      position: absolute;
      top: -50px;
      left: 30px;
      width: 200px;
      height: 200px;
      background-image: url('../images/voiceleft.webp');
      background-size: contain;
      background-repeat: no-repeat;
    }
    .vocie-container::after{
      content: '';
      position: absolute;
      top:  -10px;
      right: 30px;
      width: 150px;
      height: 150px;
      background-image: url('../images/voiceright.webp');
      background-size: contain;
      background-repeat: no-repeat;
    }

@media (max-width: 1200px) {
    .results-box::before { display: none; }
    .results-box::after { display: none; }
    .vocie-container::before { top: -40px; left: 20px; width: 150px; height: 150px; }
    .vocie-container::after { top: -10px; right: 20px; width: 120px; height: 120px; }
}

@media (max-width:1024.98px ) {
    .bg-pinkcard::before,.bg-pinkcard::after{display: none;}
    .bulb-box::before {top: -50px; right: -50px;width: 90px;height: 90px;}
    .vocie-container::before { top: -35px; width: 125px;height: 125px;}
    .vocie-container::after {top: -10px;right: 35px;width: 100px;height: 100px;}
    .right-banner::before { top: 18px; left: 28px; width: 80px; height: 54px; }
    .right-banner::after  { top: 14px; right: 28px; width: 70px; height: 70px; }
}

@media(max-width: 767.98px){

.right-banner::before { top: 14px; left: 20px; width: 60px; height: 40px; }
.right-banner::after  { top: 10px; right: 20px; width: 54px; height: 54px; }

.banner-left::before { top: -20px;right: -20px;width: 70px;height: 70px;}
.vocie-container::before {top: 0px;width: 70px; height: 70px;}
.vocie-container::after {top: 10px; right: 20px;width: 50px;height: 50px; }

}

@media(max-width: 575.98px){
  .banner-left::before {
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
  }
  .bulb-box::before{display: none;}
.vocie-container::before,.vocie-container::after {display: none;}
.right-banner::before { top: 10px; left: 14px; width: 44px; height: 30px; }
.right-banner::after  { top: 8px;  right: 14px; width: 38px; height: 38px; }

.pill-risd::before {width: 70px;}
.pill-nid::before{width: 45px;}
.pill-nift::before{width: 50px;}
.pill-parson::before{width: 50px;}
.pill-uceed::before {width: 70px;}

}