/* DESIGN TOKENS */
:root {
  --bg: #ffffff; --surface: #fafaf9; --text: #1a1a18;
  --text-muted: #66615c; --text-dim: #a8a4a0;
  --accent: #c4a87c; --white: #fff; --black: #000;
  --sans: 'Inter', -apple-system, sans-serif;
  --serif: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family: var(--sans); font-weight: 300; color: var(--text);
  background: var(--bg); line-height: 1.6; overflow-x: hidden;
}
body.is-loading { overflow: hidden; }

/* LOADER */
#loader {
  position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center; background:var(--bg);
  transition: opacity .6s var(--ease), visibility .6s;
}
#loader.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }

.loader-inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.loader-bar {
  width:120px; height:2px; background:var(--text-dim);
  border-radius:2px; overflow:hidden; position:relative;
}
.loader-bar::after {
  content:''; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background:var(--accent); border-radius:2px;
  animation: loaderSlide 1.2s var(--ease) infinite;
}
@keyframes loaderSlide { 0%{left:-40%} 100%{left:100%} }
.loader-text {
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-muted); font-weight:400;
}

/* HERO */
.hero-section {
  position:relative; height:100vh; display:flex; align-items:center;
  justify-content:center; text-align:center; background:var(--bg); overflow:hidden;
}
.hero-content { position:relative; z-index:2; padding:2.5rem; }
.hero-eyebrow {
  font-size:.7rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--accent); margin-bottom:2.5rem; font-weight:500;
  opacity:0; transform:translateY(20px); animation:fadeUp 1s var(--ease) .3s forwards;
}
.hero-title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.5rem,8vw,6rem); line-height:1.1;
  letter-spacing:-.02em; color:var(--text); margin-bottom:2.5rem;
}
.hero-title-line {
  display:block; opacity:0; transform:translateY(40px);
  animation:fadeUp 1s var(--ease) forwards;
}
.hero-title-line:nth-child(1) { animation-delay:.5s; }
.hero-title-line:nth-child(2) { animation-delay:.7s; }
.hero-subtitle {
  font-size:.85rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-muted); opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--ease) 1s forwards;
}
.scroll-indicator {
  position:absolute; bottom:4rem; left:50%; transform:translateX(-50%);
  opacity:0; animation:fadeUp 1s var(--ease) 1.4s forwards;
}
.scroll-line {
  width:1px; height:60px;
  background:linear-gradient(to bottom,var(--accent),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }

/* VIDEO SCROLL */
.video-scroll-container { position:relative; height:500vh; }
.video-sticky-wrapper {
  position:sticky; top:0; width:100%; height:100vh;
  overflow:hidden; background:var(--black);
}
/* CANVAS ELEMENT */
#video-canvas {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  min-width:100%; min-height:100%; width:auto; height:auto; object-fit:cover;
}

/* VIDEO OVERLAYS */
.video-overlay { position:absolute; left:0; right:0; pointer-events:none; z-index:2; }
.video-overlay--top {
  top:0; height:30%;
  background:linear-gradient(to bottom,rgba(255,255,255,.6),transparent);
}
.video-overlay--bottom {
  bottom:0; height:40%;
  background:linear-gradient(to top,rgba(255,255,255,.7),transparent);
}

/* OVERLAY TEXT */
.overlay-text-group { position:absolute; inset:0; z-index:3; pointer-events:none; }
.overlay-text {
  position:absolute; bottom:10%; left:6%; max-width:500px;
  opacity:0; transform:translateY(30px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.overlay-text.is-visible { opacity:1; transform:translateY(0); }
.overlay-eyebrow {
  display:inline-block; font-size:.65rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--accent); font-weight:500;
  margin-bottom:1rem; padding-bottom:.5rem; border-bottom:1px solid var(--accent);
}
.overlay-heading {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.15;
  color:var(--text); margin-bottom:1rem;
}
.overlay-body {
  font-size:clamp(.85rem,1.2vw,1rem); line-height:1.7;
  color:var(--text-muted); font-weight:400; max-width:380px;
}

/* SCROLL PROGRESS */
.scroll-progress { position:absolute; right:3%; top:50%; transform:translateY(-50%); z-index:4; }
.scroll-progress-track {
  width:2px; height:120px; background:rgba(0,0,0,.05);
  border-radius:2px; overflow:hidden;
}
.scroll-progress-fill {
  width: 100%;
  height: 0%;
  background: var(--accent);
  border-radius: 2px;
  transition: height 0.1s linear;
}

/* =============================================
   HEADER NAV
   ============================================= */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.site-header-logo {
  display: flex;
  align-items: center;
}

.header-logo-img {
  height: 120px; /* Increased from 60px */
  width: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .header-logo-img {
    height: 80px; /* Increased from 45px */
  }
}

/* =============================================
   BIBLE VERSE SECTION
   ============================================= */
.verse-section {
  padding: 8rem 6%;
  background-color: var(--surface);
  text-align: center;
}

.verse-container {
  max-width: 800px;
  margin: 0 auto;
}

.verse-text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 2rem;
  font-style: italic;
}

.verse-ref {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* =============================================
   STORY / OWNERS SECTION
   ============================================= */
.story-section {
  padding: 10rem 6%;
  background-color: var(--bg);
}

.story-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.story-image-wrapper {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--surface);
}

.story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-content {
  max-width: 500px;
}

.story-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}

.story-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--text);
  margin-bottom: 2rem;
  line-height: 1.2;
}

.story-body p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-size: 1rem;
  line-height: 1.8;
}

@media (max-width: 992px) {
  .story-container {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* =============================================
   GALLERY SECTION
   ============================================= */
.gallery-section {
  padding: 10rem 6%;
  background-color: var(--surface);
}

.gallery-container {
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-header {
  text-align: center;
  margin-bottom: 5rem;
}

.gallery-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 500;
}

.gallery-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--text);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 20vw;
  gap: 1.5rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  background-color: var(--surface);
  border-radius: 2px;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Custom Grid Placement for Variety */
.gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(3) { grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(4) { grid-column: span 4; grid-row: span 2; }
.gallery-item:nth-child(5) { grid-column: span 2; grid-row: span 2; }

@media (max-width: 992px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 25vw;
  }
  .gallery-item:nth-child(1) { grid-column: span 4; }
  .gallery-item:nth-child(2) { grid-column: span 2; }
  .gallery-item:nth-child(3) { grid-column: span 2; }
  .gallery-item:nth-child(4) { grid-column: span 4; }
  .gallery-item:nth-child(5) { grid-column: span 4; }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 70vw;
    gap: 1rem;
  }
  .gallery-item { grid-column: span 1 !important; grid-row: span 1 !important; }
}

/* CLOSING */
.closing-section {
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  background:var(--bg); padding:10rem 2.5rem;
}
.closing-content {
  max-width:700px; opacity:0; transform:translateY(40px);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.closing-content.is-visible { opacity:1; transform:translateY(0); }
.closing-eyebrow {
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-bottom:2.5rem; font-weight:500;
}
.closing-title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,4vw,2.8rem); line-height:1.3;
  color:var(--text); margin-bottom:1.5rem;
}
.closing-attribution {
  font-size:.85rem; color:var(--text-muted); font-style:italic; margin-bottom:6rem;
}
.closing-cta {
  display:inline-block; padding:1rem 2.5rem; font-size:.75rem;
  letter-spacing:.25em; text-transform:uppercase; text-decoration:none;
  color:var(--accent); border:1px solid var(--accent); font-weight:500;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.closing-cta:hover { background:var(--accent); color:var(--bg); }
.closing-footer {
  position:absolute; bottom:2.5rem; left:2.5rem; right:2.5rem;
  display:flex; justify-content:space-between;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .site-header { padding: 1.5rem 5%; justify-content: center; }
  .site-header-logo { font-size: 1.1rem; }

  .video-scroll-container { height: 400vh; }
  .overlay-text { bottom: 10%; left: 5%; right: 5%; max-width: none; text-align: center; }
  .overlay-eyebrow { margin: 0 auto 1rem; }
  .overlay-heading { font-size: 1.8rem; }
  .overlay-body { font-size: 0.9rem; margin: 0 auto; }

  .verse-section { padding: 6rem 5%; }
  .verse-text { font-size: 1.4rem; }

  .story-section { padding: 6rem 5%; }
  .story-container { gap: 3rem; }
  .story-content { text-align: center; max-width: none; }
  .story-body p { font-size: 0.95rem; }

  .gallery-section { padding: 6rem 5%; }

  .scroll-progress { right: 4%; }
  .scroll-progress-track { height: 80px; }
  
  .closing-section { padding: 6rem 5%; }
  .closing-footer { flex-direction: column; align-items: center; gap: 0.5rem; position: static; margin-top: 4rem; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 2.2rem; }
  .hero-subtitle { font-size: 0.75rem; }
  .overlay-heading { font-size: 1.5rem; }
  .verse-text { font-size: 1.2rem; }
  .story-title { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}