/*
 * tl-polish.css — Emil Kowalski design engineering pass
 * Tuesday Lights homepage · 2026-03-25
 *
 * Principles applied:
 * - Custom easing curves (strong ease-out, ease-in-out)
 * - :active scale feedback on all pressable elements
 * - Touch-safe hover gates via @media (hover: hover)
 * - Stagger animations on section reveals
 * - prefers-reduced-motion safety
 * - Only transform + opacity animations (GPU composited)
 * - Asymmetric enter/exit timing
 * - No ease-in on UI elements
 */

/* ── CUSTOM EASING TOKENS ─────────────────────────────────── */
:root {
  --tl-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --tl-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --tl-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── SCROLL REVEAL — stronger curves, stagger ────────────── */
.tl-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--tl-ease-out),
    transform 0.7s var(--tl-ease-out);
}
.tl-reveal.tl-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside grid reveals */
.tl-services-grid.tl-visible .tl-service-card,
.tl-testi-grid.tl-visible .tl-testi-card,
.tl-process-grid.tl-visible .tl-process-step,
.tl-port-grid.tl-visible .tl-pf,
.tl-insta-grid.tl-visible .tl-insta-cell,
.tl-shorts-grid.tl-visible .tl-short-card {
  opacity: 0;
  transform: translateY(20px);
  animation: tlStaggerIn 0.6s var(--tl-ease-out) forwards;
}

/* Stagger delays — up to 6 children */
.tl-services-grid.tl-visible .tl-service-card:nth-child(1),
.tl-testi-grid.tl-visible .tl-testi-card:nth-child(1),
.tl-process-grid.tl-visible .tl-process-step:nth-child(1),
.tl-port-grid.tl-visible .tl-pf:nth-child(1),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(1),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(1) {
  animation-delay: 0ms;
}
.tl-services-grid.tl-visible .tl-service-card:nth-child(2),
.tl-testi-grid.tl-visible .tl-testi-card:nth-child(2),
.tl-process-grid.tl-visible .tl-process-step:nth-child(2),
.tl-port-grid.tl-visible .tl-pf:nth-child(2),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(2),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(2) {
  animation-delay: 60ms;
}
.tl-services-grid.tl-visible .tl-service-card:nth-child(3),
.tl-testi-grid.tl-visible .tl-testi-card:nth-child(3),
.tl-process-grid.tl-visible .tl-process-step:nth-child(3),
.tl-port-grid.tl-visible .tl-pf:nth-child(3),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(3),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(3) {
  animation-delay: 120ms;
}
.tl-services-grid.tl-visible .tl-service-card:nth-child(4),
.tl-testi-grid.tl-visible .tl-testi-card:nth-child(4),
.tl-process-grid.tl-visible .tl-process-step:nth-child(4),
.tl-port-grid.tl-visible .tl-pf:nth-child(4),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(4),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(4) {
  animation-delay: 180ms;
}
.tl-port-grid.tl-visible .tl-pf:nth-child(5),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(5),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(5) {
  animation-delay: 240ms;
}
.tl-port-grid.tl-visible .tl-pf:nth-child(6),
.tl-insta-grid.tl-visible .tl-insta-cell:nth-child(6),
.tl-shorts-grid.tl-visible .tl-short-card:nth-child(6) {
  animation-delay: 300ms;
}

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

/* ── HERO — improved entrance with custom curves ─────────── */
.tl-hero-eyebrow {
  animation: tlFadeUp 0.8s var(--tl-ease-out) 0.3s forwards;
}
.tl-hero-title {
  animation: tlFadeUp 0.9s var(--tl-ease-out) 0.45s forwards;
}
.tl-hero-sub {
  animation: tlFadeUp 0.9s var(--tl-ease-out) 0.6s forwards;
}
.tl-hero-actions {
  animation: tlFadeUp 0.9s var(--tl-ease-out) 0.75s forwards;
}

/* Hero frames — enter from scale(0.95) not scale(0) */
.tl-frame-1 { animation: tlFloatA 7s ease-in-out infinite, tlFrameIn 0.9s var(--tl-ease-out) 0.9s forwards !important; opacity: 0 !important; }
.tl-frame-2 { animation: tlFloatB 8s ease-in-out infinite, tlFrameIn 0.9s var(--tl-ease-out) 1.1s forwards !important; opacity: 0 !important; }
.tl-frame-3 { animation: tlFloatA 9s ease-in-out infinite reverse, tlFrameIn 0.9s var(--tl-ease-out) 1.0s forwards !important; opacity: 0 !important; }
.tl-frame-4 { animation: tlFloatB 7.5s ease-in-out infinite, tlFrameIn 0.9s var(--tl-ease-out) 1.2s forwards !important; opacity: 0 !important; }

@keyframes tlFrameIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Hero scroll indicator fade-out on scroll (JS adds .tl-faded) */
.tl-hero-scroll {
  transition: opacity 0.4s var(--tl-ease-out);
}
.tl-hero-scroll.tl-faded {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── BUTTON ACTIVE STATES — scale(0.97) feedback ────────── */
.tl-btn-primary,
.tl-btn-outline,
.tl-nav-cta,
.tl-service-link {
  transition:
    background 0.2s var(--tl-ease-out),
    color 0.2s var(--tl-ease-out),
    border-color 0.2s var(--tl-ease-out),
    transform 0.16s var(--tl-ease-out),
    box-shadow 0.2s var(--tl-ease-out),
    gap 0.2s var(--tl-ease-out) !important;
}
.tl-btn-primary:active,
.tl-btn-outline:active,
.tl-nav-cta:active {
  transform: scale(0.97) !important;
}

/* CTA primary — shadow lift on hover, press sink */
.tl-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(154,117,83,0.22);
}
.tl-btn-primary:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: 0 2px 8px rgba(154,117,83,0.15);
}

/* ── NAV LINK HOVER — underline slide-in ─────────────────── */
@media (hover: hover) and (pointer: fine) {
  .tl-nav-links a {
    position: relative;
  }
  .tl-nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--tl-taupe-dark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--tl-ease-out);
  }
  .tl-nav-links a:hover::after {
    transform: scaleX(1);
  }
}

/* ── SERVICE CARDS — refined hover with touch safety ─────── */
.tl-service-card {
  transition:
    transform 0.3s var(--tl-ease-out),
    box-shadow 0.3s var(--tl-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tl-service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 48px rgba(107,79,53,0.10) !important;
  }
}
.tl-service-card:active {
  transform: scale(0.98) !important;
}

/* Service icon — smoother fill */
.tl-service-icon {
  transition:
    background 0.25s var(--tl-ease-out),
    color 0.25s var(--tl-ease-out),
    border-color 0.25s var(--tl-ease-out) !important;
}

/* ── PORTFOLIO — FIX: move bg-image to .tl-pf-inner for zoom ── */
/* Override parent: clear bg-image, put on inner div */
.tl-pf:nth-child(1) { background-image: none !important; }
.tl-pf:nth-child(2) { background-image: none !important; }
.tl-pf:nth-child(3) { background-image: none !important; }
.tl-pf:nth-child(4) { background-image: none !important; }
.tl-pf:nth-child(5) { background-image: none !important; }
.tl-pf:nth-child(6) { background-image: none !important; }
.tl-pf { background-color: var(--tl-cream); }

.tl-pf:nth-child(1) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig1.jpg'); }
.tl-pf:nth-child(2) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig2.jpg'); }
.tl-pf:nth-child(3) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig3.jpg'); }
.tl-pf:nth-child(4) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig4.jpg'); }
.tl-pf:nth-child(5) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig5.jpg'); }
.tl-pf:nth-child(6) .tl-pf-inner { background-image: url('/wp-content/uploads/2026/05/tl-instagram/ig6.jpg'); }

.tl-pf-inner {
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--tl-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tl-pf:hover .tl-pf-inner {
    transform: scale(1.04) !important;
  }
}

/* Portfolio overlay — cleaner timing */
.tl-pf-overlay {
  transition: opacity 0.3s var(--tl-ease-out) !important;
}
.tl-pf-label {
  transition: transform 0.3s var(--tl-ease-out) !important;
}

/* ── TESTIMONIAL CARDS — hover lift with touch safety ────── */
.tl-testi-card {
  transition:
    border-color 0.25s var(--tl-ease-out),
    box-shadow 0.25s var(--tl-ease-out),
    transform 0.25s var(--tl-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tl-testi-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184,149,110,0.3) !important;
    box-shadow: 0 14px 40px rgba(107,79,53,0.08) !important;
  }
}

/* ── PROCESS STEPS — number circle scale on hover ────────── */
.tl-step-num {
  transition:
    background 0.25s var(--tl-ease-out),
    color 0.25s var(--tl-ease-out),
    border-color 0.25s var(--tl-ease-out),
    transform 0.25s var(--tl-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tl-process-step:hover .tl-step-num {
    transform: scale(1.08);
  }
}

/* ── INSTAGRAM CELLS — scale + overlay ───────────────────── */
.tl-insta-cell {
  transition: transform 0.3s var(--tl-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tl-insta-cell:hover {
    transform: scale(1.03);
    z-index: 2;
  }
}
.tl-insta-hover {
  transition: opacity 0.25s var(--tl-ease-out) !important;
}

/* ── YOUTUBE SHORTS — refined hover ──────────────────────── */
.tl-short-thumb {
  transition: transform 0.5s var(--tl-ease-out) !important;
}
.tl-short-overlay {
  transition: background 0.25s var(--tl-ease-out) !important;
}
.tl-short-play {
  transition: transform 0.25s var(--tl-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tl-short-card:hover .tl-short-thumb {
    transform: scale(1.04) !important;
  }
  .tl-short-card:hover .tl-short-play {
    transform: scale(1.1) !important;
  }
}

/* ── MOBILE NAV — transform instead of right (GPU only) ──── */
.tl-mobile-nav {
  right: 0 !important;
  transform: translateX(100%);
  transition: transform 0.35s var(--tl-ease-drawer) !important;
}
.tl-mobile-nav.tl-open {
  transform: translateX(0) !important;
}

/* Mobile nav link stagger */
.tl-mobile-nav.tl-open li {
  opacity: 0;
  animation: tlStaggerIn 0.4s var(--tl-ease-out) forwards;
}
.tl-mobile-nav.tl-open li:nth-child(1) { animation-delay: 80ms; }
.tl-mobile-nav.tl-open li:nth-child(2) { animation-delay: 130ms; }
.tl-mobile-nav.tl-open li:nth-child(3) { animation-delay: 180ms; }
.tl-mobile-nav.tl-open li:nth-child(4) { animation-delay: 230ms; }
.tl-mobile-nav.tl-open li:nth-child(5) { animation-delay: 280ms; }

/* Overlay backdrop */
.tl-mobile-overlay {
  transition: opacity 0.3s var(--tl-ease-out) !important;
}

/* ── MARQUEE — pause on hover ────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .tl-marquee-bar:hover .tl-marquee-track {
    animation-play-state: paused;
  }
}

/* ── STATS — pop animation on reveal ─────────────────────── */
.tl-stats.tl-visible .tl-stat-number {
  animation: tlStatPop 0.5s var(--tl-ease-out);
}
@keyframes tlStatPop {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── CTA GLOW — subtle pulse ─────────────────────────────── */
.tl-cta-glow {
  animation: tlGlowPulse 4s ease-in-out infinite !important;
}
@keyframes tlGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.06); opacity: 0.7; }
}

/* ── FOCUS-VISIBLE — accessible keyboard navigation ──────── */
.tl-btn-primary:focus-visible,
.tl-btn-outline:focus-visible,
.tl-nav-cta:focus-visible,
.tl-nav-links a:focus-visible,
.tl-service-link:focus-visible {
  outline: 2px solid var(--tl-taupe);
  outline-offset: 3px;
}

/* ── IMAGE REVEAL — clip-path entrance on scroll ─────────── */
.tl-photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--tl-ease-in-out);
}
.tl-reveal.tl-visible .tl-photo {
  clip-path: inset(0 0 0 0);
}
/* Stagger the three photos */
.tl-reveal.tl-visible .tl-photo:nth-child(1) { transition-delay: 0ms; }
.tl-reveal.tl-visible .tl-photo:nth-child(2) { transition-delay: 150ms; }
.tl-reveal.tl-visible .tl-photo:nth-child(3) { transition-delay: 300ms; }

/* ── PREFERS REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tl-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .tl-photo {
    clip-path: inset(0 0 0 0) !important;
  }
  .tl-frame {
    opacity: 1 !important;
  }
  .tl-hero-eyebrow, .tl-hero-title, .tl-hero-sub, .tl-hero-actions {
    opacity: 1 !important;
    transform: none !important;
  }
  .tl-marquee-track {
    animation-play-state: paused !important;
  }
  /* Still allow color/opacity transitions for comprehension */
  .tl-btn-primary, .tl-btn-outline, .tl-nav-cta,
  .tl-service-icon, .tl-testi-card, .tl-step-num {
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  }
}

/* ── SMOOTH SCROLL — offset for fixed nav ────────────────── */
html {
  scroll-padding-top: 90px;
}