/*
TANXMEDIAA — OPTIONAL ANIMATIONS
Separate stylesheet for the multi-page website.

HOW TO ENABLE:
Add this line AFTER style.css in the <head> of each HTML page:
<link rel="stylesheet" href="assets/animations.css">

This file only adds motion. Your main design and colors remain in style.css.
*/

@media (prefers-reduced-motion: no-preference) {
  body { animation: tanxPageIn 0.45s ease-out both; }

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

  .hero-grid > div:first-child,
  .page-hero .container > * {
    animation: tanxRevealUp 0.8s cubic-bezier(.16,1,.3,1) both;
  }

  .hero-grid > div:first-child .eyebrow,
  .page-hero .eyebrow { animation-delay: 0.05s; }

  .hero-grid > div:first-child h1,
  .page-hero h1 { animation-delay: 0.12s; }

  .hero-copy,
  .page-hero p { animation-delay: 0.2s; }

  .hero-actions {
    animation: tanxRevealUp 0.8s cubic-bezier(.16,1,.3,1) 0.28s both;
  }

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

  .brand img,
  .footer-brand img {
    transition: transform 0.35s ease, filter 0.35s ease;
  }

  .brand:hover img {
    transform: scale(1.06);
    filter: drop-shadow(0 0 14px rgba(107,30,35,.35));
  }

  .nav-links a { transition: color 0.25s ease; }
  .nav-links a:hover { color: #f4eee9; }

  .btn {
    transition: transform 0.28s cubic-bezier(.16,1,.3,1),
                background 0.28s ease,
                color 0.28s ease,
                border-color 0.28s ease,
                box-shadow 0.28s ease;
  }

  .btn:hover { transform: translateY(-3px); }
  .btn:active { transform: translateY(-1px) scale(.98); }

  .card {
    transition: transform 0.35s cubic-bezier(.16,1,.3,1),
                border-color 0.35s ease,
                background 0.35s ease,
                box-shadow 0.35s ease;
  }

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

  .category {
    position: relative;
    isolation: isolate;
  }

  .category::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 100%, rgba(107,30,35,.32), transparent 55%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: -1;
  }

  .category:hover::after { opacity: 1; }

  .project h3,
  .project p,
  .project .project-tag {
    transition: transform 0.35s cubic-bezier(.16,1,.3,1);
  }

  .project:hover h3 { transform: translateY(-7px); }
  .project:hover p { transform: translateY(-5px); }
  .project:hover .project-tag { transform: translateY(-3px); }

  .hero-orb { animation: tanxOrbBreath 6s ease-in-out infinite; }

  @keyframes tanxOrbBreath {
    0%, 100% { transform: scale(1); filter: saturate(1); }
    50% { transform: scale(1.035); filter: saturate(1.08); }
  }

  .hero-card.one { animation: tanxFloatOne 5s ease-in-out infinite; }
  .hero-card.two { animation: tanxFloatTwo 5.8s ease-in-out infinite; }

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

  @keyframes tanxFloatTwo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(9px); }
  }

  .pricing-card.featured {
    transition: transform 0.35s cubic-bezier(.16,1,.3,1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
  }

  .pricing-card.featured:hover {
    box-shadow: 0 30px 75px rgba(0,0,0,.38),
                0 0 35px rgba(107,30,35,.12);
  }

  .faq details summary {
    transition: color 0.25s ease, transform 0.25s ease;
  }

  .faq details:hover summary {
    color: #d99b9b;
    transform: translateX(4px);
  }

  input,
  select,
  textarea {
    transition: border-color 0.25s ease,
                background 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease;
  }

  input:focus,
  select:focus,
  textarea:focus {
    transform: translateY(-1px);
    background: rgba(255,255,255,.055);
    box-shadow: 0 0 0 4px rgba(107,30,35,.1);
  }

  .footer-links a {
    transition: color 0.25s ease, transform 0.25s ease;
  }

  .footer-links a:hover {
    color: #f4eee9;
    transform: translateX(4px);
  }

  .cta-panel {
    transition: transform 0.4s cubic-bezier(.16,1,.3,1),
                box-shadow 0.4s ease;
  }

  .cta-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 70px rgba(0,0,0,.28);
  }
}

@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;
  }
}