/* ============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ========================================================================= */

:root {
  --background: #f8f6f2;
  --foreground: #2b2b2b;

  --font-base: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";

  --font-heading: var(--font-base);
  --font-body: var(--font-base);

  --heading: #2b2b2b;
  --text: #000000;
  --brand: #ff4f58;

  --primary: #ff4f58;
  --primary-foreground: #ffffff;
}

/* ============================================================================
   CSS LAYERS
   ========================================================================= */

@layer reset, base, components, utilities;

/* ============================================================================
   RESET STYLES
   ========================================================================= */

@layer reset {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
  }
}

/* ============================================================================
   BASE SLIDE CONTAINER
   ========================================================================= */

.main.blog-archive {
  margin: 0;
}

.lp-slide {
  min-height: 100svh;
  display: grid;
  align-items: center;
  justify-content: flex-start;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  padding: clamp(20px, 10vw, 147px);
  position: relative;
  overflow: clip;
}

/* Archive hero - align content to top */
.lp-slide.lp-variant-hero .archive-hero-content {
  align-self: flex-start;
}

.lp-slide.lp-variant-hero:has(.archive-hero-content) {
  align-items: flex-start;
  min-height: unset;
}

.lp-inner {
  max-width: 1156px;
  width: 100%;
}

.lp-inner.archive-blog-items-wrapper {
  padding: 0;
}

/* ============================================================================
   COLOR SCHEMES
   ========================================================================= */

.lp-slide.lp-color-scheme-primary {
  --background: var(--primary);
  --foreground: var(--primary-foreground);
  --heading: var(--primary-foreground);
  --text: var(--primary-foreground);
  --brand: var(--primary-foreground);
}

/* ============================================================================
   TYPOGRAPHY - TITLES & DESCRIPTIONS
   ========================================================================= */

/* Main title */
.lp-title {
  font-family: var(--font-heading);
  color: var(--heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -6px;
  margin-block-end: 48px;
  font-size: clamp(80px, 10vw, 160px);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-shadow: 7px 11px 8px rgba(0, 0, 0, 0.1);
}

/* Archive hero title - 88px font size */
.lp-slide.lp-variant-hero:has(.archive-hero-content) .lp-title {
  font-size: clamp(3.5rem, 5.5vw, 5.5rem); /* 56px to 88px */
  line-height: 1.1;
  letter-spacing: -0.0375em;
}

/* Case study title variant */
.lp-title.lp-title-cs {
  font-size: clamp(56px, 6vw, 88px);
  letter-spacing: clamp(-6px, -0.4vw, -4px);
}

/* Description text */
.lp-desc {
  color: var(--text);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.4;
  max-width: 754px;
  margin-block-end: 48px;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================================================
   ANIMATION SUPPORT (GSAP)
   ========================================================================= */

/* Split text animation support - GSAP mask: "lines" handles the masking */
.lp-title,
.lp-desc,
.lp-cta {
  will-change: transform;
}

.lp-title *,
.lp-desc *,
.lp-cta * {
  will-change: transform;
}

/* ============================================================================
   BUTTONS & CALL-TO-ACTION
   ========================================================================= */

/* Main CTA button */
.btn.lp-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--text);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* CTA icon container */
.btn.lp-cta .lp-cta-icon {
  position: relative;
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand);
}

/* CTA icon SVG */
.btn.lp-cta .lp-cta-icon svg {
  color: var(--foreground);
  flex-shrink: 0;
  transition: transform 0.2s ease-in-out;
}

.btn.lp-cta .lp-cta-icon svg * {
  stroke: var(--background);
  /* fill: var(--background); */
}

/* CTA hover effect */
.btn.lp-cta:hover .lp-cta-icon svg {
  transform: translate(4px, -4px);
}

/* ============================================================================
   SERVICE PILLS
   ========================================================================= */

/* Pills container */
.lp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

/* Individual pill */
.lp-pill {
  padding: 12px 24px;
  border: 1px solid #0000001a;
  border-radius: 999px;
  color: var(--foreground);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
}

/* Pill CTA wrapper */
.lp-pill-cta-wrap {
  display: flex;
  align-items: center;
  margin-inline-start: 64px;
}

/* ============================================================================
   LAYOUT - SPLIT & FEATURE SECTIONS
   ========================================================================= */

/* Split layout (left content, right image) */
.lp-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
}

/* ============================================================================
   SPHERES (ANIMATED DECORATIONS)
   ========================================================================= */

/* Sphere elements - dynamically created by JS */

.lp-spheres {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}
.lp-spheres .lp-sphere-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.lp-sphere {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  z-index: 10;
}

/* Hero Spheres Positioning and Sizes */
.lp-spheres.lp-hero-spheres .lp-sphere-wrap :nth-child(1) {
  top: 5.8%;
  right: 11.9%;
  width: 25.21vw; /* 363px / 1440 * 100 = 25.21vw */
  height: 25.21vw; /* 363px / 1440 * 100 = 25.21vw */
  opacity: 0.2;
  background: linear-gradient(135deg, #ff4f58 0%, #ff8f58 100%);
  filter: blur(7.78vw); /* 112px / 1440 * 100 = 7.78vw */
}
.lp-spheres.lp-hero-spheres .lp-sphere-wrap :nth-child(2) {
  top: 53%;
  right: 1.2%;
  width: 19.51vw; /* 280.87px / 1440 * 100 = 19.51vw */
  height: 19.51vw; /* 280.87px / 1440 * 100 = 19.51vw */
  opacity: 0.15;
  background: linear-gradient(225deg, #4f9fff 0%, #8f58ff 100%);
  filter: blur(4.38vw); /* 63px / 1440 * 100 = 4.38vw */
}
.lp-spheres.lp-hero-spheres .lp-sphere-wrap :nth-child(3) {
  top: 79.8%;
  right: 11.9%;
  width: 10.42vw; /* 150px / 1440 * 100 = 10.42vw */
  height: 10.42vw; /* 150px / 1440 * 100 = 10.42vw */
  opacity: 0.25;
  background: linear-gradient(315deg, #ffcd4f 0%, #ff8f58 100%);
  filter: blur(7.36vw); /* 106px / 1440 * 100 = 7.36vw */
}

/* Services Spheres Positioning and Sizes */
/* 1. top: 187px; left: -135px; */
.lp-spheres.lp-services-spheres .lp-sphere-wrap :nth-child(1) {
  top: 21.25%; /* 187 / 880 * 100 */
  left: -9.375vw; /* -135 / 1440 * 100 */
  width: 25.21vw; /* 363 / 1440 * 100 */
  height: 25.21vw; /* 363 / 1440 * 100 */
  opacity: 0.2;
  background: linear-gradient(135deg, #ff4f58 0%, #ff8f58 100%);
  filter: blur(7.78vw); /* 112 / 1440 * 100 */
}
/* 2. top: 410px; left: 1302px; */
.lp-spheres.lp-services-spheres .lp-sphere-wrap :nth-child(2) {
  top: 46.59%; /* 410 / 880 * 100 */
  left: 90.42vw; /* 1302 / 1440 * 100 */
  width: 19.51vw; /* 280.87 / 1440 * 100 */
  height: 19.51vw; /* 280.87 / 1440 * 100 */
  opacity: 0.15;
  background: linear-gradient(225deg, #4f9fff 0%, #8f58ff 100%);
  filter: blur(4.38vw); /* 63 / 1440 * 100 */
}
/* 3. top: 777px; left: 1140px; */
.lp-spheres.lp-services-spheres .lp-sphere-wrap :nth-child(3) {
  top: 88.3%; /* 777 / 880 * 100 */
  left: 79.17vw; /* 1140 / 1440 * 100 */
  width: 10.42vw; /* 150 / 1440 * 100 */
  height: 10.42vw; /* 150 / 1440 * 100 */
  opacity: 0.25;
  background: linear-gradient(315deg, #ffcd4f 0%, #ff8f58 100%);
  filter: blur(7.36vw); /* 106 / 1440 * 100 */
}

/* ============================================================================
   ARTWORK & IMAGES
   ========================================================================= */

/* Art wrapper container */
.lp-art-wrap {
  position: relative;
}

/* Art container */
.lp-art {
  position: absolute;
  will-change: transform;
}

/* Art item */
.lp-art-item {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Art item images */
.lp-art-item img {
  position: absolute;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* General art images */
.lp-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   CASE STUDY SECTION
   ========================================================================= */

/* Case study layout */
.cs-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 4vw, 48px);
  align-items: center;
  min-height: 80svh;
}

/* Case study copy text */
.cs-copy {
  position: relative;
  z-index: 1;
}

/* Case study laptop animation */
.cs-laptop {
  position: absolute;
  /* width: min(720px, 80vw); */
  width: 100%;
  will-change: transform, filter;
  z-index: 3;
}

.cs-laptop img {
  width: 100%;
  height: auto;
  display: block;
}

/* Case study blur overlay effect */
.cs-blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0px);
  background: rgba(248, 246, 242, 0);
  pointer-events: none;
  z-index: 2;
  will-change: backdrop-filter, background;
}

/* ============================================================================
   NEWS SECTION
   ========================================================================= */

/* News grid */
.news {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}

/* Individual news item */
.news-item {
  max-width: 541px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

/* News item timestamp */
.news-item time {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
}

/* News item CTA */
.news-item .lp-cta {
  margin-block-start: 1rem;
}

/* News item title */
.news-title {
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(24px, 3vw, 40px);
  margin-block-end: auto;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ============================================================================
   HERO VARIANT - HERO IMAGES
   ========================================================================= */

/* Hero images wrapper - absolute positioned container */
.lp-hero-art-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/* Hero art items - positioned by JS */
.lp-hero-art {
  position: absolute;
  will-change: transform;
  opacity: 0;
  /* All dimensions and positioning handled by JS */
}

.lp-hero-art-item {
  pointer-events: auto;
}

/* ============================================================================
   SERVICES VARIANT - SERVICES IMAGES
   ========================================================================= */

/* Services images wrapper - absolute positioned container */
.lp-services-art-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
  z-index: 0;
}

/* Services art items - positioned by JS */
.lp-services-art {
  position: absolute;
  will-change: transform;
  opacity: 0;
  /* All dimensions and positioning handled by JS */
}

/* ============================================================================
   MOUSE PARALLAX ANIMATION - 3D TRANSFORMS
   ========================================================================= */

/* Enable 3D transforms for parallax images */
[data-mouse-parallax="true"] {
  transform-style: preserve-3d;
  perspective: 1000px;
}

[data-mouse-parallax="true"] img {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.lp-hero-art img {
  object-fit: cover;
}

/* ============================================================================
   WORK SHOWCASE VARIANT
   ========================================================================= */

/* Work showcase slide container */
.lp-slide.lp-variant-work-showcase {
  position: relative;
  display: grid;
  align-items: center;
  justify-content: flex-start;
  padding: 0 147px;
  overflow: hidden;
}

/* Work showcase art wrapper */
.lp-variant-work-showcase .lp-art-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  height: 100%;
  width: 100%;
}

/* Work showcase art items */
.lp-variant-work-showcase .lp-art {
  position: absolute;
  width: 180px;
  height: auto;
  aspect-ratio: 9 / 16;
  right: auto;
  bottom: auto;
  overflow: clip;
  border-radius: 1rem;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
}

.lp-variant-work-showcase .lp-art-item {
  pointer-events: auto;
}

/* Work showcase image positioning - sized and positioned for visual interest */
.lp-art-wrap .lp-art:nth-child(1) {
  width: 22.5vw; /* 324 / 1440 * 100 = 22.5vw */
  height: 20.2vh; /* 178 / 880 * 100 = 20.2vh */
  top: -4%;
  right: 12%;
}

.lp-art-wrap .lp-art:nth-child(2) {
  width: 29.4vw; /* 423 / 1440 * 100 = 29.375vw */
  height: 26.4vh; /* 232 / 880 * 100 = 26.36vh */
  top: 20%;
  right: -3%;
}

.lp-art-wrap .lp-art:nth-child(3) {
  width: 17.2vw; /* 248 / 1440 * 100 = 17.22vw */
  height: 15.5vh; /* 136 / 880 * 100 = 15.45vh */
  top: 27%;
  right: 29%;
}

.lp-art-wrap .lp-art:nth-child(4) {
  width: 20.9vw; /* 301 / 1440 * 100 = 20.9vw */
  height: 18.75vh; /* 165 / 880 * 100 = 18.75vh */
  top: 50%;
  right: 8%;
}

.lp-art-wrap .lp-art:nth-child(5) {
  width: 30.5vw; /* 439 / 1440 * 100 = 30.49vw */
  height: 30.7vh; /* 270 / 880 * 100 = 30.7vh */
  bottom: -2%;
  right: -3%;
}

.lp-art-wrap .lp-art:nth-child(6) {
  width: 17.2vw; /* 248 / 1440 * 100 = 17.22vw */
  height: 15.5vh; /* 136 / 880 * 100 = 15.45vh */
  bottom: 5%;
  right: 26%;
}

/* ============================================================================
   NO-JS FALLBACK
   ========================================================================= */

/* Scroll snap fallback for browsers without animation-timeline support */
@supports not (animation-timeline: scroll()) {
  html:has(.lp-slide) {
    scroll-snap-type: y mandatory;
  }
  .lp-slide {
    scroll-snap-align: start;
  }
}

/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================= */

@media (max-width: 768px) {
  /* Typography improvements for mobile */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
  }

  /* Base slide - account for fixed mobile header (70px) */
  .lp-slide {
    padding-top: calc(70px + 20px) !important;
  }

  /* Pills - stack vertically on mobile */
  .lp-pills {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .lp-pill-cta-wrap {
    margin-inline-start: 0;
    margin-block-start: 1rem;
  }

  /* Hide hero images on mobile */
  .lp-hero-art-wrap {
    display: none !important;
  }

  /* Work showcase variant - mobile adjustments */
  .lp-slide.lp-variant-work-showcase {
    padding: calc(70px + 20px) 1.5rem 1.5rem 1.5rem !important;
  }

  .lp-variant-work-showcase .lp-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Work showcase images - grid layout on mobile */
  .lp-variant-work-showcase .lp-art-wrap {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    min-height: 400px;
  }

  .lp-variant-work-showcase .lp-art {
    position: relative;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* Case study - single column on mobile */
  .cs-wrap {
    grid-template-columns: 1fr;
  }

  /* Case study laptop - static on mobile (no animation) */
  .cs-laptop {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 2rem;
  }

  .cs-blur-overlay {
    display: none;
  }

  /* News - single column on mobile */
  .news {
    grid-template-columns: 1fr;
  }
}