/* ==========================================================================
   MURUGAN ENTERPRISES — ADVANCED MOTION & CINEMATIC INTERACTION SYSTEM
   Engineered for 100% Zero-Blank Visibility, Tactile Physics,
   and Art-Directed White Ranger × Gold Ranger Aesthetics.
   ========================================================================== */

/* 1. Bulletproof Visibility Guarantees — No Blank Screen Risk */
body,
main,
section,
[data-reveal],
.reveal-slide-up,
.reveal-slide-left,
.reveal-slide-right,
.reveal-fade,
.reveal-expand {
  opacity: 1 !important;
  visibility: visible !important;
}

html.no-gsap [data-reveal],
html.no-gsap .reveal-slide-up,
html.no-gsap .reveal-slide-left,
html.no-gsap .reveal-slide-right,
html.no-gsap .reveal-fade,
html.no-gsap .reveal-expand {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* 2. Kinetic Typography & Outline Text */
.hero-kinetic-headline {
  position: relative;
  will-change: transform;
}

.kinetic-line-1,
.kinetic-line-2 {
  display: block;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.outline-text {
  color: transparent !important;
  -webkit-text-stroke: 1.8px var(--color-metallic-gold);
  text-stroke: 1.8px var(--color-metallic-gold);
  filter: drop-shadow(0 2px 14px rgba(198, 160, 74, 0.3));
  transition: all 0.35s ease;
}

.outline-text:hover {
  -webkit-text-stroke-color: var(--color-deep-gold);
  filter: drop-shadow(0 4px 22px rgba(198, 160, 74, 0.65));
}

/* 3. Cyber-Glitch & Metallic Gold Scramble */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.is-glitching {
  color: var(--color-metallic-gold) !important;
  text-shadow: 0 0 16px var(--color-gold-glow) !important;
}

.is-glitching::before {
  left: 3px;
  text-shadow: -2px 0 #C6A04A, 0 0 12px rgba(198, 160, 74, 0.85);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-anim-1 0.45s ease forwards;
  opacity: 1;
}

.is-glitching::after {
  left: -3px;
  text-shadow: 2px 0 #96752C, 0 0 12px rgba(150, 117, 44, 0.85);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-anim-2 0.45s ease forwards;
  opacity: 1;
}

@keyframes glitch-anim-1 {
  0% { transform: translate(0); clip-path: polygon(0 15%, 100% 15%, 100% 35%, 0 35%); }
  25% { transform: translate(-5px, 2px); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
  50% { transform: translate(4px, -2px); clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); }
  75% { transform: translate(-3px, 2px); clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%); }
  100% { transform: translate(0); opacity: 0; }
}

@keyframes glitch-anim-2 {
  0% { transform: translate(0); clip-path: polygon(0 65%, 100% 65%, 100% 90%, 0 90%); }
  25% { transform: translate(5px, -2px); clip-path: polygon(0 40%, 100% 40%, 100% 70%, 0 70%); }
  50% { transform: translate(-4px, 2px); clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); }
  75% { transform: translate(2px, -2px); clip-path: polygon(0 75%, 100% 75%, 100% 95%, 0 95%); }
  100% { transform: translate(0); opacity: 0; }
}

/* 4. Animated Contour Lines Background (load.org.in style in White & Gold) */
.contour-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--color-pure-white);
  overflow: hidden;
  pointer-events: none;
}

.contour-lines {
  position: absolute;
  top: -150%;
  left: -50%;
  width: 250%;
  height: 400%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cpath d='M0,50 Q150,150 300,50 T600,50' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3Cpath d='M0,150 Q150,250 300,150 T600,150' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3Cpath d='M0,250 Q150,350 300,250 T600,250' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3Cpath d='M0,350 Q150,450 300,350 T600,350' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3Cpath d='M0,450 Q150,550 300,450 T600,450' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3Cpath d='M0,550 Q150,650 300,550 T600,550' fill='none' stroke='%23C6A04A' stroke-width='1.2' opacity='0.18'/%3E%3C/svg%3E");
  background-size: 600px 600px;
  animation: contourMove 70s linear infinite;
  transform: rotate(-8deg);
}

.contour-lines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500' viewBox='0 0 500 500'%3E%3Cpath d='M0,100 Q250,0 500,100' fill='none' stroke='%23E5D3A0' stroke-width='1' opacity='0.22'/%3E%3Cpath d='M0,200 Q250,100 500,200' fill='none' stroke='%23E5D3A0' stroke-width='1' opacity='0.22'/%3E%3Cpath d='M0,300 Q250,200 500,300' fill='none' stroke='%23E5D3A0' stroke-width='1' opacity='0.22'/%3E%3Cpath d='M0,400 Q250,300 500,400' fill='none' stroke='%23E5D3A0' stroke-width='1' opacity='0.22'/%3E%3C/svg%3E");
  background-size: 500px 500px;
  animation: contourMove 55s linear infinite reverse;
}

@keyframes contourMove {
  0% { transform: rotate(-8deg) translateY(0); }
  100% { transform: rotate(-8deg) translateY(-600px); }
}

/* ==========================================================================
   5. EFFECT A: CURSOR-FOLLOWING OPTICAL GLASS LENS (INVERT & OPTICAL WARPING)
   ========================================================================== */
.optical-glass-lens {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity, width, height;
  transition: 
    opacity 0.25s ease, 
    visibility 0.25s ease, 
    width 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
    height 0.38s cubic-bezier(0.16, 1, 0.3, 1), 
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    border-radius 0.35s ease;
  backdrop-filter: contrast(1.05) brightness(1.02);
  -webkit-backdrop-filter: contrast(1.05) brightness(1.02);
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4) 0%, rgba(248, 248, 245, 0.1) 65%, transparent 100%);
  border: 1px solid rgba(198, 160, 74, 0.45);
  box-shadow: 
    0 2px 8px rgba(198, 160, 74, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.7);
}

.optical-glass-lens.is-active {
  opacity: 1;
  visibility: visible;
}

/* Active over Hero Main Title: Dramatic Inversion & Liquid Optical Warping */
.optical-glass-lens.is-magnifying {
  width: 96px;
  height: 96px;
  border: 2px solid rgba(198, 160, 74, 0.9);
  /* Color inversion: dark text turns glowing white, light background turns dark, gold remains vibrant */
  backdrop-filter: invert(1) contrast(1.35) hue-rotate(180deg) saturate(1.4) brightness(1.05);
  -webkit-backdrop-filter: invert(1) contrast(1.35) hue-rotate(180deg) saturate(1.4) brightness(1.05);
  background: radial-gradient(
    circle at 40% 36%, 
    rgba(255, 255, 255, 0.18) 0%, 
    rgba(255, 255, 255, 0.04) 35%, 
    transparent 65%
  );
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 10px 36px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(198, 160, 74, 0.45),
    inset 0 0 18px rgba(255, 255, 255, 0.25);
  animation: lensLiquidWarp 4s ease-in-out infinite alternate;
}

/* Organic liquid surface tension distortion along bubble perimeter */
@keyframes lensLiquidWarp {
  0% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  28% {
    border-radius: 54% 46% 52% 48% / 47% 53% 48% 52%;
  }
  54% {
    border-radius: 48% 52% 46% 54% / 53% 47% 54% 46%;
  }
  78% {
    border-radius: 53% 47% 54% 46% / 49% 51% 47% 53%;
  }
  100% {
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
}

/* Internal Convex Curvature Shading & Chromatic Aberration Vignette */
.lens-warp-core {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at 38% 34%,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 55%,
    rgba(0, 0, 0, 0.22) 82%,
    rgba(198, 160, 74, 0.45) 100%
  );
  box-shadow: 
    inset 0 0 14px rgba(0, 0, 0, 0.35),
    inset 0 0 22px rgba(198, 160, 74, 0.35),
    inset 2px 2px 5px rgba(255, 220, 150, 0.55),
    inset -2px -2px 5px rgba(80, 170, 255, 0.35);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.optical-glass-lens.is-magnifying .lens-warp-core {
  opacity: 1;
  transform: scale(1);
}

.lens-shimmer {
  position: absolute;
  top: 14%;
  left: 20%;
  width: 28%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(-25deg);
  pointer-events: none;
  transition: all 0.3s ease;
}

.optical-glass-lens.is-magnifying .lens-shimmer {
  top: 10%;
  left: 16%;
  width: 32%;
  height: 24%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
}

.lens-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px dashed rgba(198, 160, 74, 0.25);
  animation: lensRingRotate 22s linear infinite;
  pointer-events: none;
  transition: inset 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.optical-glass-lens.is-magnifying .lens-ring {
  inset: -6px;
  border-color: rgba(198, 160, 74, 0.55);
  animation: lensRingRotate 14s linear infinite;
}

@keyframes lensRingRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (hover: none), (pointer: coarse) {
  .optical-glass-lens {
    display: none !important;
  }
}

/* GLOBAL CURSOR TOUCH RIPPLE */
.cursor-touch-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  border: 1px solid rgba(198, 160, 74, 0.35);
  background: radial-gradient(circle, rgba(198, 160, 74, 0.15) 0%, rgba(229, 211, 160, 0.04) 50%, transparent 80%);
  animation: touchRippleAnim 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes touchRippleAnim {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* ==========================================================================
   6. FLOATING GOLDEN PARTICLES (BACKGROUND ONLY LAYER)
   ========================================================================== */
.dust-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2; /* Clearly visible atmospheric floating layer behind cards & text (z-10) */
  pointer-events: none;
  opacity: 0.9;
}

.discover-dust-canvas {
  display: none;
}

/* ==========================================================================
   7. GAHAN RAO DRUM EFFECT: TACTILE MEMBRANE SHOCKWAVE & OSCILLATION
   ========================================================================== */
[data-drum],
.btn-juicy,
.btn-juicy-outline,
.feature-glass-card,
.playbook-item,
.metric-card,
.filter-chip,
.quality-tab-btn {
  position: relative;
  overflow: hidden;
}

.drum-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198, 160, 74, 0.42) 0%, rgba(229, 211, 160, 0.22) 45%, rgba(255, 255, 255, 0) 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: drum-ripple-expand 0.62s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
  pointer-events: none;
  z-index: 30;
}

@keyframes drum-ripple-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

.drum-vibrate {
  animation: drum-vibrate-anim 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes drum-vibrate-anim {
  0% { transform: scale(1); }
  18% { transform: scale(0.972); }
  38% { transform: scale(1.025); }
  58% { transform: scale(0.988); }
  78% { transform: scale(1.008); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   8. EFFECT C: ATMOSPHERIC GRADIENT LIGHTING LAYER
   ========================================================================== */
.ambient-lighting-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  opacity: 0.75;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform;
}

.orb-champagne {
  top: 10%;
  left: 65%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(229, 211, 160, 0.28) 0%, rgba(248, 248, 245, 0.08) 60%, transparent 80%);
  animation: orbFloat1 32s ease-in-out infinite alternate;
}

.orb-ivory {
  top: 55%;
  left: 5%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(250, 246, 237, 0.38) 0%, rgba(198, 160, 74, 0.12) 50%, transparent 80%);
  animation: orbFloat2 38s ease-in-out infinite alternate;
}

.orb-gold-soft {
  top: 80%;
  left: 60%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(198, 160, 74, 0.16) 0%, rgba(229, 211, 160, 0.06) 60%, transparent 80%);
  animation: orbFloat1 28s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-45px, 60px) scale(1.08); }
  100% { transform: translate(50px, -40px) scale(0.95); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -50px) scale(1.06); }
  100% { transform: translate(-40px, 45px) scale(0.96); }
}

/* ==========================================================================
   9. CURVY VERTICAL TIMELINE STYLING (Institutional Trust)
   ========================================================================== */
.curvy-timeline-wrapper {
  position: relative;
  width: 100%;
}

.curvy-timeline-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.curvy-trust-path {
  filter: drop-shadow(0 0 8px rgba(198, 160, 74, 0.6));
}

.timeline-step-row {
  position: relative;
  z-index: 2;
}

.timeline-node-anchor {
  position: relative;
  z-index: 5;
}

.timeline-node {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--color-metallic-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-deep-gold);
  font-size: 13px;
  box-shadow: 0 0 15px var(--color-gold-glow);
  transition: all 0.35s ease;
}

.timeline-step-row:hover .timeline-node {
  background: var(--color-metallic-gold);
  color: #FFFFFF;
  transform: scale(1.15) rotate(45deg);
  box-shadow: 0 0 25px var(--color-gold-glow);
}

.node-inner {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ==========================================================================
   10. PARTICLE EXPLOSION SPARK STYLING
   ========================================================================== */
.particle-spark {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  animation: sparkFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sparkFade {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: var(--spark-target) scale(0); opacity: 0; }
}

/* ==========================================================================
   11. GAHAN RAO DRUM-IMPACT & DUST PARTICLES INTERACTION
   ========================================================================== */
.card-dust-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1900;
}

@keyframes cardDrumImpact {
  0% { transform: scale(1) translateY(0); }
  22% { transform: scale(0.982) translateY(2px); }
  52% { transform: scale(1.008) translateY(-1px); }
  78% { transform: scale(0.996) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

.card-drum-hit {
  animation: cardDrumImpact 0.28s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Responsive Interactive Grid Background (Subtle & Elegant) */
.responsive-interactive-grid {
  position: relative;
  background-image: 
    linear-gradient(to right, rgba(198, 160, 74, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(198, 160, 74, 0.16) 1px, transparent 1px);
  background-size: 50px 50px;
}

.responsive-interactive-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--grid-mouse-x, -500px) var(--grid-mouse-y, -500px), rgba(198, 160, 74, 0.08), transparent 70%);
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 0;
}

/* Section Topographic Contour Canvas (Crisp & Harmonious) */
.section-with-topo {
  position: relative;
  overflow: hidden;
}

.section-topo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

/* Heritage & Generations Dedicated Topographic Canvas Styling */
.heritage-topo-section {
  position: relative;
  overflow: hidden;
  background-color: #FAF7F2 !important;
}

.heritage-topo-section .section-topo-canvas {
  opacity: 0.95;
  mix-blend-mode: multiply;
}

/* Dedicated Essentials Specified Dust Disintegration Canvas (Neat & Contained) */
.essentials-dust-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  opacity: 0.7;
}

.card-dust-dissolve {
  /* Retained without opacity/filter override to avoid fighting GSAP 3D transforms */
}

/* ==========================================================================
   12. DISCOVER PRODUCTS NORMAL GRID CARDS (Normal webapp cards)
   ========================================================================== */
#catalogue-items-grid {
  width: 100%;
}

#catalogue-items-grid .feature-glass-card {
  position: relative;
  width: 100%;
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

#catalogue-items-grid .feature-glass-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-metallic-gold);
  box-shadow: 0 16px 40px rgba(198, 160, 74, 0.18), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   SHINING GLOSSY GOLDEN EFFECTS ON HOVER (FABRIC & MATERIAL MATTERS)
   Slowed, stately & luxurious transition timing for maximum elegance
   ========================================================================== */
.specimen-card {
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  border: 1.5px solid rgba(198, 160, 74, 0.28) !important;
  transition: 
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
    border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
    box-shadow 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
    background 0.6s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

/* Diagonal 24K Liquid Gold Specular Gloss Beam - Controlled, gentle silk glide */
.specimen-card::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -70%;
  width: 240%;
  height: 220%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.65) 47%,
    rgba(245, 226, 165, 0.75) 50%,
    rgba(198, 160, 74, 0.5) 53%,
    transparent 60%,
    transparent 100%
  );
  transform: rotate(-18deg) translateX(-110%);
  opacity: 0;
  transition: transform 1.35s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.6s ease;
  pointer-events: none;
  z-index: 5;
}

/* Radiant Gold Inner Core Sheen */
.specimen-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(229, 211, 160, 0.25) 0%, rgba(198, 160, 74, 0.06) 55%, transparent 85%);
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.specimen-card:hover {
  transform: translateY(-5px);
  border-color: #C6A04A !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  box-shadow: 
    0 18px 42px rgba(198, 160, 74, 0.16),
    0 6px 16px rgba(0, 0, 0, 0.03),
    0 0 28px rgba(229, 211, 160, 0.32),
    inset 0 1px 2px rgba(255, 255, 255, 0.95),
    inset 0 0 16px rgba(229, 211, 160, 0.15) !important;
}

.specimen-card:hover::before {
  opacity: 0.9;
  transform: rotate(-18deg) translateX(110%);
}

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

/* ==========================================================================
   13. REDUCED MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .contour-lines,
  .contour-lines::before,
  .ambient-orb,
  .lens-ring,
  .drum-vibrate,
  .card-drum-hit {
    animation: none !important;
  }
  .optical-glass-lens {
    display: none !important;
  }
  .dust-canvas,
  .card-dust-canvas,
  .section-topo-canvas,
  .essentials-dust-canvas {
    display: none !important;
  }
}