/* Font declarations */
@font-face {
    font-family: 'Kalnia';
    src: url('/fonts/Kalnia-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lora';
    src: url('/fonts/Lora-Variable.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*
========================================
General Styles
========================================
*/

body {
  position: relative;
  background-color: #1D3F25; /* Green background */
  font-family: 'Lora', serif; /* Default body font */
  color: #F0C8DB; /* Default text color (Pink) */
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/*
========================================
Backgrounds & Overlays
========================================
*/

/* Fixed wallpaper background */
.background-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -20; /* Deepest layer */
  opacity: 0.7;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/* Fixed gradient overlay */
.background-gradient-overlay {
  position: fixed;
  inset: 0;
  z-index: -10; /* Above wallpaper */
  background-image: linear-gradient(to bottom, rgba(29, 63, 37, 0), rgba(29, 63, 37, 1) 72%, rgba(29, 63, 37, 1));
}

/*
========================================
Border
========================================
*/

/* Fixed border around the screen */
.screen-border {
  position: absolute;
  border: 2px solid #F0C8DB;
  border-radius: 0.5rem;
  pointer-events: none;
  z-index: 5;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
}

/* Responsive border spacing via padding on main content */
main.main-content {
  padding: 2rem 1rem 1rem 1rem;
  position: relative;
  min-height: 100vh;
}

@media (min-width: 640px) { /* Small screens and up */
  .screen-border {
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }
  main.main-content {
    padding: 2rem 1.5rem 1rem 1.5rem;
  }
}
@media (min-width: 768px) { /* Medium screens and up */
  .screen-border {
    top: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }
  main.main-content {
    padding: 3rem 2rem 1.5rem 2rem;
  }
}
@media (min-width: 1024px) { /* Large screens and up */
  .screen-border {
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
  }
  main.main-content {
    padding: 4rem 2.5rem 2rem 2.5rem;
  }
}

/*
========================================
Main Layout
========================================
*/

/* Main content container */
main.main-content {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Wrapper for page content excluding footer */
main .content-wrapper {
  flex-grow: 1;
}

/* Utility class for centering content horizontally */
.container {
  width: 100%;
  max-width: 1024px; /* Adjust max width as needed */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

/*
========================================
Splash Screen
========================================
*/

/* Fullscreen splash container */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 100; /* Highest layer */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1D3F25; /* Green background */
  /* Opacity and visibility controlled by JS */
}

/* Background image for splash */
.splash-screen-background {
  position: absolute;
  inset: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 101;
}

/* Darkening overlay for splash */
.splash-screen-overlay {
  position: absolute;
  inset: 0;
  background-color: #1D3F25; /* Green background */
  opacity: 0.5;
  z-index: 102;
}

/* Border specifically for the splash screen */
.splash-screen-border {
  position: absolute;
  border: 2px solid #F0C8DB; /* Pink border */
  border-radius: 0.5rem; /* Slightly rounded corners */
  pointer-events: none; /* Doesn't interfere with clicks */
  z-index: 103; /* Above splash background/overlay */
  /* Match main border spacing */
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  opacity: 0; /* Fade in with text */
  transition: opacity 0.5s ease-out 0.5s; /* Fade in after initial delay */
}

/* Responsive splash border spacing */
@media (min-width: 640px) { 
  .splash-screen-border {
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
  }
}
@media (min-width: 768px) { 
  .splash-screen-border {
    top: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
  }
}
@media (min-width: 1024px) { 
  .splash-screen-border {
    top: 2rem;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
  }
}

/* Text container for splash */
.splash-screen-text {
  position: relative;
  z-index: 104; /* Above splash border */
  text-align: center;
  font-family: 'Kalnia', sans-serif; /* Specific font */
  color: #F0C8DB; /* Pink text */
  font-size: 2.25rem; /* Default size */
  line-height: 2.5rem;
}

/* Individual parts of splash text for animation */
.splash-screen-text span {
  display: block; /* Default layout (stacked) */
  opacity: 0; /* Start hidden */
  transform: translateY(20px); /* Start slightly lower */
  /* Transition handled by JS */
}

/* Separator for splash text */
.splash-screen-text .separator {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  display: none; /* Hidden by default */
}

/* Responsive splash text layout */
@media (min-width: 768px) { /* Medium screens and up */
  .splash-screen-text {
    font-size: 3rem;
    line-height: 1;
  }
  .splash-screen-text span {
    display: inline; /* Inline layout */
  }
  .splash-screen-text .separator {
    display: inline; /* Show separator */
  }
}
@media (min-width: 1024px) { /* Large screens and up */
  .splash-screen-text {
    font-size: 3.75rem;
    line-height: 1;
  }
}

/*
========================================
Section Fade-in (JS Controlled)
========================================
*/

/* Wrapper for sections that fade in on scroll */
.section-fade-in {
  opacity: 0; /* Start hidden */
  transform: translateY(50px); /* Start lower */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Style applied by JS when section is intersecting */
.section-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0px);
}

/*
========================================
Hero Section
========================================
*/

/* Container for portrait and bio */
.hero-section {
  display: flex;
  flex-direction: column; /* Stacked layout by default */
  align-items: center;
  justify-content: center;
  gap: 0; /* Remove gap to allow overlap */
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0; /* Reduced top padding */
  margin-bottom: 1rem; /* Reduced bottom margin */
}

/* Container for the portrait image */
.hero-portrait-container {
  width: 19.5rem; /* 15.6rem * 1.25 */
  height: 19.5rem;
  position: relative;
  flex-shrink: 0;
  order: 1; /* Image first on mobile */
  isolation: isolate; /* Create stacking context for blend mode */
}

/* The portrait image itself */
.hero-portrait {
  border-radius: 9999px; /* Circular */
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  mix-blend-mode: lighten; /* Blend mode */
}

/* Container for the text content */
.hero-text-container {
  order: 2; /* Text second on mobile */
  z-index: 10; /* Ensure text is above potential overlaps */
  max-width: 36rem;
  text-align: center; /* Centered text on mobile */
  margin-top: -2rem; /* Create overlap with portrait */
}

/* Main heading */
.hero-title {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-family: 'Kalnia', sans-serif; /* Specific font */
  margin-bottom: 1rem;
  color: #F0C8DB; /* Pink text */
}

/* Biography paragraph */
.hero-bio {
  font-size: 1rem;
  line-height: 1.75rem;
  font-family: 'Lora', serif; /* Specific font */
  line-height: 1.625; /* Relaxed line spacing */
  color: #F0C8DB; /* Pink text */
  text-shadow: -2px 2px 3px #1D3F25; text-shadow: -2px 2px 15px #03210b;
}

.hero-cta {
  font-size: 1rem;
  line-height: 1.75rem;
  font-family: 'Lora', serif; /* Specific font */
  line-height: 1.625; /* Relaxed line spacing */
  color: #F0C8DB; /* Pink text */
}

/* Scrollable link styles */
.scroll-link {
  color: #F0C8DB;
  text-decoration: underline;
  font-weight: bolder;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  animation: shadowPulse 2s ease-in-out infinite;
}

.scroll-link:visited {
  color: #F0C8DB;
  text-decoration: underline;
}

@keyframes shadowPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(240, 200, 219, 0); }
  50% { text-shadow: 0 0 10px rgba(240, 200, 219, 0.5); }
}

.scroll-link:hover {
  transform: scale(1.05);
  background-color: #F0C8DB;
  color: #1D3F25;
  text-decoration: underline;
  font-weight: bolder;
}

/* Mobile styles */
@media (max-width: 768px) {
  .hero-section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero-bio {
    text-align: justify;
    font-size: 1rem;
  }
  
  .demo-reel-section {
    width: 100vw;
    margin-left: calc(-1rem);
    margin-right: calc(-1rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Responsive hero section layout */
@media (min-width: 768px) { /* Medium screens and up */
  .hero-section {
    flex-direction: row; /* Side-by-side layout */
    gap: 2rem; /* Restore gap for desktop */
    padding-top: 0; /* Reduced top padding */
    margin-bottom: 1.5rem; /* Reduced bottom margin */
  }
  .hero-portrait-container {
    width: 19.5rem; /* Original tablet size */
    height: 19.5rem;
    order: initial; /* Reset order */
  }
  .hero-text-container {
    order: initial; /* Reset order */
    margin-top: 0; /* Remove mobile overlap */
    margin-left: -4rem; /* Desktop overlap */
    text-align: left; /* Left-align text */
  }
  .hero-title {
    font-size: 3rem;
    line-height: 1;
  }
  .hero-bio {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) { /* Large screens and up */
  .hero-section {
    padding-top: 0; /* Reduced top padding */
    margin-bottom: 2rem; /* Reduced bottom margin */
  }
  .hero-portrait-container {
    width: 23.4rem; /* Original desktop size */
    height: 23.4rem;
  }
  .hero-text-container {
    margin-left: -6rem; /* Increase overlap */
  }
  .hero-title {
    font-size: 3.75rem;
    line-height: 1;
  }
}

/*
========================================
Demo Reel Section
========================================
*/

/* Section containing the video player */
.demo-reel-section {
  padding-top: 0; /* Reduced padding */
  padding-bottom: 1rem; /* Reduced padding */
}

/* Wrapper for the video player/overlay */
.demo-reel-wrapper {
  position: relative;
  aspect-ratio: 16 / 9; /* Maintain video aspect ratio */
  max-width: 56rem; /* Limit width */
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem; /* Rounded corners */
  overflow: hidden;
  box-shadow: none;
}

/* Overlay shown before playing */
.demo-reel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  z-index: 10;
  transition: opacity 0.5s ease-out; /* Fade out transition */
  isolation: isolate; /* Create stacking context for blend mode - ADDED */
  /* Opacity controlled by JS */
}

/* Background image for the overlay */
.demo-reel-overlay-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  mix-blend-mode: lighten; /* Blend mode */
}

/* Play button on the overlay */
.demo-reel-play-button {
  position: relative;
  z-index: 20;
  color: #1D3F25;
  transition: all 0.4s ease-out;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  animation: heartbeat 3s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.08); }
  25% { transform: scale(1); }
  35% { transform: scale(1.08); }
  45% { transform: scale(1); }
}

.demo-reel-play-button:hover {
  transform: scale(1.2);
  animation: none;
  opacity: 1;
}

.demo-reel-play-button svg {
  width: 2.8rem;
  height: 2.8rem;
  fill: currentColor;
}

/* Iframe for the video player */
.demo-reel-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Display controlled by JS */
}

/* Responsive demo reel section */
@media (min-width: 768px) {
  .demo-reel-section {
    padding-bottom: 1.5rem;
  }
  .demo-reel-play-button svg {
    width: 4.2rem;
    height: 4.2rem;
  }
}
@media (min-width: 1024px) {
  .demo-reel-section {
    padding-bottom: 2rem;
  }
}

/*
========================================
Buttons Section
========================================
*/

/* Section containing the main action buttons */
.buttons-section {
  padding-top: 1rem; /* Reduced padding */
  padding-bottom: 1rem; /* Reduced padding */
}

/* Wrapper to constrain button width and center */
.buttons-wrapper {
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* Add padding for smaller screens */
  padding-right: 1rem;
  box-sizing: border-box;
}

/* Spacing for each button */
.button-container {
  margin-bottom: 1rem;
}

/* Styling for primary buttons */
.button-primary {
  position: relative;
  display: block;
  width: 100%;
  padding: 1rem;
  border: 2px solid #F0C8DB; /* Pink border, same width as screen border */
  border-radius: 0.5rem; /* Rounded corners */
  overflow: hidden;
  font-family: 'Kalnia', sans-serif; /* Specific font */
  color: #F0C8DB; /* Pink text */
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  transition: color 0.3s ease, transform 0.2s ease-out; /* Added transform transition */
  text-decoration: none;
  box-sizing: border-box; /* Ensure padding/border included in width */
}

.button-primary:hover {
  color: #1D3F25; /* Green text on hover */
  transform: translateY(2px) scale(0.98); /* Translate down and scale down */
}

/* Background element for hover effect */
.button-primary .button-hover-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, #F0C8DB, rgba(240, 200, 219, 0)); /* Pink gradient */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.button-primary:hover .button-hover-bg {
  opacity: 1; /* Show gradient on hover */
}

/* Content wrapper for text and icon */
.button-primary .button-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon within the button */
.button-primary .button-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  fill: currentColor;
}

/* Responsive button section */
@media (min-width: 768px) { /* Medium screens and up */
  .buttons-section {
    padding-top: 1.5rem; /* Reduced padding */
    padding-bottom: 1.5rem; /* Reduced padding */
  }
  .buttons-wrapper {
    padding-left: 0; /* Remove padding on larger screens */
    padding-right: 0;
  }
  .button-primary {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 1024px) { /* Large screens and up */
  .buttons-section {
    padding-top: 2rem; /* Reduced padding */
    padding-bottom: 2rem; /* Reduced padding */
  }
}

/*
========================================
Social Links Section
========================================
*/

/* Section containing social media icons */
.socials-section {
  padding-top: 0.5rem; /* Reduced padding */
  padding-bottom: 1rem; /* Reduced padding */
}

/* Centering wrapper */
.socials-wrapper {
  text-align: center;
}

/* Prompt text above icons */
.socials-prompt {
  color: #F0C8DB; /* Pink text */
  font-family: 'Lora', serif; /* Specific font */
  margin-bottom: 1rem;
}

/* Flex container for icons */
.socials-icons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* Allow wrapping on small screens */
  gap: 1rem;
}

/* Individual social icon links */
.social-icon-link {
  color: #F0C8DB; /* Pink icon */
  border-radius: 0.375rem; /* Rounded background on hover */
  padding: 0.5rem;
  transition: color 0.3s ease, background-color 0.3s ease;
  display: inline-block; /* Ensure padding is applied */
}

.social-icon-link:hover {
  color: #1D3F25; /* Green icon on hover */
  background-color: #F0C8DB; /* Pink background on hover */
}

.social-icon-link svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  display: block; /* Prevent extra space below icon */
}

/* Responsive social links */
@media (min-width: 768px) { /* Medium screens and up */
  .socials-section {
    padding-bottom: 1.5rem; /* Reduced padding */
  }
  .socials-icons-container {
    gap: 1.5rem;
  }
  .social-icon-link svg {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/*
========================================
Footer Section
========================================
*/

/* Footer containing copyright */
.footer-section {
  text-align: center;
  padding-top: 1rem; /* Reduced padding */
  padding-bottom: 1rem; /* Reduced padding */
  font-family: 'Kalnia', sans-serif; /* Specific font */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #F0C8DB; /* Pink text */
  opacity: 0.75; /* Slightly faded */
}

/* Responsive footer */
@media (min-width: 768px) { /* Medium screens and up */
  .footer-section {
    padding-top: 1.5rem; /* Reduced padding */
    padding-bottom: 1.5rem; /* Reduced padding */
  }
}

@media (max-width: 768px) {
  .hero-portrait-container {
    width: 15.6rem; /* 12rem * 1.3 */
    height: 15.6rem;
  }
}