/* =====================================================================
   ČistýKód.cz — Custom Stylesheet
   Moderní statický web bez kompromisů
===================================================================== */

/* Mobile Viewport Overflow Protection */
html {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}

body {
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  position: relative;
}

/* Hero Typewriter Caret */
.type-caret {
  display: inline-block;
  width: 0.07em;
  height: 0.9em;
  margin-left: 0.06em;
  vertical-align: -0.08em;
  background: #fb8a3c;
  border-radius: 1px;
  animation: caret-blink 0.9s steps(1) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

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

::-webkit-scrollbar-track {
  background: #12100e;
}

::-webkit-scrollbar-thumb {
  background: #2a2622;
  border-radius: 5px;
  border: 2px solid #12100e;
}

::-webkit-scrollbar-thumb:hover {
  background: #403a33;
}

/* Chaos Intro Physics & Collapse */
.chaos-item {
  animation: glitch 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1) rotate(var(--tw-rotate, 0deg));
  opacity: 1;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.85s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 0.75s ease-in, filter 0.75s ease-in;
  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  will-change: transform, opacity;
}

#skip-intro-btn {
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
}

#sticky-calculator-bar > div {
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}

.chaos-collapse-gravity {
  transform: translateY(125vh) rotate(26deg) scale(0.35) !important;
  opacity: 0 !important;
  filter: blur(6px) !important;
  pointer-events: none !important;
}

.chaos-collapse-implode {
  transform: translate(var(--implode-x, 0px), var(--implode-y, 0px)) rotate(-25deg) scale(0.02) !important;
  opacity: 0 !important;
  filter: blur(8px) !important;
  pointer-events: none !important;
}

/* Stagger Reveal Animation on Scroll */
.reveal-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.reveal-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle Grid Background */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(42, 38, 34, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(42, 38, 34, 0.45) 1px, transparent 1px);
}

/* Pricing Card Selection Glow */
.pricing-card-selected-indigo {
  border-color: #f06a14 !important;
  box-shadow: 0 0 0 1px #f06a14, 0 20px 40px -15px rgba(240, 106, 20, 0.28) !important;
  background-color: rgba(28, 25, 22, 0.95) !important;
}

.pricing-card-selected-emerald {
  border-color: #aac940 !important;
  box-shadow: 0 0 0 1px #aac940, 0 20px 40px -15px rgba(170, 201, 64, 0.25) !important;
  background-color: rgba(28, 25, 22, 0.95) !important;
}

/* Card Tap / Focus Styles on Mobile */
[data-project-card],
[data-care-card] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

[data-project-card]:active,
[data-care-card]:active {
  transform: scale(0.99);
}

/* Mobile Form Anti-Jump & Anti-Zoom Protection */
#kontakt {
  scroll-margin-top: 5.5rem;
}

@media (max-width: 640px) {
  /* iOS Safari forces aggressive page zoom when tapping inputs with font-size < 16px */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Universal Mobile Accordion Animation & Tap Styles */
.accordion-header {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.accordion-trigger-pill {
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

@media (min-width: 768px) {
  .accordion-trigger-pill {
    display: none !important;
  }
  .accordion-content {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 767px) {
  .accordion-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .accordion-content.hidden {
    display: none !important;
  }
  .accordion-content:not(.hidden) {
    display: block !important;
    animation: accordionSlideDown 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

.accordion-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-chevron.rotate-180 {
  transform: rotate(180deg);
}

@keyframes accordionSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}