/* ============================================================
   Team 360 — animations.css
   All keyframes, reveal animations, hover physics, transitions
   ============================================================ */

/* ===========================
   HERO TEXT REVEAL (Mask)
=========================== */
@keyframes revealUp {
  0% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    clip-path: inset(0% 0 0 0);
    transform: translateY(0);
    opacity: 1;
  }
}

.hero-line {
  display: block;
  overflow: hidden;
  opacity: 0;
  animation: revealUp 1.15s var(--ease-cinematic) forwards;
}

.hero-line:nth-child(1) { animation-delay: 0.25s; }
.hero-line:nth-child(2) { animation-delay: 0.50s; }
.hero-line:nth-child(3) { animation-delay: 0.75s; }

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

.hero-sub {
  opacity: 0;
  animation: subtleFadeIn 1s var(--ease-cinematic) 1.1s forwards;
}

.hero-caption-anim {
  opacity: 0;
  animation: subtleFadeIn 1s var(--ease-cinematic) 1.3s forwards;
}

.scroll-indicator {
  opacity: 0;
  animation: subtleFadeIn 1s var(--ease-cinematic) 1.6s forwards;
}

/* ===========================
   SCROLL-TRIGGERED FADE-UP
=========================== */
.fade-up {
  opacity: 0;
  transform: translateY(64px);
  transition:
    opacity  0.95s var(--ease-cinematic),
    transform 0.95s var(--ease-cinematic);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-left {
  opacity: 0;
  transform: translateX(-50px);
  transition:
    opacity  0.9s var(--ease-cinematic),
    transform 0.9s var(--ease-cinematic);
}

.fade-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-up-delay-1 { transition-delay: 0.08s; }
.fade-up-delay-2 { transition-delay: 0.16s; }
.fade-up-delay-3 { transition-delay: 0.24s; }
.fade-up-delay-4 { transition-delay: 0.32s; }
.fade-up-delay-5 { transition-delay: 0.40s; }
.fade-up-delay-6 { transition-delay: 0.48s; }

/* ===========================
   MARQUEE INFINITE SCROLL
=========================== */
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeScrollReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}

.marquee-track.reverse {
  animation: marqueeScrollReverse 40s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

/* ===========================
   PORTFOLIO HOVER PHYSICS
=========================== */
.portfolio-item {
  position: relative;
  overflow: hidden;
  cursor: none;
  border-radius: 1px;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-cinematic);
}

.portfolio-item:hover img {
  transform: scale(1.06);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.3)  40%,
    rgba(0,0,0,0)    65%
  );
  opacity: 0;
  transition: opacity 0.7s var(--ease-cinematic);
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 26px;
  transform: translateY(24px);
  transition:
    transform 0.75s var(--ease-cinematic),
    opacity   0.75s var(--ease-cinematic);
  opacity: 0;
}

.portfolio-item:hover .portfolio-info {
  transform: translateY(0);
  opacity: 1;
}

/* Portfolio item category badge */
.portfolio-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(212,175,55,0.25);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity   0.5s var(--ease-cinematic),
    transform 0.5s var(--ease-cinematic);
}

.portfolio-item:hover .portfolio-badge {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================
   NAV HIDE / SHOW
=========================== */
.nav-hidden  { transform: translateY(-100%); }
.nav-visible { transform: translateY(0); }

/* ===========================
   SCROLL INDICATOR
=========================== */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(10px); }
}

.scroll-indicator svg {
  animation: scrollBounce 1.8s var(--ease-magnetic) infinite;
}

/* ===========================
   MODAL ANIMATIONS
=========================== */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(24px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-backdrop.open .modal-card {
  animation: modalFadeIn 0.6s var(--ease-out-expo) forwards;
}

/* ===========================
   MOBILE MENU STAGGER
=========================== */
.mobile-nav-link {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity   0.65s var(--ease-cinematic),
    transform 0.65s var(--ease-cinematic);
}

.mobile-menu.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.open .mobile-nav-link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu.open .mobile-nav-link:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.open .mobile-nav-link:nth-child(3) { transition-delay: 0.24s; }
.mobile-menu.open .mobile-nav-link:nth-child(4) { transition-delay: 0.32s; }
.mobile-menu.open .mobile-nav-link:nth-child(5) { transition-delay: 0.40s; }
.mobile-menu.open .mobile-nav-link:nth-child(6) { transition-delay: 0.48s; }
.mobile-menu.open .mobile-nav-link:nth-child(7) { transition-delay: 0.56s; }

/* ===========================
   FILTER TABS
=========================== */
.filter-btn {
  position: relative;
}

.filter-btn::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.45s var(--ease-cinematic);
}

.filter-btn:hover::after,
.filter-btn.active::after {
  width: 100%;
}

/* ===========================
   SUCCESS / ERROR GLOWS
=========================== */
@keyframes successPulse {
  0%   { box-shadow: 0 0 0 0   rgba(50, 205, 50, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(50, 205, 50, 0); }
  100% { box-shadow: 0 0 0 0   rgba(50, 205, 50, 0); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-9px); }
  30%       { transform: translateX(9px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

.auth-success { animation: successPulse 1.2s ease forwards; }
.shake        { animation: shake 0.55s var(--ease-cinematic); }

/* ===========================
   ACCORDION
=========================== */
.accordion-icon {
  transition: transform 0.55s var(--ease-cinematic);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.75s var(--ease-cinematic),
    padding    0.5s  var(--ease-cinematic);
}

.accordion-item.open .accordion-answer {
  max-height: 500px;
}

/* ===========================
   CUSTOM CURSOR
=========================== */
.cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  transition:
    width  0.3s var(--ease-cinematic),
    height 0.3s var(--ease-cinematic),
    opacity 0.3s ease;
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(200, 200, 200, 0.45);  /* platinum silver ring */
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width  0.45s var(--ease-out-expo),
    height 0.45s var(--ease-out-expo);
}

.cursor-dot.hover  { width: 5px; height: 5px; }
.cursor-ring.hover { width: 58px; height: 58px; }
.cursor-dot.click  { transform: translate(-50%, -50%) scale(0.6); }

/* ===========================
   HERO GRAIN TEXTURE
=========================== */
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 2%); }
  30%  { transform: translate(-1%, 4%); }
  40%  { transform: translate(4%, -1%); }
  50%  { transform: translate(-3%, 3%); }
  60%  { transform: translate(2%, -4%); }
  70%  { transform: translate(-4%, 1%); }
  80%  { transform: translate(1%, -2%); }
  90%  { transform: translate(-2%, 4%); }
}

.noise-overlay::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.035;
  animation: grain 8s steps(10) infinite;
  pointer-events: none;
  z-index: 3;
}

/* ===========================
   PILLAR ITEMS HOVER
=========================== */
.pillar-item {
  transition: background 0.45s var(--ease-cinematic);
}

.pillar-item:hover {
  background: var(--color-accent-faint);
}

/* ===========================
   FOUNDER CARD HOVER
=========================== */
.founder-card {
  transition:
    border-color 0.4s var(--ease-cinematic),
    padding-left 0.4s var(--ease-cinematic);
}

.founder-card:hover {
  border-color: var(--color-accent);
  padding-left: 36px;
}

/* ===========================
   COUNTER ANIMATION
=========================== */
.stat-number {
  display: inline-block;
  transition: transform 0.6s var(--ease-bounce);
}

.stat-item:hover .stat-number {
  transform: scale(1.05);
  color: var(--color-accent);
}

/* ===========================
   CONTACT HOVER LINES
=========================== */
.lets-talk-line {
  display: block;
  overflow: hidden;
}

/* ===========================
   BRAIN GRID REVEAL
=========================== */
.brain-col {
  transition: background 0.4s var(--ease-cinematic);
}

.brain-col:hover {
  background: rgba(200, 200, 200, 0.03);  /* platinum silver faint hover */
}

/* ===========================
   PORTFOLIO HINT PULSE
=========================== */
@keyframes pulseHint {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}