/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* CoreSolutions vertical marquee */
@keyframes marqueeUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes marqueeDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}
.marquee-up {
  animation: marqueeUp var(--marquee-duration, 18s) linear infinite;
  will-change: transform;
}
.marquee-down {
  animation: marqueeDown var(--marquee-duration, 18s) linear infinite;
  will-change: transform;
}
.photo-col-fade {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 18%,
    black 82%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}
.marquee-dur-15 {
  --marquee-duration: 15s;
}
.marquee-dur-16 {
  --marquee-duration: 16s;
}
.marquee-dur-20 {
  --marquee-duration: 20s;
}
.marquee-dur-22 {
  --marquee-duration: 22s;
}

body {
  /* Prevent layout shift from scrollbar */
  overflow-y: scroll;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Range Slider Styling */
input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #2d4de0;
  cursor: pointer;
  margin-top: -8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 2px;
}

input[type='range']:focus {
  outline: none;
}

/* A4 Paper Resume */
.resume-paper {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
}

/* CV Preview — dynamic scale wrapper */
.cv-preview-wrapper {
  width: var(--preview-w);
  height: var(--preview-h);
  position: relative;
  flex-shrink: 0;
}

.cv-preview-page {
  width: 210mm;
  min-height: 297mm;
  transform: scale(var(--preview-scale));
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

/* Glassmorphism utilities */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ═══ Custom Pencil Loader ═══ */
.pencil {
  display: block;
  width: 10em;
  height: 10em;
}

.pencil__body1,
.pencil__body2,
.pencil__body3,
.pencil__eraser,
.pencil__eraser-skew,
.pencil__point,
.pencil__rotate,
.pencil__stroke {
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.pencil__body1,
.pencil__body2,
.pencil__body3 {
  transform: rotate(-90deg);
}

.pencil__body1 {
  animation-name: pencilBody1;
}

.pencil__body2 {
  animation-name: pencilBody2;
}

.pencil__body3 {
  animation-name: pencilBody3;
}

.pencil__eraser {
  animation-name: pencilEraser;
  transform: rotate(-90deg) translate(49px, 0);
}

.pencil__eraser-skew {
  animation-name: pencilEraserSkew;
  animation-timing-function: ease-in-out;
}

.pencil__point {
  animation-name: pencilPoint;
  transform: rotate(-90deg) translate(49px, -30px);
}

.pencil__rotate {
  animation-name: pencilRotate;
}

.pencil__stroke {
  animation-name: pencilStroke;
  transform: translate(100px, 100px) rotate(-113deg);
}

@keyframes pencilBody1 {
  from,
  to {
    stroke-dashoffset: 351.86;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 150.8;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody2 {
  from,
  to {
    stroke-dashoffset: 406.84;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 174.36;
    transform: rotate(-225deg);
  }
}

@keyframes pencilBody3 {
  from,
  to {
    stroke-dashoffset: 296.88;
    transform: rotate(-90deg);
  }

  50% {
    stroke-dashoffset: 127.23;
    transform: rotate(-225deg);
  }
}

@keyframes pencilEraser {
  from,
  to {
    transform: rotate(-45deg) translate(49px, 0);
  }

  50% {
    transform: rotate(0deg) translate(49px, 0);
  }
}

@keyframes pencilEraserSkew {
  from,
  32.5%,
  67.5%,
  to {
    transform: skewX(0);
  }

  35%,
  65% {
    transform: skewX(-4deg);
  }

  37.5%,
  62.5% {
    transform: skewX(8deg);
  }

  40%,
  45%,
  50%,
  55%,
  60% {
    transform: skewX(-15deg);
  }

  42.5%,
  47.5%,
  52.5%,
  57.5% {
    transform: skewX(15deg);
  }
}

@keyframes pencilPoint {
  from,
  to {
    transform: rotate(-90deg) translate(49px, -30px);
  }

  50% {
    transform: rotate(-225deg) translate(49px, -30px);
  }
}

@keyframes pencilRotate {
  from {
    transform: translate(100px, 100px) rotate(0);
  }

  to {
    transform: translate(100px, 100px) rotate(720deg);
  }
}

@keyframes pencilStroke {
  from {
    stroke-dashoffset: 439.82;
    transform: translate(100px, 100px) rotate(-113deg);
  }

  50% {
    stroke-dashoffset: 164.93;
    transform: translate(100px, 100px) rotate(-113deg);
  }

  75%,
  to {
    stroke-dashoffset: 439.82;
    transform: translate(100px, 100px) rotate(112deg);
  }
}

/* ═══ Custom Pegtop Loader ═══ */
.loader {
  --fill-color: #4f46e5;
  --shine-color: #4f46e533;
  transform: scale(0.6);
  width: 100px;
  height: auto;
  position: relative;
  filter: drop-shadow(0 0 10px var(--shine-color));
}

.loader #pegtopone {
  position: absolute;
  animation: flowe-one 1s linear infinite;
}

.loader #pegtoptwo {
  position: absolute;
  opacity: 0;
  transform: scale(0) translateY(-200px) translateX(-100px);
  animation: flowe-two 1s linear infinite;
  animation-delay: 0.3s;
}

.loader #pegtopthree {
  position: absolute;
  opacity: 0;
  transform: scale(0) translateY(-200px) translateX(100px);
  animation: flowe-three 1s linear infinite;
  animation-delay: 0.6s;
}

.loader svg g path:first-child {
  fill: var(--fill-color);
}

@keyframes flowe-one {
  0% {
    transform: scale(0.5) translateY(-200px);
    opacity: 0;
  }

  25% {
    transform: scale(0.75) translateY(-100px);
    opacity: 1;
  }

  50% {
    transform: scale(1) translateY(0px);
    opacity: 1;
  }

  75% {
    transform: scale(0.5) translateY(50px);
    opacity: 1;
  }

  100% {
    transform: scale(0) translateY(100px);
    opacity: 0;
  }
}

@keyframes flowe-two {
  0% {
    transform: scale(0.5) rotateZ(-10deg) translateY(-200px) translateX(-100px);
    opacity: 0;
  }

  25% {
    transform: scale(1) rotateZ(-5deg) translateY(-100px) translateX(-50px);
    opacity: 1;
  }

  50% {
    transform: scale(1) rotateZ(0deg) translateY(0px) translateX(-25px);
    opacity: 1;
  }

  75% {
    transform: scale(0.5) rotateZ(5deg) translateY(50px) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotateZ(10deg) translateY(100px) translateX(25px);
    opacity: 0;
  }
}

@keyframes flowe-three {
  0% {
    transform: scale(0.5) rotateZ(10deg) translateY(-200px) translateX(100px);
    opacity: 0;
  }

  25% {
    transform: scale(1) rotateZ(5deg) translateY(-100px) translateX(50px);
    opacity: 1;
  }

  50% {
    transform: scale(1) rotateZ(0deg) translateY(0px) translateX(25px);
    opacity: 1;
  }

  75% {
    transform: scale(0.5) rotateZ(-5deg) translateY(50px) translateX(0px);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotateZ(-10deg) translateY(100px) translateX(-25px);
    opacity: 0;
  }
}

/* Integrations row — 3D card tilt requires perspective on the parent */
.integrations-row {
  perspective: 1200px;
}

/* Hero hub-and-spoke: card dynamic positioning via CSS custom properties */
.hero-card {
  position: absolute;
  top: var(--card-top, auto);
  left: var(--card-left, auto);
  right: var(--card-right, auto);
}

/* Hero floating tool cards */
.tool-card-shadow {
  box-shadow:
    0 8px 24px -4px var(--tw-shadow-color, rgba(0, 0, 0, 0.12)),
    0 2px 8px -2px rgba(0, 0, 0, 0.06);
}

.tool-icon-3d {
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 2px 6px -1px rgba(0, 0, 0, 0.2);
  transform: perspective(40px) rotateX(4deg);
}

/* Quick Actions Marquee */
.qa-wrap:hover .qa-track {
  animation-play-state: paused;
}

/* Learning Plan — glowing animated border */
.plan-input-glow {
  background: linear-gradient(135deg, #67e8f9, #a78bfa, #818cf8);
  animation: planGlow 4s linear infinite;
}

@keyframes planGlow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* Learning Plan — AI star colour shift */
.ai-star {
  animation: aiStarColor 2s linear infinite;
}

@keyframes aiStarColor {
  0% {
    fill: #60a5fa;
  }
  25% {
    fill: #a78bfa;
  }
  50% {
    fill: #34d399;
  }
  75% {
    fill: #fbbf24;
  }
  100% {
    fill: #60a5fa;
  }
}