/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&display=swap');

.BebasNeue { font-family: 'Bebas Neue', sans-serif; }
.MeriendaOne { font-family: 'Merienda One', cursive; }
.Cinzel { font-family: 'Cinzel', serif; }
.Lobster { font-family: 'Lobster', cursive; }
.Playfair { font-family: 'Playfair Display', serif; }
.FiraSans { font-family: 'Fira Sans', sans-serif; }
.Comfortaa { font-family: 'Comfortaa', cursive; }

/* Modern Responsive Embedded Video */
.video-embed {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.video-embed__container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-embed__container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 2px;
    background-color: #fafafa;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}

.video-embed__container iframe:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
    .video-embed__container iframe {
        background-color: #121212;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .video-embed__container iframe:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

@media (max-width: 768px) {
    .video-embed {
        max-width: 100%;
    }
}

/* Design Tokens */
:root {
  --surface-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
  --surface-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --surface-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --transition-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --space-xs: clamp(0.75rem, 0.69rem + 0.29vw, 0.9375rem);
  --space-sm: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
  --space-md: clamp(1.5rem, 1.38rem + 0.58vw, 1.875rem);
  --blur-sm: blur(8px);
  --blur-md: blur(12px);
  --blur-lg: blur(16px);
  --layer-base: 0;
  --layer-hover: 1;
  --layer-active: 2;
  --layer-focus: 3;
}

/* Story Container */
.story-container {
  --container-padding: var(--space-md);
  --container-max-width: min(100% - 2rem, 40rem);
  --container-border-radius: 1.5rem;

  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding: var(--container-padding);
  background: linear-gradient(135deg, rgb(var(--background-rgb) / 0.7), rgb(var(--background-rgb) / 0.3));
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border-radius: var(--container-border-radius);
  box-shadow: var(--surface-elevation-2);
  contain: content;
  isolation: isolate;
}

.story-container::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--container-border-radius);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.5), rgb(var(--accent-rgb) / 0.1), transparent 60%);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask-composite: exclude;
  z-index: var(--layer-base);
  opacity: 0.6;
  transition: opacity 300ms var(--transition-ease-out);
}

.story-container:hover::before {
  opacity: 0.8;
}

/* Details / Summary */
.custom-details {
  --details-gap: var(--space-xs);
  display: grid;
  gap: var(--details-gap);
  width: 100%;
  border-radius: 1rem;
  transition: transform 200ms var(--transition-ease-out);
  will-change: transform;
}

.custom-summary {
  --summary-padding: var(--space-sm) var(--space-md);
  --icon-size: 1.5rem;
  padding: var(--summary-padding);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgb(var(--accent-rgb) / 0.05);
  border-radius: 0.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 200ms var(--transition-ease-out);
  touch-action: manipulation;
}

.custom-summary::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 6v12m6-6H6' /%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform-origin: center;
  transition: transform 500ms var(--transition-ease-spring);
  will-change: transform;
}

.custom-content {
  --content-padding: 0 var(--space-md) var(--space-md) calc(var(--icon-size) + var(--space-md));
  grid-area: content;
  padding: var(--content-padding);
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 300ms var(--transition-ease-out), transform 400ms var(--transition-ease-spring);
  line-height: 1.6;
}

.custom-details[open] .custom-summary::before {
  transform: rotate(45deg);
}

.custom-details[open] .custom-content {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .custom-summary:hover {
    background: rgb(var(--accent-rgb) / 0.1);
    transform: translateY(-2px);
  }

  .custom-details:hover {
    transform: translateY(-1px);
  }
}

.custom-summary:active {
  transform: translateY(1px) !important;
  background: rgb(var(--accent-rgb) / 0.15);
}

.custom-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--background-rgb)), 0 0 0 4px rgb(var(--accent-rgb) / 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .story-container,
  .custom-details,
  .custom-summary,
  .custom-content {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .story-container {
    --surface-elevation-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --surface-elevation-2: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -1px rgb(0 0 0 / 0.1);
    --surface-elevation-3: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -2px rgb(0 0 0 / 0.1);
  }
}

/* Enhanced Scenario Image */
.modern-scenario-image {
    width: 100%;
    max-width: 640px;
    height: auto;
    display: block;
    margin: var(--space-md) auto;
    border-radius: 1.25rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    object-fit: cover;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    filter: brightness(0.98) contrast(1.02);
    cursor: pointer;
    will-change: transform, box-shadow, filter;
}

.modern-scenario-image:hover {
    transform: scale(1.015);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    filter: brightness(1.03) contrast(1.05);
}

.modern-scenario-image:active {
    transform: scale(0.99);
    filter: brightness(0.95);
}

@media (hover: none) {
    .modern-scenario-image:active {
        transform: scale(1.01);
    }
}

/* Optional Caption */
.modern-caption {
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    margin-top: 0.5rem;
    color: rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    .modern-caption {
        color: rgba(255, 255, 255, 0.6);
    }
}