/* ================================================================
   AP-PATTERNS.CSS — Apple UI/UX Pattern Library
   ================================================================
   Brand-agnostic. Uses your existing CSS variables.
   Fallback chain: var(--primary) → var(--accent) → var(--brand) → currentColor
   
   NEVER changes: colors, fonts, spacing, layout, content.
   ONLY adds: opacity, transform, transition, animation, clip-path.
   ================================================================ */


/* ================================================================
   AP-01 → AP-06: SCROLL REVEAL PATTERNS
   Requires: ap-observer.js
   ================================================================ */

/* AP-01: Fade Up */
.ap-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-reveal.ap-visible { opacity: 1; transform: translateY(0); }

/* Stagger delays */
.ap-delay-1 { transition-delay: 0.1s; }
.ap-delay-2 { transition-delay: 0.2s; }
.ap-delay-3 { transition-delay: 0.3s; }
.ap-delay-4 { transition-delay: 0.4s; }
.ap-delay-5 { transition-delay: 0.5s; }

/* AP-02: Slide from Left */
.ap-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-reveal-left.ap-visible { opacity: 1; transform: translateX(0); }

/* AP-03: Slide from Right */
.ap-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-reveal-right.ap-visible { opacity: 1; transform: translateX(0); }

/* AP-04: Scale Up */
.ap-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-reveal-scale.ap-visible { opacity: 1; transform: scale(1); }

/* AP-05: Clip-Path Wipe */
.ap-clip-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-clip-wipe.ap-visible { clip-path: inset(0 0% 0 0); }

/* AP-06: Circle Expand */
.ap-clip-circle {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-clip-circle.ap-visible { clip-path: circle(75% at 50% 50%); }


/* ================================================================
   AP-07: PARALLAX
   Requires: ap-scroll.js
   ================================================================ */

[data-ap-parallax] {
  position: relative;
  overflow: hidden;
}
[data-ap-parallax-bg] {
  position: absolute;
  inset: -20%;
  will-change: transform;
}


/* ================================================================
   AP-08: FLOATING / LEVITATE
   Pure CSS — no JS needed
   ================================================================ */

@keyframes ap-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.ap-float      { animation: ap-float 4s ease-in-out infinite; }
.ap-float-slow { animation: ap-float 6s ease-in-out infinite; }
.ap-float-fast { animation: ap-float 2.5s ease-in-out infinite; }
.ap-float-d1   { animation-delay: 0.5s; }
.ap-float-d2   { animation-delay: 1s; }
.ap-float-d3   { animation-delay: 1.5s; }


/* ================================================================
   AP-09: STAGGERED HERO REVEAL (Page Load)
   Pure CSS — no JS needed
   ================================================================ */

@keyframes ap-hero-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ap-hero-line {
  opacity: 0;
  animation: ap-hero-in 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.ap-hero-line:nth-child(1) { animation-delay: 0.1s; }
.ap-hero-line:nth-child(2) { animation-delay: 0.25s; }
.ap-hero-line:nth-child(3) { animation-delay: 0.4s; }
.ap-hero-line:nth-child(4) { animation-delay: 0.55s; }
.ap-hero-line:nth-child(5) { animation-delay: 0.7s; }
.ap-hero-line:nth-child(6) { animation-delay: 0.85s; }


/* ================================================================
   AP-10: 3D TILT
   Requires: ap-interactions.js
   ================================================================ */

[data-ap-tilt] {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-style: preserve-3d;
  will-change: transform;
}


/* ================================================================
   AP-11: MOUSE-FOLLOW GLOW
   Requires: ap-interactions.js
   ================================================================ */

[data-ap-glow] {
  position: relative;
  overflow: hidden;
}
[data-ap-glow]::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(
    circle at var(--ap-glow-x, 50%) var(--ap-glow-y, 50%),
    color-mix(in srgb, var(--primary, var(--accent, currentColor)) 8%, transparent) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  z-index: 0;
}
[data-ap-glow]:hover::before { opacity: 1; }
[data-ap-glow] > * { position: relative; z-index: 1; }


/* ================================================================
   AP-12: MAGNETIC BUTTON
   Requires: ap-interactions.js
   ================================================================ */

[data-ap-magnetic] {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}


/* ================================================================
   AP-13: HOVER CARD LIFT
   Pure CSS — no JS needed
   ================================================================ */

.ap-hover-lift {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              box-shadow 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}


/* ================================================================
   AP-14: HOVER IMAGE ZOOM
   Pure CSS — no JS needed
   ================================================================ */

.ap-hover-zoom { overflow: hidden; }
.ap-hover-zoom > * {
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-hover-zoom:hover > * { transform: scale(1.08); }


/* ================================================================
   AP-15: HOVER OVERLAY SLIDE-UP
   Pure CSS — no JS needed
   ================================================================ */

.ap-hover-overlay { position: relative; overflow: hidden; }
.ap-hover-overlay .ap-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-hover-overlay:hover .ap-overlay { opacity: 1; }
.ap-hover-overlay .ap-overlay > * {
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-hover-overlay:hover .ap-overlay > * { transform: translateY(0); }
.ap-hover-overlay .ap-overlay > *:nth-child(2) { transition-delay: 0.05s; }
.ap-hover-overlay .ap-overlay > *:nth-child(3) { transition-delay: 0.1s; }


/* ================================================================
   AP-16: BUTTON SHIMMER
   Pure CSS — no JS needed
   ================================================================ */

.ap-shimmer { position: relative; overflow: hidden; }
.ap-shimmer::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
}
.ap-shimmer:hover::after { left: 100%; }


/* ================================================================
   AP-17: ARROW NUDGE LINKS
   Pure CSS — no JS needed
   ================================================================ */

.ap-link-arrow {
  display: inline-flex; align-items: center;
  gap: 6px;
  transition: gap 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-link-arrow:hover { gap: 10px; }
.ap-link-arrow .ap-arrow {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-link-arrow:hover .ap-arrow { transform: translateX(3px); }


/* ================================================================
   AP-19: WORD-BY-WORD SCROLL TEXT REVEAL
   Requires: ap-scroll.js
   ================================================================ */

[data-ap-word-reveal] .ap-word {
  display: inline-block;
  margin-right: 0.3em;
  transition: opacity 0.3s, color 0.3s;
}
[data-ap-word-reveal] .ap-word.ap-dim  { opacity: 0.12; }
[data-ap-word-reveal] .ap-word.ap-lit  { opacity: 1; }


/* ================================================================
   AP-20: TYPEWRITER
   Requires: ap-components.js
   ================================================================ */

[data-ap-typewriter] {
  border-right: 2px solid currentColor;
  animation: ap-blink-caret 0.8s step-end infinite;
}
@keyframes ap-blink-caret {
  0%, 100% { border-color: currentColor; }
  50% { border-color: transparent; }
}


/* ================================================================
   AP-21: FROSTED GLASS NAVBAR
   Requires: ap-nav.js
   ================================================================ */

.ap-frosted-nav {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-frosted-nav.ap-nav-scrolled {
  background-color: rgba(0, 0, 0, 0.15);
}


/* ================================================================
   AP-22: SCROLL PROGRESS BAR
   Requires: ap-scroll.js
   ================================================================ */

[data-ap-progress] {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: var(--primary, var(--accent, currentColor));
  z-index: 10000;
  transition: width 0.05s linear;
  pointer-events: none;
}


/* ================================================================
   AP-23: SNAP-SCROLL CAROUSEL
   Requires: ap-components.js
   ================================================================ */

.ap-carousel {
  display: flex; gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 20px 0;
}
.ap-carousel::-webkit-scrollbar { display: none; }
.ap-carousel-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-carousel-card:hover { transform: scale(1.02); }

.ap-carousel-dots {
  display: flex; justify-content: center;
  gap: 8px; margin-top: 24px;
}
.ap-carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; cursor: pointer;
  opacity: 0.4; background: currentColor;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-carousel-dot.ap-active {
  opacity: 1; width: 24px; border-radius: 4px;
}


/* ================================================================
   AP-24: HORIZONTAL SCROLL (Vertical-Driven)
   Requires: ap-scroll.js
   ================================================================ */

[data-ap-hscroll] { position: relative; }
[data-ap-hscroll] > .ap-hscroll-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
}
[data-ap-hscroll-track] {
  display: flex; gap: 32px;
  will-change: transform;
}


/* ================================================================
   AP-25: ACCORDION
   Requires: ap-components.js
   ================================================================ */

.ap-accordion-item {
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.ap-accordion-trigger {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0;
  background: none; border: none;
  color: inherit; font: inherit; font-weight: 600;
  text-align: left; cursor: pointer;
}
.ap-accordion-icon {
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  flex-shrink: 0;
}
.ap-accordion-item.ap-open .ap-accordion-icon { transform: rotate(45deg); }
.ap-accordion-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-accordion-item.ap-open .ap-accordion-body { max-height: 500px; }
.ap-accordion-body-inner {
  padding: 0 0 20px; opacity: 0.7; line-height: 1.7;
}


/* ================================================================
   AP-26: INFINITE MARQUEE
   Pure CSS — no JS needed
   ================================================================ */

.ap-marquee { overflow: hidden; }
.ap-marquee-track {
  display: flex; width: max-content;
  animation: ap-marquee-scroll 30s linear infinite;
}
.ap-marquee:hover .ap-marquee-track { animation-play-state: paused; }
@keyframes ap-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ap-marquee-item {
  flex-shrink: 0; padding: 0 48px; white-space: nowrap;
}


/* ================================================================
   AP-27: TAB SWITCHER
   Requires: ap-components.js
   ================================================================ */

.ap-tab-bar {
  display: flex; gap: 4px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 980px; padding: 4px;
  width: fit-content;
}
.ap-tab-btn {
  padding: 10px 24px; border-radius: 980px;
  border: none; background: transparent;
  color: inherit; font: inherit;
  opacity: 0.6; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ap-tab-btn.ap-active {
  background: rgba(128, 128, 128, 0.15);
  opacity: 1;
}
.ap-tab-panel { display: none; animation: ap-tab-fade 0.4s cubic-bezier(0.25, 0.1, 0.25, 1); }
.ap-tab-panel.ap-active { display: block; }
@keyframes ap-tab-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   AP-28: GRAIN / NOISE OVERLAY
   Pure CSS — no JS needed
   ================================================================ */

.ap-grain::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}


/* ================================================================
   AP-29: GRADIENT TEXT
   Pure CSS — no JS needed
   ================================================================ */

.ap-gradient-text {
  background: linear-gradient(
    135deg,
    var(--primary, var(--accent, orange)) 0%,
    color-mix(in srgb, var(--primary, var(--accent, orange)) 60%, white) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ================================================================
   AP-30: AMBIENT GLOW (Background Pulse)
   Pure CSS — no JS needed
   ================================================================ */

.ap-ambient-glow { position: relative; }
.ap-ambient-glow::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary, var(--accent, orange)) 15%, transparent) 0%,
    transparent 70%
  );
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ap-glow-pulse 6s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes ap-glow-pulse {
  0%   { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}
.ap-ambient-glow > * { position: relative; z-index: 1; }


/* ================================================================
   ACCESSIBILITY: REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .ap-reveal, .ap-reveal-left, .ap-reveal-right, .ap-reveal-scale,
  .ap-clip-wipe, .ap-clip-circle {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .ap-float, .ap-float-slow, .ap-float-fast, .ap-hero-line,
  [data-ap-typewriter], .ap-marquee-track,
  .ap-ambient-glow::before {
    animation: none !important;
    opacity: 1 !important;
  }
  .ap-shimmer::after { transition: none !important; }
  .ap-hover-lift, .ap-hover-zoom > *, [data-ap-tilt],
  [data-ap-magnetic], [data-ap-progress] {
    transition: none !important;
  }
}