/* ==========================================================================
   Dev in Forest - Shared Component System
   ========================================================================== */

/* CSS Custom Properties - Design Tokens */
:root {
  /* Layout Variables */
  --g1w: clamp(720px, 70vw, 1200px);
  --g1h: clamp(480px, 46vw, 800px);
  --g2w: clamp(1000px, 95vw, 1600px);
  --g2h: clamp(700px, 75vw, 1100px);
  
  /* Focus Ring System */
  --ring-light: rgba(2,40,64,0.55);
  --ring-light-outer: rgba(2,40,64,0.20);
  --ring-dark: rgba(255,255,255,0.85);
  --ring-dark-outer: rgba(255,255,255,0.25);
  
  /* Interactive Effects */
  --shine-band: rgba(2,40,64,0.16);
  --cta-halo-light: rgba(2,40,64,0.06);
  --cta-halo-dark: rgba(255,255,255,0.08);
  
  /* Animation Timing */
  --transition-fast: 140ms ease;
  --transition-medium: 240ms ease;
  --transition-slow: 380ms ease;
  --transition-shine: 600ms ease;
}

html.dark {
  --g1w: clamp(820px, 75vw, 1400px);
  --g1h: clamp(560px, 52vw, 900px);
  --g2w: clamp(1200px, 100vw, 1800px);
  --g2h: clamp(820px, 85vw, 1200px);
  --shine-band: rgba(255,255,255,0.35);
}

/* ==========================================================================
   Base Layout System
   ========================================================================== */

/* Ambient gradient background system */
.dif-ambient-bg {
  background-image:
    radial-gradient(900px 620px at 8% -6%, rgba(163,191,186,0.12), transparent 70%),
    radial-gradient(1200px 840px at 92% 108%, rgba(93,145,166,0.10), transparent 68%);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 200% 200%, 200% 200%;
  padding-bottom: var(--cookie-banner-offset, 0px);
}

html.dark .dif-ambient-bg {
  background-image:
    radial-gradient(1100px 740px at 8% -6%, rgba(150,200,210,0.14), transparent 74%),
    radial-gradient(1600px 1100px at 96% 118%, rgba(255,255,255,0.050), transparent 74%);
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 200% 200%, 200% 200%;
  padding-bottom: var(--cookie-banner-offset, 0px);
}

/* ==========================================================================
   Section Frame System
   ========================================================================== */

.dif-section-frame {
  border-radius: 16px;
  border: 1px solid rgba(2,40,64,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.44));
  box-shadow: 
    0 1px 1px rgba(2,40,64,0.05), 
    0 16px 32px -16px rgba(2,40,64,0.24);
  backdrop-filter: blur(8px);
  padding: 1.25rem;
}

html.dark .dif-section-frame {
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(18,22,26,0.46), rgba(12,16,20,0.40));
  box-shadow: 0 1px 1px rgba(0,0,0,0.35), 0 20px 38px -20px rgba(0,0,0,0.50);
}

/* Responsive padding for section frames */
@media (min-width: 640px) {
  .dif-section-frame { padding: 1.75rem; }
}

@media (min-width: 1024px) {
  .dif-section-frame { padding: 2rem; }
}

/* Section frame in-view enhancement */
.dif-section-frame.in-view {
  border-color: rgba(2,40,64,0.16);
  box-shadow: 0 1px 1px rgba(2,40,64,0.05), 0 18px 36px -18px rgba(2,40,64,0.28);
}

html.dark .dif-section-frame.in-view {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 1px 1px rgba(0,0,0,0.38), 0 28px 50px -26px rgba(0,0,0,0.70);
}

/* ==========================================================================
   Focus System - Accessibility First
   ========================================================================== */

.dif-focus-ring:focus-visible {
  outline: 2px solid var(--ring-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--ring-light-outer);
}

html.dark .dif-focus-ring:focus-visible {
  outline: 2px solid var(--ring-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--ring-dark-outer);
}

/* ==========================================================================
   Interactive Component System
   ========================================================================== */

/* Base interactive element with shine effect */
.dif-interactive {
  position: relative;
  overflow: hidden;
}

.dif-interactive::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 140%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, var(--shine-band) 50%, transparent 80%);
  transform: translateX(-60%);
  transition: transform var(--transition-shine);
}

.dif-interactive:hover::before,
.dif-interactive:focus-visible::before {
  transform: translateX(60%);
}

/* CTA Component - Primary Action Button */
.dif-cta {
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--transition-medium), transform var(--transition-fast);
}

.dif-cta::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 140%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, var(--shine-band) 50%, transparent 80%);
  transform: translateX(-60%);
  transition: transform var(--transition-shine);
}

.dif-cta::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.18), rgba(255,255,255,0) 70%);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--transition-slow), transform 480ms ease;
  pointer-events: none;
}

.dif-cta:hover::before,
.dif-cta:focus-visible::before {
  transform: translateX(60%);
}

.dif-cta:hover::after {
  opacity: 1;
  transform: scale(1);
}

.dif-cta:hover,
.dif-cta:focus-visible {
  box-shadow: 0 0 0 8px var(--cta-halo-light);
}

html.dark .dif-cta:hover,
html.dark .dif-cta:focus-visible {
  box-shadow: 0 0 0 8px var(--cta-halo-dark);
}

.dif-cta:active {
  transform: translateY(1px) scale(0.99);
}

/* Chip Component - Secondary Interactive Element */
.dif-chip {
  position: relative;
  overflow: hidden;
}

.dif-chip::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 140%;
  height: 180%;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, var(--shine-band) 50%, transparent 80%);
  transform: translateX(-60%);
  transition: transform var(--transition-shine);
}

.dif-chip:hover::before,
.dif-chip:focus-visible::before {
  transform: translateX(60%);
}

/* ==========================================================================
   Animation System
   ========================================================================== */

/* CTA Shimmer - One-time trigger animation */
@keyframes dif-cta-sweep {
  from { transform: translateX(-60%); }
  to { transform: translateX(60%); }
}

.dif-cta-shimmer::before {
  transform: translateX(-60%);
  animation: dif-cta-sweep 900ms ease;
}

/* Pulse animations */
@keyframes dif-pulse-in {
  from { transform: scale(0.98); }
  to { transform: scale(1); }
}

.dif-pulse-in {
  animation: dif-pulse-in 200ms ease;
}

@keyframes dif-arrive-pulse {
  from { transform: scale(0.98); }
  to { transform: scale(1); }
}

.dif-arrive-pulse {
  animation: dif-arrive-pulse 200ms ease;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Vertical rhythm for content sections */
.dif-content-flow :where(h2, h3, h4, p, ul, ol, blockquote) + :where(h3, h4, p, ul, ol, blockquote) {
  margin-top: 0.6rem;
}

/* Anchor offset for sticky headers */
.dif-anchor-offset {
  scroll-margin-top: calc(var(--header-h, 64px) + 12px);
}

/* Target highlight for hash navigation */
.dif-target-highlight:target {
  outline: 2px solid var(--ring-light);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--ring-light-outer);
}

html.dark .dif-target-highlight:target {
  outline: 2px solid var(--ring-dark);
  box-shadow: 0 0 0 6px var(--ring-dark-outer);
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  
  .dif-interactive::before,
  .dif-cta::before,
  .dif-cta::after,
  .dif-chip::before {
    transition: none !important;
  }
}

/* ==========================================================================
   Component Variants
   ========================================================================== */

/* Component Variants - Placeholder for future expansion */
/* These variants inherit base .dif-cta styles and can be extended as needed */