/* Profile Page Styles - Qatalog Inspired Redesign */

:root {
  --profile-bg-header: #FDF3F0; /* Peach background from Image 2 */
  --profile-bg-content: #FFFFFF;
  --profile-text-heading: #4A1A1C; /* Dark Reddish/Brown */
  --profile-text-body: #1e2022;
  --profile-text-muted: #677788;
  --profile-accent: #377dff; /* Keep original blue accent for buttons/links */
  --profile-stats-shadow: 0 10px 40px -10px rgba(74, 26, 28, 0.1);
}

/* Typography Overrides for Profile Section */

.profile-section-wrapper {
  background-color: var(--profile-bg-content);
  position: relative;
  overflow: visible; /* Allow stats bar to overlap */
  padding-bottom: 6rem;
}

/* Animation Keyframes */
@keyframes textFadeIn {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes imageSlideIn {
  0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 1. Hero Header Section */
#jobs {
  scroll-margin-top: -90px;
}

#about {
  scroll-margin-top: 60px; /* Adjust scroll position to account for fixed header */
}

.profile-hero-header {
  background-color: var(--profile-bg-header);
  /* Gradient fade from solid to solid (to fix transparency issues) but kept for structure */
  background-image: linear-gradient(to bottom, var(--profile-bg-header) 0%, rgba(253, 243, 240, 0.8) 10%, var(--profile-bg-header) 25%);
  padding: 8rem 0 3rem 0; /* Increased top padding for height and transition */
  position: relative;
  overflow: hidden;
}

.profile-hero-content {
  position: relative;
  z-index: 2;
  opacity: 0; /* Initial state for animation */
  animation: textFadeIn 0.8s ease-in-out 0.3s forwards;
  pointer-events: none; /* Allow clicks to pass through container */
}

.profile-hero-content > * {
  pointer-events: auto; /* Restore interactivity for text content */
}

.profile-hero-title {
  color: var(--profile-text-heading);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.profile-hero-text {
  color: var(--profile-text-heading);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}

/* 1.1 Background Skills Layer */
.profile-bg-skills-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensure clicks pass through */
  z-index: 1;
  overflow: hidden;
}

.profile-service-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* Ensure container doesn't block clicks */
}

.bg-service-text {
  position: absolute;
  top: var(--top);
  left: var(--left);
  font-weight: var(--fw, 700); /* Dynamic font weight */
  font-size: var(--fs, 2rem); /* Dynamic font size */
  color: var(--profile-text-heading);
  white-space: nowrap;
  line-height: 1;
  transform-origin: center;
  
  /* Visual Requirements */
  opacity: 0; /* Start hidden */
  z-index: 0;
  
  /* Animation */
  animation: bgTextFadeIn 0.8s ease-out forwards, bgTextFloat 4s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);

  /* Interaction Effects */
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.bg-service-text:hover {
  color: var(--profile-accent);
  scale: 1.1;
  text-shadow: 0 4px 8px rgba(55, 125, 255, 0.2);
}

.bg-service-text:active {
  scale: 0.95;
  opacity: 0.8;
}

@keyframes bgTextFadeIn {
  from { opacity: 0; }
  to { opacity: var(--opacity, 0.15); } /* Dynamic opacity */
}

@keyframes bgTextFloat {
  0% { transform: rotate(var(--rot, 0deg)) translateY(0); }
  100% { transform: rotate(var(--rot, 0deg)) translateY(-8px); } /* Increased float range slightly */
}

/* Hide background text on small screens to avoid clutter */
@media (max-width: 992px) {
  .profile-bg-skills-layer {
    display: none;
  }
}

.profile-custom-img {
  margin-top: 0; /* Reset margin */
  transform: translateY(0); /* Reset transform */
  border-radius: 12px;
  /* Removed shadow-lg */
  position: relative;
  z-index: 2;
  opacity: 0; /* Initial state for animation */
  animation: imageSlideIn 0.8s ease-out 0.5s forwards;
  pointer-events: none; /* Allow clicks to pass through to background text */
  transition: transform 0.3s ease, filter 0.3s ease;
  transform-origin: center bottom;
}

/* Person Hover Effects controlled by JS class on container */
.profile-single-image-container.person-hover-active .profile-custom-img {
  transform: scale(1.05) translateY(-5px);
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.7)) brightness(1.15);
  /* Optional: Highlight mask using mask-image if needed, but filter is more performant */
}

/* Cursor change on container when person is active */
.profile-single-image-container.person-hover-active {
  cursor: pointer;
}

/* Click feedback */
.profile-custom-img.person-clicked {
  transform: scale(0.98) translateY(0) !important;
  opacity: 0.9;
}

.profile-single-image-container {
  position: relative;
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  user-select: none; /* Prevent text selection on click */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* 2. Stats Bar */
.profile-stats-container {
  margin-top: -80px; /* Reduced negative margin to move it down */
  position: relative;
  z-index: 10;
  padding: 0 1rem;
}

.profile-stats-bar {
  background: white;
  border-radius: 16px;
  padding: 1.5rem 2rem; /* Reduced padding */
  box-shadow: var(--profile-stats-shadow);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.profile-stat-item {
  text-align: center;
  flex: 1;
  min-width: 120px;
  margin: 0.5rem 0;
  position: relative;
}

.profile-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: #eee;
}

.profile-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--profile-accent);
  margin-bottom: 0.25rem;
}

.profile-stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--profile-text-muted);
}

/* 3. Bio Content */
.profile-bio-content {
  margin-top: 4rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.profile-bio-heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--profile-text-heading);
  margin-bottom: 1.5rem;
}

.profile-bio-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--profile-text-body);
  margin-bottom: 2rem;
}

/* 3.1 Floating Skills Grid (New) */
.profile-floating-skills {
  position: absolute;
  top: 10%;
  left: -20px; /* Position to the left of image */
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 3;
  pointer-events: none; /* Let clicks pass through */
}

/* Hide on mobile */
@media (max-width: 768px) {
  .profile-floating-skills {
    display: none;
  }
}

.profile-skill-card-float {
  background: transparent; /* Remove white background */
  padding: 0.5rem 0; /* Minimal padding */
  border-radius: 0; /* Remove border radius */
  box-shadow: none; /* Remove shadow */
  border: none; /* Remove border */
  display: flex;
  flex-direction: column; /* Stack text vertically */
  align-items: flex-start; /* Align left */
  animation: floatCard 3s ease-in-out infinite alternate;
  transition: transform 0.3s ease;
}

.profile-skill-card-float:nth-child(even) {
  align-items: flex-end; /* Stagger alignment if desired, or keep all left */
  padding-left: 2rem; /* Indent alternate items */
  animation-delay: 0.5s;
}

.profile-skill-card-float:hover {
  transform: scale(1.05);
}

.profile-skill-icon-float {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
  color: var(--profile-accent);
  display: none; /* Hide icons for minimalist look */
}

.profile-skill-info-float {
  text-align: left;
}

.profile-skill-name-float {
  display: block;
  font-weight: 600;
  color: var(--profile-text-heading);
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.profile-skill-level-float {
  font-size: 1.1rem; /* Emphasize percentage */
  font-weight: 800;
  color: var(--profile-accent); /* Use accent color for number */
}

@keyframes floatCard {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* 4. QR Cards Row */
.profile-qr-row {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: flex-end; /* Align cards to the right */
}

.qr-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 1rem;
  text-align: center;
  width: 140px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.qr-card-img-wrapper {
  width: 100%;
  aspect-ratio: 1;
  background: #f8f9fa;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qr-card-label {
  font-size: 0.9rem;
  color: var(--profile-text-heading);
  margin-bottom: 0;
  font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .profile-hero-header {
    padding: 6rem 0 3rem 0;
  }
  
  .profile-stats-bar {
    flex-direction: column;
    padding: 1.5rem;
  }
  
  .profile-stat-item {
    width: 100%;
    margin: 1rem 0;
    border-right: none !important;
  }
  
  .profile-stat-item:not(:last-child)::after {
    display: none;
  }
  
  .profile-stat-item:not(:last-child) {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
  }
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .profile-hero-content,
  .profile-custom-img,
  .profile-skill-card-float,
  .bg-service-text {
    animation: none;
    opacity: 1;
    transition: none;
    transform: none;
  }
}

/* Update Articles Section to match About Me background */
#articles {
  /* background-color removed to allow gradient to fade from white (body bg) */
  /* Gradient from transparent (showing white body bg) to solid peach (matching next section) */
  background: linear-gradient(180deg, rgba(253, 243, 240, 0) 0%, var(--profile-bg-header) 100%);
  position: relative;
  margin-bottom: 0 !important; /* Ensure no gap with next section */
  padding-bottom: 3rem; /* Adjust padding if needed */
}

/* Comic Bubble Styles */
.comic-bubble {
  position: absolute;
  /* Fixed position relative to container: centered horizontally, above top */
  top: 20px; 
  left: 60%;
  transform: translateX(-20%); /* Adjust to align tail with head */
  background: #FFFFFF;
  border: 1.5px solid #000000;
  border-radius: 30px; /* Oval shape */
  padding: 15px 20px; /* Increased padding */
  min-width: 200px; /* Increased min-width */
  max-width: 280px; /* Added max-width */
  text-align: center;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px; /* Slightly reduced font size for longer text */
  line-height: 1.4; /* Added line height */
  font-weight: 500;
  color: #333333;
  z-index: 99; /* Relative to container */
  pointer-events: auto;
  opacity: 0;
  transform-origin: bottom left;
  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

.comic-jump-btn {
  display: inline-flex;
  width: 24px;
  height: 24px;
  background: #377dff;
  color: #ffffff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  vertical-align: middle;
  cursor: pointer;
  font-size: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s, background-color 0.2s;
  animation: btnBounce 0.8s infinite ease-in-out;
}

.comic-jump-btn:hover {
  animation: none;
  transform: scale(1.1);
  background: #2a65d9;
}

/* Bubble Tail (Border) */
.comic-bubble::before {
  content: '';
  position: absolute;
  bottom: -12px; /* 10px height + 2px adjustment */
  left: 20px;
  border-width: 12px 10px 0;
  border-style: solid;
  border-color: #000000 transparent;
  display: block;
  width: 0;
}

/* Bubble Tail (White Fill) */
.comic-bubble::after {
  content: '';
  position: absolute;
  bottom: -9px; /* 10px height - 1px overlap */
  left: 22px; /* Shift right to create stroke effect */
  border-width: 10px 8px 0;
  border-style: solid;
  border-color: #FFFFFF transparent;
  display: block;
  width: 0;
}

.comic-bubble.bubble-pop-in {
  animation: bubblePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.comic-bubble.bubble-fade-out {
  animation: bubbleFade 0.3s ease-out forwards;
}

@keyframes bubblePop {
  0% { opacity: 0; transform: scale(0) translate(-10px, 10px); }
  100% { opacity: 1; transform: scale(1) translate(0, 0); }
}

@keyframes bubbleFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}

@keyframes btnBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .comic-bubble {
    font-size: 14px;
    padding: 8px 12px;
    min-width: 100px;
  }
}