/* =========================================== */
/* TEMPLATE-FEATURES-2026-MEGA-BUNDLE */
/* Generated: 2026-01-09 */
/* Combines 6 template feature bundles (23 CSS files total) for optimized loading */
/* 
 * Includes:
 * - Visual Effects Bundle (magnetic interactions, content previews, scroll animations, gradients, card depth, connectors)
 * - Content Bundle (content progression, visual hierarchy, reading time estimates)
 * - Interactions Bundle (advanced micro-interactions, mobile gestures, enhanced forms)
 * - Design Bundle (award-winning UX, parallax, progressive images, page transitions)
 * - Accessibility Bundle (mobile design enhancements, accessibility features, empty states)
 * - Optional Features Bundle (button glow effects, retro-nostalgic design, immersive 3D elements)
 */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/magnetic-interactions-2026.css */
/* =========================================== */

/* =========================================== */
/* MAGNETIC INTERACTIONS 2026 */
/* Award-winning cursor-following effects */
/* =========================================== */

:root {
  --magnetic-strength: 0.3;
  --magnetic-distance: 20px;
  --magnetic-transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  --parallax-intensity: 0.5;
}

/* =========================================== */
/* MAGNETIC CARDS */
/* =========================================== */

#main-content-section .card {
  position: relative;
  transition: transform var(--magnetic-transition),
              box-shadow var(--magnetic-transition);
  will-change: transform;
}

#main-content-section .card.magnetic {
  cursor: pointer;
}

#main-content-section .card.magnetic:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* Magnetic effect on mouse move */
#main-content-section .card.magnetic.magnetic-active {
  transition: transform 0.1s ease-out,
              box-shadow var(--magnetic-transition);
}

/* =========================================== */
/* MAGNETIC BUTTONS */
/* =========================================== */

#main-content-section .btn,
#main-content-section button:not([type="submit"]):not([type="reset"]),
#main-content-section .badge {
  position: relative;
  transition: transform var(--magnetic-transition),
              box-shadow var(--magnetic-transition);
  will-change: transform;
  cursor: pointer;
}

#main-content-section .btn.magnetic:hover,
#main-content-section button.magnetic:hover,
#main-content-section .badge.magnetic:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

#main-content-section .btn.magnetic.magnetic-active,
#main-content-section button.magnetic.magnetic-active,
#main-content-section .badge.magnetic.magnetic-active {
  transition: transform 0.1s ease-out,
              box-shadow var(--magnetic-transition);
}

/* =========================================== */
/* MAGNETIC LINKS */
/* =========================================== */

#main-content-section a.magnetic {
  position: relative;
  display: inline-block;
  transition: transform var(--magnetic-transition);
  will-change: transform;
}

#main-content-section a.magnetic:hover {
  transform: translateX(4px);
}

#main-content-section a.magnetic.magnetic-active {
  transition: transform 0.1s ease-out;
}

/* =========================================== */
/* PARALLAX SCROLL EFFECTS */
/* =========================================== */

#main-content-section .section.parallax {
  will-change: transform;
}

#main-content-section .section.parallax-slow {
  transition: transform 0.1s ease-out;
}

#main-content-section .section.parallax-fast {
  transition: transform 0.05s ease-out;
}

/* Parallax on scroll */
#main-content-section .parallax-element {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* =========================================== */
/* INTERACTIVE ELEMENT ANIMATIONS */
/* =========================================== */

#main-content-section .interactive-element {
  position: relative;
  transition: all var(--magnetic-transition);
  cursor: pointer;
}

#main-content-section .interactive-element::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

#main-content-section .interactive-element:hover::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

#main-content-section .interactive-element:hover {
  transform: scale(1.05);
}

/* =========================================== */
/* CURSOR FOLLOW EFFECT */
/* =========================================== */

.magnetic-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  mix-blend-mode: difference;
}

.magnetic-cursor.active {
  width: 40px;
  height: 40px;
  opacity: 1;
}

.magnetic-cursor.hover {
  width: 60px;
  height: 60px;
  background: rgba(99, 102, 241, 0.2);
}

/* =========================================== */
/* SMOOTH SCROLL ANIMATIONS */
/* =========================================== */

#main-content-section .section {
  scroll-margin-top: 100px; /* Account for fixed navbar */
}

/* Smooth reveal on scroll */
#main-content-section .section.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#main-content-section .section.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animation */
#main-content-section .stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#main-content-section .stagger-children.revealed > *:nth-child(1) {
  transition-delay: 0.1s;
}

#main-content-section .stagger-children.revealed > *:nth-child(2) {
  transition-delay: 0.2s;
}

#main-content-section .stagger-children.revealed > *:nth-child(3) {
  transition-delay: 0.3s;
}

#main-content-section .stagger-children.revealed > *:nth-child(4) {
  transition-delay: 0.4s;
}

#main-content-section .stagger-children.revealed > *:nth-child(5) {
  transition-delay: 0.5s;
}

#main-content-section .stagger-children.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  /* Reduce magnetic effects on mobile */
  #main-content-section .card.magnetic:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  #main-content-section .btn.magnetic:hover,
  #main-content-section button.magnetic:hover {
    transform: translateY(-1px) scale(1.02);
  }
  
  /* Hide custom cursor on mobile */
  .magnetic-cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content-section .card,
  #main-content-section .btn,
  #main-content-section button,
  #main-content-section a.magnetic,
  #main-content-section .section.scroll-reveal,
  #main-content-section .stagger-children > * {
    transition: none !important;
    transform: none !important;
  }
  
  .magnetic-cursor {
    display: none;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

#main-content-section .card,
#main-content-section .btn,
#main-content-section .interactive-element {
  backface-visibility: hidden;
  perspective: 1000px;
}



/* =========================================== */
/* 2. template/shared/css/content-previews-2026.css */
/* =========================================== */

/* =========================================== */
/* CONTENT PREVIEWS 2026 */
/* Award-winning hover card previews */
/* =========================================== */

:root {
  --preview-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  --preview-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  --preview-backdrop: rgba(255, 255, 255, 0.95);
}

/* =========================================== */
/* PREVIEW CARD BASE */
/* =========================================== */

#main-content-section .card.preview-enabled {
  position: relative;
  overflow: visible;
  transition: transform var(--preview-transition),
              box-shadow var(--preview-transition);
}

#main-content-section .card.preview-enabled::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--preview-backdrop);
  opacity: 0;
  transition: opacity var(--preview-transition),
              transform var(--preview-transition);
  pointer-events: none;
  z-index: 1000;
}

#main-content-section .card.preview-enabled:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================================== */
/* PREVIEW PANEL */
/* =========================================== */

.content-preview-panel {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: 400px;
  max-width: 90vw;
  background: var(--preview-backdrop);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--preview-shadow),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
  transition: opacity var(--preview-transition),
              visibility var(--preview-transition),
              transform var(--preview-transition);
}

.content-preview-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.content-preview-panel::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--preview-backdrop);
}

/* =========================================== */
/* PREVIEW CONTENT */
/* =========================================== */

.preview-header {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: #1a202c;
  line-height: 1.3;
}

.preview-meta {
  font-size: 0.875rem;
  color: #718096;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.preview-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.preview-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a5568;
  margin-bottom: 1rem;
}

.preview-body p {
  margin: 0 0 0.75rem 0;
}

.preview-body p:last-child {
  margin-bottom: 0;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preview-tag {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-radius: 12px;
  font-weight: 500;
}

.preview-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.preview-link:hover {
  color: #4f46e5;
}

.preview-link::after {
  content: '→';
  transition: transform 0.2s ease;
}

.preview-link:hover::after {
  transform: translateX(4px);
}

/* =========================================== */
/* PREVIEW IMAGE */
/* =========================================== */

.preview-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* =========================================== */
/* PREVIEW POSITIONING */
/* =========================================== */

.content-preview-panel.preview-left {
  left: 0;
  transform: translateX(0) translateY(-20px);
}

.content-preview-panel.preview-left.active {
  transform: translateX(0) translateY(0);
}

.content-preview-panel.preview-left::before {
  left: 2rem;
  transform: translateX(0);
}

.content-preview-panel.preview-right {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-20px);
}

.content-preview-panel.preview-right.active {
  transform: translateX(0) translateY(0);
}

.content-preview-panel.preview-right::before {
  left: auto;
  right: 2rem;
  transform: translateX(0);
}

/* =========================================== */
/* CARD HOVER EFFECTS */
/* =========================================== */

#main-content-section .card.preview-enabled:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15),
              0 0 0 1px rgba(99, 102, 241, 0.1);
  z-index: 999;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  .content-preview-panel {
    width: calc(100vw - 2rem);
    max-width: none;
    left: 1rem;
    right: 1rem;
    transform: translateX(0) translateY(-20px);
  }
  
  .content-preview-panel.active {
    transform: translateX(0) translateY(0);
  }
  
  .content-preview-panel::before {
    left: 2rem;
    transform: translateX(0);
  }
  
  .preview-image {
    height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-preview-panel,
  #main-content-section .card.preview-enabled,
  #main-content-section .card.preview-enabled::after {
    transition: none;
  }
  
  .content-preview-panel {
    opacity: 0;
    visibility: hidden;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

.content-preview-panel[aria-hidden="true"] {
  display: none;
}

.preview-link:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 4px;
}



/* =========================================== */
/* 3. template/shared/css/enhanced-scroll-animations-2026.css */
/* =========================================== */

/* =========================================== */
/* ENHANCED SCROLL ANIMATIONS 2026 */
/* Award-winning scroll-triggered effects */
/* =========================================== */

:root {
  --scroll-animation-duration: 0.8s;
  --scroll-animation-easing: cubic-bezier(0.23, 1, 0.32, 1);
  --scroll-reveal-distance: 60px;
  --scroll-parallax-intensity: 0.3;
}

/* =========================================== */
/* SCROLL REVEAL BASE */
/* =========================================== */

#main-content-section .scroll-reveal-element {
  opacity: 0;
  will-change: opacity, transform;
}

/* =========================================== */
/* FADE IN ANIMATIONS */
/* =========================================== */

#main-content-section .fade-in-up {
  opacity: 0;
  transform: translateY(var(--scroll-reveal-distance));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .fade-in-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

#main-content-section .fade-in-down {
  opacity: 0;
  transform: translateY(calc(-1 * var(--scroll-reveal-distance)));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .fade-in-down.revealed {
  opacity: 1;
  transform: translateY(0);
}

#main-content-section .fade-in-left {
  opacity: 0;
  transform: translateX(var(--scroll-reveal-distance));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .fade-in-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

#main-content-section .fade-in-right {
  opacity: 0;
  transform: translateX(calc(-1 * var(--scroll-reveal-distance)));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .fade-in-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

#main-content-section .fade-in {
  opacity: 0;
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .fade-in.revealed {
  opacity: 1;
}

/* =========================================== */
/* SCALE ANIMATIONS */
/* =========================================== */

#main-content-section .scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .scale-in.revealed {
  opacity: 1;
  transform: scale(1);
}

#main-content-section .scale-in-up {
  opacity: 0;
  transform: scale(0.8) translateY(var(--scroll-reveal-distance));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .scale-in-up.revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* =========================================== */
/* ROTATE ANIMATIONS */
/* =========================================== */

#main-content-section .rotate-in {
  opacity: 0;
  transform: rotate(-10deg) scale(0.9);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .rotate-in.revealed {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

#main-content-section .rotate-in-left {
  opacity: 0;
  transform: rotate(-15deg) translateX(-30px);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .rotate-in-left.revealed {
  opacity: 1;
  transform: rotate(0deg) translateX(0);
}

#main-content-section .rotate-in-right {
  opacity: 0;
  transform: rotate(15deg) translateX(30px);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .rotate-in-right.revealed {
  opacity: 1;
  transform: rotate(0deg) translateX(0);
}

/* =========================================== */
/* BLUR ANIMATIONS */
/* =========================================== */

#main-content-section .blur-in {
  opacity: 0;
  filter: blur(20px);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              filter var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .blur-in.revealed {
  opacity: 1;
  filter: blur(0);
}

#main-content-section .blur-in-up {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(var(--scroll-reveal-distance));
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              filter var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .blur-in-up.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* =========================================== */
/* STAGGER ANIMATIONS */
/* =========================================== */

#main-content-section .stagger-container > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--scroll-animation-duration) var(--scroll-animation-easing),
              transform var(--scroll-animation-duration) var(--scroll-animation-easing);
}

#main-content-section .stagger-container.revealed > *:nth-child(1) {
  transition-delay: 0.1s;
}

#main-content-section .stagger-container.revealed > *:nth-child(2) {
  transition-delay: 0.2s;
}

#main-content-section .stagger-container.revealed > *:nth-child(3) {
  transition-delay: 0.3s;
}

#main-content-section .stagger-container.revealed > *:nth-child(4) {
  transition-delay: 0.4s;
}

#main-content-section .stagger-container.revealed > *:nth-child(5) {
  transition-delay: 0.5s;
}

#main-content-section .stagger-container.revealed > *:nth-child(6) {
  transition-delay: 0.6s;
}

#main-content-section .stagger-container.revealed > *:nth-child(7) {
  transition-delay: 0.7s;
}

#main-content-section .stagger-container.revealed > *:nth-child(8) {
  transition-delay: 0.8s;
}

#main-content-section .stagger-container.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================== */
/* PARALLAX DEPTH LAYERS */
/* =========================================== */

#main-content-section .parallax-layer {
  will-change: transform;
}

#main-content-section .parallax-layer-1 {
  transition: transform 0.1s ease-out;
}

#main-content-section .parallax-layer-2 {
  transition: transform 0.15s ease-out;
}

#main-content-section .parallax-layer-3 {
  transition: transform 0.2s ease-out;
}

#main-content-section .parallax-layer-4 {
  transition: transform 0.25s ease-out;
}

/* =========================================== */
/* SCROLL PROGRESS ANIMATIONS */
/* =========================================== */

#main-content-section .progress-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#main-content-section .progress-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Progress-based opacity */
#main-content-section .progress-fade {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

#main-content-section .progress-fade.revealed {
  opacity: 1;
}

/* =========================================== */
/* INTERSECTION ANIMATIONS */
/* =========================================== */

#main-content-section .intersection-fade {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

#main-content-section .intersection-fade.intersected {
  opacity: 1;
}

#main-content-section .intersection-slide-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#main-content-section .intersection-slide-up.intersected {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================== */
/* ANIMATION DELAYS */
/* =========================================== */

#main-content-section .animation-delay-1 {
  transition-delay: 0.1s;
}

#main-content-section .animation-delay-2 {
  transition-delay: 0.2s;
}

#main-content-section .animation-delay-3 {
  transition-delay: 0.3s;
}

#main-content-section .animation-delay-4 {
  transition-delay: 0.4s;
}

#main-content-section .animation-delay-5 {
  transition-delay: 0.5s;
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

#main-content-section .scroll-reveal-element,
#main-content-section .fade-in-up,
#main-content-section .fade-in-down,
#main-content-section .fade-in-left,
#main-content-section .fade-in-right,
#main-content-section .scale-in,
#main-content-section .rotate-in,
#main-content-section .blur-in {
  backface-visibility: hidden;
  perspective: 1000px;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --scroll-reveal-distance: 40px;
  }
  
  #main-content-section .stagger-container.revealed > * {
    transition-delay: 0.05s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content-section .scroll-reveal-element,
  #main-content-section .fade-in-up,
  #main-content-section .fade-in-down,
  #main-content-section .fade-in-left,
  #main-content-section .fade-in-right,
  #main-content-section .scale-in,
  #main-content-section .rotate-in,
  #main-content-section .blur-in,
  #main-content-section .stagger-container > *,
  #main-content-section .parallax-layer {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
  
  #main-content-section .scroll-reveal-element.revealed,
  #main-content-section .fade-in-up.revealed,
  #main-content-section .fade-in-down.revealed,
  #main-content-section .fade-in-left.revealed,
  #main-content-section .fade-in-right.revealed,
  #main-content-section .scale-in.revealed,
  #main-content-section .rotate-in.revealed,
  #main-content-section .blur-in.revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }
}



/* =========================================== */
/* 4. template/shared/css/gradient-overlays-2026.css */
/* =========================================== */

/* =========================================== */
/* GRADIENT OVERLAYS 2026 */
/* Award-winning subtle gradients for depth */
/* =========================================== */

:root {
  --gradient-opacity: 0.15;
  --gradient-opacity-strong: 0.25;
  --gradient-opacity-subtle: 0.08;
  --gradient-blend-mode: overlay;
}

/* =========================================== */
/* GRADIENT OVERLAY BASE */
/* =========================================== */

#main-content-section .section {
  position: relative;
}

#main-content-section .section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#main-content-section .section.gradient-overlay::before {
  opacity: 1;
}

/* =========================================== */
/* PRIMARY GRADIENT OVERLAYS */
/* =========================================== */

/* Top to bottom gradient */
#main-content-section .section.gradient-top-bottom::before {
  background: linear-gradient(
    to bottom,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Bottom to top gradient */
#main-content-section .section.gradient-bottom-top::before {
  background: linear-gradient(
    to top,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Left to right gradient */
#main-content-section .section.gradient-left-right::before {
  background: linear-gradient(
    to right,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Right to left gradient */
#main-content-section .section.gradient-right-left::before {
  background: linear-gradient(
    to left,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* =========================================== */
/* DIAGONAL GRADIENTS */
/* =========================================== */

/* Top-left to bottom-right */
#main-content-section .section.gradient-diagonal-tl-br::before {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Top-right to bottom-left */
#main-content-section .section.gradient-diagonal-tr-bl::before {
  background: linear-gradient(
    225deg,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* =========================================== */
/* RADIAL GRADIENTS */
/* =========================================== */

/* Radial from center */
#main-content-section .section.gradient-radial-center::before {
  background: radial-gradient(
    circle at center,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 70%
  );
}

/* Radial from top */
#main-content-section .section.gradient-radial-top::before {
  background: radial-gradient(
    ellipse at top,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 70%
  );
}

/* Radial from bottom */
#main-content-section .section.gradient-radial-bottom::before {
  background: radial-gradient(
    ellipse at bottom,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 70%
  );
}

/* =========================================== */
/* CORNER GRADIENTS */
/* =========================================== */

/* Top-left corner */
#main-content-section .section.gradient-corner-tl::before {
  background: radial-gradient(
    circle at top left,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%
  );
}

/* Top-right corner */
#main-content-section .section.gradient-corner-tr::before {
  background: radial-gradient(
    circle at top right,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    transparent 50%
  );
}

/* Bottom-left corner */
#main-content-section .section.gradient-corner-bl::before {
  background: radial-gradient(
    circle at bottom left,
    rgba(139, 92, 246, var(--gradient-opacity)) 0%,
    transparent 50%
  );
}

/* Bottom-right corner */
#main-content-section .section.gradient-corner-br::before {
  background: radial-gradient(
    circle at bottom right,
    rgba(139, 92, 246, var(--gradient-opacity)) 0%,
    transparent 50%
  );
}

/* =========================================== */
/* MULTI-COLOR GRADIENTS */
/* =========================================== */

/* Purple to pink */
#main-content-section .section.gradient-purple-pink::before {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, var(--gradient-opacity)) 0%,
    rgba(139, 92, 246, var(--gradient-opacity)) 50%,
    rgba(236, 72, 153, var(--gradient-opacity)) 100%
  );
}

/* Blue to purple */
#main-content-section .section.gradient-blue-purple::before {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, var(--gradient-opacity)) 0%,
    rgba(99, 102, 241, var(--gradient-opacity)) 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Warm gradient */
#main-content-section .section.gradient-warm::before {
  background: linear-gradient(
    135deg,
    rgba(251, 146, 60, var(--gradient-opacity)) 0%,
    rgba(236, 72, 153, var(--gradient-opacity)) 50%,
    rgba(139, 92, 246, var(--gradient-opacity)) 100%
  );
}

/* Cool gradient */
#main-content-section .section.gradient-cool::before {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, var(--gradient-opacity)) 0%,
    rgba(99, 102, 241, var(--gradient-opacity)) 50%,
    rgba(14, 165, 233, var(--gradient-opacity)) 100%
  );
}

/* =========================================== */
/* OPACITY VARIANTS */
/* =========================================== */

/* Strong gradient */
#main-content-section .section.gradient-strong::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, var(--gradient-opacity-strong)) 0%,
    rgba(139, 92, 246, var(--gradient-opacity-strong)) 100%
  );
}

/* Subtle gradient */
#main-content-section .section.gradient-subtle::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, var(--gradient-opacity-subtle)) 0%,
    rgba(139, 92, 246, var(--gradient-opacity-subtle)) 100%
  );
}

/* =========================================== */
/* BLEND MODES */
/* =========================================== */

#main-content-section .section.gradient-blend-overlay::before {
  mix-blend-mode: overlay;
}

#main-content-section .section.gradient-blend-soft-light::before {
  mix-blend-mode: soft-light;
}

#main-content-section .section.gradient-blend-multiply::before {
  mix-blend-mode: multiply;
}

#main-content-section .section.gradient-blend-screen::before {
  mix-blend-mode: screen;
}

/* =========================================== */
/* CONTENT POSITIONING */
/* =========================================== */

/* Ensure content is above gradient */
#main-content-section .section.gradient-overlay > * {
  position: relative;
  z-index: 1;
}

/* =========================================== */
/* ANIMATED GRADIENTS */
/* =========================================== */

#main-content-section .section.gradient-animated::before {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* =========================================== */
/* SECTION PATTERN COMBINATIONS */
/* =========================================== */

/* Apply gradient to section-pattern sections */
#main-content-section .section.section-pattern.gradient-overlay::before {
  opacity: 0.2; /* Slightly stronger for pattern sections */
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  /* Reduce gradient opacity on mobile */
  :root {
    --gradient-opacity: 0.1;
    --gradient-opacity-strong: 0.15;
    --gradient-opacity-subtle: 0.05;
  }
  
  /* Disable animated gradients on mobile for performance */
  #main-content-section .section.gradient-animated::before {
    animation: none;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-contrast: high) {
  /* Reduce gradient opacity for high contrast */
  :root {
    --gradient-opacity: 0.05;
    --gradient-opacity-strong: 0.08;
    --gradient-opacity-subtle: 0.02;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content-section .section.gradient-animated::before {
    animation: none;
  }
  
  #main-content-section .section::before {
    transition: none;
  }
}

/* =========================================== */
/* PRINT STYLES */
/* =========================================== */

@media print {
  #main-content-section .section::before {
    display: none;
  }
}



/* =========================================== */
/* 5. template/shared/css/enhanced-card-depth-2026.css */
/* =========================================== */

/* =========================================== */
/* ENHANCED CARD DEPTH 2026 */
/* Award-winning 3D card transformations */
/* =========================================== */

:root {
  --card-depth-intensity: 20px;
  --card-tilt-max: 15deg;
  --card-scale-hover: 1.02;
  --card-shadow-depth: 0 20px 60px rgba(0, 0, 0, 0.15);
  --card-shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.2);
  --card-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* =========================================== */
/* CARD DEPTH BASE */
/* =========================================== */

#main-content-section .card {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform var(--card-transition),
              box-shadow var(--card-transition);
  will-change: transform;
}

#main-content-section .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--card-transition);
  z-index: -1;
  filter: blur(20px);
  transform: translateZ(-20px);
}

/* =========================================== */
/* 3D TILT EFFECTS */
/* =========================================== */

#main-content-section .card.card-3d {
  transform-style: preserve-3d;
}

#main-content-section .card.card-3d:hover {
  transform: translateY(calc(-1 * var(--card-depth-intensity))) 
             scale(var(--card-scale-hover));
  box-shadow: var(--card-shadow-hover),
              0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* Tilt on mouse move */
#main-content-section .card.card-3d-tilt {
  transform-style: preserve-3d;
}

#main-content-section .card.card-3d-tilt:hover {
  transform: translateY(calc(-1 * var(--card-depth-intensity))) 
             scale(var(--card-scale-hover));
}

/* =========================================== */
/* CARD LIFT EFFECTS */
/* =========================================== */

#main-content-section .card.card-lift {
  transition: transform var(--card-transition),
              box-shadow var(--card-transition);
}

#main-content-section .card.card-lift:hover {
  transform: translateY(calc(-1 * var(--card-depth-intensity)));
  box-shadow: var(--card-shadow-hover);
}

/* Strong lift */
#main-content-section .card.card-lift-strong:hover {
  transform: translateY(calc(-1 * var(--card-depth-intensity) * 1.5));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);
}

/* Subtle lift */
#main-content-section .card.card-lift-subtle:hover {
  transform: translateY(calc(-1 * var(--card-depth-intensity) * 0.5));
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* =========================================== */
/* CARD SCALE EFFECTS */
/* =========================================== */

#main-content-section .card.card-scale {
  transition: transform var(--card-transition),
              box-shadow var(--card-transition);
}

#main-content-section .card.card-scale:hover {
  transform: scale(var(--card-scale-hover));
  box-shadow: var(--card-shadow-hover);
}

/* Strong scale */
#main-content-section .card.card-scale-strong:hover {
  transform: scale(1.05);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.22);
}

/* Subtle scale */
#main-content-section .card.card-scale-subtle:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.1);
}

/* =========================================== */
/* CARD ROTATE EFFECTS */
/* =========================================== */

#main-content-section .card.card-rotate {
  transition: transform var(--card-transition),
              box-shadow var(--card-transition);
}

#main-content-section .card.card-rotate:hover {
  transform: rotateY(5deg) rotateX(-5deg) 
             translateY(calc(-1 * var(--card-depth-intensity)));
  box-shadow: var(--card-shadow-hover);
}

/* Strong rotate */
#main-content-section .card.card-rotate-strong:hover {
  transform: rotateY(10deg) rotateX(-10deg) 
             translateY(calc(-1 * var(--card-depth-intensity) * 1.2));
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.25);
}

/* =========================================== */
/* CARD PERSPECTIVE EFFECTS */
/* =========================================== */

#main-content-section .card.card-perspective {
  transform-style: preserve-3d;
  perspective: 1000px;
}

#main-content-section .card.card-perspective .card-body {
  transform-style: preserve-3d;
  transition: transform var(--card-transition);
}

#main-content-section .card.card-perspective:hover .card-body {
  transform: translateZ(20px);
}

/* =========================================== */
/* CARD DEPTH SHADOWS */
/* =========================================== */

#main-content-section .card.card-depth-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08),
              0 8px 24px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--card-transition);
}

#main-content-section .card.card-depth-shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
              0 16px 48px rgba(0, 0, 0, 0.1),
              0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* Strong depth shadow */
#main-content-section .card.card-depth-shadow-strong {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12),
              0 16px 48px rgba(0, 0, 0, 0.1);
}

#main-content-section .card.card-depth-shadow-strong:hover {
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15),
              0 24px 72px rgba(0, 0, 0, 0.12),
              0 0 0 1px rgba(99, 102, 241, 0.15);
}

/* =========================================== */
/* CARD GLOW EFFECTS */
/* =========================================== */

#main-content-section .card.card-glow {
  position: relative;
}

#main-content-section .card.card-glow::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  filter: blur(10px);
  transition: opacity var(--card-transition);
}

#main-content-section .card.card-glow:hover::after {
  opacity: 0.6;
}

#main-content-section .card.card-glow:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4),
              var(--card-shadow-hover);
}

/* =========================================== */
/* CARD BORDER EFFECTS */
/* =========================================== */

#main-content-section .card.card-border-glow {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

#main-content-section .card.card-border-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--card-transition);
  z-index: -1;
}

#main-content-section .card.card-border-glow:hover::before {
  opacity: 1;
}

/* =========================================== */
/* CARD CONTENT LAYERING */
/* =========================================== */

#main-content-section .card .card-body {
  position: relative;
  z-index: 1;
}

#main-content-section .card .card-header {
  position: relative;
  z-index: 2;
}

#main-content-section .card .card-footer {
  position: relative;
  z-index: 2;
}

/* =========================================== */
/* CARD STACK EFFECT */
/* =========================================== */

#main-content-section .card.card-stack {
  position: relative;
}

#main-content-section .card.card-stack::before,
#main-content-section .card.card-stack::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.5;
  transition: transform var(--card-transition),
              opacity var(--card-transition);
}

#main-content-section .card.card-stack::before {
  transform: translateY(4px) scale(0.98);
}

#main-content-section .card.card-stack::after {
  transform: translateY(8px) scale(0.96);
  opacity: 0.3;
}

#main-content-section .card.card-stack:hover::before {
  transform: translateY(8px) scale(0.96);
}

#main-content-section .card.card-stack:hover::after {
  transform: translateY(12px) scale(0.94);
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --card-depth-intensity: 10px;
    --card-scale-hover: 1.01;
  }
  
  /* Reduce 3D effects on mobile */
  #main-content-section .card.card-rotate:hover,
  #main-content-section .card.card-rotate-strong:hover {
    transform: translateY(calc(-1 * var(--card-depth-intensity)));
  }
  
  /* Simplify stack effect on mobile */
  #main-content-section .card.card-stack::before,
  #main-content-section .card.card-stack::after {
    display: none;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  #main-content-section .card {
    transition: none !important;
    transform: none !important;
  }
  
  #main-content-section .card:hover {
    transform: none !important;
  }
  
  #main-content-section .card::before,
  #main-content-section .card::after {
    display: none;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

#main-content-section .card {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

#main-content-section .card.card-3d,
#main-content-section .card.card-3d-tilt,
#main-content-section .card.card-perspective {
  will-change: transform;
}



/* =========================================== */
/* 6. template/shared/css/content-connectors-2026.css */
/* =========================================== */

/* =========================================== */
/* CONTENT CONNECTORS 2026 */
/* Award-winning visual lines connecting content */
/* =========================================== */

:root {
  --connector-width: 2px;
  --connector-color: rgba(99, 102, 241, 0.3);
  --connector-color-active: rgba(99, 102, 241, 0.6);
  --connector-animation-duration: 1s;
  --connector-dot-size: 8px;
}

/* =========================================== */
/* CONNECTOR BASE */
/* =========================================== */

.content-connector {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--connector-animation-duration) ease;
}

.content-connector.active {
  opacity: 1;
}

/* =========================================== */
/* VERTICAL CONNECTORS */
/* =========================================== */

.content-connector-vertical {
  width: var(--connector-width);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--connector-color) 20%,
    var(--connector-color) 80%,
    transparent 100%
  );
  left: 50%;
  transform: translateX(-50%);
}

.content-connector-vertical.active {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--connector-color-active) 20%,
    var(--connector-color-active) 80%,
    transparent 100%
  );
}

/* =========================================== */
/* HORIZONTAL CONNECTORS */
/* =========================================== */

.content-connector-horizontal {
  height: var(--connector-width);
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--connector-color) 20%,
    var(--connector-color) 80%,
    transparent 100%
  );
  top: 50%;
  transform: translateY(-50%);
}

.content-connector-horizontal.active {
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--connector-color-active) 20%,
    var(--connector-color-active) 80%,
    transparent 100%
  );
}

/* =========================================== */
/* DIAGONAL CONNECTORS */
/* =========================================== */

.content-connector-diagonal {
  width: var(--connector-width);
  background: linear-gradient(
    135deg,
    transparent 0%,
    var(--connector-color) 20%,
    var(--connector-color) 80%,
    transparent 100%
  );
}

.content-connector-diagonal.active {
  background: linear-gradient(
    135deg,
    transparent 0%,
    var(--connector-color-active) 20%,
    var(--connector-color-active) 80%,
    transparent 100%
  );
}

/* =========================================== */
/* CONNECTOR DOTS */
/* =========================================== */

.content-connector-dot {
  position: absolute;
  width: var(--connector-dot-size);
  height: var(--connector-dot-size);
  border-radius: 50%;
  background: var(--connector-color);
  transform: translate(-50%, -50%);
  transition: background var(--connector-animation-duration) ease,
              transform var(--connector-animation-duration) ease,
              box-shadow var(--connector-animation-duration) ease;
}

.content-connector-dot.active {
  background: var(--connector-color-active);
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

/* =========================================== */
/* ANIMATED CONNECTORS */
/* =========================================== */

.content-connector-animated {
  background-size: 200% 100%;
  animation: connectorFlow var(--connector-animation-duration) ease infinite;
}

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

/* Pulse animation */
.content-connector-pulse {
  animation: connectorPulse 2s ease infinite;
}

@keyframes connectorPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* =========================================== */
/* SECTION CONNECTORS */
/* =========================================== */

#main-content-section .section {
  position: relative;
}

#main-content-section .section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--connector-width);
  height: 60px;
  background: linear-gradient(
    to bottom,
    var(--connector-color) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

#main-content-section .section.scroll-reveal.revealed::after,
#main-content-section .section.scroll-fade.revealed::after {
  opacity: 1;
}

/* Hide connector on last section */
#main-content-section .section:last-child::after {
  display: none;
}

/* =========================================== */
/* CARD CONNECTORS */
/* =========================================== */

#main-content-section .card-connector-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

#main-content-section .card-connector-group .card {
  position: relative;
}

/* Horizontal connector between cards */
#main-content-section .card-connector-group .card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * 1rem);
  width: 2rem;
  height: var(--connector-width);
  background: linear-gradient(
    to right,
    var(--connector-color) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
}

#main-content-section .card-connector-group .card:hover::after {
  opacity: 1;
}

/* =========================================== */
/* RELATED CONTENT CONNECTORS */
/* =========================================== */

.related-content-connector {
  position: relative;
  padding: 2rem 0;
}

.related-content-connector::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--connector-width);
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--connector-color) 20%,
    var(--connector-color) 80%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

.related-content-connector.active::before {
  opacity: 1;
}

/* =========================================== */
/* CONNECTOR LABELS */
/* =========================================== */

.connector-label {
  position: absolute;
  background: rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(10px);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6366f1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.content-connector:hover + .connector-label,
.content-connector.active + .connector-label {
  opacity: 1;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --connector-width: 1px;
    --connector-dot-size: 6px;
  }
  
  /* Hide connectors on mobile for cleaner look */
  #main-content-section .section::after {
    display: none;
  }
  
  #main-content-section .card-connector-group .card::after {
    display: none;
  }
  
  /* Simplify animated connectors */
  .content-connector-animated {
    animation: none;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .content-connector-animated,
  .content-connector-pulse {
    animation: none;
  }
  
  .content-connector,
  .content-connector-dot {
    transition: none;
  }
}

/* =========================================== */
/* PRINT STYLES */
/* =========================================== */

@media print {
  .content-connector,
  #main-content-section .section::after,
  #main-content-section .card-connector-group .card::after {
    display: none;
  }
}



/* =========================================== */
/* TEMPLATE-CONTENT-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.856Z */
/* Combines 3 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/content-progression-2026.css */
/* =========================================== */

/* =========================================== */
/* CONTENT PROGRESSION SYSTEM 2026 */
/* Award-winning visual flow indicators */
/* =========================================== */

:root {
  --section-indicator-size: 3rem;
  --section-connector-width: 2px;
  --section-connector-color: rgba(99, 102, 241, 0.3);
  --section-indicator-active: #6366f1;
  --section-indicator-inactive: rgba(99, 102, 241, 0.2);
  --reading-progress-height: 4px;
}

/* =========================================== */
/* SECTION INDICATORS */
/* =========================================== */

.main-content-section {
  position: relative;
  counter-reset: section-counter;
}

.main-content-section .section {
  position: relative;
  counter-increment: section-counter;
  padding-left: calc(var(--section-indicator-size) + 2rem);
}

.main-content-section .section::before {
  content: counter(section-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--section-indicator-size);
  font-weight: 700;
  line-height: 1;
  color: var(--section-indicator-inactive);
  transition: color 0.3s ease, transform 0.3s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.05em;
  z-index: 1;
}

.main-content-section .section.scroll-reveal.revealed::before,
.main-content-section .section.scroll-fade.revealed::before {
  color: var(--section-indicator-active);
  transform: scale(1.05);
}

/* Section connector lines */
.main-content-section .section::after {
  content: '';
  position: absolute;
  left: calc(var(--section-indicator-size) / 2 - var(--section-connector-width) / 2);
  top: var(--section-indicator-size);
  bottom: calc(-1 * var(--spacing-lg));
  width: var(--section-connector-width);
  background: linear-gradient(
    to bottom,
    var(--section-connector-color) 0%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.main-content-section .section.scroll-reveal.revealed::after,
.main-content-section .section.scroll-fade.revealed::after {
  opacity: 1;
}

/* Hide connector on last section */
.main-content-section .section:last-child::after {
  display: none;
}

/* =========================================== */
/* READING PROGRESS INDICATOR */
/* =========================================== */

.reading-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--reading-progress-height);
  background: rgba(0, 0, 0, 0.05);
  z-index: 999998;
  pointer-events: none;
}

.reading-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* =========================================== */
/* SECTION NAVIGATION */
/* =========================================== */

.section-navigation {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.section-navigation.visible {
  opacity: 1;
  visibility: visible;
}

.section-nav-item {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--section-indicator-inactive);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.section-nav-item:hover {
  transform: scale(1.3);
  background: var(--section-indicator-active);
}

.section-nav-item.active {
  background: var(--section-indicator-active);
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
}

.section-nav-item::after {
  content: attr(data-section-title);
  position: absolute;
  right: calc(100% + 1rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.section-nav-item:hover::after {
  opacity: 1;
  visibility: visible;
}

/* =========================================== */
/* CONTENT FLOW INDICATORS */
/* =========================================== */

.content-flow-indicator {
  position: absolute;
  left: calc(var(--section-indicator-size) + 1rem);
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--section-indicator-active) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.section.scroll-reveal.revealed .content-flow-indicator,
.section.scroll-fade.revealed .content-flow-indicator {
  opacity: 0.3;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  .main-content-section .section {
    padding-left: calc(var(--section-indicator-size) * 0.7 + 1rem);
  }
  
  .main-content-section .section::before {
    font-size: calc(var(--section-indicator-size) * 0.7);
  }
  
  .section-navigation {
    right: 1rem;
    gap: 0.5rem;
  }
  
  .section-nav-item {
    width: 10px;
    height: 10px;
  }
  
  .section-nav-item::after {
    display: none; /* Hide tooltips on mobile */
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-content-section .section::before,
  .main-content-section .section::after,
  .section-nav-item,
  .reading-progress-bar {
    transition: none;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

.section-navigation[aria-hidden="true"] {
  display: none;
}

.section-nav-item:focus-visible {
  outline: 2px solid var(--section-indicator-active);
  outline-offset: 2px;
}



/* =========================================== */
/* 2. template/shared/css/main-content-hierarchy-2026.css */
/* =========================================== */

/* =========================================== */
/* MAIN CONTENT VISUAL HIERARCHY 2026 */
/* Award-winning typography scale and spacing */
/* =========================================== */

:root {
  /* Typography Scale - Modular Scale (1.333 ratio) */
  --h1-size: clamp(3rem, 8vw, 6rem);
  --h2-size: clamp(2.25rem, 6vw, 4.5rem);
  --h3-size: clamp(1.75rem, 4vw, 3rem);
  --h4-size: clamp(1.5rem, 3vw, 2.25rem);
  --h5-size: clamp(1.25rem, 2.5vw, 1.75rem);
  --h6-size: clamp(1.125rem, 2vw, 1.5rem);
  
  /* Line Heights - Optimized for readability */
  --h1-line-height: 1.1;
  --h2-line-height: 1.15;
  --h3-line-height: 1.2;
  --h4-line-height: 1.25;
  --h5-line-height: 1.3;
  --h6-line-height: 1.35;
  --body-line-height: 1.7;
  
  /* Letter Spacing - Refined for large headings */
  --h1-letter-spacing: -0.03em;
  --h2-letter-spacing: -0.02em;
  --h3-letter-spacing: -0.01em;
  --h4-letter-spacing: 0;
  --h5-letter-spacing: 0.01em;
  --h6-letter-spacing: 0.01em;
  
  /* Spacing Rhythm - 8px grid system */
  --spacing-rhythm: 0.5rem; /* 8px base unit */
  --spacing-xs: calc(var(--spacing-rhythm) * 0.5);   /* 4px */
  --spacing-sm: var(--spacing-rhythm);                /* 8px */
  --spacing-md: calc(var(--spacing-rhythm) * 2);      /* 16px */
  --spacing-lg: calc(var(--spacing-rhythm) * 3);      /* 24px */
  --spacing-xl: calc(var(--spacing-rhythm) * 4);      /* 32px */
  --spacing-2xl: calc(var(--spacing-rhythm) * 6);     /* 48px */
  --spacing-3xl: calc(var(--spacing-rhythm) * 8);     /* 64px */
  --spacing-4xl: calc(var(--spacing-rhythm) * 12);    /* 96px */
  
  /* Contrast Ratios - WCAG AAA compliant */
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #718096;
  --text-contrast-ratio: 7.1; /* AAA compliant */
}

/* =========================================== */
/* MAIN CONTENT SECTION */
/* =========================================== */

#main-content-section {
  /* Enhanced spacing rhythm */
  --section-spacing-top: var(--spacing-3xl);
  --section-spacing-bottom: var(--spacing-2xl);
}

/* =========================================== */
/* HEADING HIERARCHY */
/* =========================================== */

#main-content-section h1,
#main-content-section .h1,
#main-content-section .section-title {
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#main-content-section h2,
#main-content-section .h2,
#main-content-section .underline-animated {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  font-weight: 700;
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
}

#main-content-section h3,
#main-content-section .h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
  font-weight: 600;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

#main-content-section h4,
#main-content-section .h4 {
  font-size: var(--h4-size);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  font-weight: 600;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

#main-content-section h5,
#main-content-section .h5 {
  font-size: var(--h5-size);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
  font-weight: 600;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

#main-content-section h6,
#main-content-section .h6 {
  font-size: var(--h6-size);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
  font-weight: 600;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
  color: var(--text-secondary);
}

/* =========================================== */
/* LEAD TEXT & INTRODUCTIONS */
/* =========================================== */

#main-content-section .text-lead,
#main-content-section .lead,
#main-content-section .lead-text-dark {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  line-height: var(--body-line-height);
  font-weight: 400;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  color: var(--text-secondary);
  max-width: 65ch; /* Optimal reading width */
}

/* =========================================== */
/* BODY TEXT */
/* =========================================== */

#main-content-section p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: var(--body-line-height);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  max-width: 65ch; /* Optimal reading width */
}

#main-content-section .text-muted {
  color: var(--text-muted);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}

#main-content-section .text-small {
  font-size: clamp(0.75rem, 1.25vw, 0.875rem);
  line-height: 1.6;
}

/* =========================================== */
/* SPACING RHYTHM */
/* =========================================== */

#main-content-section .section {
  /* Asymmetric spacing - more space above headings */
  padding-top: var(--section-spacing-top);
  padding-bottom: var(--section-spacing-bottom);
}

#main-content-section .section:first-child {
  padding-top: var(--spacing-2xl);
}

#main-content-section .section:last-child {
  padding-bottom: var(--spacing-4xl);
}

/* Section dividers */
#main-content-section .section-divider {
  margin: var(--spacing-3xl) 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(99, 102, 241, 0.2) 50%,
    transparent 100%
  );
}

/* =========================================== */
/* VISUAL WEIGHT DISTRIBUTION */
/* =========================================== */

#main-content-section .card {
  margin-bottom: var(--spacing-xl);
}

#main-content-section .card:last-child {
  margin-bottom: 0;
}

#main-content-section .card-body {
  padding: var(--spacing-xl);
}

#main-content-section .card-body h3,
#main-content-section .card-body h4 {
  margin-top: 0;
}

#main-content-section .card-body h3 + p,
#main-content-section .card-body h4 + p {
  margin-top: var(--spacing-md);
}

/* =========================================== */
/* CONTRAST ENHANCEMENTS */
/* =========================================== */

#main-content-section {
  /* Ensure WCAG AAA contrast */
  color: var(--text-primary);
}

#main-content-section strong,
#main-content-section b {
  font-weight: 600;
  color: var(--text-primary);
}

#main-content-section a {
  color: #6366f1;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

#main-content-section a:hover {
  color: #4f46e5;
  text-decoration: underline;
}

/* =========================================== */
/* GOLDEN RATIO SPACING */
/* =========================================== */

#main-content-section .section > .row:first-child {
  margin-top: var(--spacing-2xl);
}

#main-content-section .section > .row:last-child {
  margin-bottom: var(--spacing-2xl);
}

/* Golden ratio spacing for featured sections */
#main-content-section .section.section-pattern {
  padding-top: calc(var(--spacing-3xl) * 1.618);
  padding-bottom: calc(var(--spacing-2xl) * 1.618);
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  #main-content-section .section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
  }
  
  #main-content-section .section.section-pattern {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
  }
  
  #main-content-section .card-body {
    padding: var(--spacing-lg);
  }
  
  #main-content-section h1,
  #main-content-section .h1,
  #main-content-section .section-title {
    margin-bottom: var(--spacing-lg);
  }
  
  #main-content-section h2,
  #main-content-section .h2 {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
  }
}

@media (min-width: 1200px) {
  /* Larger screens get more dramatic spacing */
  #main-content-section .section {
    padding-top: calc(var(--spacing-3xl) * 1.2);
    padding-bottom: calc(var(--spacing-2xl) * 1.2);
  }
  
  #main-content-section .section.section-pattern {
    padding-top: calc(var(--spacing-3xl) * 1.618 * 1.2);
    padding-bottom: calc(var(--spacing-2xl) * 1.618 * 1.2);
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-contrast: high) {
  #main-content-section {
    --text-primary: #000000;
    --text-secondary: #333333;
    --text-muted: #666666;
  }
  
  #main-content-section h1,
  #main-content-section h2,
  #main-content-section h3,
  #main-content-section h4,
  #main-content-section h5,
  #main-content-section h6 {
    font-weight: 800;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main-content-section * {
    transition: none !important;
    animation: none !important;
  }
}



/* =========================================== */
/* 3. template/shared/css/reading-time-2026.css */
/* =========================================== */

/* =========================================== */
/* READING TIME ESTIMATES 2026 */
/* Award-winning reading time display */
/* =========================================== */

:root {
  --reading-time-color: #6366f1;
  --reading-time-bg: rgba(99, 102, 241, 0.1);
  --reading-time-border-radius: 8px;
  --reading-time-font-size: 0.875rem;
}

/* =========================================== */
/* READING TIME BADGE */
/* =========================================== */

.reading-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--reading-time-bg);
  border-radius: var(--reading-time-border-radius);
  font-size: var(--reading-time-font-size);
  font-weight: 600;
  color: var(--reading-time-color);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.reading-time-badge:hover {
  background: rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.reading-time-badge i {
  font-size: 1rem;
}

.reading-time-badge .reading-time-value {
  font-weight: 700;
}

.reading-time-badge .reading-time-label {
  opacity: 0.8;
}

/* =========================================== */
/* READING TIME INLINE */
/* =========================================== */

.reading-time-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #718096;
  margin-left: 0.5rem;
}

.reading-time-inline i {
  font-size: 0.75rem;
}

/* =========================================== */
/* READING TIME PROGRESS */
/* =========================================== */

.reading-time-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  z-index: 999997;
  pointer-events: none;
}

.reading-time-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

.reading-time-progress-label {
  display: none !important;
  position: fixed;
  top: 10px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 999998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.reading-time-progress-label.visible {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

/* =========================================== */
/* SECTION READING TIME */
/* =========================================== */

#main-content-section .section-reading-time {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #718096;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  z-index: 10;
}

#main-content-section .section-reading-time i {
  font-size: 0.625rem;
}

/* =========================================== */
/* READING TIME SUMMARY */
/* =========================================== */

.reading-time-summary {
  background: rgba(99, 102, 241, 0.05);
  border-left: 3px solid var(--reading-time-color);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.reading-time-summary-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--reading-time-color);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.reading-time-summary-content {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.9375rem;
  color: #4a5568;
}

.reading-time-summary-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reading-time-summary-item i {
  color: var(--reading-time-color);
  font-size: 1rem;
}

.reading-time-summary-item .value {
  font-weight: 700;
  color: var(--reading-time-color);
}

/* =========================================== */
/* READING TIME TOOLTIP */
/* =========================================== */

.reading-time-tooltip {
  position: relative;
  display: inline-block;
}

.reading-time-tooltip:hover .reading-time-tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(-5px);
}

.reading-time-tooltip-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.reading-time-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  .reading-time-badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
  
  .reading-time-progress-label {
    top: 5px;
    right: 10px;
    font-size: 0.625rem;
    padding: 0.375rem 0.75rem;
  }
  
  #main-content-section .section-reading-time {
    position: static;
    margin-bottom: 1rem;
  }
  
  .reading-time-summary-content {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

.reading-time-badge[aria-label] {
  cursor: help;
}

@media (prefers-reduced-motion: reduce) {
  .reading-time-badge,
  .reading-time-progress-bar,
  .reading-time-tooltip-content {
    transition: none;
  }
}

/* =========================================== */
/* HIDE ALL READING TIME INDICATORS */
/* User requested removal - all reading time displays hidden */
/* =========================================== */

.reading-time,
.reading-time-badge,
.reading-time-inline,
.scroll-reading-time,
.reading-time-progress-label,
.section-reading-time,
.reading-time-summary,
.reading-time-tooltip,
.reading-time-tooltip-content,
[class*="reading-time"],
[class*="reading-time"] * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  pointer-events: none !important;
}



/* =========================================== */
/* TEMPLATE-INTERACTIONS-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.860Z */
/* Combines 4 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/advanced-micro-interactions-2026.css */
/* =========================================== */

/* =========================================== */
/* ADVANCED MICRO-INTERACTIONS 2026 */
/* Award-winning UX/UI enhancements */
/* Ripple effects, morphing shapes, particles */
/* =========================================== */

:root {
  /* Ripple Effect Variables */
  --ripple-color: rgba(99, 102, 241, 0.4);
  --ripple-duration: 0.6s;
  --ripple-scale: 4;
  
  /* Morphing Variables */
  --morph-duration: 0.5s;
  --morph-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Particle Variables */
  --particle-count: 8;
  --particle-size: 4px;
  --particle-duration: 1.5s;
  
  /* Spring Physics */
  --spring-stiffness: 0.15;
  --spring-damping: 0.8;
}

/* =========================================== */
/* RIPPLE EFFECTS */
/* Material Design-inspired ripple feedback */
/* =========================================== */

.btn-ripple,
.card-ripple,
.interactive-ripple {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.btn-ripple::before,
.card-ripple::before,
.interactive-ripple::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--ripple-color);
  width: 0;
  height: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: width var(--ripple-duration) ease-out,
              height var(--ripple-duration) ease-out,
              opacity calc(var(--ripple-duration) * 0.5) ease-out;
}

.btn-ripple:active::before,
.card-ripple:active::before,
.interactive-ripple:active::before {
  width: calc(100% * var(--ripple-scale));
  height: calc(100% * var(--ripple-scale));
  opacity: 1;
  transition: width var(--ripple-duration) ease-out,
              height var(--ripple-duration) ease-out,
              opacity calc(var(--ripple-duration) * 0.3) ease-out;
}

/* Ripple on click (JavaScript triggered) */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect .ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--ripple-color);
  transform: scale(0);
  animation: ripple-animation var(--ripple-duration) ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(var(--ripple-scale));
    opacity: 0;
  }
}

/* =========================================== */
/* MORPHING SHAPES */
/* Dynamic shape transformations */
/* =========================================== */

.morph-shape {
  position: relative;
  transition: border-radius var(--morph-duration) var(--morph-easing),
              transform var(--morph-duration) var(--morph-easing);
}

.morph-shape:hover {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  transform: scale(1.05) rotate(5deg);
}

.morph-shape.morph-circle:hover {
  border-radius: 50%;
  transform: scale(1.1);
}

.morph-shape.morph-square:hover {
  border-radius: 0;
  transform: scale(1.05) rotate(0deg);
}

/* Morphing button */
.btn-morph {
  position: relative;
  overflow: hidden;
  transition: all var(--morph-duration) var(--morph-easing);
}

.btn-morph::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn-morph:hover::before {
  left: 100%;
}

.btn-morph:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

/* =========================================== */
/* PARTICLE EFFECTS */
/* Subtle particle animations on interaction */
/* =========================================== */

.particle-container {
  position: relative;
  overflow: visible;
}

.particle-container::after {
  content: '';
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.8), transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.particle-container:hover::after {
  animation: particle-burst var(--particle-duration) ease-out forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-offset-x, 50px), var(--particle-offset-y, -50px)) scale(0);
  }
}

/* Multiple particles (JavaScript generated) */
.particle {
  position: absolute;
  width: var(--particle-size);
  height: var(--particle-size);
  background: radial-gradient(circle, rgba(99, 102, 241, 0.8), transparent);
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float var(--particle-duration) ease-out forwards;
}

@keyframes particle-float {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--particle-x, 0), var(--particle-y, -100px)) scale(0);
  }
}

/* =========================================== */
/* SPRING PHYSICS ANIMATIONS */
/* Natural, bouncy animations */
/* =========================================== */

.spring-animation {
  animation: spring-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spring-bounce {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.spring-hover {
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.spring-hover:hover {
  transform: scale(1.05) translateY(-5px);
}

.spring-hover:active {
  transform: scale(0.95);
  transition: transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =========================================== */
/* GLOW PULSE EFFECTS */
/* Pulsing glow animations */
/* =========================================== */

.glow-pulse {
  position: relative;
}

.glow-pulse::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  filter: blur(10px);
  animation: glow-pulse-animation 2s ease-in-out infinite;
}

@keyframes glow-pulse-animation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

.glow-pulse:hover::before {
  animation-duration: 1s;
}

/* =========================================== */
/* SHIMMER EFFECTS */
/* Shimmering shine animations */
/* =========================================== */

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: shimmer-slide 2s ease-in-out infinite;
}

@keyframes shimmer-slide {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.shimmer:hover::after {
  animation-duration: 1s;
}

/* =========================================== */
/* FLOATING ANIMATION */
/* Subtle floating motion */
/* =========================================== */

.float-animation {
  animation: float 3s ease-in-out infinite;
}

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

.float-animation-delayed {
  animation: float 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* =========================================== */
/* MAGNETIC PULL EFFECT */
/* Elements that pull toward cursor */
/* =========================================== */

.magnetic-pull {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  cursor: pointer;
}

.magnetic-pull:hover {
  transform: scale(1.1);
}

/* =========================================== */
/* TEXT REVEAL ANIMATIONS */
/* Animated text reveals */
/* =========================================== */

.text-reveal {
  overflow: hidden;
  position: relative;
}

.text-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: translateX(-100%);
  animation: text-reveal-slide 0.8s ease-out forwards;
}

@keyframes text-reveal-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* =========================================== */
/* LOADING SPINNER VARIATIONS */
/* Multiple spinner styles */
/* =========================================== */

.spinner-dots {
  display: inline-flex;
  gap: 4px;
}

.spinner-dots::before,
.spinner-dots::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: spinner-dots-bounce 1.4s ease-in-out infinite;
}

.spinner-dots::before {
  animation-delay: -0.32s;
}

.spinner-dots::after {
  animation-delay: -0.16s;
}

@keyframes spinner-dots-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --ripple-scale: 2;
    --particle-count: 4;
  }
  
  .morph-shape:hover {
    transform: scale(1.02);
  }
  
  .spring-hover:hover {
    transform: scale(1.02) translateY(-2px);
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .ripple-effect .ripple,
  .particle,
  .spring-animation,
  .glow-pulse::before,
  .shimmer::after,
  .float-animation,
  .text-reveal::before,
  .spinner-dots::before,
  .spinner-dots::after {
    animation: none !important;
  }
  
  .morph-shape,
  .btn-morph,
  .spring-hover,
  .magnetic-pull {
    transition: none !important;
  }
  
  .morph-shape:hover,
  .btn-morph:hover,
  .spring-hover:hover,
  .magnetic-pull:hover {
    transform: none !important;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.btn-ripple,
.card-ripple,
.interactive-ripple,
.morph-shape,
.btn-morph,
.particle-container,
.spring-hover,
.glow-pulse,
.shimmer {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}


/* =========================================== */
/* 2. template/shared/css/micro-interactions-2-0-2026.css */
/* =========================================== */

/* =========================================== */
/* ADVANCED MICRO-INTERACTIONS 2.0 - 2026 */
/* Contextual, intelligent animations */
/* Award-winning UX/UI enhancement */
/* =========================================== */

/* ===== CONTEXTUAL HOVER EFFECTS ===== */

/* Smart button press feedback */
.btn,
.btn-premium {
  position: relative;
  overflow: hidden;
}

.btn::after,
.btn-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  pointer-events: none;
  opacity: 0;
}

.btn:active::after,
.btn-premium:active::after {
  width: 300px;
  height: 300px;
  opacity: 1;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

/* Context-aware form field focus */
.form-control,
.form-select {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus,
.form-select:focus {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2),
              0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Morphing border effect */
.form-control-wrapper {
  position: relative;
}

.form-control-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid transparent;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  pointer-events: none;
}

.form-control-wrapper:focus-within::before {
  opacity: 1;
  border-color: #667eea;
  animation: borderPulse 2s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% {
    border-color: #667eea;
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.4);
  }
  50% {
    border-color: #764ba2;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  }
}

/* ===== GESTURE-BASED INTERACTIONS ===== */

/* Swipe hint indicator */
.swipeable {
  position: relative;
  overflow: hidden;
}

.swipeable::after {
  content: '← Swipe →';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.swipeable:hover::after {
  opacity: 1;
  animation: swipeHint 2s ease-in-out infinite;
}

@keyframes swipeHint {
  0%, 100% {
    transform: translate(-50%, -50%) translateX(0);
  }
  50% {
    transform: translate(-50%, -50%) translateX(10px);
  }
}

/* Long-press context menu hint */
.long-pressable {
  position: relative;
}

.long-pressable::before {
  content: 'Long press for options';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.long-pressable:hover::before {
  opacity: 1;
}

/* ===== SCROLL-TRIGGERED REVEALS ===== */

.scroll-reveal-enhanced {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-enhanced.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal for children */
.stagger-reveal > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-reveal.revealed > *:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.stagger-reveal.revealed > *:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.stagger-reveal.revealed > *:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.stagger-reveal.revealed > *:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

.stagger-reveal.revealed > *:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* ===== SUCCESS/ERROR STATE CELEBRATIONS ===== */

.success-celebration {
  position: relative;
  overflow: visible;
}

.success-celebration::before {
  content: '✓';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transform: scale(0);
  animation: successPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  z-index: 10;
}

@keyframes successPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.error-indication {
  position: relative;
}

.error-indication::before {
  content: '✗';
  position: absolute;
  top: -10px;
  right: -10px;
  width: 32px;
  height: 32px;
  background: #ef4444;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  opacity: 0;
  transform: scale(0) rotate(180deg);
  animation: errorShake 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  z-index: 10;
}

@keyframes errorShake {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }
  25% {
    transform: scale(1.1) rotate(-10deg);
  }
  50% {
    transform: scale(1.1) rotate(10deg);
  }
  75% {
    transform: scale(1.1) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ===== LOADING STATE ANIMATIONS ===== */

.loading-state {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading-state::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 3px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton loader for async content */
.skeleton-loader {
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

/* ===== CONTEXTUAL HOVER CARDS ===== */

.hover-card-preview {
  position: relative;
}

.hover-card-preview::after {
  content: attr(data-preview);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1000;
}

.hover-card-preview::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1001;
}

.hover-card-preview:hover::after,
.hover-card-preview:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-12px);
}

.hover-card-preview:hover::before {
  transform: translateX(-50%) translateY(-2px);
}

/* ===== ACCESSIBILITY ===== */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal-enhanced,
  .stagger-reveal > *,
  .success-celebration::before,
  .error-indication::before,
  .loading-state::after,
  .skeleton-loader {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  
  .scroll-reveal-enhanced {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .stagger-reveal.revealed > * {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}







/* =========================================== */
/* 3. template/shared/css/mobile-gestures-2026.css */
/* =========================================== */

/* =========================================== */
/* MOBILE GESTURES 2026 */
/* Swipe, pull-to-refresh, pinch-to-zoom */
/* Award-winning mobile UX */
/* =========================================== */

:root {
  --gesture-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --pull-refresh-threshold: 80px;
  --swipe-threshold: 50px;
}

/* =========================================== */
/* PULL-TO-REFRESH */
/* =========================================== */

.pull-to-refresh-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.pull-to-refresh-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: transform var(--gesture-transition), opacity var(--gesture-transition);
  z-index: 1000;
  pointer-events: none;
}

.pull-to-refresh-indicator.active {
  opacity: 1;
}

.pull-to-refresh-indicator.pulling {
  transform: translateX(-50%) translateY(20px);
}

.pull-to-refresh-indicator.releasing {
  transform: translateX(-50%) translateY(20px);
  animation: pull-to-refresh-spin 0.6s linear infinite;
}

.pull-to-refresh-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes pull-to-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================== */
/* SWIPEABLE CONTAINER */
/* =========================================== */

.swipeable-container {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.swipeable-item {
  position: relative;
  transition: transform var(--gesture-transition);
  will-change: transform;
  touch-action: pan-x;
}

.swipeable-item.swiping {
  transition: none;
}

.swipeable-item.swiped-left {
  transform: translateX(-100%);
}

.swipeable-item.swiped-right {
  transform: translateX(100%);
}

/* Swipe actions (like delete, archive) */
.swipe-action {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  color: white;
  font-weight: 600;
  opacity: 0;
  transition: opacity var(--gesture-transition);
  z-index: 1;
}

.swipe-action-left {
  left: 0;
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.swipe-action-right {
  right: 0;
  background: linear-gradient(90deg, #10b981, #059669);
}

.swipeable-item.swiping .swipe-action {
  opacity: 1;
}

/* =========================================== */
/* PINCH-TO-ZOOM */
/* =========================================== */

.pinch-zoom-container {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.pinch-zoom-container:active {
  cursor: grabbing;
}

.pinch-zoom-content {
  transform-origin: center center;
  transition: transform var(--gesture-transition);
  will-change: transform;
}

.pinch-zoom-content.zooming {
  transition: none;
}

/* Zoom limits */
.pinch-zoom-content {
  min-scale: 1;
  max-scale: 3;
}

/* =========================================== */
/* LONG-PRESS CONTEXT MENU */
/* =========================================== */

.long-pressable {
  position: relative;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.long-pressable.long-pressing {
  background: rgba(99, 102, 241, 0.1);
}

.long-press-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border: 3px solid #6366f1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gesture-transition);
  z-index: 1000;
}

.long-press-indicator.active {
  opacity: 1;
  animation: long-press-pulse 1s ease-in-out infinite;
}

@keyframes long-press-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.7;
  }
}

/* =========================================== */
/* SWIPE NAVIGATION HINTS */
/* =========================================== */

.swipe-hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gesture-transition);
  z-index: 1000;
}

.swipe-hint.show {
  opacity: 1;
}

.swipe-hint-icon {
  animation: swipe-hint-bounce 1.5s ease-in-out infinite;
}

@keyframes swipe-hint-bounce {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

/* =========================================== */
/* HAPTIC FEEDBACK INDICATORS */
/* =========================================== */

.haptic-feedback {
  touch-action: manipulation;
}

/* =========================================== */
/* GESTURE OVERLAY */
/* =========================================== */

.gesture-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--gesture-transition);
  z-index: 9999;
}

.gesture-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (min-width: 769px) {
  /* Disable gestures on desktop */
  .pull-to-refresh-container,
  .swipeable-container,
  .pinch-zoom-container,
  .long-pressable {
    touch-action: auto;
  }
  
  .pull-to-refresh-indicator,
  .swipe-hint {
    display: none;
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .swipeable-item,
  .pinch-zoom-content,
  .pull-to-refresh-indicator,
  .long-press-indicator {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.swipeable-item,
.pinch-zoom-content {
  backface-visibility: hidden;
  perspective: 1000px;
}






/* =========================================== */
/* 4. template/shared/css/enhanced-forms-2026.css */
/* =========================================== */

/* =========================================== */
/* ENHANCED FORMS 2026 */
/* Real-time validation, character counters, password strength */
/* Award-winning form UX */
/* =========================================== */

:root {
  --form-success-color: #10b981;
  --form-error-color: #ef4444;
  --form-warning-color: #f59e0b;
  --form-info-color: #3b82f6;
  --form-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================== */
/* FORM FIELD ENHANCEMENTS */
/* =========================================== */

.form-control-enhanced,
.form-control,
.form-select {
  position: relative;
  transition: all var(--form-transition);
}

/* =========================================== */
/* VALIDATION STATES */
/* =========================================== */

.form-control-enhanced.is-valid,
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--form-success-color);
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2310b981' d='m2.3 6.73.98-.98-.98-.98-.98.98.98.98zm2.12-2.12.98-.98-.98-.98-.98.98.98.98zm2.12-2.12.98-.98-.98-.98-.98.98.98.98z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

.form-control-enhanced.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--form-error-color);
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ef4444'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4m0 4.8-.4-.4-.4.4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

/* Validation icons */
.form-validation-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--form-transition);
  z-index: 5;
}

.form-control-enhanced.is-valid ~ .form-validation-icon.valid,
.form-control.is-valid ~ .form-validation-icon.valid,
.form-select.is-valid ~ .form-validation-icon.valid {
  opacity: 1;
  color: var(--form-success-color);
}

.form-control-enhanced.is-invalid ~ .form-validation-icon.invalid,
.form-control.is-invalid ~ .form-validation-icon.invalid,
.form-select.is-invalid ~ .form-validation-icon.invalid {
  opacity: 1;
  color: var(--form-error-color);
}

/* =========================================== */
/* CHARACTER COUNTERS */
/* =========================================== */

.form-char-counter {
  position: absolute;
  bottom: -1.25rem;
  right: 0;
  font-size: 0.75rem;
  color: #6b7280;
  opacity: 0;
  transition: opacity var(--form-transition);
  pointer-events: none;
}

.form-control-enhanced:focus ~ .form-char-counter,
.form-control:focus ~ .form-char-counter,
textarea:focus ~ .form-char-counter {
  opacity: 1;
}

.form-char-counter.warning {
  color: var(--form-warning-color);
}

.form-char-counter.danger {
  color: var(--form-error-color);
}

/* Character counter container */
.form-group-enhanced {
  position: relative;
  margin-bottom: 1.5rem;
}

/* =========================================== */
/* PASSWORD STRENGTH INDICATOR */
/* =========================================== */

.password-strength-meter {
  margin-top: 0.5rem;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--form-transition);
}

.password-strength-meter.active {
  opacity: 1;
}

.password-strength-bar {
  height: 100%;
  width: 0%;
  transition: width var(--form-transition), background-color var(--form-transition);
  border-radius: 2px;
}

.password-strength-bar.weak {
  width: 33%;
  background-color: var(--form-error-color);
}

.password-strength-bar.fair {
  width: 66%;
  background-color: var(--form-warning-color);
}

.password-strength-bar.good {
  width: 100%;
  background-color: #3b82f6;
}

.password-strength-bar.strong {
  width: 100%;
  background-color: var(--form-success-color);
}

.password-strength-text {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: #6b7280;
  opacity: 0;
  transition: opacity var(--form-transition);
}

.password-strength-meter.active ~ .password-strength-text,
.password-strength-text.active {
  opacity: 1;
}

.password-strength-text.weak {
  color: var(--form-error-color);
}

.password-strength-text.fair {
  color: var(--form-warning-color);
}

.password-strength-text.good {
  color: #3b82f6;
}

.password-strength-text.strong {
  color: var(--form-success-color);
}

/* =========================================== */
/* FLOATING LABELS ENHANCEMENT */
/* =========================================== */

.form-floating-enhanced {
  position: relative;
}

.form-floating-enhanced label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity var(--form-transition), transform var(--form-transition);
  color: #6b7280;
}

.form-floating-enhanced .form-control:focus ~ label,
.form-floating-enhanced .form-control:not(:placeholder-shown) ~ label,
.form-floating-enhanced .form-select:focus ~ label,
.form-floating-enhanced .form-select:not([value=""]) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
  color: #6366f1;
}

/* =========================================== */
/* AUTO-SAVE INDICATOR */
/* =========================================== */

.form-autosave-indicator {
  position: absolute;
  top: -1.5rem;
  right: 0;
  font-size: 0.75rem;
  color: #6b7280;
  opacity: 0;
  transition: opacity var(--form-transition);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-autosave-indicator.active {
  opacity: 1;
}

.form-autosave-indicator.saving {
  color: var(--form-info-color);
}

.form-autosave-indicator.saved {
  color: var(--form-success-color);
}

.form-autosave-indicator.error {
  color: var(--form-error-color);
}

/* =========================================== */
/* REAL-TIME VALIDATION FEEDBACK */
/* =========================================== */

.form-feedback-real-time {
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  font-size: 0.75rem;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity var(--form-transition), transform var(--form-transition);
  pointer-events: none;
}

.form-control-enhanced.is-valid ~ .form-feedback-real-time.valid,
.form-control.is-valid ~ .form-feedback-real-time.valid {
  opacity: 1;
  transform: translateY(0);
  color: var(--form-success-color);
}

.form-control-enhanced.is-invalid ~ .form-feedback-real-time.invalid,
.form-control.is-invalid ~ .form-feedback-real-time.invalid {
  opacity: 1;
  transform: translateY(0);
  color: var(--form-error-color);
}

/* =========================================== */
/* FOCUS ENHANCEMENTS */
/* =========================================== */

.form-control-enhanced:focus,
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
  outline: none;
}

.form-control-enhanced:focus.is-valid,
.form-control:focus.is-valid {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.form-control-enhanced:focus.is-invalid,
.form-control:focus.is-invalid {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* =========================================== */
/* LOADING STATE */
/* =========================================== */

.form-control-enhanced.loading,
.form-control.loading {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ccircle cx='12' cy='12' r='10' stroke='%236366f1' stroke-width='2' fill='none' stroke-dasharray='31.416' stroke-dashoffset='31.416'%3e%3canimate attributeName='stroke-dasharray' dur='2s' values='0 31.416;15.708 15.708;0 31.416;0 31.416'/%3e%3canimate attributeName='stroke-dashoffset' dur='2s' values='0;-15.708;-31.416;-31.416'/%3e%3c/circle%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
  animation: form-loading-spin 1s linear infinite;
}

@keyframes form-loading-spin {
  to {
    background-position: right 0.75rem center;
  }
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  .form-char-counter,
  .form-feedback-real-time {
    font-size: 0.7rem;
  }
  
  .password-strength-text {
    font-size: 0.7rem;
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .form-control-enhanced,
  .form-control,
  .form-select,
  .form-validation-icon,
  .form-char-counter,
  .form-feedback-real-time,
  .password-strength-bar,
  .password-strength-text,
  .form-autosave-indicator {
    transition: opacity 0.2s ease !important;
  }
  
  .form-control-enhanced.loading,
  .form-control.loading {
    animation: none !important;
  }
}






/* =========================================== */
/* TEMPLATE-DESIGN-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.863Z */
/* Combines 4 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/award-winning-ux-2026.css */
/* =========================================== */

/* =========================================== */
/* AWARD-WINNING UX/UI ENHANCEMENTS 2026 */
/* Parallax, Animations, Micro-interactions */
/* Best practices from award-winning sites */
/* =========================================== */

:root {
  /* Parallax Configuration */
  --parallax-speed-fast: 0.5;
  --parallax-speed-medium: 0.3;
  --parallax-speed-slow: 0.15;
  --parallax-speed-very-slow: 0.08;
  
  /* Animation Timing */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Micro-interaction Durations */
  --micro-fast: 0.15s;
  --micro-medium: 0.3s;
  --micro-slow: 0.5s;
  
  /* Depth Layers */
  --depth-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
  --depth-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12);
  --depth-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.16);
  --depth-shadow-4: 0 16px 64px rgba(0, 0, 0, 0.2);
}

/* =========================================== */
/* SMOOTH SCROLL BEHAVIOR */
/* =========================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* =========================================== */
/* ADVANCED PARALLAX SYSTEM */
/* Multi-layer depth with GPU acceleration */
/* =========================================== */

.parallax-container {
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Prevent parallax classes from affecting non-layer elements */
.hero-image-container:not(.parallax-layer),
.hero-content:not(.parallax-layer),
.full-bleed-image:not(.parallax-layer),
.card-premium:not(.parallax-layer) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

/* Parallax Speed Variants - Only for parallax-layer elements */
.parallax-layer.parallax-fast,
.parallax-container .parallax-fast:not(.parallax-layer) {
  transform: translate3d(0, 0, 0);
  transition: transform 0.1s linear;
}

.parallax-layer.parallax-medium,
.parallax-container .parallax-medium:not(.parallax-layer) {
  transform: translate3d(0, 0, 0);
  transition: transform 0.15s linear;
}

.parallax-layer.parallax-slow,
.parallax-container .parallax-slow:not(.parallax-layer) {
  transform: translate3d(0, 0, 0);
  transition: transform 0.2s linear;
}

.parallax-layer.parallax-very-slow,
.parallax-container .parallax-very-slow:not(.parallax-layer) {
  transform: translate3d(0, 0, 0);
  transition: transform 0.25s linear;
}

/* Hero Section Parallax */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-section .hero-image-container {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  will-change: transform;
  transform: translateZ(0);
}

.hero-section .hero-image-container.parallax-slow {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

.hero-section .hero-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  z-index: 2;
  will-change: transform, opacity;
}

.hero-section .hero-content.parallax-very-slow {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

/* Full-bleed Image Parallax */
.full-bleed-image-container {
  position: relative;
  overflow: hidden;
}

.full-bleed-image {
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.1s linear;
}

/* Card Parallax Effect */
.card-premium.parallax-card {
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.2s var(--ease-out-expo);
}

/* =========================================== */
/* SCROLL-TRIGGERED ANIMATIONS */
/* Intersection Observer based reveals */
/* =========================================== */

.scroll-reveal-award {
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 1s var(--ease-out-expo),
              transform 1s var(--ease-out-expo);
  will-change: opacity, transform;
}

.scroll-reveal-award.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered Children */
.stagger-reveal-award > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.stagger-reveal-award.revealed > *:nth-child(1) {
  transition-delay: 0.1s;
  opacity: 1;
  transform: translateY(0);
}

.stagger-reveal-award.revealed > *:nth-child(2) {
  transition-delay: 0.2s;
  opacity: 1;
  transform: translateY(0);
}

.stagger-reveal-award.revealed > *:nth-child(3) {
  transition-delay: 0.3s;
  opacity: 1;
  transform: translateY(0);
}

.stagger-reveal-award.revealed > *:nth-child(4) {
  transition-delay: 0.4s;
  opacity: 1;
  transform: translateY(0);
}

.stagger-reveal-award.revealed > *:nth-child(5) {
  transition-delay: 0.5s;
  opacity: 1;
  transform: translateY(0);
}

.stagger-reveal-award.revealed > *:nth-child(6) {
  transition-delay: 0.6s;
  opacity: 1;
  transform: translateY(0);
}

/* Scale Reveal */
.scale-reveal-award {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.scale-reveal-award.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Rotate Reveal */
.rotate-reveal-award {
  opacity: 0;
  transform: rotate(-5deg) scale(0.9);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.rotate-reveal-award.revealed {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Blur Reveal */
.blur-reveal-award {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(30px);
  transition: opacity 1s var(--ease-out-expo),
              filter 1s var(--ease-out-expo),
              transform 1s var(--ease-out-expo);
}

.blur-reveal-award.revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* =========================================== */
/* ADVANCED MICRO-INTERACTIONS */
/* Contextual feedback and haptic-like effects */
/* =========================================== */

/* Button Press Feedback */
.btn-award,
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: transform var(--micro-fast) var(--ease-spring),
              box-shadow var(--micro-medium) var(--ease-out-expo);
}

.btn-award::before,
.btn-premium::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width var(--micro-slow) var(--ease-out-expo),
              height var(--micro-slow) var(--ease-out-expo),
              opacity var(--micro-medium) ease;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}

.btn-award:active::before,
.btn-premium:active::before {
  width: 400px;
  height: 400px;
  opacity: 1;
  transition: width var(--micro-fast) var(--ease-out-expo),
              height var(--micro-fast) var(--ease-out-expo),
              opacity var(--micro-fast) ease;
}

.btn-award:active,
.btn-premium:active {
  transform: scale(0.96);
  box-shadow: var(--depth-shadow-1);
}

.btn-award:hover,
.btn-premium:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--depth-shadow-3);
}

/* Card Hover Micro-interactions */
.card-premium {
  transition: transform var(--micro-medium) var(--ease-out-expo),
              box-shadow var(--micro-medium) var(--ease-out-expo);
  will-change: transform;
}

.card-premium:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--depth-shadow-4);
}

.card-premium:active {
  transform: translateY(-4px) scale(0.99);
  transition: transform var(--micro-fast) var(--ease-spring);
}

/* Link Hover Effects */
a.award-link {
  position: relative;
  display: inline-block;
  transition: transform var(--micro-medium) var(--ease-out-expo);
}

a.award-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--micro-medium) var(--ease-out-expo);
}

a.award-link:hover {
  transform: translateX(4px);
}

a.award-link:hover::after {
  width: 100%;
}

/* Badge Micro-interactions */
.badge-premium {
  transition: transform var(--micro-medium) var(--ease-spring),
              box-shadow var(--micro-medium) var(--ease-out-expo);
  will-change: transform;
}

.badge-premium:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: var(--depth-shadow-2);
}

.badge-premium:active {
  transform: scale(1.05) translateY(0);
  transition: transform var(--micro-fast) var(--ease-spring);
}

/* Image Hover Effects */
.img-award-hover {
  transition: transform var(--micro-slow) var(--ease-out-expo),
              filter var(--micro-slow) ease;
  will-change: transform;
}

.img-award-hover:hover {
  transform: scale(1.05);
  filter: brightness(1.1) contrast(1.05);
}

/* =========================================== */
/* FOCUS INDICATORS */
/* Award-winning accessibility */
/* =========================================== */

.btn-award:focus-visible,
.btn-premium:focus-visible,
a.award-link:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  border-radius: 4px;
}

.card-premium:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  box-shadow: var(--depth-shadow-3),
              0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* =========================================== */
/* LOADING STATES */
/* Skeleton and shimmer effects */
/* =========================================== */

.skeleton-award {
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 50%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: shimmer-award 1.5s ease-in-out infinite;
  border-radius: 8px;
}

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

/* Pulse Loading */
.pulse-award {
  animation: pulse-award 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-award {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* =========================================== */
/* SCROLL PROGRESS INDICATORS */
/* Visual feedback for scroll position */
/* =========================================== */

.scroll-progress-award {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
}

/* =========================================== */
/* CURSOR EFFECTS */
/* Custom cursor for interactive elements */
/* =========================================== */

.cursor-award {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(99, 102, 241, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  mix-blend-mode: difference;
}

.cursor-award.active {
  width: 40px;
  height: 40px;
  opacity: 1;
}

.cursor-award.hover {
  width: 60px;
  height: 60px;
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.1);
}

/* Cursor Dot */
.cursor-dot-award {
  position: fixed;
  width: 6px;
  height: 6px;
  background: rgba(99, 102, 241, 0.9);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999998;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
}

/* =========================================== */
/* SECTION TRANSITIONS */
/* Smooth section-to-section flow */
/* =========================================== */

.section-award {
  position: relative;
  scroll-margin-top: 100px;
}

.section-award::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
  opacity: 0;
  transition: opacity var(--micro-medium) ease;
}

.section-award.visible::before {
  opacity: 1;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  /* Reduce parallax intensity on mobile */
  .parallax-fast,
  .parallax-medium,
  .parallax-slow,
  .parallax-very-slow {
    transform: none !important;
  }
  
  /* Reduce hover effects */
  .card-premium:hover {
    transform: translateY(-4px) scale(1.005);
  }
  
  .btn-award:hover,
  .btn-premium:hover {
    transform: translateY(-1px) scale(1.01);
  }
  
  /* Hide custom cursor on mobile */
  .cursor-award,
  .cursor-dot-award {
    display: none;
  }
  
  /* Reduce animation distances */
  .scroll-reveal-award {
    transform: translateY(30px) scale(0.98);
  }
  
  .stagger-reveal-award > * {
    transform: translateY(20px);
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .parallax-fast,
  .parallax-medium,
  .parallax-slow,
  .parallax-very-slow,
  .scroll-reveal-award,
  .stagger-reveal-award > *,
  .scale-reveal-award,
  .rotate-reveal-award,
  .blur-reveal-award,
  .card-premium,
  .btn-award,
  .btn-premium,
  a.award-link,
  .badge-premium,
  .img-award-hover {
    transition: opacity 0.2s ease !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  
  .scroll-reveal-award.revealed,
  .stagger-reveal-award.revealed > *,
  .scale-reveal-award.revealed,
  .rotate-reveal-award.revealed,
  .blur-reveal-award.revealed {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  
  .cursor-award,
  .cursor-dot-award {
    display: none;
  }
  
  .skeleton-award {
    animation: none;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* GPU acceleration and will-change */
/* =========================================== */

.parallax-layer,
.parallax-fast,
.parallax-medium,
.parallax-slow,
.parallax-very-slow,
.scroll-reveal-award,
.card-premium,
.btn-award,
.btn-premium {
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* =========================================== */
/* AWARD-WINNING DETAILS */
/* Subtle polish that makes a difference */
/* =========================================== */

/* Subtle glow on hover */
.card-premium:hover::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--micro-medium) ease;
}

.card-premium:hover::after {
  opacity: 1;
}

/* Text selection styling */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: inherit;
}

::-moz-selection {
  background: rgba(99, 102, 241, 0.3);
  color: inherit;
}



/* =========================================== */
/* 2. template/shared/css/enhanced-parallax-2026.css */
/* =========================================== */

/* =========================================== */
/* ENHANCED PARALLAX SCROLLING 2026 */
/* Multi-layer depth, tilt effects, scroll progress */
/* Award-winning parallax implementations */
/* =========================================== */

:root {
  /* Parallax Speed Variants */
  --parallax-speed-ultra-fast: 0.8;
  --parallax-speed-fast: 0.5;
  --parallax-speed-medium: 0.3;
  --parallax-speed-slow: 0.15;
  --parallax-speed-very-slow: 0.08;
  --parallax-speed-ultra-slow: 0.04;
  
  /* Depth Layers */
  --parallax-depth-1: 0.1;
  --parallax-depth-2: 0.2;
  --parallax-depth-3: 0.3;
  --parallax-depth-4: 0.4;
  --parallax-depth-5: 0.5;
  
  /* Tilt Intensity */
  --tilt-intensity: 15deg;
  --tilt-smoothness: 0.3s;
}

/* =========================================== */
/* MULTI-LAYER PARALLAX CONTAINER */
/* =========================================== */

.parallax-multi-layer {
  position: relative;
  overflow: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.parallax-multi-layer .parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.parallax-multi-layer .parallax-layer-1 {
  transform: translateZ(-100px) scale(1.1);
}

.parallax-multi-layer .parallax-layer-2 {
  transform: translateZ(-50px) scale(1.05);
}

.parallax-multi-layer .parallax-layer-3 {
  transform: translateZ(0px) scale(1);
}

.parallax-multi-layer .parallax-layer-4 {
  transform: translateZ(50px) scale(0.95);
}

.parallax-multi-layer .parallax-layer-5 {
  transform: translateZ(100px) scale(0.9);
}

/* =========================================== */
/* SCROLL-BASED PARALLAX */
/* Elements that move based on scroll position */
/* =========================================== */

[data-parallax-scroll] {
  will-change: transform;
  transition: transform 0.1s linear;
}

[data-parallax-scroll="fast"] {
  --parallax-speed: var(--parallax-speed-fast);
}

[data-parallax-scroll="medium"] {
  --parallax-speed: var(--parallax-speed-medium);
}

[data-parallax-scroll="slow"] {
  --parallax-speed: var(--parallax-speed-slow);
}

[data-parallax-scroll="very-slow"] {
  --parallax-speed: var(--parallax-speed-very-slow);
}

/* =========================================== */
/* DEPTH-BASED PARALLAX */
/* Parallax based on z-index depth */
/* =========================================== */

[data-parallax-depth="1"] {
  --parallax-speed: var(--parallax-depth-1);
}

[data-parallax-depth="2"] {
  --parallax-speed: var(--parallax-depth-2);
}

[data-parallax-depth="3"] {
  --parallax-speed: var(--parallax-depth-3);
}

[data-parallax-depth="4"] {
  --parallax-speed: var(--parallax-depth-4);
}

[data-parallax-depth="5"] {
  --parallax-speed: var(--parallax-depth-5);
}

/* =========================================== */
/* TILT PARALLAX EFFECT */
/* 3D tilt based on mouse position */
/* =========================================== */

[data-tilt-parallax] {
  transform-style: preserve-3d;
  transition: transform var(--tilt-smoothness) ease-out;
  will-change: transform;
}

[data-tilt-parallax]:hover {
  transform-style: preserve-3d;
}

/* =========================================== */
/* SCROLL PROGRESS PARALLAX */
/* Parallax that responds to scroll progress */
/* =========================================== */

[data-scroll-progress] {
  will-change: transform, opacity;
  transition: transform 0.1s linear, opacity 0.1s linear;
}

/* =========================================== */
/* HORIZONTAL PARALLAX */
/* Parallax that moves horizontally */
/* =========================================== */

[data-parallax-horizontal] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* =========================================== */
/* ROTATION PARALLAX */
/* Elements that rotate based on scroll */
/* =========================================== */

[data-parallax-rotate] {
  will-change: transform;
  transition: transform 0.1s linear;
  transform-origin: center center;
}

/* =========================================== */
/* SCALE PARALLAX */
/* Elements that scale based on scroll */
/* =========================================== */

[data-parallax-scale] {
  will-change: transform;
  transition: transform 0.1s linear;
  transform-origin: center center;
}

/* =========================================== */
/* OPACITY PARALLAX */
/* Elements that fade based on scroll */
/* =========================================== */

[data-parallax-opacity] {
  will-change: opacity;
  transition: opacity 0.1s linear;
}

/* =========================================== */
/* BLUR PARALLAX */
/* Elements that blur based on scroll */
/* =========================================== */

[data-parallax-blur] {
  will-change: filter;
  transition: filter 0.1s linear;
}

/* =========================================== */
/* STAGGERED PARALLAX */
/* Multiple elements with staggered parallax */
/* =========================================== */

.parallax-stagger > * {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-stagger > *:nth-child(1) {
  --parallax-speed: var(--parallax-speed-fast);
}

.parallax-stagger > *:nth-child(2) {
  --parallax-speed: var(--parallax-speed-medium);
}

.parallax-stagger > *:nth-child(3) {
  --parallax-speed: var(--parallax-speed-slow);
}

.parallax-stagger > *:nth-child(4) {
  --parallax-speed: var(--parallax-speed-very-slow);
}

/* =========================================== */
/* PARALLAX CONTAINER VARIATIONS */
/* =========================================== */

.parallax-container-vertical {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  perspective: 1000px;
}

.parallax-container-horizontal {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100vw;
  perspective: 1000px;
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

[data-parallax-scroll],
[data-parallax-depth],
[data-tilt-parallax],
[data-scroll-progress],
[data-parallax-horizontal],
[data-parallax-rotate],
[data-parallax-scale],
[data-parallax-opacity],
[data-parallax-blur] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  /* Disable parallax on mobile for performance */
  [data-parallax-scroll],
  [data-parallax-depth],
  [data-tilt-parallax],
  [data-scroll-progress],
  [data-parallax-horizontal],
  [data-parallax-rotate],
  [data-parallax-scale] {
    transform: none !important;
    transition: none !important;
  }
  
  .parallax-multi-layer .parallax-layer {
    transform: none !important;
  }
}

/* =========================================== */
/* ACCESSIBILITY */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  [data-parallax-scroll],
  [data-parallax-depth],
  [data-tilt-parallax],
  [data-scroll-progress],
  [data-parallax-horizontal],
  [data-parallax-rotate],
  [data-parallax-scale],
  [data-parallax-opacity],
  [data-parallax-blur],
  .parallax-multi-layer .parallax-layer,
  .parallax-stagger > * {
    transform: none !important;
    transition: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}


/* =========================================== */
/* 3. template/shared/css/progressive-images-2026.css */
/* =========================================== */

/* =========================================== */
/* PROGRESSIVE IMAGE LOADING 2026 */
/* Blur-up effect for better perceived performance */
/* Award-winning UX pattern */
/* =========================================== */

:root {
  --blur-up-duration: 0.5s;
  --blur-up-blur: 20px;
  --blur-up-scale: 1.1;
}

/* =========================================== */
/* PROGRESSIVE IMAGE CONTAINER */
/* =========================================== */

.progressive-image-container {
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* Placeholder (low-quality image) */
.progressive-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(var(--blur-up-blur));
  transform: scale(var(--blur-up-scale));
  transition: opacity var(--blur-up-duration) ease,
              filter var(--blur-up-duration) ease,
              transform var(--blur-up-duration) ease;
  opacity: 1;
  z-index: 1;
}

/* Full-quality image */
.progressive-image-full {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--blur-up-duration) ease;
  z-index: 2;
}

/* When full image is loaded */
.progressive-image-container.loaded .progressive-image-placeholder {
  opacity: 0;
  filter: blur(0);
  transform: scale(1);
}

.progressive-image-container.loaded .progressive-image-full {
  opacity: 1;
}

/* =========================================== */
/* SKELETON LOADER VARIANT */
/* For images without placeholder */
/* =========================================== */

.progressive-image-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #f0f0f0 0%,
    #e0e0e0 50%,
    #f0f0f0 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  z-index: 1;
}

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

.progressive-image-container.loaded .progressive-image-skeleton {
  opacity: 0;
  transition: opacity var(--blur-up-duration) ease;
}

/* =========================================== */
/* ASPECT RATIO PRESERVATION */
/* =========================================== */

.progressive-image-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.progressive-image-wrapper::before {
  content: '';
  display: block;
  padding-bottom: var(--aspect-ratio, 56.25%); /* 16:9 default */
}

.progressive-image-wrapper[data-aspect-ratio]::before {
  padding-bottom: var(--aspect-ratio);
}

.progressive-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Common aspect ratios */
.progressive-image-wrapper[data-aspect-ratio="1:1"]::before {
  padding-bottom: 100%;
}

.progressive-image-wrapper[data-aspect-ratio="4:3"]::before {
  padding-bottom: 75%;
}

.progressive-image-wrapper[data-aspect-ratio="16:9"]::before {
  padding-bottom: 56.25%;
}

.progressive-image-wrapper[data-aspect-ratio="21:9"]::before {
  padding-bottom: 42.85%;
}

/* =========================================== */
/* LAZY LOADING ENHANCEMENT */
/* =========================================== */

.progressive-image-container[loading="lazy"] {
  content-visibility: auto;
}

/* =========================================== */
/* RESPONSIVE IMAGES */
/* =========================================== */

.progressive-image-full,
.progressive-image-full img,
.progressive-image-placeholder,
.progressive-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero image compatibility */
.hero-image-container .progressive-image-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-image-container .progressive-image-container {
  width: 100%;
  height: 100%;
}

/* =========================================== */
/* LOADING INDICATOR */
/* =========================================== */

.progressive-image-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 3;
  opacity: 1;
  transition: opacity var(--blur-up-duration) ease;
}

.progressive-image-container.loaded .progressive-image-loading {
  opacity: 0;
  pointer-events: none;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* =========================================== */
/* ERROR STATE */
/* =========================================== */

.progressive-image-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.875rem;
  z-index: 4;
}

.progressive-image-error-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.progressive-image-container,
.progressive-image-placeholder,
.progressive-image-full {
  will-change: opacity, transform, filter;
  backface-visibility: hidden;
}

.progressive-image-container.loaded {
  will-change: auto;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --blur-up-blur: 15px;
    --blur-up-scale: 1.05;
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .progressive-image-placeholder,
  .progressive-image-full,
  .progressive-image-loading,
  .progressive-image-skeleton {
    transition: opacity 0.2s ease !important;
    animation: none !important;
  }
  
  .progressive-image-placeholder {
    filter: blur(0) !important;
    transform: scale(1) !important;
  }
}



/* =========================================== */
/* 4. template/shared/css/page-transitions-2026.css */
/* =========================================== */

/* =========================================== */
/* PAGE TRANSITIONS 2026 */
/* Smooth transitions between pages */
/* Award-winning UX pattern */
/* =========================================== */

:root {
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --overlay-opacity: 0.95;
}

/* =========================================== */
/* PAGE TRANSITION OVERLAY */
/* =========================================== */

.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-duration) var(--transition-easing);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-transition-overlay.active {
  opacity: var(--overlay-opacity);
  pointer-events: all;
}

/* Dark mode support */
[data-bs-theme="dark"] .page-transition-overlay {
  background: #0f172a;
}

/* =========================================== */
/* LOADING SPINNER */
/* =========================================== */

.page-transition-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(99, 102, 241, 0.2);
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: page-transition-spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
}

.page-transition-overlay.active .page-transition-spinner {
  opacity: 1;
}

@keyframes page-transition-spin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================== */
/* LOADING TEXT */
/* =========================================== */

.page-transition-text {
  margin-top: 1.5rem;
  color: #6366f1;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
  text-align: center;
}

.page-transition-overlay.active .page-transition-text {
  opacity: 1;
}

[data-bs-theme="dark"] .page-transition-text {
  color: #818cf8;
}

/* =========================================== */
/* LOADING CONTENT CONTAINER */
/* =========================================== */

.page-transition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* =========================================== */
/* FADE TRANSITION */
/* =========================================== */

.page-transition-fade {
  animation: page-transition-fade-out var(--transition-duration) var(--transition-easing);
}

@keyframes page-transition-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* =========================================== */
/* SLIDE TRANSITION */
/* =========================================== */

.page-transition-slide {
  animation: page-transition-slide-out var(--transition-duration) var(--transition-easing);
}

@keyframes page-transition-slide-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* Slide from right */
.page-transition-slide-right {
  animation: page-transition-slide-out-right var(--transition-duration) var(--transition-easing);
}

@keyframes page-transition-slide-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30px);
  }
}

/* =========================================== */
/* SCALE TRANSITION */
/* =========================================== */

.page-transition-scale {
  animation: page-transition-scale-out var(--transition-duration) var(--transition-easing);
}

@keyframes page-transition-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* =========================================== */
/* BLUR TRANSITION */
/* =========================================== */

.page-transition-blur {
  animation: page-transition-blur-out var(--transition-duration) var(--transition-easing);
}

@keyframes page-transition-blur-out {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(10px);
  }
}

/* =========================================== */
/* VIEW TRANSITIONS API SUPPORT */
/* =========================================== */

@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: page-transition-fade-out var(--transition-duration) var(--transition-easing);
  }
  
  ::view-transition-new(root) {
    animation: page-transition-fade-in var(--transition-duration) var(--transition-easing);
  }
  
  @keyframes page-transition-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* =========================================== */
/* PROGRESS INDICATOR */
/* =========================================== */

.page-transition-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
  transition: width 0.3s ease;
  z-index: 100000;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  .page-transition-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }
  
  .page-transition-text {
    font-size: 0.75rem;
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay {
    transition: opacity 0.2s ease !important;
  }
  
  .page-transition-fade,
  .page-transition-slide,
  .page-transition-slide-right,
  .page-transition-scale,
  .page-transition-blur {
    animation: none !important;
  }
  
  .page-transition-spinner {
    animation: none !important;
  }
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.page-transition-overlay {
  will-change: opacity;
  backface-visibility: hidden;
}

.page-transition-overlay:not(.active) {
  will-change: auto;
}






/* =========================================== */
/* TEMPLATE-ACCESSIBILITY-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.865Z */
/* Combines 3 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/mobile-design-enhancements-2026.css */
/* =========================================== */

/* =========================================== */
/* MOBILE DESIGN ENHANCEMENTS 2026 */
/* Mobile-first typography, color contrast, spacing */
/* Award-winning mobile design system */
/* =========================================== */

:root {
  /* =========================================== */
  /* MOBILE SPACING SYSTEM */
  /* =========================================== */
  --mobile-spacing-xs: 0.5rem;    /* 8px */
  --mobile-spacing-sm: 0.75rem;   /* 12px */
  --mobile-spacing-md: 1rem;      /* 16px */
  --mobile-spacing-lg: 1.5rem;    /* 24px */
  --mobile-spacing-xl: 2rem;      /* 32px */
  --mobile-spacing-2xl: 3rem;    /* 48px */
  --mobile-spacing-3xl: 4rem;    /* 64px */
  
  /* =========================================== */
  /* MOBILE TYPOGRAPHY SCALE */
  /* =========================================== */
  --mobile-font-size-xs: clamp(0.75rem, 2vw, 0.875rem);    /* 12-14px */
  --mobile-font-size-sm: clamp(0.875rem, 2.5vw, 1rem);      /* 14-16px */
  --mobile-font-size-base: clamp(1rem, 4vw, 1.125rem);      /* 16-18px */
  --mobile-font-size-lg: clamp(1.125rem, 4.5vw, 1.25rem);   /* 18-20px */
  --mobile-font-size-xl: clamp(1.25rem, 5vw, 1.5rem);      /* 20-24px */
  --mobile-font-size-2xl: clamp(1.5rem, 6vw, 2rem);        /* 24-32px */
  --mobile-font-size-3xl: clamp(1.75rem, 8vw, 2.5rem);     /* 28-40px */
  --mobile-font-size-4xl: clamp(2rem, 10vw, 3rem);         /* 32-48px */
  
  /* Mobile line heights */
  --mobile-line-height-tight: 1.2;
  --mobile-line-height-normal: 1.5;
  --mobile-line-height-relaxed: 1.75;
  
  /* =========================================== */
  /* MOBILE COLOR CONTRAST (WCAG AA) */
  /* =========================================== */
  /* Enhanced contrast for mobile readability */
  --mobile-text-primary: #1e293b;        /* WCAG AA: 4.5:1 on white */
  --mobile-text-secondary: #475569;     /* WCAG AA: 4.5:1 on white */
  --mobile-text-muted: #64748b;         /* WCAG AA: 4.5:1 on white */
  --mobile-bg-primary: #ffffff;
  --mobile-bg-secondary: #f8fafc;
  --mobile-border: #e2e8f0;
  
  /* Dark mode mobile colors */
  --mobile-text-primary-dark: #f1f5f9;  /* WCAG AA: 4.5:1 on dark */
  --mobile-text-secondary-dark: #cbd5e1; /* WCAG AA: 4.5:1 on dark */
  --mobile-text-muted-dark: #94a3b8;    /* WCAG AA: 4.5:1 on dark */
  --mobile-bg-primary-dark: #0f172a;
  --mobile-bg-secondary-dark: #1e293b;
  --mobile-border-dark: #334155;
}

/* =========================================== */
/* MOBILE-FIRST TYPOGRAPHY SCALE */
/* =========================================== */

@media (max-width: 768px) {
  /* Base typography */
  html {
    font-size: 16px; /* Prevent iOS zoom on input focus */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  
  body {
    font-size: var(--mobile-font-size-base);
    line-height: var(--mobile-line-height-normal);
    color: var(--mobile-text-primary);
  }
  
  /* Headings - Mobile-first fluid typography */
  h1, .h1 {
    font-size: var(--mobile-font-size-4xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
    font-weight: 700 !important;
    margin-bottom: var(--mobile-spacing-lg) !important;
    letter-spacing: -0.02em;
  }
  
  h2, .h2 {
    font-size: var(--mobile-font-size-3xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
    font-weight: 700 !important;
    margin-bottom: var(--mobile-spacing-md) !important;
    letter-spacing: -0.01em;
  }
  
  h3, .h3 {
    font-size: var(--mobile-font-size-2xl) !important;
    line-height: var(--mobile-line-height-normal) !important;
    font-weight: 600 !important;
    margin-bottom: var(--mobile-spacing-md) !important;
  }
  
  h4, .h4 {
    font-size: var(--mobile-font-size-xl) !important;
    line-height: var(--mobile-line-height-normal) !important;
    font-weight: 600 !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
  }
  
  h5, .h5 {
    font-size: var(--mobile-font-size-lg) !important;
    line-height: var(--mobile-line-height-normal) !important;
    font-weight: 600 !important;
    margin-bottom: var(--mobile-spacing-sm) !important;
  }
  
  h6, .h6 {
    font-size: var(--mobile-font-size-base) !important;
    line-height: var(--mobile-line-height-normal) !important;
    font-weight: 600 !important;
    margin-bottom: var(--mobile-spacing-xs) !important;
  }
  
  /* Paragraphs */
  p {
    font-size: var(--mobile-font-size-base);
    line-height: var(--mobile-line-height-relaxed);
    margin-bottom: var(--mobile-spacing-md);
  }
  
  /* Small text */
  small, .small {
    font-size: var(--mobile-font-size-sm);
    line-height: var(--mobile-line-height-normal);
  }
  
  /* Lead text */
  .lead {
    font-size: var(--mobile-font-size-lg);
    line-height: var(--mobile-line-height-relaxed);
    font-weight: 400;
  }
  
  /* Display headings */
  .display-1 {
    font-size: var(--mobile-font-size-4xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
  }
  
  .display-2 {
    font-size: var(--mobile-font-size-3xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
  }
  
  .display-3 {
    font-size: var(--mobile-font-size-2xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
  }
  
  .display-4 {
    font-size: var(--mobile-font-size-xl) !important;
    line-height: var(--mobile-line-height-tight) !important;
  }
}

/* =========================================== */
/* MOBILE COLOR CONTRAST ENHANCEMENTS */
/* =========================================== */

@media (max-width: 768px) {
  /* Light mode - Enhanced contrast */
  body {
    color: var(--mobile-text-primary);
    background-color: var(--mobile-bg-primary);
  }
  
  /* Text colors */
  .text-muted {
    color: var(--mobile-text-muted) !important;
  }
  
  .text-secondary {
    color: var(--mobile-text-secondary) !important;
  }
  
  /* Links - Enhanced contrast */
  a {
    color: #2563eb; /* WCAG AA: 4.5:1 on white */
    text-decoration: none;
  }
  
  a:hover, a:focus {
    color: #1d4ed8; /* Darker for hover */
    text-decoration: underline;
  }
  
  /* Buttons - Enhanced contrast */
  .btn-primary {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
  }
  
  .btn-primary:hover, .btn-primary:focus {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
  }
  
  /* Borders - Enhanced visibility */
  .border {
    border-color: var(--mobile-border) !important;
  }
  
  /* Cards - Enhanced contrast */
  .card {
    background-color: var(--mobile-bg-primary);
    border-color: var(--mobile-border);
    color: var(--mobile-text-primary);
  }
  
  .card-text {
    color: var(--mobile-text-secondary);
  }
  
  /* Forms - Enhanced contrast */
  .form-label {
    color: var(--mobile-text-primary);
    font-weight: 500;
  }
  
  .form-control {
    color: var(--mobile-text-primary);
    background-color: var(--mobile-bg-primary);
    border-color: var(--mobile-border);
  }
  
  .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
  }
  
  .form-text {
    color: var(--mobile-text-muted);
  }
  
  /* Dark mode - Enhanced contrast */
  [data-bs-theme="dark"] {
    color: var(--mobile-text-primary-dark);
    background-color: var(--mobile-bg-primary-dark);
  }
  
  [data-bs-theme="dark"] .text-muted {
    color: var(--mobile-text-muted-dark) !important;
  }
  
  [data-bs-theme="dark"] .text-secondary {
    color: var(--mobile-text-secondary-dark) !important;
  }
  
  [data-bs-theme="dark"] a {
    color: #60a5fa; /* WCAG AA: 4.5:1 on dark */
  }
  
  [data-bs-theme="dark"] a:hover, [data-bs-theme="dark"] a:focus {
    color: #93c5fd; /* Lighter for hover */
  }
  
  [data-bs-theme="dark"] .card {
    background-color: var(--mobile-bg-secondary-dark);
    border-color: var(--mobile-border-dark);
    color: var(--mobile-text-primary-dark);
  }
  
  [data-bs-theme="dark"] .form-control {
    color: var(--mobile-text-primary-dark);
    background-color: var(--mobile-bg-secondary-dark);
    border-color: var(--mobile-border-dark);
  }
  
  [data-bs-theme="dark"] .form-control:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.25);
  }
}

/* =========================================== */
/* MOBILE SPACING SYSTEM */
/* =========================================== */

@media (max-width: 768px) {
  /* Margin utilities */
  .mobile-m-xs { margin: var(--mobile-spacing-xs) !important; }
  .mobile-m-sm { margin: var(--mobile-spacing-sm) !important; }
  .mobile-m-md { margin: var(--mobile-spacing-md) !important; }
  .mobile-m-lg { margin: var(--mobile-spacing-lg) !important; }
  .mobile-m-xl { margin: var(--mobile-spacing-xl) !important; }
  .mobile-m-2xl { margin: var(--mobile-spacing-2xl) !important; }
  .mobile-m-3xl { margin: var(--mobile-spacing-3xl) !important; }
  
  /* Margin top */
  .mobile-mt-xs { margin-top: var(--mobile-spacing-xs) !important; }
  .mobile-mt-sm { margin-top: var(--mobile-spacing-sm) !important; }
  .mobile-mt-md { margin-top: var(--mobile-spacing-md) !important; }
  .mobile-mt-lg { margin-top: var(--mobile-spacing-lg) !important; }
  .mobile-mt-xl { margin-top: var(--mobile-spacing-xl) !important; }
  .mobile-mt-2xl { margin-top: var(--mobile-spacing-2xl) !important; }
  .mobile-mt-3xl { margin-top: var(--mobile-spacing-3xl) !important; }
  
  /* Margin bottom */
  .mobile-mb-xs { margin-bottom: var(--mobile-spacing-xs) !important; }
  .mobile-mb-sm { margin-bottom: var(--mobile-spacing-sm) !important; }
  .mobile-mb-md { margin-bottom: var(--mobile-spacing-md) !important; }
  .mobile-mb-lg { margin-bottom: var(--mobile-spacing-lg) !important; }
  .mobile-mb-xl { margin-bottom: var(--mobile-spacing-xl) !important; }
  .mobile-mb-2xl { margin-bottom: var(--mobile-spacing-2xl) !important; }
  .mobile-mb-3xl { margin-bottom: var(--mobile-spacing-3xl) !important; }
  
  /* Margin left */
  .mobile-ml-xs { margin-left: var(--mobile-spacing-xs) !important; }
  .mobile-ml-sm { margin-left: var(--mobile-spacing-sm) !important; }
  .mobile-ml-md { margin-left: var(--mobile-spacing-md) !important; }
  .mobile-ml-lg { margin-left: var(--mobile-spacing-lg) !important; }
  .mobile-ml-xl { margin-left: var(--mobile-spacing-xl) !important; }
  
  /* Margin right */
  .mobile-mr-xs { margin-right: var(--mobile-spacing-xs) !important; }
  .mobile-mr-sm { margin-right: var(--mobile-spacing-sm) !important; }
  .mobile-mr-md { margin-right: var(--mobile-spacing-md) !important; }
  .mobile-mr-lg { margin-right: var(--mobile-spacing-lg) !important; }
  .mobile-mr-xl { margin-right: var(--mobile-spacing-xl) !important; }
  
  /* Padding utilities */
  .mobile-p-xs { padding: var(--mobile-spacing-xs) !important; }
  .mobile-p-sm { padding: var(--mobile-spacing-sm) !important; }
  .mobile-p-md { padding: var(--mobile-spacing-md) !important; }
  .mobile-p-lg { padding: var(--mobile-spacing-lg) !important; }
  .mobile-p-xl { padding: var(--mobile-spacing-xl) !important; }
  .mobile-p-2xl { padding: var(--mobile-spacing-2xl) !important; }
  .mobile-p-3xl { padding: var(--mobile-spacing-3xl) !important; }
  
  /* Padding top */
  .mobile-pt-xs { padding-top: var(--mobile-spacing-xs) !important; }
  .mobile-pt-sm { padding-top: var(--mobile-spacing-sm) !important; }
  .mobile-pt-md { padding-top: var(--mobile-spacing-md) !important; }
  .mobile-pt-lg { padding-top: var(--mobile-spacing-lg) !important; }
  .mobile-pt-xl { padding-top: var(--mobile-spacing-xl) !important; }
  .mobile-pt-2xl { padding-top: var(--mobile-spacing-2xl) !important; }
  .mobile-pt-3xl { padding-top: var(--mobile-spacing-3xl) !important; }
  
  /* Padding bottom */
  .mobile-pb-xs { padding-bottom: var(--mobile-spacing-xs) !important; }
  .mobile-pb-sm { padding-bottom: var(--mobile-spacing-sm) !important; }
  .mobile-pb-md { padding-bottom: var(--mobile-spacing-md) !important; }
  .mobile-pb-lg { padding-bottom: var(--mobile-spacing-lg) !important; }
  .mobile-pb-xl { padding-bottom: var(--mobile-spacing-xl) !important; }
  .mobile-pb-2xl { padding-bottom: var(--mobile-spacing-2xl) !important; }
  .mobile-pb-3xl { padding-bottom: var(--mobile-spacing-3xl) !important; }
  
  /* Padding left */
  .mobile-pl-xs { padding-left: var(--mobile-spacing-xs) !important; }
  .mobile-pl-sm { padding-left: var(--mobile-spacing-sm) !important; }
  .mobile-pl-md { padding-left: var(--mobile-spacing-md) !important; }
  .mobile-pl-lg { padding-left: var(--mobile-spacing-lg) !important; }
  .mobile-pl-xl { padding-left: var(--mobile-spacing-xl) !important; }
  
  /* Padding right */
  .mobile-pr-xs { padding-right: var(--mobile-spacing-xs) !important; }
  .mobile-pr-sm { padding-right: var(--mobile-spacing-sm) !important; }
  .mobile-pr-md { padding-right: var(--mobile-spacing-md) !important; }
  .mobile-pr-lg { padding-right: var(--mobile-spacing-lg) !important; }
  .mobile-pr-xl { padding-right: var(--mobile-spacing-xl) !important; }
  
  /* Gap utilities */
  .mobile-gap-xs { gap: var(--mobile-spacing-xs) !important; }
  .mobile-gap-sm { gap: var(--mobile-spacing-sm) !important; }
  .mobile-gap-md { gap: var(--mobile-spacing-md) !important; }
  .mobile-gap-lg { gap: var(--mobile-spacing-lg) !important; }
  .mobile-gap-xl { gap: var(--mobile-spacing-xl) !important; }
  .mobile-gap-2xl { gap: var(--mobile-spacing-2xl) !important; }
  
  /* =========================================== */
  /* AUTOMATIC SPACING ADJUSTMENTS */
  /* =========================================== */
  
  /* Sections - Optimized spacing */
  section {
    padding-top: var(--mobile-spacing-xl);
    padding-bottom: var(--mobile-spacing-xl);
  }
  
  /* Containers - Optimized padding */
  .container {
    padding-left: var(--mobile-spacing-md);
    padding-right: var(--mobile-spacing-md);
  }
  
  /* Cards - Optimized spacing */
  .card {
    margin-bottom: var(--mobile-spacing-md);
  }
  
  .card-body {
    padding: var(--mobile-spacing-md);
  }
  
  .card-header {
    padding: var(--mobile-spacing-md);
  }
  
  .card-footer {
    padding: var(--mobile-spacing-md);
  }
  
  /* Buttons - Optimized spacing */
  .btn {
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    min-height: 44px; /* WCAG AAA touch target */
  }
  
  .btn-lg {
    padding: var(--mobile-spacing-md) var(--mobile-spacing-lg);
    min-height: 48px;
  }
  
  .btn-sm {
    padding: var(--mobile-spacing-xs) var(--mobile-spacing-sm);
    min-height: 40px;
  }
  
  /* Forms - Optimized spacing */
  .form-group {
    margin-bottom: var(--mobile-spacing-md);
  }
  
  .form-control {
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
    min-height: 44px; /* WCAG AAA touch target */
  }
  
  .input-group {
    margin-bottom: var(--mobile-spacing-md);
  }
  
  /* Lists - Optimized spacing */
  ul, ol {
    margin-bottom: var(--mobile-spacing-md);
    padding-left: var(--mobile-spacing-lg);
  }
  
  li {
    margin-bottom: var(--mobile-spacing-xs);
  }
  
  /* Navigation - Optimized spacing */
  .navbar {
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md);
  }
  
  .nav-link {
    padding: var(--mobile-spacing-sm) var(--mobile-spacing-md) !important;
    min-height: 44px; /* WCAG AAA touch target */
  }
  
  /* Footer - Optimized spacing */
  footer {
    padding: var(--mobile-spacing-xl) var(--mobile-spacing-md);
  }
  
  /* Hero sections - Optimized spacing */
  .hero-section {
    padding: var(--mobile-spacing-2xl) var(--mobile-spacing-md);
  }
  
  /* Grid gaps - Optimized */
  .row.g-2 { --bs-gutter-y: var(--mobile-spacing-xs); --bs-gutter-x: var(--mobile-spacing-xs); }
  .row.g-3 { --bs-gutter-y: var(--mobile-spacing-sm); --bs-gutter-x: var(--mobile-spacing-sm); }
  .row.g-4 { --bs-gutter-y: var(--mobile-spacing-md); --bs-gutter-x: var(--mobile-spacing-md); }
  .row.g-5 { --bs-gutter-y: var(--mobile-spacing-lg); --bs-gutter-x: var(--mobile-spacing-lg); }
}

/* =========================================== */
/* TABLET OPTIMIZATIONS */
/* =========================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Slightly larger spacing for tablets */
  :root {
    --mobile-spacing-xs: 0.625rem;   /* 10px */
    --mobile-spacing-sm: 0.875rem;  /* 14px */
    --mobile-spacing-md: 1.25rem;   /* 20px */
    --mobile-spacing-lg: 2rem;      /* 32px */
    --mobile-spacing-xl: 2.5rem;    /* 40px */
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  @media (max-width: 768px) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* =========================================== */
/* HIGH CONTRAST MODE SUPPORT */
/* =========================================== */

@media (prefers-contrast: high) {
  @media (max-width: 768px) {
    :root {
      --mobile-text-primary: #000000;
      --mobile-text-secondary: #333333;
      --mobile-text-muted: #666666;
      --mobile-bg-primary: #ffffff;
      --mobile-border: #000000;
    }
    
    [data-bs-theme="dark"] {
      --mobile-text-primary-dark: #ffffff;
      --mobile-text-secondary-dark: #cccccc;
      --mobile-text-muted-dark: #999999;
      --mobile-bg-primary-dark: #000000;
      --mobile-border-dark: #ffffff;
    }
    
    a {
      text-decoration: underline;
    }
    
    .btn {
      border-width: 2px;
    }
  }
}






/* =========================================== */
/* 2. template/shared/css/accessibility-2026.css */
/* =========================================== */

/* =========================================== */
/* ACCESSIBILITY ENHANCEMENTS 2026 */
/* Focus management, ARIA improvements, keyboard navigation */
/* WCAG 2.1 AA compliant */
/* =========================================== */

:root {
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: #6366f1;
  --focus-ring-color-dark: #818cf8;
}

/* =========================================== */
/* FOCUS INDICATORS */
/* =========================================== */

/* Remove default focus outline */
*:focus {
  outline: none;
}

/* Custom focus ring */
*:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: 4px;
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(99, 102, 241, 0.2);
}

/* Focus ring for cards */
.card:focus-visible,
.card-premium:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(99, 102, 241, 0.2),
              0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Focus ring for buttons */
.btn:focus-visible,
.btn-premium:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) rgba(99, 102, 241, 0.3);
}

/* =========================================== */
/* SKIP LINKS */
/* =========================================== */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100000;
  padding: 0.75rem 1.5rem;
  background: #1e293b;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
  outline: var(--focus-ring-width) solid #ffffff;
  outline-offset: var(--focus-ring-offset);
}

/* =========================================== */
/* FOCUS TRAP FOR MODALS */
/* =========================================== */

.modal:focus-within,
[role="dialog"]:focus-within {
  /* Ensure focus stays within modal */
}

.modal:focus-within *:focus-visible {
  outline-color: var(--focus-ring-color);
}

/* =========================================== */
/* ARIA LIVE REGIONS */
/* =========================================== */

[aria-live] {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[aria-live="polite"] {
  /* Polite announcements */
}

[aria-live="assertive"] {
  /* Urgent announcements */
}

/* =========================================== */
/* KEYBOARD NAVIGATION HINTS */
/* =========================================== */

.keyboard-hint {
  position: absolute;
  bottom: -1.5rem;
  left: 0;
  font-size: 0.75rem;
  color: #64748b;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.interactive-element:focus-visible ~ .keyboard-hint,
.interactive-element:hover ~ .keyboard-hint {
  opacity: 1;
}

/* =========================================== */
/* HIGH CONTRAST MODE */
/* =========================================== */

@media (prefers-contrast: high) {
  :root {
    --focus-ring-width: 4px;
    --focus-ring-offset: 3px;
  }
  
  *:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
  
  .btn,
  .card,
  a {
    border: 2px solid currentColor;
  }
}

/* =========================================== */
/* REDUCED MOTION */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================== */
/* SCREEN READER ONLY */
/* =========================================== */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus,
.visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* =========================================== */
/* LANDMARK REGIONS */
/* =========================================== */

main,
[role="main"] {
  outline: none; /* Remove focus outline from main */
}

nav,
[role="navigation"] {
  outline: none;
}

/* =========================================== */
/* FORM ACCESSIBILITY */
/* =========================================== */

.form-label {
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
}

.form-label.required::after {
  content: ' *';
  color: #ef4444;
  font-weight: 700;
}

.invalid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #ef4444;
}

.valid-feedback {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #10b981;
}

/* =========================================== */
/* BUTTON ACCESSIBILITY */
/* =========================================== */

button:not([type]),
button[type="button"],
button[type="submit"] {
  cursor: pointer;
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

/* =========================================== */
/* LINK ACCESSIBILITY */
/* =========================================== */

a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================== */
/* IMAGE ACCESSIBILITY */
/* =========================================== */

img[alt=""] {
  /* Decorative images */
}

img:not([alt]) {
  border: 2px dashed #ef4444;
  /* Warning for missing alt text */
}

/* =========================================== */
/* DARK MODE ACCESSIBILITY */
/* =========================================== */

[data-bs-theme="dark"] *:focus-visible {
  outline-color: var(--focus-ring-color-dark);
}

[data-bs-theme="dark"] .skip-link {
  background: #0f172a;
  color: #f1f5f9;
}

/* =========================================== */
/* RESPONSIVE ACCESSIBILITY */
/* =========================================== */

@media (max-width: 768px) {
  .skip-link {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* =========================================== */
/* PRINT ACCESSIBILITY */
/* =========================================== */

@media print {
  .skip-link,
  .keyboard-hint,
  [aria-hidden="true"] {
    display: none !important;
  }
  
  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }
}






/* =========================================== */
/* 3. template/shared/css/empty-states-2026.css */
/* =========================================== */

/* =========================================== */
/* EMPTY STATES 2026 */
/* Friendly illustrations and actionable CTAs */
/* Award-winning UX pattern */
/* =========================================== */

:root {
  --empty-state-spacing: 3rem;
  --empty-state-icon-size: 80px;
}

/* =========================================== */
/* EMPTY STATE CONTAINER */
/* =========================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--empty-state-spacing) 1.5rem;
  text-align: center;
  min-height: 300px;
}

.empty-state-compact {
  padding: 2rem 1rem;
  min-height: 200px;
}

/* =========================================== */
/* EMPTY STATE ICON/ILLUSTRATION */
/* =========================================== */

.empty-state-icon {
  width: var(--empty-state-icon-size);
  height: var(--empty-state-icon-size);
  margin-bottom: 1.5rem;
  opacity: 0.6;
  animation: empty-state-fade-in 0.6s ease-out;
}

.empty-state-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  opacity: 0.5;
}

.empty-state-icon.emoji {
  font-size: var(--empty-state-icon-size);
  line-height: 1;
  opacity: 0.8;
}

/* =========================================== */
/* EMPTY STATE CONTENT */
/* =========================================== */

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.75rem;
  animation: empty-state-fade-in 0.6s ease-out 0.1s both;
}

.empty-state-description {
  font-size: 1rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  max-width: 500px;
  line-height: 1.6;
  animation: empty-state-fade-in 0.6s ease-out 0.2s both;
}

.empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  animation: empty-state-fade-in 0.6s ease-out 0.3s both;
}

/* =========================================== */
/* EMPTY STATE VARIANTS */
/* =========================================== */

.empty-state.no-results {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
}

.empty-state.error {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 16px;
  border: 2px solid #fca5a5;
}

.empty-state.loading {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 16px;
}

.empty-state.success {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-radius: 16px;
  border: 2px solid #86efac;
}

/* =========================================== */
/* SPECIFIC EMPTY STATES */
/* =========================================== */

/* No Results */
.empty-state-no-results .empty-state-icon {
  color: #94a3b8;
}

/* No Items */
.empty-state-no-items .empty-state-icon {
  color: #cbd5e1;
}

/* Error State */
.empty-state-error .empty-state-icon {
  color: #ef4444;
}

/* Loading State */
.empty-state-loading .empty-state-icon {
  color: #3b82f6;
  animation: empty-state-pulse 2s ease-in-out infinite;
}

/* Success State */
.empty-state-success .empty-state-icon {
  color: #10b981;
}

/* =========================================== */
/* ANIMATIONS */
/* =========================================== */

@keyframes empty-state-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes empty-state-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes empty-state-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-10px);
  }
  75% {
    transform: translateX(10px);
  }
}

.empty-state-icon.shake {
  animation: empty-state-shake 0.5s ease-in-out;
}

/* =========================================== */
/* RESPONSIVE ADJUSTMENTS */
/* =========================================== */

@media (max-width: 768px) {
  :root {
    --empty-state-icon-size: 60px;
    --empty-state-spacing: 2rem;
  }
  
  .empty-state-title {
    font-size: 1.25rem;
  }
  
  .empty-state-description {
    font-size: 0.875rem;
  }
}

/* =========================================== */
/* REDUCED MOTION SUPPORT */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .empty-state-icon,
  .empty-state-title,
  .empty-state-description,
  .empty-state-actions {
    animation: none !important;
  }
  
  .empty-state-icon {
    opacity: 1 !important;
  }
}






/* =========================================== */
/* TEMPLATE-OPTIONAL-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.867Z */
/* Combines 3 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/button-glow-pulse-2026.css */
/* =========================================== */

/* =========================================== */
/* BUTTON GLOW & PULSE EFFECTS 2026 */
/* Gradient glow on hover + pulsing animation */
/* =========================================== */

/* =========================================== */
/* GLOW EFFECT - Gradient glow on hover */
/* =========================================== */

.btn-glow {
  position: relative;
  overflow: visible !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: inherit;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

.btn-glow:hover::before,
.btn-glow:focus::before {
  opacity: 0.8;
}

.btn-glow:active::before {
  opacity: 0.6;
}

/* Glow color variations for different button types */
.btn-primary.btn-glow::before {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  filter: blur(16px);
}

.btn-secondary.btn-glow::before {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  filter: blur(16px);
}

.btn-success.btn-glow::before {
  background: linear-gradient(135deg, #10b981, #34d399);
  filter: blur(16px);
}

.btn-danger.btn-glow::before {
  background: linear-gradient(135deg, #ef4444, #f87171);
  filter: blur(16px);
}

.btn-warning.btn-glow::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  filter: blur(16px);
}

.btn-info.btn-glow::before {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  filter: blur(16px);
}

.btn-outline-primary.btn-glow::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6));
  filter: blur(14px);
}

.btn-outline-secondary.btn-glow::before {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.6), rgba(156, 163, 175, 0.6));
  filter: blur(14px);
}

.btn-outline-success.btn-glow::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(52, 211, 153, 0.6));
  filter: blur(14px);
}

.btn-outline-danger.btn-glow::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(248, 113, 113, 0.6));
  filter: blur(14px);
}

.btn-outline-warning.btn-glow::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(251, 191, 36, 0.6));
  filter: blur(14px);
}

.btn-outline-info.btn-glow::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(96, 165, 250, 0.6));
  filter: blur(14px);
}

.btn-light.btn-glow::before {
  background: linear-gradient(135deg, #f9fafb, #ffffff);
  filter: blur(16px);
}

.btn-dark.btn-glow::before {
  background: linear-gradient(135deg, #1f2937, #374151);
  filter: blur(16px);
}

/* =========================================== */
/* PULSE EFFECT - Continuous pulsing animation */
/* =========================================== */

.btn-pulse {
  position: relative;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

/* Pulse color variations for different button types */
.btn-primary.btn-pulse {
  animation: pulse-glow-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-primary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

.btn-secondary.btn-pulse {
  animation: pulse-glow-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-secondary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(107, 114, 128, 0);
    transform: scale(1.02);
  }
}

.btn-success.btn-pulse {
  animation: pulse-glow-success 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-success {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    transform: scale(1.02);
  }
}

.btn-danger.btn-pulse {
  animation: pulse-glow-danger 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-danger {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
    transform: scale(1.02);
  }
}

.btn-warning.btn-pulse {
  animation: pulse-glow-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-warning {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(245, 158, 11, 0);
    transform: scale(1.02);
  }
}

.btn-info.btn-pulse {
  animation: pulse-glow-info 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-info {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    transform: scale(1.02);
  }
}

.btn-outline-primary.btn-pulse {
  animation: pulse-glow-outline-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-outline-primary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

.btn-outline-secondary.btn-pulse {
  animation: pulse-glow-outline-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-outline-secondary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(107, 114, 128, 0);
    transform: scale(1.02);
  }
}

/* =========================================== */
/* GLOW + PULSE - Combined effect */
/* =========================================== */

.btn-glow-pulse {
  position: relative;
  overflow: visible;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-glow-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: inherit;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

.btn-glow-pulse:hover::before,
.btn-glow-pulse:focus::before {
  opacity: 0.8;
}

.btn-glow-pulse:active::before {
  opacity: 0.6;
}

/* Combined effect color variations */
.btn-primary.btn-glow-pulse::before {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  filter: blur(16px);
}

.btn-primary.btn-glow-pulse {
  animation: pulse-glow-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-secondary.btn-glow-pulse::before {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  filter: blur(16px);
}

.btn-secondary.btn-glow-pulse {
  animation: pulse-glow-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-success.btn-glow-pulse::before {
  background: linear-gradient(135deg, #10b981, #34d399);
  filter: blur(16px);
}

.btn-success.btn-glow-pulse {
  animation: pulse-glow-success 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-danger.btn-glow-pulse::before {
  background: linear-gradient(135deg, #ef4444, #f87171);
  filter: blur(16px);
}

.btn-danger.btn-glow-pulse {
  animation: pulse-glow-danger 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-warning.btn-glow-pulse::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  filter: blur(16px);
}

.btn-warning.btn-glow-pulse {
  animation: pulse-glow-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-info.btn-glow-pulse::before {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  filter: blur(16px);
}

.btn-info.btn-glow-pulse {
  animation: pulse-glow-info 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =========================================== */
/* CONTAINER OVERFLOW FIXES */
/* =========================================== */

/* Ensure parent containers allow glow to show */
.collection-card-wrapper,
.collection-card,
.collection-card .card-body {
  overflow: visible !important;
}

.collection-cards-row {
  overflow: visible !important;
  padding: 16px 0 !important;
}

.collection-cards-row > [class*="col-"] {
  overflow: visible !important;
}

/* Ensure buttons in cards can show glow */
.collection-card-btn.btn-glow {
  margin: 8px !important;
  position: relative;
  z-index: 20;
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.btn-glow,
.btn-pulse,
.btn-glow-pulse {
  will-change: transform, box-shadow, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* =========================================== */
/* ACCESSIBILITY - Respect reduced motion */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .btn-pulse,
  .btn-glow-pulse {
    animation: none !important;
  }
  
  .btn-glow::before,
  .btn-glow-pulse::before {
    transition: none !important;
    opacity: 0 !important;
  }
}



/* =========================================== */
/* 2. template/shared/css/retro-nostalgic-2026.css */
/* =========================================== */

/* =========================================== */
/* RETRO-NOSTALGIC DESIGN ELEMENTS 2026 */
/* Vintage aesthetics with modern execution */
/* Award-winning UX/UI enhancement */
/* =========================================== */

/* ===== RETRO COLOR PALETTE ===== */
:root {
  --retro-orange: #ff6b35;
  --retro-yellow: #f7b801;
  --retro-teal: #00a8cc;
  --retro-pink: #ff6b9d;
  --retro-purple: #9b59b6;
  --retro-brown: #8b4513;
  --retro-cream: #fef5e7;
  --retro-paper: #f5f5dc;
  
  /* Vintage textures */
  --retro-texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ===== HAND-DRAWN BORDERS ===== */
.retro-border-hand-drawn {
  position: relative;
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  background: var(--retro-cream);
}

.retro-border-hand-drawn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed var(--retro-orange);
  pointer-events: none;
  animation: handDrawnWiggle 3s ease-in-out infinite;
}

@keyframes handDrawnWiggle {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1px, -1px) rotate(0.5deg);
  }
  50% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  75% {
    transform: translate(1px, 1px) rotate(0.3deg);
  }
}

/* ===== VINTAGE TYPOGRAPHY ===== */
.retro-typewriter {
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 18px;
  line-height: 1.6;
  color: var(--retro-brown);
  background: var(--retro-paper);
  padding: 24px;
  border-left: 4px solid var(--retro-orange);
  position: relative;
}

.retro-typewriter::before {
  content: '>';
  position: absolute;
  left: 8px;
  top: 24px;
  color: var(--retro-orange);
  animation: typewriterBlink 1s step-end infinite;
}

@keyframes typewriterBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Vintage serif headings */
.retro-heading {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--retro-brown);
  text-shadow: 2px 2px 0px var(--retro-yellow),
               4px 4px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.05em;
}

/* ===== ANALOG-STYLE PROGRESS INDICATORS ===== */
.retro-progress-analog {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
}

.retro-progress-analog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid var(--retro-brown);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--retro-orange) 0%,
    var(--retro-orange) var(--progress, 0%),
    var(--retro-cream) var(--progress, 0%),
    var(--retro-cream) 100%
  );
  mask: radial-gradient(circle, transparent 60%, black 60%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 60%);
}

.retro-progress-analog::after {
  content: attr(data-progress);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
  color: var(--retro-brown);
  font-family: 'Courier New', monospace;
}

/* Vintage meter style */
.retro-meter {
  position: relative;
  height: 40px;
  background: var(--retro-cream);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  overflow: hidden;
}

.retro-meter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--meter-value, 0%);
  background: repeating-linear-gradient(
    90deg,
    var(--retro-orange) 0px,
    var(--retro-orange) 10px,
    var(--retro-yellow) 10px,
    var(--retro-yellow) 20px
  );
  transition: width 0.5s ease;
}

.retro-meter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retro-texture-noise);
  opacity: 0.1;
  pointer-events: none;
}

/* ===== VINTAGE BADGE DESIGNS ===== */
.retro-badge {
  display: inline-block;
  padding: 8px 16px;
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
  transition: transform 0.2s ease;
}

.retro-badge:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.retro-badge::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px dashed var(--retro-orange);
  opacity: 0.5;
}

/* Vintage stamp style */
.retro-stamp {
  display: inline-block;
  padding: 12px 20px;
  background: var(--retro-cream);
  border: 4px dashed var(--retro-brown);
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: var(--retro-brown);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  transform: rotate(5deg);
}

.retro-stamp::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--retro-brown);
  opacity: 0.3;
}

/* ===== RETRO CARD DESIGNS ===== */
.retro-card {
  background: var(--retro-paper);
  border: 4px solid var(--retro-brown);
  border-radius: 0;
  padding: 24px;
  position: relative;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.retro-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.3);
}

.retro-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed var(--retro-orange);
  opacity: 0.3;
  pointer-events: none;
}

/* Vintage photo frame effect */
.retro-photo-frame {
  position: relative;
  padding: 16px;
  background: var(--retro-cream);
  border: 8px solid var(--retro-brown);
  border-radius: 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1),
              4px 4px 0px rgba(0, 0, 0, 0.2);
}

.retro-photo-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid var(--retro-brown);
  opacity: 0.5;
}

/* ===== HAND-DRAWN ILLUSTRATIONS ===== */
.retro-hand-drawn {
  position: relative;
  filter: url(#rough-paper);
}

.retro-hand-drawn svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Wobbly text effect */
.retro-wobbly-text {
  display: inline-block;
  transform: rotate(-1deg);
  animation: wobblyText 3s ease-in-out infinite;
}

@keyframes wobblyText {
  0%, 100% {
    transform: rotate(-1deg) translateY(0);
  }
  25% {
    transform: rotate(1deg) translateY(-2px);
  }
  50% {
    transform: rotate(-1deg) translateY(0);
  }
  75% {
    transform: rotate(1deg) translateY(2px);
  }
}

/* ===== VINTAGE BUTTONS ===== */
.btn-retro {
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  padding: 12px 24px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
}

.btn-retro::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px dashed var(--retro-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-retro:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
  background: var(--retro-orange);
  color: #ffffff;
}

.btn-retro:hover::before {
  opacity: 0.5;
}

.btn-retro:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/* ===== RETRO TEXTURE OVERLAYS ===== */
.retro-texture {
  position: relative;
}

.retro-texture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retro-texture-noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ===== VINTAGE COLOR SCHEME OPTION ===== */
body.retro-theme {
  --bg-primary: var(--retro-cream);
  --bg-secondary: var(--retro-paper);
  --text-primary: var(--retro-brown);
  --text-secondary: #6b4423;
  --accent-color: var(--retro-orange);
}

body.retro-theme .card,
body.retro-theme .card-premium {
  background: var(--retro-paper);
  border: 2px solid var(--retro-brown);
  border-radius: 0;
}

body.retro-theme .btn-primary {
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .retro-border-hand-drawn::before,
  .retro-typewriter::before,
  .retro-wobbly-text {
    animation: none !important;
  }
  
  .retro-badge,
  .retro-card,
  .btn-retro {
    transform: none !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .retro-progress-analog {
    width: 150px;
    height: 150px;
  }
  
  .retro-progress-analog::after {
    font-size: 24px;
  }
  
  .retro-card {
    padding: 16px;
  }
}







/* =========================================== */
/* 3. template/shared/css/immersive-3d-2026.css */
/* =========================================== */

/* =========================================== */
/* IMMERSIVE 3D ELEMENTS 2026 */
/* WebGL/Three.js enhancements for existing 3D cards */
/* Award-winning UX/UI enhancement */
/* =========================================== */

/* ===== 3D CONTAINER SETUP ===== */
.card-3d-enhanced {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PARALLAX DEPTH LAYERS ===== */
.parallax-container {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.parallax-layer-back {
  transform: translateZ(-100px) scale(1.1);
  opacity: 0.6;
}

.parallax-layer-middle {
  transform: translateZ(0px) scale(1);
  opacity: 0.8;
}

.parallax-layer-front {
  transform: translateZ(50px) scale(0.95);
  opacity: 1;
}

/* ===== 3D CARD TILT EFFECT ===== */
.card-3d-tilt {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

.card-3d-tilt:hover {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale3d(1.02, 1.02, 1.02);
}

/* ===== WEBGL PARTICLE BACKGROUND ===== */
.webgl-particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.webgl-particle-container canvas {
  width: 100%;
  height: 100%;
}

/* ===== 3D HERO BACKGROUND ===== */
.hero-3d-background {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.hero-3d-background::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(102, 126, 234, 0.1) 0%,
    transparent 50%
  );
  transform: translateZ(-50px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-3d-background:hover::before {
  opacity: 0.8;
}

/* ===== FLOATING 3D ELEMENTS ===== */
.float-3d {
  animation: float3D 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes float3D {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-20px) rotateX(5deg) rotateY(-5deg);
  }
  50% {
    transform: translateY(-10px) rotateX(0deg) rotateY(0deg);
  }
  75% {
    transform: translateY(-20px) rotateX(-5deg) rotateY(5deg);
  }
}

/* ===== 3D TRANSFORM ON SCROLL ===== */
.scroll-3d-transform {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-3d-transform.in-view {
  transform: translateZ(0) rotateX(0deg);
}

.scroll-3d-transform:not(.in-view) {
  transform: translateZ(-100px) rotateX(10deg);
  opacity: 0.5;
}

/* ===== INTERACTIVE 3D PRODUCT SHOWCASE ===== */
.product-3d-showcase {
  position: relative;
  width: 100%;
  height: 400px;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.product-3d-showcase .product-model {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) rotateX(var(--rotate-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* ===== 3D NAVIGATION ELEMENTS ===== */
.nav-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-3d:hover {
  transform: translateZ(20px) rotateY(5deg);
}

.nav-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  transform: translateZ(-10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-3d:hover::before {
  opacity: 1;
}

/* ===== DEPTH OF FIELD EFFECT ===== */
.depth-of-field {
  position: relative;
}

.depth-of-field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--focus-x, 50%) var(--focus-y, 50%),
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.depth-of-field:hover::before {
  opacity: 1;
}

/* ===== 3D SHADOW SYSTEM ===== */
.shadow-3d-enhanced {
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 -10px 30px rgba(102, 126, 234, 0.1);
}

.shadow-3d-enhanced:hover {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 -20px 50px rgba(102, 126, 234, 0.2),
    0 0 100px rgba(102, 126, 234, 0.1);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.card-3d-enhanced,
.parallax-layer,
.float-3d,
.scroll-3d-transform {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce 3D effects on low-end devices */
@media (prefers-reduced-motion: reduce) {
  .card-3d-enhanced,
  .parallax-layer,
  .float-3d,
  .scroll-3d-transform,
  .nav-3d {
    transform: none !important;
    animation: none !important;
  }
}

/* Disable 3D on mobile for performance */
@media (max-width: 768px) {
  .card-3d-enhanced,
  .parallax-layer,
  .float-3d {
    transform: none !important;
    animation: none !important;
  }
  
  .hero-3d-background::before {
    display: none;
  }
}

/* ===== WEBGL CANVAS CONTAINER ===== */
.webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.webgl-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}