/* ============================================================
   RojRojgar – Custom Stylesheet
   All project-specific styles (non-Tailwind utilities)
   ============================================================ */

/* ── Base ── */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

/* ════════════════════════════════════════════
   INTRO / SPLASH SCREEN
   ════════════════════════════════════════════ */

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #004d40 0%, #00695c 22%, #00897b 48%, #26a69a 62%, #00796b 80%, #004d40 100%);
  background-size: 300% 300%;
  /* start below viewport with curved top, both animations run together */
  transform: translateY(100%);
  border-radius: 48% 48% 0 0 / 90px 90px 0 0;
  animation:
    intro-enter 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    footer-gradient-shift 6s ease infinite;
}

@keyframes intro-enter {
  0%   { transform: translateY(100%); border-radius: 48% 48% 0 0 / 90px 90px 0 0; }
  65%  { border-radius: 12% 12% 0 0 / 24px 24px 0 0; }
  100% { transform: translateY(0);    border-radius: 0 0 0 0; }
}

/* subtle white grid on splash */
#intro-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 75%);
  pointer-events: none;
}

/* ── sparkle decorations ── */
.intro-sparkle {
  position: absolute;
  fill: rgba(255,255,255,0.22);
  animation: intro-sparkle-pulse 2.4s ease-in-out infinite;
}
.intro-sparkle:nth-child(2) { animation-delay: 0.6s;  }
.intro-sparkle:nth-child(3) { animation-delay: 1.2s;  }
.intro-sparkle:nth-child(4) { animation-delay: 0.3s;  }
.intro-sparkle:nth-child(5) { animation-delay: 1.8s;  }

@keyframes intro-sparkle-pulse {
  0%, 100% { opacity: 0.22; transform: scale(1)   rotate(0deg);   }
  50%       { opacity: 0.55; transform: scale(1.3) rotate(20deg);  }
}

/* ── centred content wrapper ── */
#intro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* ── spinning glowing ring ── */
#intro-ring {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
  animation: intro-ring-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards;
  box-shadow: 0 0 48px rgba(38,166,154,0.55), 0 0 96px rgba(0,137,123,0.30);
}

/* static outer border */
#intro-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
}

/* spinning gradient arc */
#intro-ring::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: #b2dfdb;
  border-right-color: rgba(178,223,219,0.4);
  animation: intro-ring-spin 1.8s linear infinite;
}

@keyframes intro-ring-spin  { to { transform: rotate(360deg); } }
@keyframes intro-ring-pop {
  from { opacity: 0; transform: scale(0.25); }
  to   { opacity: 1; transform: scale(1);    }
}

/* ── brand logo inside ring ── */
#intro-logo {
  width: 66px;
  height: 66px;
  object-fit: contain;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: intro-logo-pop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 1.45s forwards;
}
@keyframes intro-logo-pop {
  from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  to   { opacity: 1; transform: scale(1)   rotate(0deg);   }
}

/* ── brand name ── */
#intro-brand {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  font-size: clamp(2.8rem, 9vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
#intro-roj {
  color: #ffffff;
  opacity: 0;
  animation: intro-from-left 0.65s cubic-bezier(0.34, 1.2, 0.64, 1) 1.75s forwards;
}
#intro-rojgar {
  background: linear-gradient(135deg, #b2dfdb 0%, #e0f2f1 50%, #80cbc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  animation: intro-from-right 0.65s cubic-bezier(0.34, 1.2, 0.64, 1) 1.75s forwards;
}
@keyframes intro-from-left {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0);     }
}
@keyframes intro-from-right {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ── tagline ── */
#intro-tagline {
  color: rgba(255,255,255,0.60);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: intro-fade-up 0.55s ease 2.45s forwards;
}

/* ── progress bar ── */
#intro-progress-wrap {
  width: 140px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 99px;
  overflow: hidden;
  opacity: 0;
  animation: intro-fade-up 0.4s ease 2.65s forwards;
}
#intro-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #80cbc4, #ffffff, #b2dfdb);
  transition: width 1.7s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes intro-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── EXIT: curved curtain slides up ── */
#intro-overlay.intro-exit {
  animation: intro-curtain-up 0.95s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes intro-curtain-up {
  0%   { transform: translateY(0);      border-radius: 0; }
  35%  { border-radius: 0 0 28% 28% / 0 0 56px 56px; }
  100% { transform: translateY(-105%);  border-radius: 0 0 52% 52% / 0 0 110px 110px; }
}

/* ── CSS Custom Properties ── */
:root {
  --brand-500: #00897b;
  --brand-accent: #26a69a;
}

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glassmorphism card ── */
.glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 137, 123, 0.16);
  box-shadow: 0 4px 24px rgba(0, 137, 123, 0.08);
}

/* ── Brand glow button ── */
.btn-primary {
  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
  box-shadow: 0 4px 24px rgba(0, 137, 123, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 137, 123, 0.55);
}

/* ── Outlined button ── */
.btn-outline {
  border: 2px solid #00897b;
  color: #00897b;
  transition: all 0.2s;
}
.btn-outline:hover {
  background: #00897b;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 137, 123, 0.35);
  transform: translateY(-2px);
}

/* ── Hero background ── */
.hero-bg {
  background:
    radial-gradient(ellipse 75% 55% at 80% 35%, rgba(0, 137, 123, 0.14) 0%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 15% 75%, rgba(38, 166, 154, 0.10) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 50% 5%,  rgba(0, 137, 123, 0.07) 0%, transparent 100%),
    linear-gradient(160deg, #f5fffe 0%, #ffffff 45%, #f2fbfa 100%);
    border-radius: 0 0 58px 58px;
}

/* Grid lines overlay */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 137, 123, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 137, 123, 0.13) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 45%, black 0%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure hero content sits above the grid */
.hero-bg > * { position: relative; z-index: 1; }

/* ── Section backgrounds ── */
.section-dark  {
  background: linear-gradient(145deg, #e0f2f1 0%, #f6fffe 35%, #eaf7f5 65%, #f0fffe 100%);
}
.section-light { background: #ffffff; }

/* ── Hero right column (video) ── */
/* Prevent AOS pre-animation transforms from collapsing column height */
[data-aos="fade-left"].hero-col-right,
.hero-col-right {
  min-width: 0;
  align-self: center;
}

/* ── Hero Video Card ── */
.hero-video-card {
  position: relative;
  width: min(498px, 100%);
  border-radius: 24px;
  background: rgba(10, 20, 18, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 137, 123, 0.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 8px 40px rgba(0, 137, 123, 0.28),
    0 32px 80px rgba(0, 0, 0, 0.38);
  overflow: hidden;
  /* subtle teal glow halo via box-shadow — no extra DOM node needed */
}

/* macOS-style top chrome bar */
.hero-video-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px 10px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hero-video-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-video-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.04em;
  margin-left: 6px;
}

/* Video container */
.hero-video-wrap {
  width: 100%;
  max-height: 480px;
  overflow: hidden;
  background: #000;
}
.hero-video {
  width: 100%;
  height: 100%;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

/* Bottom live badge */
.hero-video-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.hero-video-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #26a69a;
  box-shadow: 0 0 8px rgba(38,166,154,0.8);
  animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}

/* Card is responsive via min(360px, 100%) — no mobile override needed */

/* ── Skill card hover ── */
.skill-card {
  transition: transform 0.25s, box-shadow 0.25s;
  cursor: default;
}
.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 137, 123, 0.2);
}

/* ── Floating navbar wrapper ── */
#navbar {
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              top     0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide navbar by sliding it up when scrolling down */
#navbar.nav-hidden {
  top: -120px;
}

/* ── Mobile menu smooth slide-down ── */
.mobile-menu-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    max-height  0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity     0.28s ease,
    transform   0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-panel.menu-open {
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Floating pill navbar ── */
.nav-pill {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 137, 123, 0.18);
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 4px 24px rgba(0, 137, 123, 0.10), 0 1px 6px rgba(0, 0, 0, 0.05);

  /* smooth all geometry + shadow changes */
  transition:
    transform        0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding          0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow       0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color     0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shrunk state — applied via JS on scroll */
.nav-pill.nav-shrunk {
  padding-top:    6px !important;
  padding-bottom: 6px !important;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 16px rgba(0, 137, 123, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06);
}

.nav-pill:hover {
  box-shadow: 0 8px 32px rgba(0, 137, 123, 0.14), 0 1px 6px rgba(0, 0, 0, 0.06);
}

/* ── Nav links ── */
.nav-link {
  position: relative;
  color: rgba(75, 85, 99, 1);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00897b, #26a69a);
  border-radius: 99px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-link:hover             { color: #00897b; }
.nav-link:hover::after      { transform: scaleX(1); }

/* ── How it works – step connector line ── */
.step-connector::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #00897b, #26a69a);
  transform: translateY(-50%);
}
@media (max-width: 768px) {
  .step-connector::after { display: none; }
}

/* ── Download footer shape & animated gradient ── */
#download {
  border-radius: 58px 58px 0 0;
}

.footer-gradient {
  background: linear-gradient(
    135deg,
    #004d40 0%,
    #00695c 20%,
    #00897b 45%,
    #26a69a 60%,
    #00796b 80%,
    #004d40 100%
  );
  background-size: 300% 300%;
  animation: footer-gradient-shift 10s ease infinite;
}

@keyframes footer-gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ── Ping dot animation ── */
.ping-dot::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* ── Hero H1 typing cursor ── */
.typing-cursor {
  display: inline-block;
  width: 3px;
  background: #26a69a;
  margin-left: 3px;
  border-radius: 2px;
  animation: blink-cursor 0.75s step-end infinite;
  vertical-align: baseline;
}
.hero-line1 .typing-cursor { height: 0.85em; }
.hero-line2 .typing-cursor {
  height: 0.85em;
  background: #00897b;
}
.hero-line2 { min-height: 1em; }

@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Language Toggle Switch ── */
.lang-toggle-wrap {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 137, 123, 0.20);
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 137, 123, 0.15), 0 1px 4px rgba(0,0,0,0.06);
  padding: 4px;
}

.lang-toggle-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 999px;
}

/* Sliding knob — animated via JS transform */
.lang-toggle-knob {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
  box-shadow: 0 2px 8px rgba(0, 137, 123, 0.45);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* When HI is active, slide knob to right */
.lang-toggle-knob.knob-right {
  transform: translateX(100%);
}

.lang-toggle-btn {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.25s ease;
  color: #6b7280;
  line-height: 1;
  white-space: nowrap;
}

.lang-toggle-btn.lang-active {
  color: #ffffff;
}

/* ═══════════════════════════════════════
   SKILL CARD IMAGE SCENE
   ═══════════════════════════════════════ */

/* Outer scene: centres everything, reserves space */
.skillcard-scene {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

/* ── Ambient glow orbs ── */
.sc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: sc-glow-pulse 4s ease-in-out infinite;
}
.sc-glow--teal {
  width: 280px; height: 280px;
  background: rgba(0, 137, 123, 0.22);
  top: 0; left: -40px;
  animation-delay: 0s;
}
.sc-glow--purple {
  width: 200px; height: 200px;
  background: rgba(139, 92, 246, 0.18);
  bottom: 10px; right: -20px;
  animation-delay: 2s;
}
@keyframes sc-glow-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.12); }
}

/* ── Floating sparkle dots ── */
.sc-dot {
  position: absolute;
  border-radius: 50%;
  background: var(--brand-500);
  opacity: 0;
  animation: sc-dot-float 3s ease-in-out infinite;
}
.sc-dot--1 { width: 8px;  height: 8px;  top: 18%;  left: 12%;  animation-delay: 0.3s; background: #26a69a; }
.sc-dot--2 { width: 5px;  height: 5px;  top: 65%;  right: 10%; animation-delay: 1.1s; background: #8b5cf6; }
.sc-dot--3 { width: 10px; height: 10px; bottom: 20%; left: 20%; animation-delay: 1.8s; background: #00897b; }

@keyframes sc-dot-float {
  0%   { opacity: 0;    transform: translateY(0)     scale(1);    }
  30%  { opacity: 0.85; }
  70%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translateY(-24px) scale(0.7);  }
}

/* ── Card wrapper: entrance + perpetual float ── */
.sc-card-wrap {
  position: relative;
  max-width: 420px;
  width: 100%;

  /* entrance: hidden → visible, shoots up from below */
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  animation:
    sc-enter  0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards,
    sc-float  4.5s ease-in-out 1.2s infinite;

  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0, 137, 123, 0.22),
    0 6px 20px rgba(0,0,0,0.10);
  overflow: hidden;
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .sc-card-wrap {
    animation: sc-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
  }
}

@keyframes sc-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sc-float {
  0%, 100% { transform: translateY(0)    rotate(0deg);    }
  40%       { transform: translateY(-8px) rotate(0.4deg); }
  70%       { transform: translateY(-4px) rotate(-0.3deg);}
}

/* ── The image itself ── */
.sc-card-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* ── Shine sweep — plays once on entry, then loops every ~7s ── */
.sc-shine {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  overflow: hidden;
}
.sc-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.28) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  animation: sc-shine-sweep 7s ease-in-out 1s infinite;
}
@keyframes sc-shine-sweep {
  0%   { left: -75%; }
  18%  { left: 130%;  }
  100% { left: 130%;  }
}

/* ═══════════════════════════════════════
   VERTICAL ANIMATED STEPPER — Alternating Timeline
   ═══════════════════════════════════════ */

.steps-stepper {
  position: relative;
  max-width: 900px;
  margin: 0 auto 80px;
}

/* ── Center vertical track ── */
.stepper-track-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 26px;
  bottom: 26px;
  width: 3px;
  z-index: 0;
}
.stepper-track-bg {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #e5e7eb;
}
.stepper-track-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0%;
  border-radius: 99px;
  background: linear-gradient(to bottom, #00897b, #26a69a);
  box-shadow: 0 0 12px rgba(0, 137, 123, 0.40);
  transition: height 0.12s linear;
}

/* ── Each row: 3-column grid [card | node | card] ── */
.stepper-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  align-items: center;
  margin-bottom: 56px;
}
.stepper-row:last-child { margin-bottom: 0; }

/* ── Center column: node ── */
.stepper-center-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ── Side columns ── */
.stepper-left-col,
.stepper-right-col {
  display: flex;
  align-items: center;
}
.stepper-left-col  { justify-content: flex-end;   padding-right: 28px; }
.stepper-right-col { justify-content: flex-start;  padding-left:  28px; }

/* ── Node circle ── */
.stepper-node {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f3f4f6;
  border: 2.5px solid #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background   0.40s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.40s ease,
    box-shadow   0.40s ease;
}
.stepper-node-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(0, 137, 123, 0);
  transition: border-color 0.35s ease, transform 0.35s ease;
}
.stepper-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: #9ca3af;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.stepper-check {
  position: absolute;
  width: 22px; height: 22px;
  color: #fff;
  opacity: 0;
  transform: scale(0.5) rotate(-20deg);
  transition: opacity 0.25s ease 0.15s, transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

/* ── ACTIVE node ── */
.stepper-row.active .stepper-node {
  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
  border-color: #00897b;
  box-shadow: 0 0 0 5px rgba(0,137,123,0.15), 0 6px 22px rgba(0,137,123,0.38);
}
.stepper-row.active .stepper-node-ring {
  border-color: rgba(0,137,123,0.28);
  transform: scale(1.20);
}
.stepper-row.active .stepper-num  { opacity: 0; transform: scale(0.4); }
.stepper-row.active .stepper-check { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Card base ── */
.stepper-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  width: 100%;
  transition:
    opacity      0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform    0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow   0.35s ease,
    border-color 0.35s ease;
}

/* Left card: icon on right, text right-aligned, slides from left */
.stepper-card--left {
  flex-direction: row-reverse;
  text-align: right;
  opacity: 0;
  transform: translateX(-32px);
}
/* Right card: icon on left, text left-aligned, slides from right */
.stepper-card--right {
  flex-direction: row;
  text-align: left;
  opacity: 0;
  transform: translateX(32px);
}

.stepper-row.active .stepper-card {
  opacity: 1;
  transform: translateX(0);
  box-shadow: 0 8px 32px rgba(0,137,123,0.13);
  border-color: rgba(0,137,123,0.18);
}

/* ── Icon bubble ── */
.stepper-card-icon {
  font-size: 1.9rem;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(0,137,123,0.10), rgba(38,166,154,0.07));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stepper-row.active .stepper-card-icon { transform: scale(1.10); }

.stepper-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 5px;
  transition: color 0.25s ease;
}
.stepper-row.active .stepper-card-title { color: #00897b; }
.stepper-card-desc {
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.6;
}

/* Stagger transitions */
#stepper-step-1 .stepper-card { transition-delay: 0ms;   }
#stepper-step-2 .stepper-card { transition-delay: 80ms;  }
#stepper-step-3 .stepper-card { transition-delay: 160ms; }

/* ── Mobile: 2-col layout [node | card], all cards right of node ── */
@media (max-width: 640px) {
  .steps-stepper {
    max-width: 100%;
    padding: 0 4px;
  }

  /* Track: align to left node column (22px = half of 44px node) */
  .stepper-track-wrap {
    left: 22px;
    transform: translateX(-50%);
  }

  /* 2-column grid: fixed node col | flex card col */
  .stepper-row {
    grid-template-columns: 44px 1fr;
    margin-bottom: 32px;
  }

  /* Node always in column 1 */
  .stepper-center-col {
    grid-column: 1;
    grid-row: 1;
  }

  /* ── LEFT rows: card lives in stepper-left-col ── */
  .stepper-row--left .stepper-left-col {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    padding-left: 16px;
    padding-right: 0;
    justify-content: flex-start;
  }
  /* Hide the empty right col for left rows */
  .stepper-row--left .stepper-right-col {
    display: none;
  }

  /* ── RIGHT rows: card lives in stepper-right-col ── */
  .stepper-row--right .stepper-right-col {
    grid-column: 2;
    grid-row: 1;
    padding-left: 16px;
    padding-right: 0;
    justify-content: flex-start;
  }
  /* Hide the empty left col for right rows */
  .stepper-row--right .stepper-left-col {
    display: none;
  }

  /* All cards: icon on left, text on left (uniform on mobile) */
  .stepper-card--left {
    flex-direction: row;
    text-align: left;
    transform: translateX(20px);  /* slide from right on mobile too */
  }
  .stepper-card {
    padding: 14px 16px;
    gap: 12px;
    border-radius: 16px;
  }
  .stepper-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    border-radius: 12px;
    flex-shrink: 0;
  }
  .stepper-node {
    width: 44px;
    height: 44px;
  }
}

/* ═══════════════════════════════════════
   SKILL IMAGE CARDS  (replaces icon cards)
   ═══════════════════════════════════════ */

/* ── Masonry container (CSS columns) ── */
.skill-masonry {
  column-count: 3;
  column-gap: 20px;
}
@media (max-width: 768px) {
  .skill-masonry { column-count: 2; }
}
@media (max-width: 480px) {
  .skill-masonry { column-count: 1; }
}

/* ── Card shell ── */
.skill-img-card {
  display: inline-block;       /* required for CSS-columns masonry */
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 137, 123, 0.08), 0 1px 6px rgba(0,0,0,0.05);
  border: 1px solid rgba(0, 137, 123, 0.12);
  cursor: pointer;
  transition:
    transform       0.42s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow      0.42s cubic-bezier(0.22, 1, 0.36, 1),
    border-color    0.35s ease;
}
.skill-img-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 24px 56px rgba(0, 137, 123, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.10);
  border-color: rgba(0, 137, 123, 0.35);
}

/* ── Image container — masonry height variants ── */
.skill-img-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
/* Three distinct heights create the stagger */
.skill-img--short  { height: 300px; }
.skill-img--medium { height: 380px; }
.skill-img--tall   { height: 460px; }

/* ── The photo ── */
.skill-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.skill-img-card:hover .skill-img {
  transform: scale(1.10);
}

/* ── Dark gradient overlay (fades in on hover) ── */
.skill-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(0, 60, 54, 0.72) 100%
  );
  opacity: 0;
  transition: opacity 0.40s ease;
}
.skill-img-card:hover .skill-img-overlay {
  opacity: 1;
}

/* ── Floating emoji badge (top-right corner) ── */
.skill-img-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  transition:
    transform  0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.40s ease,
    background 0.35s ease;
}
.skill-img-card:hover .skill-img-badge {
  transform: scale(1.15) rotate(-6deg);
  box-shadow: 0 6px 20px rgba(0, 137, 123, 0.35);
  background: linear-gradient(135deg, #00897b 0%, #26a69a 100%);
}

.skill-badge-icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: filter 0.35s ease;
}
.skill-img-card:hover .skill-badge-icon {
  filter: brightness(0) invert(1);   /* white icon on teal badge */
}

/* ════════════════════════════════════════════
   GLASS SLIDE-UP OVERLAY (replaces old body)
   ════════════════════════════════════════════ */

/* Panel sits at the very bottom, partially visible (title peek) */
.skill-img-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;

  /* Glassmorphism */
  background: rgba(0, 20, 18, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid rgba(255, 255, 255, 0.14);

  padding: 14px 18px 16px;

  /* Collapsed: only title height visible (~44px) */
  transform: translateY(calc(100% - 44px));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.skill-img-card:hover .skill-img-body {
  transform: translateY(0);
}

/* Title — always visible (the "peek") */
.skill-img-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Description — fades in after panel slides up */
.skill-img-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.5;
  margin-top: 6px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.30s ease 0.15s,
    transform 0.30s ease 0.15s;
}
.skill-img-card:hover .skill-img-desc {
  opacity: 1;
  transform: translateY(0);
}

/* Worker count pill */
.skill-img-count {
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, rgba(0,137,123,0.85) 0%, rgba(38,166,154,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 99px;
  padding: 3px 12px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.28s ease 0.22s,
    transform 0.28s ease 0.22s;
}
.skill-img-card:hover .skill-img-count {
  opacity: 1;
  transform: translateY(0);
}