/* PresentTool™ — Storytelling presentation styles */
:root {
  --pt-primary:  #8B4513;
  --pt-secondary: #C8956C;
  --pt-text:     #1A1A1A;
  --pt-muted:    #6B6B6B;
  --pt-bg:       #FAFAF8;
  --pt-surface:  #FFFFFF;
  --pt-border:   #E5E5E0;
  --pt-grid:     rgba(0,0,0,0.03);
  font-family: "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #111; color: white; overflow-x: hidden; }
img  { max-width: 100%; display: block; }
a    { color: inherit; }

/* Loading */
.story-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.story-spinner { animation: spin 1s linear infinite; color: var(--pt-secondary); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Opening hero */
.story-hero {
  min-height: 100vh; display: flex; align-items: flex-end;
  position: relative; overflow: hidden; padding: 80px 48px;
  background: #111;
}
.story-hero-bg {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.2s ease-out;
}
.story-hero-bg.loaded { opacity: 1; }
.story-hero-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 60%); }
.story-hero-content { position: relative; z-index: 1; max-width: 720px; }
.story-project-name {
  font-family: "Source Serif 4", serif; font-size: clamp(32px, 5vw, 64px);
  font-weight: 600; line-height: 1.1; margin-bottom: 16px; color: white;
}
.story-tagline { font-size: 18px; color: rgba(255,255,255,0.75); margin-bottom: 32px; line-height: 1.6; }
.story-scroll { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.5); }
.story-scroll-arrow { animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Sections */
.story-section { padding: 80px 48px; position: relative; }
.story-section--light { background: var(--pt-bg); color: var(--pt-text); }
.story-section--dark  { background: #1A1A18; color: white; }

.story-section-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pt-secondary); margin-bottom: 12px;
}
.story-section-title {
  font-family: "Source Serif 4", serif; font-size: clamp(24px, 3vw, 40px);
  font-weight: 600; margin-bottom: 20px; line-height: 1.2;
}
.story-section-body { font-size: 15px; line-height: 1.7; max-width: 640px; }

/* Full-bleed image */
.story-image-full { width: 100%; max-height: 70vh; object-fit: cover; display: block; }

/* Renders grid */
.story-renders { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px; }
.story-renders img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: opacity 0.3s; }
.story-renders img:hover { opacity: 0.9; }

/* Viewer CTA */
.story-viewer-section {
  background: var(--pt-primary); color: white;
  padding: 80px 48px; text-align: center;
}
.story-viewer-title { font-family: "Source Serif 4", serif; font-size: 36px; font-weight: 600; margin-bottom: 12px; }
.story-viewer-sub { font-size: 16px; opacity: 0.8; margin-bottom: 32px; }
.story-viewer-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; color: var(--pt-primary); padding: 16px 32px;
  border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none;
  animation: btn-pulse 2.5s ease-in-out infinite;
}
@keyframes btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } }

/* Video section */
.story-video-section { background: #0D0D0B; padding: 80px 48px; }
.story-video-wrap { max-width: 900px; margin: 0 auto; }
.story-video-wrap video { width: 100%; border-radius: 10px; }

/* Footer */
.story-footer {
  background: #111; color: rgba(255,255,255,0.5);
  padding: 40px 48px; display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap; justify-content: space-between;
}
.story-footer-contact { font-size: 14px; }
.story-footer-contact strong { color: white; display: block; margin-bottom: 4px; }
.story-footer-pt { font-size: 11px; opacity: 0.4; }
.story-footer-logo { height: 24px; opacity: 0.3; }

/* Responsive */
@media (max-width: 640px) {
  .story-hero      { padding: 48px 24px; }
  .story-section   { padding: 56px 24px; }
  .story-viewer-section { padding: 56px 24px; }
  .story-video-section  { padding: 56px 24px; }
  .story-footer    { padding: 32px 24px; }
}