:root {
  /* Reference Site Palette (Vercel) */
  --color-primary: #8a0000;
  --color-primary-hover: #b91c1c;
  --color-secondary: #0077b6;
  --color-deep-blue: #005DA6;
  --color-background-light: #f8f5f5;

  /* Accent Colors from Reference */
  --color-cyan-100: #cffafe;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-slate-900: #0f172a;

  /* Blue shades used in hero */
  --krea-blue-light: #7dd3fc;
  --krea-blue-mid: #7dd3fc;
  --krea-blue-dark: #005DA6;

  /* Red shades for timeline/borders */
  --msc-red-dark: #8a0000;
  --msc-red-light: #fca5a5;

  --font-display: "Lexend", sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-display) !important;
  background-color: var(--color-background-light);
  color: #0f172a; /* slate-900 */
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Color Utilities */
.krea-bg-dark-blue { background-color: var(--color-deep-blue) !important; }
.krea-bg-mid-blue { background-color: var(--color-secondary) !important; }
.krea-bg-light-blue { background-color: var(--color-cyan-100) !important; }
.krea-bg-maroon { background-color: var(--color-primary) !important; }
.krea-bg-maroon-hover:hover { background-color: var(--color-primary-hover) !important; }

.krea-text-cyan { color: var(--color-cyan-600) !important; }
.krea-text-maroon { color: var(--color-primary) !important; }

.krea-border-white-10 { border-color: rgba(255,255,255,0.1) !important; }
.krea-border-white-20 { border-color: rgba(255,255,255,0.2) !important; }

/* Font Weight Utilities */
.krea-font-black { font-weight: 900 !important; }
.krea-font-bold { font-weight: 700 !important; }
.krea-font-semibold { font-weight: 600 !important; }
.krea-font-medium { font-weight: 500 !important; }

/* Tracking & Leading */
.krea-tracking-widest { letter-spacing: 0.1em !important; }
.krea-leading-tight { line-height: 1.25 !important; }
.krea-leading-relaxed { line-height: 1.625 !important; }

/* Text Opacity Utilities */
.krea-text-white-95 { color: rgba(255,255,255,0.95) !important; }
.krea-text-white-80 { color: rgba(255,255,255,0.80) !important; }

/* Border Radius */
.krea-radius-2xl { border-radius: 1rem !important; }
.krea-radius-3xl { border-radius: 1.5rem !important; }

/* Shadow */
.krea-drop-shadow-xl { text-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Layout */
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.h-20 { height: 5rem !important; }
.text-lg { font-size: 1.125rem !important; }
.text-base { font-size: 1rem !important; }
.object-fit-cover { object-fit: cover !important; }
.transition-transform { transition: transform 0.3s ease !important; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease !important; }
.opacity-30 { opacity: 0.3 !important; }

/* Utilities */
.krea-network-bg {
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
  background-size: 40px 40px;
}

/* Animations that will be triggered by Intersection Observer */
.krea-animate-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-animate-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.krea-animate-slide-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-animate-slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.krea-animate-slide-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-animate-slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.krea-animate-scale-up {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-animate-scale-up.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.krea-delay-1 { transition-delay: 0.1s !important; }
.krea-delay-2 { transition-delay: 0.2s !important; }
.krea-delay-3 { transition-delay: 0.3s !important; }
.krea-delay-4 { transition-delay: 0.4s !important; }
.krea-delay-5 { transition-delay: 0.5s !important; }

/* Navbar specific */
.krea-navbar-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030; /* Bootstrap fixed top z-index */
  transition: transform 0.5s ease-in-out;
}

.krea-navbar-hidden {
  transform: translateY(-100%);
}

.krea-navbar-visible {
  transform: translateY(0);
}

/* Hero Section */
.krea-bg-hero {
  background: linear-gradient(135deg, #1a6fb5 0%, #0a3d6b 50%, #0F204B 100%);
}

.krea-hero-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease;
}

.krea-hero-card:hover {
  transform: translateY(-4px);
}

/* Liquid fill animations for cards */
.krea-liquid-tube {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background-color: rgba(0,0,0,0.05);
  overflow: hidden;
}

.krea-liquid-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: var(--color-primary);
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-liquid-fill.is-visible {
  height: 100%;
}

/* Timeline Ink */
.krea-ink-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: rgba(138, 0, 0, 0.1);
  transform: translateX(-50%);
}

.krea-ink-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #8a0000, #b91c1c);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  z-index: 10;
}

/* Timeline Nodes */
.krea-timeline-node {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: white;
  border: 4px solid #fecaca; /* slate-200ish but red */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-timeline-node.is-active {
  border-color: var(--msc-red-dark);
  box-shadow: 0 0 20px rgba(135, 49, 32, 0.4);
}

.krea-timeline-node-inner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--msc-red-light);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.krea-timeline-node.is-active .krea-timeline-node-inner {
  background-color: var(--msc-red-dark);
  transform: scale(1.2);
  animation: krea-node-ping 1.5s ease-out 1;
}

@keyframes krea-node-ping {
  0% { transform: scale(1.2); box-shadow: 0 0 0 0 rgba(138, 0, 0, 0.5); }
  70% { transform: scale(1.2); box-shadow: 0 0 0 20px rgba(138, 0, 0, 0); }
  100% { transform: scale(1.2); box-shadow: 0 0 0 0 rgba(138, 0, 0, 0); }
}

/* Timeline card enhancements */
.krea-timeline-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-top-color 0.4s ease;
}
.krea-timeline-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(138, 0, 0, 0.12) !important;
}

/* Staggered list items inside timeline cards */
.krea-timeline-card li {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.krea-timeline-phase.is-visible .krea-timeline-card li {
  opacity: 1;
  transform: translateX(0);
}
.krea-timeline-card li:nth-child(1) { transition-delay: 0.2s; }
.krea-timeline-card li:nth-child(2) { transition-delay: 0.35s; }
.krea-timeline-card li:nth-child(3) { transition-delay: 0.5s; }
.krea-timeline-card li:nth-child(4) { transition-delay: 0.65s; }
.krea-timeline-card li:nth-child(5) { transition-delay: 0.8s; }

/* Bullet dot scale on card visibility */
.krea-timeline-card .rounded-circle.krea-bg-maroon {
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.krea-timeline-phase.is-visible .krea-timeline-card .rounded-circle.krea-bg-maroon {
  transform: scale(1);
}
.krea-timeline-card li:nth-child(1) .rounded-circle { transition-delay: 0.25s; }
.krea-timeline-card li:nth-child(2) .rounded-circle { transition-delay: 0.4s; }
.krea-timeline-card li:nth-child(3) .rounded-circle { transition-delay: 0.55s; }
.krea-timeline-card li:nth-child(4) .rounded-circle { transition-delay: 0.7s; }
.krea-timeline-card li:nth-child(5) .rounded-circle { transition-delay: 0.85s; }

/* Phase icon pulse on hover */
.krea-timeline-card .material-symbols-outlined {
  transition: transform 0.4s ease, color 0.4s ease;
}
.krea-timeline-card:hover .material-symbols-outlined {
  transform: scale(1.15) rotate(-5deg);
}

/* Ripple effect */
.krea-crimson-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(167, 59, 41, 0.2); /* MSc Mid Marron base */
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.krea-crimson-ripple:hover::after {
  width: 300%;
  height: 300%;
}

/* Border draw effect */
.krea-border-draw-top, .krea-border-draw-right, .krea-border-draw-bottom, .krea-border-draw-left {
  position: absolute;
  background-color: var(--msc-red-dark);
  transition: all 0.5s ease;
}

.krea-border-draw-top { width: 0; height: 2px; top: 0; left: 0; }
.krea-border-draw-right { width: 2px; height: 0; top: 0; right: 0; }
.krea-border-draw-bottom { width: 0; height: 2px; bottom: 0; right: 0; }
.krea-border-draw-left { width: 2px; height: 0; bottom: 0; left: 0; }

.krea-hover-card:hover .krea-border-draw-top { width: 100%; }
.krea-hover-card:hover .krea-border-draw-right { height: 100%; }
.krea-hover-card:hover .krea-border-draw-bottom { width: 100%; }
.krea-hover-card:hover .krea-border-draw-left { height: 100%; }

/* Hover lift for cards */
.krea-hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.krea-hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
}

/* Section Header Bar */
.krea-border-top-maroon {
  border-top: 4px solid var(--msc-red-dark);
}

/* Nav link hover */
nav a.text-white:hover {
  color: var(--color-primary) !important;
  transition: color 0.3s ease;
}

/* Apply button pulse */
@keyframes krea-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(138, 0, 0, 0.4); }
  50% { box-shadow: 0 0 0 12px rgba(138, 0, 0, 0); }
}

.krea-pulse {
  animation: krea-pulse 2.5s infinite;
}

/* Smooth icon hover in cards */
.krea-hover-card .material-symbols-outlined {
  transition: transform 0.3s ease;
}
.krea-hover-card:hover .material-symbols-outlined {
  transform: scale(1.1);
}

/* Philosophy step cards hover */
.krea-radius-2xl:hover {
  transform: translateY(-4px);
}

/* ── Launchpad Card Animations ── */

/* Card entrance: scale up + fade in, staggered */
.krea-launchpad-card {
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.krea-launchpad-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.krea-launchpad-card:nth-child(1) { transition-delay: 0s; }
.krea-launchpad-card:nth-child(2) { transition-delay: 0.25s; } /* actually connector comes between, handled by JS nth */

/* Flip card subtle 3D tilt on hover */
.krea-flip-card {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease;
  transform-style: preserve-3d;
  perspective: 600px;
}
.krea-flip-card:hover {
  transform: rotateY(6deg) rotateX(-3deg) translateY(-6px);
  box-shadow: 0 20px 40px rgba(138, 0, 0, 0.15) !important;
}

/* Step number watermark */
.krea-card-number {
  position: absolute;
  top: -8px;
  right: 10px;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(138, 0, 0, 0.06);
  line-height: 1;
  pointer-events: none;
  transition: color 0.4s ease;
}
.krea-flip-card:hover .krea-card-number {
  color: rgba(138, 0, 0, 0.12);
}

/* Icon spin on card hover */
.krea-icon-spin {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.krea-flip-card:hover .krea-icon-spin {
  transform: rotateY(360deg);
}

/* Connector line between cards (desktop) */
.krea-connector {
  opacity: 0;
  transition: opacity 0.5s ease 0.8s;
}
.krea-connector.is-visible { opacity: 1; }

.krea-connector-line {
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--msc-red-light), var(--msc-red-dark));
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.krea-connector-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: krea-shimmer 2s infinite;
}

@keyframes krea-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.krea-connector-arrow {
  font-size: 1.5rem !important;
  animation: krea-arrow-pulse 1.5s ease-in-out infinite;
}

@keyframes krea-arrow-pulse {
  0%, 100% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(6px); opacity: 0.6; }
}

/* Mobile bounce arrow */
.krea-bounce-arrow {
  font-size: 2rem !important;
  animation: krea-bounce 1.5s ease-in-out infinite;
}

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

/* ── Who Should Apply & Eligibility Animations ── */

/* Underline grows from 0 to 4rem (left-aligned) */
.krea-underline-grow {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.krea-checklist-section.is-visible .krea-underline-grow {
  width: 4rem !important;
}

/* Underline grows from center (for centered headings) */
.krea-underline-grow-center {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.krea-underline-grow-center.is-visible {
  width: 8rem !important;
}

/* Quote block slides in */
.krea-quote-slide {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
}
.krea-checklist-section.is-visible .krea-quote-slide {
  opacity: 1;
  transform: translateX(0);
}

/* Each check item slides in from left with stagger */
.krea-check-item {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.krea-checklist-section.is-visible .krea-check-item {
  opacity: 1;
  transform: translateX(0);
}
.krea-check-item:nth-child(1) { transition-delay: 0.15s; }
.krea-check-item:nth-child(2) { transition-delay: 0.3s; }
.krea-check-item:nth-child(3) { transition-delay: 0.45s; }
.krea-check-item:nth-child(4) { transition-delay: 0.6s; }

/* Check icon pops in with spring bounce */
.krea-check-icon {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.krea-checklist-section.is-visible .krea-check-icon {
  transform: scale(1);
}
.krea-check-item:nth-child(1) .krea-check-icon { transition-delay: 0.25s; }
.krea-check-item:nth-child(2) .krea-check-icon { transition-delay: 0.4s; }
.krea-check-item:nth-child(3) .krea-check-icon { transition-delay: 0.55s; }
.krea-check-item:nth-child(4) .krea-check-icon { transition-delay: 0.7s; }

/* Text slides in slightly after icon */
.krea-check-text {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.krea-checklist-section.is-visible .krea-check-text {
  opacity: 1;
  transform: translateX(0);
}
.krea-check-item:nth-child(1) .krea-check-text { transition-delay: 0.35s; }
.krea-check-item:nth-child(2) .krea-check-text { transition-delay: 0.5s; }
.krea-check-item:nth-child(3) .krea-check-text { transition-delay: 0.65s; }
.krea-check-item:nth-child(4) .krea-check-text { transition-delay: 0.8s; }

/* Hover effect on check items */
.krea-check-item {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  transition-property: opacity, transform, background-color;
}
.krea-check-item:hover {
  background-color: rgba(138, 0, 0, 0.04);
}
.krea-check-item:hover .krea-check-icon {
  transform: scale(1.15) rotate(-10deg);
  background-color: #fecdd3 !important;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .krea-ink-track, .krea-ink-line {
    display: none;
  }
  .krea-timeline-node {
    display: none !important;
  }
  .krea-timeline-row .col-md-5 {
    max-width: 100%;
    flex: 0 0 100%;
  }
  .krea-timeline-row .col-md-2 {
    display: none !important;
  }
}

/* Mobile navbar & badge fixes */
@media (max-width: 576px) {
  /* Shrink logo on mobile so text fits */
  .krea-navbar-sticky .h-20 img {
    width: 100px !important;
  }
  .krea-navbar-sticky .h-20 {
    height: 3.5rem !important;
  }
  .krea-navbar-sticky .h-20 .pl-4 {
    padding-left: 0.5rem !important;
  }
  .krea-navbar-sticky .h-20 .pl-4 span {
    font-size: 0.6rem !important;
  }
  /* Fix 480+ badge wrapping */
  .badge.d-inline-flex {
    font-size: 0.75rem !important;
    padding: 8px 16px !important;
    white-space: normal !important;
    text-align: center;
  }
}

@media (max-width: 768px) {
  /* Slightly smaller logo on tablets */
  .krea-navbar-sticky .h-20 img {
    width: 130px !important;
  }
  .krea-navbar-sticky .h-20 .pl-4 span {
    font-size: 0.65rem !important;
  }
  /* Badge responsive */
  .badge.d-inline-flex {
    font-size: 0.85rem !important;
    padding: 10px 18px !important;
  }
}

/* Compact navbar Row 2 on mobile — only hamburger visible */
@media (max-width: 991px) {
  .krea-bg-mid-blue.py-3 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  main {
    margin-top: 100px !important;
  }
}

/* Lab section images — stack on mobile */
@media (max-width: 767px) {
  #lab .order-2 > .row > .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  #lab .order-2 > .row > .col-6 img {
    min-height: 180px !important;
    max-height: 250px;
  }
  /* Remove staggered offset on mobile */
  #lab .order-2 > .row > .col-6 > .mt-5 {
    margin-top: 0 !important;
  }
}