/* ===== BR COTTFAB — Animations ===== */

/* Reveal on scroll — only hidden when JS is loaded */
.js .reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.7s ease, transform 0.7s ease; }
.revealed { opacity: 1 !important; transform: none !important; }

/* Stagger children */
.stagger-children > *:nth-child(1) { transition-delay: 0.0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.5s; }

/* Page transition overlay */
.page-transition { position: fixed; inset: 0; background: var(--brand-red); z-index: 99999; pointer-events: none; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.page-transition.enter { transform: translateY(0); }
.page-transition.exit { transform: translateY(-100%); }

/* Fabric shimmer */
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.shimmer { background: linear-gradient(90deg, rgba(192,57,43,0) 0%, rgba(192,57,43,0.08) 50%, rgba(192,57,43,0) 100%); background-size: 200% 100%; animation: shimmer 2s infinite; }

/* Fade in up */
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
.fade-in-up { animation: fadeInUp 0.7s ease both; }

/* Connecting line draw */
@keyframes drawLine { from{stroke-dashoffset:100%} to{stroke-dashoffset:0} }

/* Swatch reveal */
@keyframes swatchReveal { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

/* Ticker rotate */
@keyframes colorTicker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Hero title animations */
.hero-title .line-1 { animation: slideInLeft 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-title .line-2 { animation: slideInRight 0.9s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
.hero-pre  { animation: fadeInUp 0.7s ease 0.1s both; }
.hero-sub  { animation: fadeInUp 0.7s ease 0.6s both; }
.hero-btns { animation: fadeInUp 0.7s ease 0.8s both; }
.hero-scroll { animation: fadeInUp 0.7s ease 1s both, bounce 2s 1s infinite; }

@keyframes slideInLeft { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideInRight { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }

/* Nav stagger */
.main-nav a:nth-child(1){animation:fadeInUp 0.5s 0.1s both}
.main-nav a:nth-child(2){animation:fadeInUp 0.5s 0.18s both}
.main-nav a:nth-child(3){animation:fadeInUp 0.5s 0.26s both}
.main-nav a:nth-child(4){animation:fadeInUp 0.5s 0.34s both}

/* Floating badge */
@keyframes floatBadge { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }

/* Pillar reveal */
.pillar-item { opacity: 0; transform: translateY(30px); transition: opacity 0.5s, transform 0.5s; }
.pillar-item.revealed { opacity: 1; transform: translateY(0); }
.pillar-item:nth-child(1){transition-delay:0s}
.pillar-item:nth-child(2){transition-delay:0.1s}
.pillar-item:nth-child(3){transition-delay:0.2s}
.pillar-item:nth-child(4){transition-delay:0.3s}
.pillar-item:nth-child(5){transition-delay:0.4s}