/* ============================================================
   Custom Head CSS
   ────────────────────────────────────────────────────────────
   Webflow → Page Settings → Inside <head> tag
   <style> 태그로 감싸서 붙여넣기

   Designer가 지원하지 않는 CSS만 포함:
   - CSS 변수 (:root)
   - clamp(), min(), dvh, aspect-ratio
   - FOUC gate
   - Noise overlay
   - Stripe fill reveal 구조
   - Reduced motion
   - Complex selectors
   ============================================================ */

/* --- CSS Variables --- */
:root {
  --satz-color-bg: #0D0D0D;
  --satz-color-text: #F5F5F0;
  --satz-color-mute: rgba(245, 245, 240, 0.5);
  --satz-color-dim: rgba(245, 245, 240, 0.3);
  --satz-page-px: clamp(1.25rem, 3vw, 2.5rem);
}

/* --- FOUC Gate --- */
html:not(.satz-ready) body {
  visibility: hidden;
}

/* --- Noise Overlay --- */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px;
  mix-blend-mode: overlay;
  opacity: 0.12;
}

/* --- Landing: Designer 미지원 속성 보강 --- */
.landing {
  height: 100dvh;
  padding-left: var(--satz-page-px);
  padding-right: var(--satz-page-px);
}

.landing__header {
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.landing__showcase {
  padding-top: clamp(1rem, 2vw, 2rem);
  padding-bottom: clamp(1rem, 2vw, 2rem);
  gap: clamp(0.625rem, 1vw, 0.875rem);
}

.landing__project-meta {
  width: min(100%, 56rem);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.landing__card {
  width: min(100%, 56rem);
  aspect-ratio: 16 / 9;
}

.landing__footer {
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Hover: complex selector --- */
.landing__card:hover .landing__video-placeholder {
  opacity: 1;
}

/* --- CSS variable 참조 색상 --- */
.landing__meta-label {
  color: var(--satz-color-text);
}

.landing__meta-value {
  color: var(--satz-color-mute);
}

.landing__pm-item {
  color: var(--satz-color-mute);
}

.landing__footer-item {
  color: var(--satz-color-mute);
}

/* ============================================================
   Stripe Fill Reveal — 065 block 구조
   JS가 동적으로 생성하는 DOM의 CSS
   ============================================================ */
.sfr-slices {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 0;
  pointer-events: none;
  will-change: transform;
}

.sfr-slice {
  position: relative;
  overflow: hidden;
  contain: paint;
}

.sfr-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(245, 245, 240, 0.06);
  will-change: transform;
  transform: scaleX(0);
  transform-origin: left center;
}

/* ============================================================
   Responsive — Mobile (<768px)
   Designer 미지원 속성만
   ============================================================ */
@media (max-width: 767.98px) {
  .landing {
    height: auto;
    min-height: 100dvh;
  }

  .landing__header-col:nth-child(3),
  .landing__header-col:nth-child(4) {
    display: none;
  }

  .landing__card {
    width: 100%;
  }

  .landing__project-meta {
    width: 100%;
  }
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
