/* ================= CSS VARIABLES ================= */
:root {
  --bg-card-rgb: 30, 30, 30;

  --bg-card: rgba(var(--bg-card-rgb), 0.6);
  
  --text-primary: whitesmoke;
  --text-secondary: rgb(150, 150, 150);
  --accent-color: deeppink;
  --nav-border: rgba(25, 25, 25, 1);
  --nav-active: rgba(0, 0, 0, 0.1);
  
  --header-height: 80px;
}

[data-theme="light"] {
  --O-bg-body-rgb: 245, 245, 245;
  --bg-card-rgb: 255, 255, 255;
  
  --text-primary: rgb(30, 30, 30);
  --text-secondary: rgb(105, 105, 105);
  --nav-border: rgba(0, 0, 0, 0.1);
  --nav-active: rgba(0, 0, 0, 0.05);
}

/* ================= PORTRAIT VIEW SCOPE ================= */
#portrait-view {
  color: var(--text-primary);
  transition: background-color 0.4s ease, color 0.4s ease;
  width: 100%;
  min-height: 100%;
  position: relative;
}

/* ================= TYPOGRAPHY ================= */
#portrait-view .p-title {
  font-size: 1.5rem;
  font-weight: bolder;
  color: var(--text-primary);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

#portrait-view .p-text-highlight { 
  font-weight: bolder; 
  color: var(--accent-color);
}

#portrait-view .p-description { 
  font-weight: bolder; 
  color: var(--text-secondary); 
  font-size: 1.05rem; 
}

/* ================= NAVBAR ================= */
#portrait-view .p-navbar {
  background: rgba(var(--O-bg-body-rgb), 0.8); 
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--nav-border);
  height: var(--header-height);
}

#portrait-view .p-navbar-title {
  color: var(--accent-color);
  font-size: 1.125rem;
  font-weight: bolder;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

#portrait-view .p-navbar-title:hover {
  font-size: 1.075rem;
}

#portrait-view .p-nav-link {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.825rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.2s;
}

#portrait-view .p-nav-link:hover {
  font-size: 0.775rem;
  color: var(--accent-color);    
}

#portrait-view .p-nav-link.active {
  background: var(--nav-active);
}

#portrait-view .p-darkmode {
  font-size: 0.8625rem;
}

#portrait-view .p-darkmode:hover {
  font-size: 0.8125rem;
  color: var(--accent-color);
}

/* ================= CARDS ================= */
#portrait-view .p-card {
  background: var(--bg-card); 
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
  margin-top: 2rem;
}

#portrait-view .p-section-spacing { 
  padding-top: calc(var(--header-height) + 0.1rem); 
}

/* ================= BUTTONS ================= */
#portrait-view .p-btn-primary {
  background-color: var(--accent-color);
  color: var(--text-primary);
  font-weight: bold;
  border: none;
  transition: all 0.2s;
}

#portrait-view .p-btn-primary:hover { 
  transform: translateY(-2px); 
  text-decoration: underline; 
}

#portrait-view .p-btn-outline {
  border: 2px solid var(--accent-color);
  color: var(--text-primary);
  font-weight: bold;
  transition: all 0.2s;
}

#portrait-view .p-btn-outline:hover { 
  text-decoration: underline; 
  transform: translateY(-2px); 
}

#portrait-view .btn-reset { 
  background: none; 
  border: none; 
  cursor: pointer; 
  color: var(--text-primary); 
}

/* ================= IMAGES / BADGES ================= */
#portrait-view .p-cert-badge { 
  width: 75px; 
  transition: transform 0.3s; 
  cursor: pointer;
}

#portrait-view .p-cert-badge:hover { 
  transform: translateY(-5px) scale(1.05);
}

#portrait-view .p-project-img { 
  width: 100%; 
  border-radius: 12px; 
  margin-bottom: 1rem; 
}

/* ================= 3D SCROLL AREA ================= */
#portrait-view .p-scroll-trigger-wrapper {
  height: 300vh;
  position: relative;
  z-index: 10;
}

#portrait-view .p-sticky-viewport {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}

#portrait-view .p-scroll-down-indicator {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(-90deg);
  font-size: 3rem;
  color: var(--text-primary);
  bottom: 20px;
  animation: p-bounce 2s infinite;
  z-index: 2;
}

@keyframes p-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-90deg); }
    40% { transform: translateY(-15px) rotate(-90deg); }
    60% { transform: translateY(-8px) rotate(-90deg); }
}

/* ================= PAGINATION ================= */
#portrait-view .p-pagination-dot {
  font-size: 2rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transform: rotate(45deg);
  transition: 0.2s;
}

#portrait-view .p-pagination-dot:hover {
  color: var(--text-primary);
}

#portrait-view .p-pagination-dot.active { 
  color: var(--accent-color); 
}

/* ================= FOOTER ================= */
#portrait-view .p-footer-title {
  font-size: 1.5rem;
  font-weight: bolder;
  color: var(--accent-color);
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.603));
}

#portrait-view .p-social-icon { 
  font-size: 1.875rem; 
  color: var(--text-primary); 
  transition: 0.2s; 
  cursor: pointer;
}

#portrait-view .p-social-icon:hover { 
  color: var(--accent-color); 
  transform: translateY(-3px);
}

/* ================= CUSTOM SCROLLBAR ================= */
::-webkit-scrollbar {
    width: 8px;
    background: var(--O-bg-body);
}

::-webkit-scrollbar-thumb {
    background: var( --accent-color);
    border-radius: 4px;
}