/* Animations and card styles for index cards */
:root{
  --card-transition: 520ms;
  --card-ease: cubic-bezier(.2,.9,.2,1);
}

/* Base reveal state: hidden and slightly shifted */
.reveal{
  opacity: 0;
  transform: translateY(16px) scale(.995);
  will-change: transform, opacity;
  transition: opacity var(--card-transition) var(--card-ease), transform var(--card-transition) var(--card-ease);
}

.reveal.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Gentle hover lift for interactive feel */
.reveal{ /* keep existing transition for hover too */ }
.reveal:hover{
  transform: translateY(-6px) scale(1.01);
  transition: transform 220ms ease;
}

/* Animate inner elements (heading, text, images) with a slight stagger */
.reveal > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--card-ease), transform 420ms var(--card-ease);
}
.reveal.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal.in-view > img { transform: scale(1); }
.reveal.in-view h3 { transition-delay: 80ms; }
.reveal.in-view p { transition-delay: 120ms; }

/* Slightly stronger shadow when visible */
.reveal.shadow-sm.in-view{
  box-shadow: 0 10px 30px rgba(2,6,23,0.08);
}

/* Target existing card patterns to ensure consistent will-change */
#serveis .p-6.rounded-2xl,
#projectes .group,
#testimonis .bg-white,
#projectes figure.group{
  will-change: transform, opacity;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in-view{ transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* Ensure in-page anchors scroll correctly below fixed header */
section[id] {
  /* header is approx 4rem (h-16); use a slightly larger value to leave a small gap */
  scroll-margin-top: 4.5rem;
}
@media(min-width: 768px){
  section[id] { scroll-margin-top: 5rem; }
}

/* CTA entrance animation and shadow for hero buttons */
.cta-animate{ animation: cta-entrance 700ms cubic-bezier(.2,.9,.2,1) both; }
@keyframes cta-entrance{
  from{ opacity: 0; transform: translateY(8px) scale(.995); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

.cta-shadow{ box-shadow: 0 10px 28px rgba(2,6,23,0.10); transition: transform .18s ease, box-shadow .18s ease; }
.cta-shadow:hover{ transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(2,6,23,0.14); }

/* Variant for the light/ghost CTA (white background) to keep visible shadow */
.cta-ghost{ box-shadow: 0 8px 24px rgba(2,6,23,0.06); }
.cta-ghost:hover{ box-shadow: 0 18px 36px rgba(2,6,23,0.10); }

@media (prefers-reduced-motion: reduce){
  .cta-animate{ animation: none !important; }
}

/* Typing / typewriter caret */
.typewriter.typing::after,
.typewriter.typed::after{
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 8px;
  vertical-align: middle;
  animation: oc-blink 1s steps(1) infinite;
}
@keyframes oc-blink{ 50% { opacity: 0 } }

/* Loader spinner */
@keyframes oc-spin {
  to { transform: rotate(360deg); }
}

/* Modal styles for projects */
#projectModal {
  animation: fadeIn 300ms ease;
}

#projectModal.hidden {
  animation: fadeOut 300ms ease;
  animation-fill-mode: forwards;
  pointer-events: none;
  display: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

#projectModal .bg-white {
  animation: slideUp 300ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

#projectModal .bg-white img {
  display: block;
  width: 100%;
  height: auto;
}

#projectModal .bg-white > div {
  padding: 1.5rem;
  max-height: calc(90vh - 300px);
  overflow-y: auto;
}

#projectModal .bg-white h2 {
  font-size: 1.875rem;
  font-weight: 700;
  color: rgb(15, 23, 42);
  margin: 0;
}

#projectModal .bg-white p {
  margin-top: 0.75rem;
  color: rgb(71, 85, 105);
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.6;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.project-card:hover {
  transform: translateY(-4px);
}

/* Animated checkmarks for "Qui som" section */
.oc-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  background: linear-gradient(135deg, #eab308, #f59e0b);
  color: white;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  animation: oc-check-pulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
}

.oc-check-icon:hover {
  animation: oc-check-bounce 0.6s ease;
}

@keyframes oc-check-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.3);
  }
  50% {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(234, 179, 8, 0.6);
  }
}

@keyframes oc-check-bounce {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.25);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .oc-check-icon {
    animation: none;
  }
}