/* ==========================================================================
   Enhancements: bigger mobile name, orbit icons around the profile,
   elegant scroll/load animations, cardjson open/close fx, smoother perf.
   Loaded after the bundled stylesheet so these rules win on specificity ties.
   ========================================================================== */

/* =========================================================================
   IOE CERTIFICATE RACK
   Stacked card rack — swipe/drag up to reveal next certificate, down to go back.
   ========================================================================= */

#fx-cert-rack-section {
  position: relative;
  padding: 5rem 1.5rem 6rem;
  z-index: 10;
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
  contain: layout style;
}

.fx-rack-header {
  text-align: center;
  margin-bottom: 2rem;
}
.fx-rack-header h2 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 600;
  background: linear-gradient(to bottom, #fff 0%, #cbd5e1 55%, #475569 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  margin-bottom: 0.4rem;
}
.fx-rack-header p {
  color: rgba(255,255,255,0.5);
  font-size: clamp(0.85rem, 2.5vw, 1rem);
}

/* Label shown above the stack */
.fx-cert-label {
  text-align: center;
  margin-bottom: 1.25rem;
  min-height: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 1rem;
}
.fx-cert-label-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7dd3fc;
  background: rgba(125,211,252,0.12);
  border: 1px solid rgba(125,211,252,0.28);
  padding: 0.2rem 0.7rem;
  border-radius: 2rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-block;
  margin-bottom: 0.2rem;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.fx-cert-label-title {
  font-size: clamp(0.85rem, 2.5vw, 1.05rem);
  font-weight: 600;
  color: #e0f2fe;
  letter-spacing: 0.02em;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.fx-cert-label-desc {
  font-size: clamp(0.68rem, 1.8vw, 0.82rem);
  color: rgba(255,255,255,0.45);
  max-width: 500px;
  line-height: 1.55;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.fx-cert-label.fx-label-exit .fx-cert-label-badge,
.fx-cert-label.fx-label-exit .fx-cert-label-title,
.fx-cert-label.fx-label-exit .fx-cert-label-desc {
  opacity: 0;
  transform: translateY(-8px);
}
.fx-cert-label.fx-label-enter .fx-cert-label-badge,
.fx-cert-label.fx-label-enter .fx-cert-label-title,
.fx-cert-label.fx-label-enter .fx-cert-label-desc {
  opacity: 0;
  transform: translateY(8px);
}

/* Card stack container — extra bottom padding exposes the peeking cards */
.fx-cert-stack {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  /* maintain 4:3 aspect ratio + room for stacked cards underneath */
  aspect-ratio: 4 / 3;
  padding-bottom: 56px;
  box-sizing: content-box;
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
}

/* Individual card — realistic paper certificate */
.fx-cert-card {
  position: absolute;
  inset: 0;
  border-radius: 0.85rem;
  overflow: hidden;
  cursor: grab;
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Cream paper base — visible as a border frame around the image */
  background: linear-gradient(145deg, #fdfaf4 0%, #f5f0e8 60%, #ede8df 100%);
  padding: 9px;
  /* Default shadow overridden per-card by JS OFFSETS.shad */
  box-shadow:
    0 2px 6px rgba(0,0,0,0.14),
    0 12px 32px rgba(0,0,0,0.42),
    0 40px 80px rgba(0,0,0,0.30),
    0 0 0 1px rgba(0,0,0,0.07);
  transition:
    transform 0.62s cubic-bezier(0.34, 1.26, 0.64, 1),
    opacity   0.52s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Inner paper edge line for certificate feel */
.fx-cert-card::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 0.5rem;
  border: 1px solid rgba(0,0,0,0.06);
  pointer-events: none;
  z-index: 2;
}
/* Subtle paper sheen on top card */
.fx-cert-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0.85rem;
  background: linear-gradient(160deg,
    rgba(255,255,255,0.18) 0%,
    transparent 45%,
    rgba(0,0,0,0.04) 100%);
  pointer-events: none;
  z-index: 3;
}
.fx-cert-card.fx-dragging {
  cursor: grabbing;
  transition: none;
}
.fx-cert-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 0.4rem;
  position: relative;
  z-index: 1;
}

/* Swipe hint arrow */
.fx-cert-hint {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 20;
  animation: fx-rack-hint 3s ease 2s both;
}
.fx-cert-hint span {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  font-family: system-ui, sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.fx-cert-hint svg {
  animation: fx-rack-arrow 1.4s ease-in-out infinite;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
}
@keyframes fx-rack-hint {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fx-rack-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Progress dots */
.fx-cert-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 1.5rem;
}
.fx-cert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.fx-cert-dot.fx-dot-active {
  width: 22px;
  border-radius: 4px;
  background: rgba(125,211,252,0.85);
}
.fx-cert-dot:hover:not(.fx-dot-active) {
  background: rgba(255,255,255,0.4);
}

/* Nav buttons */
.fx-cert-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.fx-cert-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 2rem;
  border: 1px solid rgba(125,211,252,0.28);
  background: rgba(125,211,252,0.07);
  color: rgba(224,242,254,0.82);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.3s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.fx-cert-btn:hover:not(:disabled) {
  background: rgba(125,211,252,0.16);
  border-color: rgba(125,211,252,0.55);
  transform: translateY(-2px);
}
.fx-cert-btn:active:not(:disabled) { transform: translateY(0); }
.fx-cert-btn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }

.fx-cert-counter {
  text-align: center;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.06em;
  font-family: system-ui, sans-serif;
}

/* Responsive */
@media (max-width: 480px) {
  .fx-cert-stack { aspect-ratio: 4/3; max-width: 100%; }
  .fx-cert-card { border-radius: 0.85rem; }
}
@media (min-width: 768px) {
  #fx-cert-rack-section { padding: 6rem 1.5rem 7rem; }
  .fx-cert-stack { max-width: 640px; }
}

/* ---------- Global smoothing & performance ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

* {
  -webkit-tap-highlight-color: transparent;
}

img, video {
  content-visibility: auto;
}

/* Lower backdrop-blur cost on mobile for smoother scrolling */
@media (max-width: 768px) {
  [class*="backdrop-blur"] {
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  }
  .silver-bg, .silver-bg-overlay, .aurora-blob {
    will-change: auto !important;
    animation-duration: 22s !important;
  }
}

/* GPU-accelerate the most expensive moving layers */
.silver-bg, .silver-bg-overlay, .aurora-blob,
.hero-name, .hero-name-accent, .fx-orbit-layer {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* New blue background tweaks (more glow) */
.silver-bg {
  filter: brightness(1.05) contrast(1.04) saturate(1.1) !important;
}

/* ---------- Bigger main name on mobile ---------- */
.hero-name {
  font-size: clamp(5.25rem, 23vw, 6rem) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.012em !important;
  background: linear-gradient(
    160deg,
    #ffffff  0%,
    #B7E5BA 22%,
    #5CA87C 52%,
    #288760 76%,
    #1A5140 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 100% 200%;
  filter: drop-shadow(0 0 22px rgba(92,168,124,.45)) !important;
}
.hero-name-accent {
  background: inherit !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
@media (min-width: 640px) {
  .hero-name { font-size: clamp(5.5rem, 14vw, 7.5rem) !important; }
}
@media (min-width: 768px) {
  .hero-name {
    font-size: clamp(7rem, 13vw, 9rem) !important;
    line-height: 0.85 !important;
  }
}
@media (min-width: 1024px) {
  .hero-name { font-size: clamp(8.5rem, 11vw, 11rem) !important; }
}

/* ---------- Hero load entrance ---------- */
@keyframes fx-hero-rise {
  0%   { opacity: 0; transform: translate3d(0, 28px, 0) scale(0.985); filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}
@keyframes fx-name-shine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}
.hero-name {
  animation: fx-hero-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) both,
             fx-name-shine 9s ease-in-out 1.2s infinite alternate;
}

/* ---------- Scroll reveal ---------- */
@keyframes fx-fade-up {
  0%   { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(4px); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
.fx-reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  filter: blur(6px);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity, filter;
}
.fx-reveal.fx-in {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
}
.fx-reveal-soft {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-reveal-soft.fx-in {
  opacity: 1; transform: translate3d(0, 0, 0);
}

/* ---------- Footer entrance ---------- */
footer .fx-footer-line {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(4px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 1.1s ease;
}
footer .fx-footer-line.fx-in {
  opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0);
}

/* ---------- Soft hover lift ---------- */
@media (hover: hover) and (pointer: fine) {
  .fx-lift {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s ease;
    will-change: transform;
  }
  .fx-lift:hover { transform: translate3d(0, -4px, 0); }
}

/* =========================================================================
   ORBIT ICONS around the profile photo
   ========================================================================= */

.fx-orbit-host {
  position: relative;
}

/* The orbit layer sits IN FRONT of the profile button so the icons appear
   to fly in front of the photo. We only target the photo center so the
   icons cross over the photo as the orbit rotates. */
.fx-orbit-layer {
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--orbit-w, 360px);
  height: var(--orbit-w, 360px);
  margin-left: calc(var(--orbit-w, 360px) / -2);
  margin-top: calc(var(--orbit-w, 360px) / -2);
  pointer-events: none;
  z-index: 5;
  animation: fx-orbit-rotate 36s linear infinite;
}

/* Soft orbit ring guide */
.fx-orbit-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 60px rgba(96, 165, 250, 0.15);
}

@keyframes fx-orbit-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Each icon: positioned on the ring, then counter-rotates so it stays upright */
.fx-orbit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--icon-w, 56px);
  height: var(--icon-w, 56px);
  margin-left: calc(var(--icon-w, 56px) / -2);
  margin-top: calc(var(--icon-w, 56px) / -2);
  transform:
    rotate(var(--angle, 0deg))
    translate(0, calc(var(--orbit-w, 360px) * -0.5 + var(--icon-inset, 18px)))
    rotate(calc(var(--angle, 0deg) * -1))
    scale(var(--icon-scale, 1));
  filter: drop-shadow(0 8px 14px rgba(4, 18, 48, 0.6))
          drop-shadow(0 0 16px rgba(125, 211, 252, 0.28));
  opacity: 0;
  animation:
    fx-orbit-pop 1s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    fx-orbit-counter 36s linear infinite,
    fx-orbit-bob var(--bob-d, 4.2s) ease-in-out infinite;
  animation-delay: var(--in-d, 0ms), var(--in-d, 0ms), var(--in-d, 0ms);
  will-change: transform, opacity;
}

.fx-orbit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Pop-in entrance for each orbit icon */
@keyframes fx-orbit-pop {
  0%   { opacity: 0; transform:
           rotate(var(--angle, 0deg))
           translate(0, calc(var(--orbit-w, 360px) * -0.22))
           rotate(calc(var(--angle, 0deg) * -1))
           scale(calc(var(--icon-scale, 1) * 0.35)); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform:
           rotate(var(--angle, 0deg))
           translate(0, calc(var(--orbit-w, 360px) * -0.5 + var(--icon-inset, 18px)))
           rotate(calc(var(--angle, 0deg) * -1))
           scale(var(--icon-scale, 1)); }
}

/* Counter-rotation keeps icons upright while the orbit-layer spins */
@keyframes fx-orbit-counter {
  from {
    transform:
      rotate(var(--angle, 0deg))
      translate(0, calc(var(--orbit-w, 360px) * -0.5 + var(--icon-inset, 18px)))
      rotate(calc(var(--angle, 0deg) * -1))
      rotate(0deg)
      scale(var(--icon-scale, 1));
  }
  to {
    transform:
      rotate(var(--angle, 0deg))
      translate(0, calc(var(--orbit-w, 360px) * -0.5 + var(--icon-inset, 18px)))
      rotate(calc(var(--angle, 0deg) * -1))
      rotate(-360deg)
      scale(var(--icon-scale, 1));
  }
}

/* Gentle bob on each icon */
@keyframes fx-orbit-bob {
  0%, 100% {
    filter: drop-shadow(0 6px 10px rgba(8, 24, 56, 0.55))
            drop-shadow(0 0 12px rgba(125, 211, 252, 0.25));
  }
  50% {
    filter: drop-shadow(0 10px 18px rgba(8, 24, 56, 0.65))
            drop-shadow(0 0 22px rgba(125, 211, 252, 0.45));
  }
}

/* Responsive sizes for the orbit. Icons are noticeably larger now because
   the new 3D HD assets need room to breathe and read clearly. */
@media (max-width: 380px) {
  .fx-orbit-layer { --orbit-w: 250px; }
  .fx-orbit-icon  { --icon-w: 60px; --icon-inset: 2px; }
}
@media (min-width: 381px) and (max-width: 480px) {
  .fx-orbit-layer { --orbit-w: 270px; }
  .fx-orbit-icon  { --icon-w: 64px; --icon-inset: 2px; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .fx-orbit-layer { --orbit-w: 300px; }
  .fx-orbit-icon  { --icon-w: 70px; --icon-inset: 2px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .fx-orbit-layer { --orbit-w: 290px; }
  .fx-orbit-icon  { --icon-w: 70px; --icon-inset: 2px; }
}
@media (min-width: 1024px) {
  .fx-orbit-layer { --orbit-w: 320px; }
  .fx-orbit-icon  { --icon-w: 78px; --icon-inset: 2px; }
}

/* The profile button now sits behind the orbit icons so they fly in front. */
.fx-profile-btn {
  position: relative;
  z-index: 2;
}

/* Light isolation so transforms on the orbit do not leak into siblings. */
.fx-orbit-host {
  isolation: isolate;
}

/* Modest breathing room between the orbit and the headline. */
.fx-hero-spaced {
  margin-top: 2rem !important;
}
@media (min-width: 768px) {
  .fx-hero-spaced { margin-top: 2.5rem !important; }
}
@media (min-width: 1024px) {
  .fx-hero-spaced { margin-top: 3rem !important; }
}

/* =========================================================================
   CARDJSON open / close motion
   ========================================================================= */

/* The cardjson image inside the panel */
img[src*="cardjson.png"] {
  animation: fx-card-pop 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center;
  will-change: transform, opacity, filter;
}

@keyframes fx-card-pop {
  0%   { opacity: 0; transform: scale(0.7) rotate(-3deg); filter: blur(10px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

/* Closing animation (cinematic dissolve on a fixed-position clone). The
   wrapper itself drives the motion so it feels smooth, not stiff: gentle
   ease-out, longer duration, soft scale + lift + blur + halo flare. */
.fx-card-closing {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0deg);
  filter: blur(0);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
              opacity   0.95s cubic-bezier(0.4, 0, 0.2, 1),
              filter    0.95s cubic-bezier(0.4, 0, 0.2, 1);
}
.fx-card-closing.fx-card-closing-go {
  opacity: 0;
  transform: scale(0.78) translateY(-22px) rotate(-3.5deg);
  filter: blur(8px);
}

/* Soft glow halo behind the closing card */
.fx-card-halo {
  position: absolute;
  inset: -20% -20% -20% -20%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(125, 211, 252, 0.55),
              rgba(96, 165, 250, 0.18) 55%,
              transparent 78%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-card-closing.fx-card-closing-go .fx-card-halo {
  opacity: 0.85;
  transform: scale(1.2);
}

/* Glossy sweep across the cardjson on open */
.fx-card-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.fx-card-sheen::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: skewX(-12deg);
  animation: fx-card-sheen-move 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
@keyframes fx-card-sheen-move {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 0.9; }
  100% { left: 130%; opacity: 0; }
}

/* =========================================================================
   SKILLS section: mobile performance fix
   The original skill cards stack heavy backdrop-blurs and complex shadows
   that cause jank when scrolling on phones. We strip the most expensive
   effects on small screens and keep a clean translucent look.
   ========================================================================= */
@media (max-width: 768px) {
  /* Generic: any element near "Keahlian"/skills that uses backdrop-blur */
  section [class*="backdrop-blur"],
  #keahlian [class*="backdrop-blur"],
  #skills [class*="backdrop-blur"] {
    backdrop-filter: blur(6px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(125%) !important;
  }
  /* Disable expensive transforms / filters on skill cards on scroll */
  section [class*="grid"] > div,
  section [class*="grid"] > a {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    will-change: auto !important;
  }
  /* Skill icon shimmer/scale on hover-only desktop devices, off on mobile */
  section img[src*="/skills/"] {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  /* Prevent the parent flex container from re-laying out during scroll */
  section {
    contain: layout style paint;
  }
}

/* =========================================================================
   ROBOT COMPANION
   A tiny floating robot that watches the user scroll. Its eyes & head tilt
   toward the most recent scroll direction (up / down) and re-center after
   the user stops scrolling. Sits in the bottom-left so it never collides
   with the audio player on the right.
   ========================================================================= */
.fx-robot {
  position: fixed;
  left: 16px;
  bottom: 16px;
  width: 72px;
  height: 84px;
  z-index: 70;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 18px rgba(4, 18, 48, 0.55))
          drop-shadow(0 0 16px rgba(125, 211, 252, 0.35));
  opacity: 0;
  transform: translateY(24px) scale(0.85);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  animation: fx-robot-float 4.5s ease-in-out infinite;
}
.fx-robot.fx-robot-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@media (min-width: 768px) {
  .fx-robot { width: 88px; height: 100px; left: 24px; bottom: 24px; }
}

@keyframes fx-robot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Antenna blink */
.fx-robot .robot-antenna-dot {
  animation: fx-robot-blink-dot 2.1s ease-in-out infinite;
  transform-origin: center;
}
@keyframes fx-robot-blink-dot {
  0%, 90%, 100% { opacity: 1; }
  92%, 96%      { opacity: 0.35; }
}

/* Head tilts toward scroll direction */
.fx-robot .robot-head {
  transform-origin: 50% 78%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-robot[data-dir="down"] .robot-head { transform: rotate(7deg) translateY(2px); }
.fx-robot[data-dir="up"]   .robot-head { transform: rotate(-7deg) translateY(-2px); }
.fx-robot[data-dir="idle"] .robot-head { transform: rotate(0deg); }

/* Eyes shift in scroll direction (tracked via CSS vars set in JS). */
.fx-robot .robot-eye {
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-robot .robot-pupil {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
}

/* Blink animation for both eyes */
.fx-robot .robot-eyelid {
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: fx-robot-blink 5.5s ease-in-out infinite;
}
@keyframes fx-robot-blink {
  0%, 92%, 100% { transform: scaleY(0); }
  94%           { transform: scaleY(1); }
  96%           { transform: scaleY(0); }
}

/* Tiny speech bubble that pops up the first time the user scrolls */
.fx-robot-bubble {
  position: absolute;
  left: 100%;
  bottom: 70%;
  margin-left: 6px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #e0f2fe;
  font-size: 11px;
  font-family: system-ui, -apple-system, sans-serif;
  border-radius: 10px;
  white-space: nowrap;
  border: 1px solid rgba(125, 211, 252, 0.35);
  box-shadow: 0 6px 12px rgba(4, 18, 48, 0.4);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.fx-robot.fx-robot-greet .fx-robot-bubble {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   Reduced motion respect
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero-name, .fx-reveal, .fx-reveal-soft,
  footer .fx-footer-line,
  .fx-orbit-layer, .fx-orbit-icon,
  img[src*="cardjson.png"],
  .fx-reveal-left, .fx-reveal-stagger {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* =========================================================================
   ENHANCED CINEMATIC SCROLL ANIMATIONS
   ========================================================================= */

/* Slide from left — for section headings */
.fx-reveal-left {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s ease;
  will-change: transform, opacity, filter;
}
.fx-reveal-left.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

/* Staggered grid items — fan out with delay */
.fx-reveal-stagger {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.96);
  filter: blur(5px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.75s ease;
  transition-delay: calc(var(--stagger-i, 0) * 75ms);
  will-change: transform, opacity, filter;
}
.fx-reveal-stagger.fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Scale pop — for standalone cards / highlights */
.fx-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  filter: blur(6px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s ease;
  will-change: transform, opacity, filter;
}
.fx-reveal-scale.fx-in {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Parallax — keep orbit layer GPU composited during parallax scroll */
.fx-orbit-layer {
  will-change: transform;
}

/* =========================================================================
   MOBILE RESPONSIVENESS IMPROVEMENTS
   ========================================================================= */

/* Prevent horizontal overflow on all screens */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Better touch targets on mobile */
@media (max-width: 768px) {
  /* Comfortable minimum tap size */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Hero section spacing */
  section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
  }

  /* Cert rack: larger swipe target */
  .fx-cert-stack {
    touch-action: pan-y;
  }
  .fx-cert-btn {
    padding: 0.6rem 1.4rem !important;
    font-size: 0.78rem !important;
  }

  /* Robot smaller on tiny screens */
  .fx-robot {
    width: 56px !important;
    height: 64px !important;
    left: 10px !important;
    bottom: 10px !important;
  }

  /* Stagger delay capped on mobile to avoid long waits */
  .fx-reveal-stagger {
    transition-delay: calc(var(--stagger-i, 0) * 45ms) !important;
  }

  /* Reduce filter-blur cost during scroll reveal on mobile */
  .fx-reveal, .fx-reveal-left, .fx-reveal-stagger {
    filter: none !important;
    transition-duration: 0.6s !important;
  }
  .fx-reveal.fx-in,
  .fx-reveal-left.fx-in,
  .fx-reveal-stagger.fx-in {
    filter: none !important;
  }

  /* Nav pills — comfortable spacing */
  nav a, nav button {
    padding: 0.5rem 0.85rem !important;
    font-size: 0.8rem !important;
  }

  /* Orbit — disable parallax on mobile for perf */
  .fx-orbit-layer {
    will-change: auto !important;
  }
}

/* Small phone (< 380px) extra tweaks */
@media (max-width: 380px) {
  .fx-cert-nav { gap: 0.6rem !important; }
  .fx-cert-btn { padding: 0.5rem 0.9rem !important; font-size: 0.72rem !important; }
}

/* Tablet (769–1023px) improvements */
@media (min-width: 769px) and (max-width: 1023px) {
  .fx-cert-stack { max-width: 560px !important; }
}

/* =========================================================================
   PERFORMANCE: contain expensive sections
   ========================================================================= */
#fx-cert-rack-section {
  contain: layout style;
}
.fx-cert-stack {
  contain: layout style;
}
.fx-robot {
  contain: layout style paint;
}

/* =========================================================================
   SKILLS SECTION — aggressive performance optimisations
   Eliminates the layout jank/lag felt while scrolling through Keahlian.
   ========================================================================= */

/* Contain the entire skills section so paint/layout stay isolated */
section[id*="keahlian"], section[id*="skills"],
section:has([class*="skill"]) {
  contain: layout style;
}

/* Kill expensive will-change on every skill icon at rest */
section img[src*="/skills/"],
section img[src*="skills/"] {
  will-change: auto !important;
  animation: none !important;
  transition: opacity 0.2s ease !important;
  transform: none !important;
  filter: none !important;
  content-visibility: auto;
}

/* Defer off-screen skill content rendering */
section [class*="grid"] {
  content-visibility: auto;
  contain-intrinsic-size: 0 320px;
}

/* Reduce backdrop-blur cost on ALL screens for skill cards */
section [class*="backdrop-blur"],
#keahlian [class*="backdrop-blur"],
#skills [class*="backdrop-blur"] {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.25s ease !important;
}

/* Prevent per-card will-change from multiplying compositor layers */
section [class*="grid"] > div,
section [class*="grid"] > a,
section [class*="grid"] > li {
  will-change: auto !important;
  transform: translateZ(0);
}

/* On hover only, lightweight lift — no blur */
@media (hover: hover) and (pointer: fine) {
  section [class*="grid"] > div:hover,
  section [class*="grid"] > a:hover {
    transform: translateZ(0) translateY(-3px);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}

/* =========================================================================
   DICODING CERTIFICATE SECTION — Flip-card layout
   Front: cert image. Back: description page + text. Footer: ID + buttons.
   ========================================================================= */

#fx-dicoding-section {
  position: relative;
  padding: 5rem 1.5rem 6rem;
  max-width: 72rem;
  margin: 0 auto;
  width: 100%;
  contain: layout style;
  box-sizing: border-box;
}

/* Section header */
.fx-dc-header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.fx-dc-header h2 {
  font-size: clamp(1.9rem, 5.5vw, 3.2rem);
  font-weight: 700;
  background: linear-gradient(to bottom, #fff 0%, #cbd5e1 55%, #475569 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.fx-dc-header-sub {
  font-size: clamp(1.35rem, 3.8vw, 2.2rem) !important;
  font-weight: 600 !important;
  background: linear-gradient(to right, #38bdf8 0%, #818cf8 60%, #a78bfa 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 0.5rem !important;
}
.fx-dc-header-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.22rem 0.85rem;
  border-radius: 2rem;
  margin-top: 0.25rem;
  margin-bottom: 0.6rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fx-dc-header p {
  color: rgba(255, 255, 255, 0.45);
  font-size: clamp(0.82rem, 2.2vw, 0.97rem);
  margin: 0;
  max-width: 480px;
}

/* Two-column grid */
.fx-dc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}
@media (max-width: 720px) {
  .fx-dc-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Outer card wrapper */
.fx-dc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 1.1rem;
  overflow: visible;
}

/* Perspective scene for the 3-D flip */
.fx-dc-scene {
  width: 100%;
  aspect-ratio: 4 / 3;
  perspective: 1100px;
  border-radius: 1rem;
  overflow: hidden;
}

/* The flipping element */
.fx-dc-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.78s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1rem;
}
.fx-dc-flipper.is-flipped {
  transform: rotateY(180deg);
}

/* Shared face styles */
.fx-dc-face {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #0a0e1a;
}

/* FRONT face — certificate image fills the frame */
.fx-dc-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.fx-dc-front-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.9rem 1rem 0.75rem;
  background: linear-gradient(to top, rgba(5, 8, 18, 0.82) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
}
.fx-dc-partner-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.18rem 0.6rem;
  border-radius: 2rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* BACK face — rotated 180deg on Y axis */
.fx-dc-back {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 252, 0.25) transparent;
  background: linear-gradient(150deg, #0d1425 0%, #0a0e1a 100%);
  border: 1px solid rgba(125, 211, 252, 0.14);
}
.fx-dc-back::-webkit-scrollbar { width: 4px; }
.fx-dc-back::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 252, 0.28);
  border-radius: 4px;
}

/* Thumbnail of description page at the top */
.fx-dc-back-img-wrap {
  width: 100%;
  flex-shrink: 0;
  max-height: 38%;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
}
.fx-dc-back-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #0d1425, transparent);
}
.fx-dc-back-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: brightness(0.92) contrast(1.05);
}

/* Text body of back face */
.fx-dc-back-body {
  padding: 1rem 1.1rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.fx-dc-back-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.58;
  margin: 0;
}
.fx-dc-back-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7dd3fc;
  margin: 0;
}
.fx-dc-topics {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.fx-dc-topics li {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
}
.fx-dc-back-meta {
  display: flex;
  gap: 0.9rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
}
.fx-dc-verify-link {
  display: inline-block;
  font-size: 0.62rem;
  color: #38bdf8;
  text-decoration: none;
  opacity: 0.82;
  transition: opacity 0.2s ease;
  word-break: break-all;
}
.fx-dc-verify-link:hover { opacity: 1; text-decoration: underline; }

/* "Lihat Sertifikat" button inside back face */
.fx-dc-flip-back-btn {
  display: block;
  width: calc(100% - 2.2rem);
  margin: 0 1.1rem 0.9rem;
  padding: 0.48rem 0;
  border: 1px solid rgba(125, 211, 252, 0.25);
  background: rgba(125, 211, 252, 0.07);
  color: rgba(224, 242, 254, 0.8);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 2rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.22s ease, border-color 0.22s ease;
  flex-shrink: 0;
}
.fx-dc-flip-back-btn:hover {
  background: rgba(125, 211, 252, 0.14);
  border-color: rgba(125, 211, 252, 0.45);
}

/* FOOTER — cert ID + toggle + download */
.fx-dc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: none;
  border-radius: 0 0 1.1rem 1.1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  flex-wrap: wrap;
}
.fx-dc-footer-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.fx-dc-id-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7dd3fc;
  background: rgba(125, 211, 252, 0.1);
  border: 1px solid rgba(125, 211, 252, 0.25);
  padding: 0.15rem 0.55rem;
  border-radius: 1rem;
  display: inline-block;
}
.fx-dc-date {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fx-dc-footer-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

/* "Lihat Selengkapnya" toggle button */
.fx-dc-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 2rem;
  border: 1px solid rgba(125, 211, 252, 0.28);
  background: rgba(125, 211, 252, 0.07);
  color: rgba(224, 242, 254, 0.85);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.fx-dc-toggle-btn:hover {
  background: rgba(125, 211, 252, 0.16);
  border-color: rgba(125, 211, 252, 0.5);
  transform: translateY(-1px);
}
.fx-dc-toggle-btn.is-active {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.55);
  color: #7dd3fc;
}

/* Download PDF button */
.fx-dc-download-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 2rem;
  border: 1px solid rgba(99, 225, 132, 0.3);
  background: rgba(99, 225, 132, 0.07);
  color: rgba(187, 247, 208, 0.9);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.fx-dc-download-btn:hover {
  background: rgba(99, 225, 132, 0.16);
  border-color: rgba(99, 225, 132, 0.55);
  transform: translateY(-1px);
}
.fx-dc-download-btn:active { transform: translateY(0); }

/* Hover glow on the whole card */
@media (hover: hover) and (pointer: fine) {
  .fx-dc-card:hover .fx-dc-scene {
    box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.18),
                0 24px 48px rgba(4, 18, 48, 0.55),
                0 0 40px rgba(56, 189, 248, 0.08);
    transition: box-shadow 0.4s ease;
  }
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .fx-dc-footer { flex-direction: column; align-items: flex-start; }
  .fx-dc-footer-right { width: 100%; justify-content: flex-start; }
  .fx-dc-toggle-btn, .fx-dc-download-btn { flex: 1; justify-content: center; }
}
@media (min-width: 768px) {
  #fx-dicoding-section { padding: 6rem 1.5rem 7rem; }
  .fx-dc-grid { gap: 2.5rem; }
}

/* Card scroll-reveal entrance — cards are always visible;
   fx-in triggers the entrance animation via keyframes */
.fx-dc-card-reveal {
  animation-fill-mode: both;
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-delay: calc(var(--stagger-i, 0) * 120ms);
}
.fx-dc-card-reveal.fx-in {
  animation-name: fx-dc-card-enter;
}
@keyframes fx-dc-card-enter {
  0%   { opacity: 0; transform: translate3d(0, 36px, 0) scale(0.97); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* Always show the cards regardless of animation — safety net */
.fx-dc-card {
  opacity: 1;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fx-dc-flipper {
    transition: none !important;
  }
  .fx-dc-flipper.is-flipped {
    transform: none;
  }
  .fx-dc-front { opacity: 1; }
  .fx-dc-back  { transform: none; position: relative; }
  .fx-dc-card-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   JADE HORIZON v2 — Background · Glass Headings · Skills Overhaul
   ========================================================================== */

/* ─── 1. BACKGROUND ─────────────────────────────────────────────────── */

/* Body base — bright jade */
body {
  background-color: #1a3d28 !important;
}

/* Force the bundle's base layer divs to bright jade */
.bg-\[\#060e0a\],
.bg-\[\#081f14\],
.bg-\[\#1a3d28\] {
  background: linear-gradient(160deg, #2a6645 0%, #1a4a32 35%, #132e1f 70%, #0d2018 100%) !important;
}

/* Jade grid overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(183,229,186,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,229,186,.14) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Strong jade ambient bloom */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 75% 55% at 15% 20%, rgba(40,135,96,.50) 0%, transparent 58%),
    radial-gradient(ellipse 60% 50% at 85% 75%, rgba(26,81,64,.58) 0%, transparent 52%),
    radial-gradient(ellipse 90% 40% at 50% 2%,  rgba(92,168,124,.40) 0%, transparent 62%),
    radial-gradient(ellipse 50% 60% at 5% 90%,  rgba(183,229,186,.25) 0%, transparent 48%),
    radial-gradient(ellipse 65% 45% at 50% 50%, rgba(42,102,69,.30) 0%, transparent 65%);
}


/* ─── 2. JADE GLASS HEADINGS ─────────────────────────────────────────── */

/* All bundle section headings that use the old slate gradient  */
h2[class*="from-white"][class*="to-slate-500"],
h2[class*="from-white"][class*="via-slate-200"] {
  background: linear-gradient(
    145deg,
    #ffffff   0%,
    #B7E5BA  28%,
    #5CA87C  58%,
    #288760  82%,
    #1A5140 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(2.4rem, 7vw, 4.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  filter: drop-shadow(0 0 14px rgba(92,168,124,.35)) !important;
}

/* IOE cert rack heading */
.fx-rack-header h2 {
  background: linear-gradient(
    145deg,
    #ffffff   0%,
    #B7E5BA  28%,
    #5CA87C  58%,
    #288760  82%,
    #1A5140 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(2.2rem, 6.5vw, 4rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  filter: drop-shadow(0 0 14px rgba(92,168,124,.35)) !important;
}

/* Coding Camp 2026 main heading */
.fx-dc-header h2:not(.fx-dc-header-sub) {
  background: linear-gradient(
    145deg,
    #ffffff   0%,
    #B7E5BA  28%,
    #5CA87C  58%,
    #288760  82%,
    #1A5140 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-size: clamp(2.4rem, 7vw, 4.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  filter: drop-shadow(0 0 14px rgba(92,168,124,.35)) !important;
}

/* Sub-heading & badge stay their own color — just keep DBS blue gradient */
.fx-dc-header-sub {
  font-size: clamp(1.1rem, 3vw, 1.7rem) !important;
}

/* Footer texts */
footer {
  position: relative;
  z-index: 10;
}
footer p,
footer span,
footer a {
  color: rgba(183,229,186,.7) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em;
}
footer > div > div > div:first-child,
footer [class*="copyright"],
footer [class*="text-white"] {
  color: #5CA87C !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 18px rgba(92,168,124,.5) !important;
  -webkit-text-fill-color: unset !important;
}


/* ─── 3. ARSENAL KEAHLIAN — Performance + UI Overhaul ──────────────── */

/* Section container — enable browser paint containment */
#skills {
  contain: layout style;
}

/* Skills grid */
#skills .grid {
  gap: 0.6rem !important;
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}
@media (min-width: 640px) {
  #skills .grid { gap: 0.75rem !important; }
}
@media (min-width: 768px) {
  #skills .grid { gap: 1rem !important; }
}

/* ---- Skill tile — clean minimal card ---- */
.skill-tile {
  padding: 12px 8px !important;
  gap: 6px !important;
  border-radius: 14px !important;
  background: rgba(13,42,31,.65) !important;
  border: 1px solid rgba(92,168,124,.18) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(183,229,186,.06) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform !important;
  transform: translateZ(0);
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.skill-tile:hover {
  border-color: rgba(92,168,124,.45) !important;
  box-shadow: 0 4px 20px rgba(40,135,96,.25), inset 0 1px 0 rgba(183,229,186,.12) !important;
  transform: translateY(-3px) translateZ(0) !important;
}

/* Kill the expensive blur-2xl ambient blob — replace with CSS shadow */
.skill-tile > div[class*="blur-2xl"] {
  display: none !important;
}

/* Kill the screen-blend glow overlay — wastes compositing budget */
.skill-tile-glow {
  display: none !important;
}

/* Icon wrapper */
.skill-tile .relative.w-14,
.skill-tile .relative.w-16 {
  width: 2.75rem !important;
  height: 2.75rem !important;
}
@media (min-width: 768px) {
  .skill-tile .relative.w-14,
  .skill-tile .relative.w-16 {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* Skill name — readable size */
.skill-tile .text-center {
  gap: 2px !important;
}
.skill-tile .text-center > div:first-child,
.skill-tile [class*="text-xs"],
.skill-tile [class*="text-sm"] {
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em;
  color: rgba(183,229,186,.9) !important;
  -webkit-text-fill-color: unset !important;
}

/* Category label — hide */
.skill-tile .text-center > div:last-child:not(:first-child) {
  display: none !important;
}

/* Filter tab bar */
#skills [class*="inline-flex"][class*="rounded-full"] {
  background: rgba(13,42,31,.7) !important;
  border: 1px solid rgba(92,168,124,.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 4px !important;
}
#skills [class*="inline-flex"][class*="rounded-full"] button,
#skills [class*="inline-flex"][class*="rounded-full"] > div {
  font-size: 0.75rem !important;
  padding: 0.3rem 1rem !important;
  color: rgba(183,229,186,.75) !important;
}
#skills [class*="inline-flex"][class*="rounded-full"] button:hover {
  color: #B7E5BA !important;
}