:root {
  /* Colors */
  --border-color: #e5e7eb;
  --border-radius: 8px;
  --border-width: 0px;
  --shadow: 0 20px 56px rgba(59, 130, 246, 0.32), 0 8px 24px rgba(59, 130, 246, 0.16);

  /* Spacing */
  --section-padding: 20px;
  --container-width: 1160px;
  --grid-gap: 28px;
  --block-gap: 0px;

  /* Animations */
  --animation-duration: 600ms;
  --animation-type: zoom;
  --animation-easing: ease-in-out;
  --page-load-animation: 1;

  /* Other Settings */
  --opacity: 100%;
  --hover-scale: 1.13;
  --hover-enabled: 1;

}

/* Generated Global Visual Styles */

html, body {
  background-image: url('https://creavsite.id/storage/global_visuals/0ppjNhuAtr2bZOrJErZ7p9BeiNszJ9GmxlDTkIRJ.jpg') !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  animation: none !important;
}

.pp-root .pp-block {
  border-radius: var(--border-radius) !important;
  border: var(--border-width) solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  padding: var(--section-padding) !important;
}

.pp-root .pp-block + .pp-block {
  margin-top: var(--block-gap) !important;
}

.pp-root .pp-hero + .pp-block {
  margin-top: var(--block-gap) !important;
}

.pp-root .pp-block + .pp-hero {
  margin-top: var(--block-gap) !important;
}

/* Fallback: inner container gap for hero <-> block adjacency */
.pp-root .pp-hero + .pp-block > [class$='-container'] {
  margin-top: var(--block-gap) !important;
}

.pp-root .pp-block + .pp-hero > [class$='-container'] {
  margin-top: var(--block-gap) !important;
}

.pp-hero {
  border-radius: var(--border-radius) !important;
  border: var(--border-width) solid var(--border-color) !important;
  box-shadow: var(--shadow) !important;
  padding: var(--section-padding) !important;
}

/* Hover effects applied to blocks */
:root { --hover-scale: 1.13; }
.pp-root .pp-block:hover, .pp-root .pp-hero:hover { transform: translateY(-6px) scale(var(--hover-scale)); box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important; transition: all 220ms ease-in-out !important; }

.container {
  max-width: var(--container-width) !important;
  padding: 0 20px !important;
}

.project-grid, [class*='grid'] {
  gap: var(--grid-gap) !important;
}

.hero-section-container {
  animation: none !important;
}

body::before, body::after {
  display: none !important;
}

/* Animation Definitions */
@keyframes fadeAnimation {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideAnimation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomAnimation {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes flipAnimation {
  from { opacity: 0; transform: rotateY(-90deg); }
  to { opacity: 1; transform: rotateY(0deg); }
}

.pp-root .pp-block,
.pp-hero {
  animation: zoomAnimation 600ms ease-in-out !important;
}


/* Block-specific layout variants (Skill block) */
.skills-grid-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;align-items:stretch;}
.skills-grid-layout .badge{display:flex;align-items:center;justify-content:center;padding:14px 18px;border-radius:12px;font-size:13px;font-weight:500;text-align:center;min-height:48px;box-shadow:0 4px 12px rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.5);}
.skills-list-layout{display:flex;flex-direction:column;gap:10px;}
.skills-list-layout .badge{display:flex;align-items:center;padding:12px 16px;background-color:var(--accent,#0b6b58);color:#fff;border-radius:6px;font-size:13px;font-weight:500;width:100%;box-sizing:border-box;}
.skills-tag-layout{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.skills-tag-layout .badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:500;white-space:nowrap;}