/* ==========================================================================
   1. IMPORTS, RESETS & VARIABLES
   ========================================================================== */
@font-face { font-family: 'Myrtille Pixel'; src: url('myrtille-pixel.otf') format('opentype'); }

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

:root {
  --pixel-bg: #FEF9D9; 
  --pixel-border: #FEF9D9; 
  --pixel-border-2: #FEF9D9; 
  --pixel-border-3: #FEF9D9; 
  --pixel: .50rem; 
  --star-color: brightness(0) saturate(100%) invert(63%) sepia(41%) saturate(279%) hue-rotate(183deg) brightness(98%) contrast(95%);
}

html { scroll-behavior: smooth; }

body { 
  background-color: #F6F1D1; 
  font-family: 'Alegreya', Georgia, serif; 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  overflow-x: hidden; 
}

/* ==========================================================================
   2. GLOBAL COMPONENTS (CANVAS, STARS, ANIMATIONS)
   ========================================================================== */
#sparkleCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

.star { position: absolute; width: 45px; height: 45px; animation: spinSelf 4s linear infinite; pointer-events: none; filter: var(--star-color); }
@keyframes spinSelf { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.scroll-reveal { opacity: 0; transform: translateY(60px); transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1), transform 1s cubic-bezier(0.215, 0.610, 0.355, 1); }
.scroll-reveal.active { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   3. NAVIGATION
   ========================================================================== */
.navbar { width: 100%; display: flex; justify-content: center; align-items: baseline; gap: 120px; padding: 60px 20px 20px 20px; z-index: 20; position: absolute; top: 0; }
.navbar a { font-family: 'Alegreya', Georgia, serif; font-size: 100px; font-weight: 500; color: #94AAD9; text-decoration: none; display: inline-block; transition: opacity 0.2s ease; }
.navbar a span.cursive-letter { font-family: 'Myrtille Pixel', cursive; font-size: 180px; color: #94AAD9; }
.navbar a:hover { opacity: 0.7; }

/* ==========================================================================
   4. HERO & CONTENT SECTIONS
   ========================================================================== */
.hero-section { width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #F6F1D1; padding-top: 338px; }
.brand-wrapper { position: relative; width: 90%; max-width: 788px; height: auto; }
.brand-main-svg { width: 100%; height: auto; pointer-events: none; }

.content-section { width: 100%; background-color: #EDE986; min-height: 100vh; padding: 300px 5% 200px 15%; display: flex; flex-direction: column; align-items: center; position: relative; }
.divider-img { width: 100%; display: block; position: absolute; top: -60px; left: 0; z-index: 10; pointer-events: none; }

.pixel-container {
  background: var(--pixel-bg); max-width: 700px; width: 100%; padding: 50px;
  box-shadow: 0 calc(var(--pixel) * -3) 0 calc(var(--pixel) * -1) var(--pixel-bg), 0 calc(var(--pixel) * 3) 0 calc(var(--pixel) * -1) var(--pixel-bg), 0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -2) var(--pixel-bg), 0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -2) var(--pixel-bg), 0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -4) var(--pixel-bg), 0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -4) var(--pixel-bg), 0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -6) var(--pixel-bg), 0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -6) var(--pixel-bg), calc(var(--pixel) * -1) 0 0 0 var(--pixel-border), var(--pixel) 0 0 0 var(--pixel-border), 0 calc(var(--pixel) * -2) 0 0 var(--pixel-border), 0 calc(var(--pixel) * 2) 0 0 var(--pixel-border), 0 calc(var(--pixel) * -5) 0 calc(var(--pixel) * -1) var(--pixel-border), 0 calc(var(--pixel) * 5) 0 calc(var(--pixel) * -1) var(--pixel-border), 0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -2) var(--pixel-border), 0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -2) var(--pixel-border), 0 calc(var(--pixel) * -10) 0 calc(var(--pixel) * -4) var(--pixel-border), 0 calc(var(--pixel) * 10) 0 calc(var(--pixel) * -4) var(--pixel-border), 0 calc(var(--pixel) * -13) 0 calc(var(--pixel) * -6) var(--pixel-border), 0 calc(var(--pixel) * 13) 0 calc(var(--pixel) * -6) var(--pixel-border), calc(var(--pixel) * -2) 0 0 0 var(--pixel-border-2), calc(var(--pixel) * 2) 0 0 0 var(--pixel-border-2), 0 calc(var(--pixel) * -1) 0 var(--pixel) var(--pixel-border-2), 0 var(--pixel) 0 var(--pixel) var(--pixel-border-2), 0 calc(var(--pixel) * -4) 0 0 var(--pixel-border-2), 0 calc(var(--pixel) * 4) 0 0 var(--pixel-border-2), 0 calc(var(--pixel) * -6) 0 calc(var(--pixel) * -1) var(--pixel-border-2), 0 calc(var(--pixel) * 6) 0 calc(var(--pixel) * -1) var(--pixel-border-2), 0 calc(var(--pixel) * -8) 0 calc(var(--pixel) * -2) var(--pixel-border-2), 0 calc(var(--pixel) * 8) 0 calc(var(--pixel) * -2) var(--pixel-border-2), 0 calc(var(--pixel) * -11) 0 calc(var(--pixel) * -4) var(--pixel-border-2), 0 calc(var(--pixel) * 11) 0 calc(var(--pixel) * -4) var(--pixel-border-2), 0 calc(var(--pixel) * -14) 0 calc(var(--pixel) * -6) var(--pixel-border-2), 0 calc(var(--pixel) * 14) 0 calc(var(--pixel) * -6) var(--pixel-border-2), calc(var(--pixel) * -3) 0 0 0 var(--pixel-border-3), calc(var(--pixel) * 3) 0 0 0 var(--pixel-border-3), 0 0 0 calc(var(--pixel) * 2) var(--pixel-border-3), 0 calc(var(--pixel) * -3) 0 var(--pixel) var(--pixel-border-3), 0 calc(var(--pixel) * 3) 0 var(--pixel) var(--pixel-border-3), 0 calc(var(--pixel) * -5) 0 0 var(--pixel-border-3), 0 calc(var(--pixel) * 5) 0 0 var(--pixel-border-3), 0 calc(var(--pixel) * -7) 0 calc(var(--pixel) * -1) var(--pixel-border-3), 0 calc(var(--pixel) * 7) 0 calc(var(--pixel) * -1) var(--pixel-border-3), 0 calc(var(--pixel) * -9) 0 calc(var(--pixel) * -2) var(--pixel-border-3), 0 calc(var(--pixel) * 9) 0 calc(var(--pixel) * -2) var(--pixel-border-3), 0 calc(var(--pixel) * -12) 0 calc(var(--pixel) * -4) var(--pixel-border-3), 0 calc(var(--pixel) * 12) 0 calc(var(--pixel) * -4) var(--pixel-border-3), 0 calc(var(--pixel) * -15) 0 calc(var(--pixel) * -6) var(--pixel-border-3), 0 calc(var(--pixel) * 15) 0 calc(var(--pixel) * -6) var(--pixel-border-3);
}

.about-me-container { font-family: 'Alegreya', Georgia, serif; font-size: 30px; line-height: 1.3; letter-spacing: -0.02em; color: #F2619C; font-weight: 500; }
.dave-name { font-family: 'Myrtille Pixel', cursive; font-size: 60px; line-height: 0; vertical-align: 0px; display: inline-block; color: #F2619C; }
.about-me-container p { margin-bottom: 0; }
.header-style { color: #94AAD9; font-size: 40px; margin: 30px 0 10px 0; font-family: 'Alegreya', serif; }
.job-title { font-size: 32px; color: #F2619C; margin-top: 15px; font-family: 'Alegreya', serif; }

.skills-header { text-align: center; color: #94AAD9; font-size: 40px; margin: 50px 0 20px 0; font-family: 'Alegreya', serif; }
.skills-container { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 20px; }
.skill-icon { width: 200px; height: 196px; object-fit: contain; }
.skill-wrapper { position: relative; display: inline-block; cursor: pointer; }
.skill-wrapper .tooltip {
  visibility: hidden; width: 120px; background-color: #F2619C; color: #fff; text-align: center;
  border-radius: 200px; padding: 5px 0; position: absolute; z-index: 30;
  top: 105%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s;
  font-family: 'Alegreya', serif; font-size: 30px;
}
.skill-wrapper:hover .tooltip { visibility: visible; opacity: 1; }

/* ==========================================================================
   5. GALLERY & CAROUSEL
   ========================================================================== */
.gallery-section { width: 100%; padding: 200px 5% 0px 5%; background-color: #F6F1D1; }


.project-row { display: flex; align-items: flex-start; gap: 50px; margin-bottom: 150px; max-width: 1400px; margin-left: auto; margin-right: auto; overflow: visible !important; }
.project-text-column { flex: 0 0 550px; color: #F2619C; padding-right: 40px; display: flex; flex-direction: column; min-height: 350px; }
.project-title { font-family: 'Alegreya', serif; font-size: 40px; margin-bottom: 10px; }
.project-desc { font-size: 24px; margin-bottom: 15px; }
.view-link { font-family: 'Alegreya', serif; font-size: 30px; font-weight: 500; color: #F2619C; text-decoration: none; margin-top: auto; }

.images-container { display: flex; gap: 50px; align-items: start; }
.project-img { width: 300px; height: 350px; object-fit: cover; border-radius: 20px; flex-shrink: 0; background-color: #fff; }
.images-container:not(.draggable-carousel) .project-img:nth-child(1) { transform: translateY(30px) rotate(-5deg); }
.images-container:not(.draggable-carousel) .project-img:nth-child(2) { transform: translateY(-30px) rotate(5deg); }
.project-img-wide { width: 350px; height: 350px; object-fit: cover; }
.flat { transform: rotate(0deg); }

.draggable-carousel { 
  display: flex !important; flex-wrap: nowrap !important; gap: 20px; overflow-x: auto !important; 
  -webkit-overflow-scrolling: touch; user-select: none; padding-bottom: 20px; height: 370px; 
  cursor: grab; pointer-events: auto; scrollbar-width: none; 
}
.draggable-carousel::-webkit-scrollbar { display: none; }
.draggable-carousel img { pointer-events: none; }
.draggable-carousel:active { cursor: grabbing; }

/* ==========================================================================
   6. MOTION GRAPHICS & CONTACT
   ========================================================================== */
.motion-graphics-section { width: 100%; padding: 100px 5%; background-color: #FFDE97; text-align: center; }
.mg-header { font-family: 'Myrtille Pixel', cursive; font-size: 200px; color: #F2619C; letter-spacing: -2%; margin-bottom: 60px; font-weight: 400; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1400px; margin: 0 auto; }
.video-item { width: 100%; aspect-ratio: 432 / 768; object-fit: cover; border-radius: 20px; background-color: #000; }

.contact-section { width: 100%; min-height: 100vh; padding: 100px 10%; background-color: #F2619C; display: flex; justify-content: center; align-items: center; gap: 80px; color: #EDE986; }
.form-column { flex: 1; max-width: 500px; display: flex; flex-direction: column; gap: 15px; }
.form-input { width: 100%; padding: 18px; border: none; border-radius: 12px; background-color: #FEF9D9; font-family: 'Alegreya', serif; font-size: 18px; color: #F2619C; outline: none; }
.send-btn { width: fit-content; padding: 12px 35px; border: none; border-radius: 10px; background-color: #EDE986; color: #F2619C; font-family: 'Alegreya', serif; font-size: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.contact-column { flex: 1; max-width: 450px; }
.contact-column h2 { font-family: 'Alegreya', serif; font-size: 64px; margin-bottom: 30px; line-height: 1.1; }
.contact-info { display: flex; align-items: center; gap: 15px; font-size: 24px; font-family: 'Alegreya', serif; margin-bottom: 25px; }
.contact-icon { width: 30px; height: 30px; vertical-align: middle; }

/* ==========================================================================
   7. STORE OPENING & OTHER LAYOUTS
   ========================================================================== */
.main-layout { display: flex; align-items: center; justify-content: center; max-width: 1400px; width: 100%; margin: 40px auto; padding: 40px; gap: 80px; min-height: 800px; padding-top: 300px; }
.carousel-column { flex: 1; display: flex; justify-content: center; align-items: center; height: 100%; min-height: 750px; }
.carousel-container { position: relative; width: 500px; height: 750px; cursor: grab; user-select: none; }
.carousel-container:active { cursor: grabbing; }

.carousel { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.carousel-item { position: absolute; top: 50%; left: 50%; width: 410px; height: 710px; margin-left: -205px; margin-top: -355px; border-radius: 40px; overflow: hidden; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.4s ease, opacity 0.4s ease; background: #fff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15); }
.carousel-item video { width: 100%; height: 100%; object-fit: cover; }

.position-1 { transform: translateX(-110px) translateY(10px) rotate(-4deg) scale(0.93); z-index: 1; opacity: 0.85; }
.position-2 { transform: translateX(-55px) translateY(5px) rotate(-2deg) scale(0.96); z-index: 2; opacity: 0.95; }
.position-3 { transform: translateX(0px) translateY(0px) rotate(0deg) scale(1); z-index: 3; opacity: 1; }

.content-column { flex: 1; max-width: 550px; display: flex; flex-direction: column; justify-content: center; }
.content-heading { font-family: 'Alegreya', Georgia, serif; font-size: 72px; font-weight: 700; color: #F2619C; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 24px; }
.content-heading span.italic-display { font-style: italic; font-weight: 500; }
.content-body { font-family: 'Alegreya', Georgia, serif; font-size: 36px; font-weight: 400; color: #94AAD9; line-height: 1.2; letter-spacing: -0.02em; }

.image-carousel-section { width: 100%; max-width: 100%; margin-top: 100px; margin-bottom: 100px; display: flex; flex-direction: column; align-items: center; }
.image-track-wrapper { max-width: 100%; overflow-x: auto; display: flex; justify-content: center; gap: 40px; padding: 20px 40px; scrollbar-width: none; cursor: grab; user-select: none; }
@media (max-width: 2560px) { .image-track-wrapper { justify-content: flex-start; } }
@media (min-width: 2561px) { .image-track-wrapper { justify-content: center; } }
.image-track-wrapper:active { cursor: grabbing; }
.image-track-wrapper::-webkit-scrollbar { display: none; }

.image-card { min-width: 800px; width: 800px; height: 800px; border-radius: 50px; background-color: #D9D9D9; overflow: hidden; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); }
.image-card img, .image-card video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.image-carousel-text { font-family: 'Alegreya', Georgia, serif; font-size: 40px; font-style: normal; font-weight: 400; color: #94AAD9; line-height: 1.0; letter-spacing: -0.02em; text-align: center; margin-top: 40px; max-width: 800px; padding: 0 20px; }

.svg-grid-section { width: 100%; margin: 60px auto 140px auto; padding: 0 40px; display: flex; justify-content: center; }
.staggered-wrapper { display: flex; justify-content: center; gap: 32px; }
.pill-column { display: flex; flex-direction: column; gap: 40px; width: 300px; }
.pill-column.shifted { margin-top: 100px; }
.svg-pill { width: 300px; height: 444px; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.svg-pill:hover { transform: scale(1.04); }
.svg-pill img { width: 100%; height: 100%; object-fit: contain; }