/* ============================================
   Media Printer Indonesia - Custom Styles
   ============================================ */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #F8F9FA;
}

::-webkit-scrollbar-thumb {
  background: #F26522;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D4541A;
}

/* Navbar scroll effect */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Active nav link */
.nav-link.active {
  color: #F26522;
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: #F26522;
  border-radius: 2px;
}

/* Portfolio tabs */
.portfolio-tab {
  background: white;
  color: #6B7280;
  border: 2px solid transparent;
}

.portfolio-tab:hover {
  background: #FFF5EE;
  color: #F26522;
  border-color: #F26522;
}

.portfolio-tab.active {
  background: #F26522;
  color: white;
  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.3);
}

/* Pulse animation slow */
@keyframes pulse-slow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  50% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
}

.animate-pulse-slow {
  animation: pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

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

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #F26522 0%, #FFB42E 50%, #1FB6E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Image lazy load */
img {
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"] {
  opacity: 0;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Selection color */
::selection {
  background: #F26522;
  color: white;
}

::-moz-selection {
  background: #F26522;
  color: white;
}

/* Mobile menu transition */
#mobile-menu {
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  overflow: hidden;
}

/* Reduce motion for accessibility */
@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;
  }
}

/* Hover effects for service cards */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-8px);
}

/* Print-friendly */
@media print {
  .fixed, nav, footer {
    display: none !important;
  }
}

/* ============================================
   Hero Futuristic 3D Print Visual
   ============================================ */

.hero-future {
  isolation: isolate;
  background-color: #05071a;
}

/* Perspective grid floor */
.hero-future__grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 55%;
  background-image:
    linear-gradient(to right, rgba(31, 182, 232, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 182, 232, 0.18) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(540px) rotateX(58deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0) 100%);
  animation: gridMove 6s linear infinite;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to   { background-position: 0 44px; }
}

/* Glow orbs */
.hero-future__orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(50px);
  opacity: 0.45;
  pointer-events: none;
}

.hero-future__orb--orange {
  width: 220px; height: 220px;
  background: #F26522;
  top: -40px; left: -60px;
  animation: orbDrift1 9s ease-in-out infinite;
}

.hero-future__orb--cyan {
  width: 260px; height: 260px;
  background: #1FB6E8;
  bottom: -60px; right: -70px;
  animation: orbDrift2 11s ease-in-out infinite;
}

.hero-future__orb--yellow {
  width: 160px; height: 160px;
  background: #FFB42E;
  top: 35%; right: 25%;
  opacity: 0.3;
  animation: orbDrift3 8s ease-in-out infinite;
}

@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, 18px) scale(1.08); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-22px, -16px) scale(1.1); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0) scale(0.95); opacity: 0.25; }
  50%      { transform: translate(-12px, 10px) scale(1.1); opacity: 0.4; }
}

/* Stars / floating particles */
.hero-future__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-future__stars span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #5EE2FF;
  border-radius: 9999px;
  box-shadow: 0 0 6px 1px rgba(94, 226, 255, 0.8);
  bottom: -10px;
  opacity: 0;
  animation: particleRise 7s linear infinite;
}

.hero-future__stars span:nth-child(1)  { left: 8%;  width: 2px; height: 2px; animation-duration: 6s;  animation-delay: 0s; }
.hero-future__stars span:nth-child(2)  { left: 15%; animation-duration: 8s;  animation-delay: 1.2s; background: #FFB42E; box-shadow: 0 0 6px 1px rgba(255,180,46,0.8); }
.hero-future__stars span:nth-child(3)  { left: 22%; animation-duration: 7s;  animation-delay: 2.5s; }
.hero-future__stars span:nth-child(4)  { left: 30%; width: 4px; height: 4px; animation-duration: 9s;  animation-delay: 0.8s; }
.hero-future__stars span:nth-child(5)  { left: 38%; animation-duration: 6.5s; animation-delay: 3.2s; background: #F26522; box-shadow: 0 0 6px 1px rgba(242,101,34,0.8); }
.hero-future__stars span:nth-child(6)  { left: 46%; animation-duration: 7.8s; animation-delay: 1.7s; }
.hero-future__stars span:nth-child(7)  { left: 54%; width: 2px; height: 2px; animation-duration: 6s;   animation-delay: 4s; }
.hero-future__stars span:nth-child(8)  { left: 62%; animation-duration: 8.5s; animation-delay: 0.4s; background: #FFB42E; box-shadow: 0 0 6px 1px rgba(255,180,46,0.8); }
.hero-future__stars span:nth-child(9)  { left: 70%; animation-duration: 7.2s; animation-delay: 2.8s; }
.hero-future__stars span:nth-child(10) { left: 78%; width: 4px; height: 4px; animation-duration: 9.5s; animation-delay: 1.5s; background: #F26522; box-shadow: 0 0 6px 1px rgba(242,101,34,0.8); }
.hero-future__stars span:nth-child(11) { left: 86%; animation-duration: 6.8s; animation-delay: 3.6s; }
.hero-future__stars span:nth-child(12) { left: 92%; animation-duration: 7.5s; animation-delay: 0.2s; }
.hero-future__stars span:nth-child(13) { left: 18%; animation-duration: 8.2s; animation-delay: 5s; background: #FFB42E; box-shadow: 0 0 6px 1px rgba(255,180,46,0.8); }
.hero-future__stars span:nth-child(14) { left: 50%; width: 2px; height: 2px; animation-duration: 6.4s; animation-delay: 4.5s; }
.hero-future__stars span:nth-child(15) { left: 82%; width: 4px; height: 4px; animation-duration: 9s;   animation-delay: 2.1s; }

@keyframes particleRise {
  0%   { transform: translateY(0)    scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-560px) scale(1.1); opacity: 0; }
}

/* Scan line */
.hero-future__scanline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #5EE2FF 30%, #5EE2FF 70%, transparent);
  box-shadow: 0 0 12px 2px rgba(94, 226, 255, 0.6);
  opacity: 0.7;
  pointer-events: none;
  animation: scanLine 5s linear infinite;
}

@keyframes scanLine {
  0%   { top: -4px;   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { top: 524px; opacity: 0; }
}

/* ============================================
   Hero Process Scene — Designer → Printer
   ============================================ */

/* Hologram screen content pulse */
.hero-future__hologram {
  transform-box: fill-box;
  transform-origin: center;
  animation: hologramPulse 3.5s ease-in-out infinite;
}

@keyframes hologramPulse {
  0%, 100% { opacity: 1;    filter: brightness(1); }
  50%      { opacity: 0.92; filter: brightness(1.1); }
}

/* Selection cursor blink */
.hero-future__cursor {
  animation: cursorBlink 1.4s ease-in-out infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}

/* Floating UI panels (color palette) */
.hero-future__ui-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: uiFloat 5s ease-in-out infinite;
}

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

/* Designer drawing arm — subtle micro-motion */
.hero-future__designer-arm {
  transform-box: fill-box;
  transform-origin: 130px 198px;
  animation: armDraw 2.6s ease-in-out infinite;
}

.hero-future__stylus,
.hero-future__stylus-tip {
  transform-box: fill-box;
  transform-origin: 168px 175px;
  animation: armDraw 2.6s ease-in-out infinite;
}

@keyframes armDraw {
  0%, 100% { transform: translate(0, 0)     rotate(0deg); }
  25%      { transform: translate(2px, -2px) rotate(-2deg); }
  50%      { transform: translate(-1px, 1px) rotate(1deg); }
  75%      { transform: translate(3px, -1px) rotate(-1deg); }
}

/* Stylus tip glow pulse */
.hero-future__stylus-tip {
  animation: armDraw 2.6s ease-in-out infinite, tipGlow 1.6s ease-in-out infinite;
}

@keyframes tipGlow {
  0%, 100% { filter: drop-shadow(0 0 2px #FFB42E); }
  50%      { filter: drop-shadow(0 0 8px #FFB42E); }
}

/* Beam from stylus to screen */
.hero-future__design-beam {
  stroke-dashoffset: 0;
  animation: beamFlow 1.4s linear infinite, beamFade 3s ease-in-out infinite;
}

@keyframes beamFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -12; }
}

@keyframes beamFade {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.85; }
}

/* Data packets traveling along flow line */
.hero-future__packet {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 6px currentColor);
  opacity: 0;
}

.hero-future__packet--1 {
  animation: packetTravel 2.6s linear infinite;
  animation-delay: 0s;
}
.hero-future__packet--2 {
  animation: packetTravel 2.6s linear infinite;
  animation-delay: 0.85s;
}
.hero-future__packet--3 {
  animation: packetTravel 2.6s linear infinite;
  animation-delay: 1.7s;
}

@keyframes packetTravel {
  0%   { transform: translateX(0)    scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(300px) scale(0.9); opacity: 0; }
}

/* Print head sliding on rail */
.hero-future__printhead {
  transform-box: fill-box;
  transform-origin: center;
  animation: headSlide 5s ease-in-out infinite;
}

@keyframes headSlide {
  0%   { transform: translate(135px, 346px); }
  50%  { transform: translate(365px, 346px); }
  100% { transform: translate(135px, 346px); }
}

/* Emerging printed sheet */
.hero-future__sheet-emerging {
  transform-box: fill-box;
  transform-origin: center top;
  animation: sheetEmerge 6s ease-in-out infinite;
  clip-path: inset(0 0 0 0);
}

@keyframes sheetEmerge {
  0%   { transform: translateY(-58px) scaleY(0.05); opacity: 0; }
  15%  { opacity: 1; }
  60%  { transform: translateY(0)     scaleY(1);    opacity: 1; }
  90%  { transform: translateY(0)     scaleY(1);    opacity: 1; }
  100% { transform: translateY(20px)  scaleY(1);    opacity: 0; }
}

/* Operator arm — subtle adjust */
.hero-future__operator-arm {
  transform-box: fill-box;
  transform-origin: 422px 372px;
  animation: operatorAdjust 4s ease-in-out infinite;
}

@keyframes operatorAdjust {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-4deg); }
}

/* LED blink (control panel) */
.hero-future__led-green {
  animation: ledBlink 1.2s ease-in-out infinite;
}

@keyframes ledBlink {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 4px #22c55e); }
  50%      { opacity: 0.4; filter: drop-shadow(0 0 1px #22c55e); }
}

/* ============================================
   Stage 03 — Delivery Scene
   ============================================ */

/* Dispatch packet icons traveling */
.hero-future__packet--4,
.hero-future__packet--5 {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px #FFB42E);
  opacity: 0;
}

.hero-future__packet--4 {
  animation: dispatchTravel 2.8s linear infinite;
  animation-delay: 0.4s;
}
.hero-future__packet--5 {
  animation: dispatchTravel 2.8s linear infinite;
  animation-delay: 1.5s;
}

@keyframes dispatchTravel {
  0%   { transform: translate(105px, 528px) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(395px, 528px) scale(0.9); opacity: 0; }
}

/* Delivery scooter + rider — riding bob motion */
.hero-future__delivery {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: rideBob 1.6s ease-in-out infinite;
}

@keyframes rideBob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(0.6deg); }
}

/* Wheel disks pulse glow (hover effect) */
.hero-future__wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: wheelPulse 0.6s linear infinite;
}

.hero-future__wheel--rear  { animation-delay: 0s; }
.hero-future__wheel--front { animation-delay: 0.3s; }

@keyframes wheelPulse {
  0%   { opacity: 0.5; transform: scale(0.92); }
  50%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0.5; transform: scale(0.92); }
}

/* Speed lines streaking backward */
.hero-future__speedlines line {
  animation: speedStreak 0.8s linear infinite;
}

.hero-future__speedlines line:nth-child(1) { animation-delay: 0s; }
.hero-future__speedlines line:nth-child(2) { animation-delay: 0.25s; }
.hero-future__speedlines line:nth-child(3) { animation-delay: 0.5s; }

@keyframes speedStreak {
  0%   { transform: translateX(15px);  opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-25px); opacity: 0; }
}

/* Route line dashed flow */
.hero-future__route {
  animation: routeFlow 1.2s linear infinite;
}

@keyframes routeFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -22; }
}

/* Pin pulse rings */
.hero-future__pin {
  transform-box: fill-box;
  transform-origin: 422px 590px;
  animation: pinBob 2s ease-in-out infinite;
}

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

.hero-future__pin-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.hero-future__pin-pulse--1 {
  animation: pinPulse 2.4s ease-out infinite;
  animation-delay: 0s;
}

.hero-future__pin-pulse--2 {
  animation: pinPulse 2.4s ease-out infinite;
  animation-delay: 1.2s;
}

@keyframes pinPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ETA HUD label gentle hover */
.hero-future__eta {
  transform-box: fill-box;
  transform-origin: center;
  animation: etaHover 3s ease-in-out infinite;
}

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