/* ============================================================
   DESIGN UTILITIES — Thakuranijiworld Shared Classes
   Additive utility classes referencing --tk-* design tokens.
   Import AFTER design-tokens.css.
   ============================================================ */

/* ── Typography ────────────────────────────────────── */

.tk-heading-display {
  font-family: var(--tk-ff-display);
  font-size: var(--tk-fs-display);
  font-weight: 700;
  letter-spacing: var(--tk-tracking-display);
  line-height: 1.05;
  color: var(--tk-text);
}

.tk-heading-h1 {
  font-family: var(--tk-ff-display);
  font-size: var(--tk-fs-h1);
  font-weight: 700;
  letter-spacing: var(--tk-tracking-h1);
  line-height: 1.1;
  color: var(--tk-text);
}

.tk-heading-h2 {
  font-family: var(--tk-ff-display);
  font-size: var(--tk-fs-h2);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tk-text);
}

.tk-heading-h3 {
  font-family: var(--tk-ff-display);
  font-size: var(--tk-fs-h3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tk-text);
}

.tk-heading-h4 {
  font-family: var(--tk-ff-body);
  font-size: var(--tk-fs-h4);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tk-text);
}

.tk-body {
  font-family: var(--tk-ff-body);
  font-size: var(--tk-fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--tk-text);
}

.tk-body-sm {
  font-family: var(--tk-ff-body);
  font-size: var(--tk-fs-small);
  font-weight: 400;
  line-height: 1.5;
  color: var(--tk-text-mid);
}

.tk-label {
  font-family: var(--tk-ff-body);
  font-size: var(--tk-fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tk-tracking-caps);
  text-transform: uppercase;
  color: var(--tk-text-quiet);
}

/* ── Layout: Containers ────────────────────────────── */

.tk-container {
  width: 100%;
  max-width: var(--tk-container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tk-space-lg);
  padding-right: var(--tk-space-lg);
}

.tk-container--sm {
  max-width: var(--tk-container-sm);
}

.tk-container--md {
  max-width: var(--tk-container-md);
}

.tk-container--xl {
  max-width: var(--tk-container-xl);
}

/* ── Layout: Section Wrappers (Article XIII) ───────── */

.tk-section {
  padding-top: var(--tk-space-2xl);
  padding-bottom: var(--tk-space-2xl);
}

.tk-section--light {
  background-color: var(--tk-theme-light-bg);
  color: var(--tk-theme-light-text);
}

.tk-section--dark {
  background-color: var(--tk-theme-dark-bg);
  color: var(--tk-theme-dark-text);
}

.tk-section--subtle {
  background-color: var(--tk-theme-subtle-bg);
  color: var(--tk-theme-subtle-text);
}

.tk-section--gravity {
  background-color: var(--tk-theme-gravity-bg);
  color: var(--tk-theme-gravity-text);
}

.tk-section--hero {
  padding-top: var(--tk-space-3xl);
  padding-bottom: var(--tk-space-3xl);
}

/* ── Buttons ───────────────────────────────────────── */

.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tk-space-sm);
  font-family: var(--tk-ff-body);
  font-size: var(--tk-fs-body);
  font-weight: 600;
  line-height: 1;
  padding: 14px 32px;
  border-radius: var(--tk-r);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--tk-duration-fast) var(--tk-ease-default);
  min-height: 48px;
}

.tk-btn--primary {
  background-color: var(--tk-saffron);
  color: var(--tk-white);
  box-shadow: var(--tk-sh-subtle);
}

.tk-btn--primary:hover {
  background-color: var(--tk-saffron-hover);
  transform: translateY(-2px);
  box-shadow: var(--tk-sh-card), 0 4px 16px var(--tk-saffron-glow);
}

.tk-btn--outline {
  background-color: transparent;
  color: var(--tk-text);
  box-shadow: inset 0 0 0 1.5px var(--tk-border);
}

.tk-btn--outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--tk-text-quiet);
  transform: translateY(-1px);
}

.tk-btn--outline-light {
  color: var(--tk-ivory);
  box-shadow: inset 0 0 0 1.5px rgba(250, 248, 244, 0.3);
}

.tk-btn--outline-light:hover {
  box-shadow: inset 0 0 0 1.5px rgba(250, 248, 244, 0.6);
  transform: translateY(-1px);
}

.tk-btn--sm {
  font-size: var(--tk-fs-small);
  padding: 10px 22px;
  min-height: 40px;
}

.tk-btn--lg {
  font-size: 1.125rem;
  padding: 17px 44px;
  min-height: 56px;
}

/* ── CTA Pair (Article XV.1) ───────────────────────── */

.tk-cta-pair {
  display: flex;
  align-items: center;
  gap: var(--tk-space-md);
  flex-wrap: wrap;
}

.tk-cta-pair--center {
  justify-content: center;
}

/* ── Shadows ───────────────────────────────────────── */

.tk-shadow-subtle { box-shadow: var(--tk-sh-subtle); }
.tk-shadow-card { box-shadow: var(--tk-sh-card); }
.tk-shadow-lifted { box-shadow: var(--tk-sh-lifted); }
.tk-shadow-dramatic { box-shadow: var(--tk-sh-dramatic); }

/* ── Reduced Motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tk-btn,
  .tk-btn--primary:hover,
  .tk-btn--outline:hover,
  .tk-btn--outline-light:hover {
    transition: none;
    transform: none;
  }
}

/* ── Responsive Adjustments ────────────────────────── */

@media (max-width: 640px) {
  .tk-heading-display { font-size: 2.5rem; }
  .tk-heading-h1 { font-size: 2rem; }
  .tk-heading-h2 { font-size: 1.75rem; }
  .tk-section { padding-top: var(--tk-space-xl); padding-bottom: var(--tk-space-xl); }
  .tk-section--hero { padding-top: var(--tk-space-2xl); padding-bottom: var(--tk-space-2xl); }
  .tk-container { padding-left: var(--tk-space-md); padding-right: var(--tk-space-md); }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .tk-heading-display { font-size: 3.5rem; }
  .tk-container { padding-left: var(--tk-space-xl); padding-right: var(--tk-space-xl); }
}

/* ============================================================
   SCROLL ANIMATIONS — Site-wide animation utilities
   Ported from homepage-v2.css for consistent motion across pages.
   Uses IntersectionObserver (see site-base.html commonjavascript).
   ============================================================ */

/* ── Keyframe Definitions ─────────────────────────────────── */

@keyframes tk-fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tk-fade-in-up-blur {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes tk-slide-in-left {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tk-slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes tk-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tk-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tk-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Scroll-triggered Animation Classes ───────────────────── */

/* Base class: hidden until IntersectionObserver adds .hp-visible */
.hp-animate-on-scroll {
  opacity: 0;
}

/* Animation variants — triggered when .hp-visible is added */
.hp-animate-on-scroll.hp-visible.hp-enter-subtle {
  animation: tk-fade-in-up 0.6s ease-out both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-playful {
  animation: tk-fade-in-up-blur 0.7s ease-out both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-slide-left {
  animation: tk-slide-in-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-slide-right {
  animation: tk-slide-in-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-scale {
  animation: tk-scale-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-fade {
  animation: tk-fade-in 0.8s ease-out both;
}

.hp-animate-on-scroll.hp-visible.hp-enter-rise {
  animation: tk-rise-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Reduced Motion: Respect user preference ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .hp-animate-on-scroll {
    opacity: 1 !important;
    animation: none !important;
  }
}