/* ============================================
   GLOBAL/SITE-WIDE ENHANCEMENTS
   ============================================ */

/* ----------------------------------------
   1. SCROLL SNAP
   ---------------------------------------- */
html {
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.vg-page {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* Disable scroll snap on mobile for better UX */
@media (max-width: 768px) {
  html {
    scroll-snap-type: none;
  }
}

/* Scroll snap indicator */
.scroll-snap-indicator {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scroll-snap-indicator.visible {
  opacity: 1;
}

.snap-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.snap-dot:hover {
  background: rgba(239, 55, 36, 0.5);
  border-color: #ef3724;
  transform: scale(1.3);
}

.snap-dot.active {
  background: #ef3724;
  border-color: #ef3724;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(239, 55, 36, 0.5);
}

/* ----------------------------------------
   2. LOADING SKELETON
   ---------------------------------------- */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Skeleton variants */
.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-text.medium {
  width: 80%;
}

.skeleton-text.full {
  width: 100%;
}

.skeleton-title {
  height: 32px;
  width: 50%;
  margin-bottom: 16px;
  border-radius: 6px;
}

.skeleton-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  border-radius: 12px;
}

.skeleton-card {
  padding: 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.skeleton-card .skeleton-image {
  margin-bottom: 16px;
}

/* Skeleton pulse animation alternative */
.skeleton-pulse {
  animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeletonPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Content loading wrapper */
.content-loading {
  position: relative;
}

.content-loading .skeleton-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.content-loading.loaded .skeleton-overlay {
  opacity: 0;
  pointer-events: none;
}

/* Image skeleton placeholder */
.img-skeleton {
  position: relative;
  background: linear-gradient(135deg,
    rgba(239, 55, 36, 0.1) 0%,
    rgba(255, 215, 0, 0.1) 100%);
}

.img-skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%);
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  background-size: 200% 100%;
}

.img-skeleton img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.img-skeleton.loaded img {
  opacity: 1;
}

.img-skeleton.loaded::before {
  display: none;
}

/* ----------------------------------------
   3. EASTER EGG EFFECTS
   ---------------------------------------- */
/* Konami Code Celebration */
.konami-celebration {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99999;
}

.konami-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: linear-gradient(135deg, #ef3724 0%, #ffd700 100%);
  padding: 40px 60px;
  border-radius: 20px;
  text-align: center;
  z-index: 100000;
  animation: konamiPopIn 0.5s ease forwards;
  box-shadow: 0 20px 60px rgba(239, 55, 36, 0.4);
}

@keyframes konamiPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-10deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.konami-message h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.konami-message p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.konami-message .easter-emoji {
  font-size: 4rem;
  display: block;
  margin-bottom: 15px;
  animation: emojiFloat 1s ease-in-out infinite;
}

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

/* Matrix rain effect for Easter egg */
.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}

.matrix-column {
  position: absolute;
  top: -100%;
  font-family: monospace;
  font-size: 14px;
  color: #0f0;
  text-shadow: 0 0 10px #0f0;
  animation: matrixFall linear forwards;
  opacity: 0.8;
}

@keyframes matrixFall {
  0% {
    top: -100%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Secret click counter */
.secret-click-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(239, 55, 36, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.secret-click-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------
   4. PRINT STYLESHEET
   ---------------------------------------- */
@media print {
  /* Reset all animations and transitions */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Hide non-essential elements */
  .premium-navbar,
  .btn-back_to_top,
  .cursor-follower,
  .cursor-dot,
  .floating-shapes,
  .hero-gradient-overlay,
  #particles-js,
  .hero-wave-divider,
  .floating-button,
  .about-floating-elements,
  .about-blob-container,
  .pattern-overlay,
  .service-connections,
  .service-modal-overlay,
  .testimonial-quotes-bg,
  .galaxy-container,
  .hobby-cards-container,
  .footer-wave-container,
  .newsletter-section,
  .social-links-3d,
  .scroll-snap-indicator,
  .konami-celebration,
  .matrix-rain,
  .secret-click-indicator,
  .page-client,
  video,
  iframe {
    display: none !important;
  }

  /* Page setup */
  @page {
    size: A4;
    margin: 15mm;
  }

  html, body {
    background: white !important;
    color: #333 !important;
    font-size: 11pt;
    line-height: 1.5;
    scroll-snap-type: none;
  }

  /* Main content styling */
  .vg-page {
    page-break-inside: avoid;
    padding: 20px 0 !important;
    margin: 0 !important;
    background: white !important;
  }

  /* Header/Hero section - CV Header style */
  .page-home {
    background: none !important;
    min-height: auto !important;
    height: auto !important;
    padding: 30px 0 !important;
  }

  .caption-header {
    position: relative !important;
    transform: none !important;
  }

  .caption-header h1 {
    color: #333 !important;
    font-size: 28pt !important;
    margin-bottom: 10px !important;
  }

  .caption-header h5 {
    color: #666 !important;
  }

  .typed-badge {
    background: #f5f5f5 !important;
    color: #333 !important;
    border: 1px solid #ddd !important;
  }

  /* About section */
  .page-about {
    background: white !important;
  }

  .profile-morph-container {
    width: 150px !important;
    height: 150px !important;
  }

  .profile-morph-svg,
  .profile-morph-glow {
    display: none !important;
  }

  .profile-morph-image {
    border: 3px solid #333 !important;
    border-radius: 50% !important;
  }

  .about-title {
    color: #333 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #333 !important;
  }

  .about-subtitle {
    color: #ef3724 !important;
  }

  .about-description {
    color: #555 !important;
  }

  /* Contact cards - show info inline */
  .contact-cards-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin: 20px 0 !important;
  }

  .contact-card-flip {
    transform: none !important;
    perspective: none !important;
  }

  .contact-card-inner {
    transform: none !important;
  }

  .contact-card-front {
    display: none !important;
  }

  .contact-card-back {
    display: block !important;
    position: relative !important;
    transform: none !important;
    background: #f5f5f5 !important;
    color: #333 !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
  }

  /* Stats */
  .stats-counter-section {
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    padding: 20px !important;
  }

  .stat-item {
    border: none !important;
    background: transparent !important;
  }

  .stat-number {
    color: #ef3724 !important;
  }

  .stat-label {
    color: #555 !important;
  }

  /* Skills section */
  .skills-section {
    background: white !important;
  }

  .skill-badge-3d {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    transform: none !important;
  }

  .skill-badge-3d img {
    filter: grayscale(0) !important;
  }

  .skill-badge-3d span {
    color: #333 !important;
  }

  /* Timeline */
  .timeline li {
    page-break-inside: avoid;
  }

  .timeline .title {
    color: #ef3724 !important;
  }

  .timeline .details h5 {
    color: #333 !important;
  }

  .timeline .details p,
  .timeline .details small {
    color: #555 !important;
  }

  /* Achievements */
  .card-service {
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }

  .award-ribbon {
    background: #ef3724 !important;
    color: white !important;
  }

  /* Contact section */
  .page-contact {
    background: white !important;
  }

  .globe-container {
    display: none !important;
  }

  .contact-form-wrapper {
    border: 1px solid #ddd !important;
    background: #f9f9f9 !important;
  }

  .floating-contact-cards .floating-card {
    background: #f5f5f5 !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
  }

  /* Footer */
  .enhanced-footer {
    background: #333 !important;
    color: white !important;
    page-break-before: always;
  }

  .footer-address,
  .quick-links a,
  .contact-item {
    color: white !important;
  }

  /* Links */
  a {
    color: #ef3724 !important;
    text-decoration: none !important;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #888;
  }

  /* Hide expand/collapse indicators */
  .expandable,
  .expand-indicator,
  .accordion-icon {
    display: none !important;
  }

  /* CV-specific additions */
  .print-only {
    display: block !important;
  }

  .print-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ef3724;
    margin-bottom: 30px;
  }

  .print-section-title {
    color: #ef3724;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin: 25px 0 15px;
    font-size: 14pt;
  }
}

/* Hide print-only elements on screen */
@media screen {
  .print-only {
    display: none !important;
  }
}