/* ============================================================
   Chicken Experience — Entry Reveal Styles
   ============================================================ */

/* Entry state — the only visible content on initial page load */
.entry-state {
  min-height: 100vh;
}

.entry-state.fade-out {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fullscreen video overlay */
#chicken-experience-video-container {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
  transform: translateZ(0); /* forces unconditional GPU compositor layer promotion */
}

#chicken-experience-video-container.fade-in {
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

#chicken-experience-video-container.fade-out {
  opacity: 0;
  transition: opacity 3000ms ease-out;
}

#chicken-experience-video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* preserves 16:9 aspect, letterboxes on portrait viewports */
  transition: transform 3000ms ease-out;
}

#chicken-experience-video-container.fade-out #chicken-experience-video {
  transform: scale(0.9);
}

/* Page content — hidden until video phase ends */
#chicken-experience-content.hidden {
  opacity: 0;
  pointer-events: none;
}

#chicken-experience-content.fade-in {
  opacity: 1;
  transition: opacity 600ms ease-in;
}

/* Shared hidden utility (applies to video container on load and content) */
.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Enter button — inherits .ag-btn-primary styles from component inline CSS */
.enter-btn {
  border: none;
  cursor: pointer;
}

#chicken-enter-btn {
  position: relative; /* required for absolute-positioned icon */
}

.enter-btn-icon {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 16px;
  height: 16px;
  opacity: 0.65;
}

/* Entry text — in-flow paragraph, fades in with content after video phase */
.chicken-entry-text {
  background: #fff3d9;
  padding: 60px 24px 40px;
  text-align: center;
}

/* Scroll cue — arrow only, fades away on scroll */
.chicken-scroll-cue {
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  color: #3a3a2e;
  opacity: 0.7;
  transition: opacity 400ms ease-out;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.chicken-scroll-cue:focus-visible {
  outline: 2px solid #3a3a2e;
  outline-offset: 4px;
  border-radius: 2px;
}

.chicken-scroll-cue.scrolled-away {
  opacity: 0;
  pointer-events: none;
}

/* Hidden before auto-scroll completes — removed by JS on nudge completion */
.chicken-scroll-cue.cue-pre-reveal {
  opacity: 0;
  pointer-events: none;
}

.chicken-scroll-arrow {
  display: block;
  width: 36px;
  height: 36px;
  animation: chicken-scroll-bounce 1.5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes chicken-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .chicken-scroll-arrow {
    animation: none;
  }
}

/* Section nav block — separated below entry frame; user must scroll to reach */
.chicken-section-nav-block {
  background: #fff3d9;
  padding: 32px 24px 80px;
  text-align: center;
}

.overlay-paragraph {
  font-weight: bold;
  color: #000;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.6;
}

/* Desktop: classic CSS background-attachment:fixed parallax — smooth on all desktop browsers */
@media (min-width: 769px) {
  section.animal-welfare-section {
    position: relative;
    background-image: url('/view/images_preprocessed/chicken-experience/animal-welfare-backdrop.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: transparent;
  }

  section.animal-welfare-section .animal-welfare-bg {
    display: none; /* CSS background does the work; hide the JS parallax img */
  }
}

/* Mobile: position:fixed image + clip-path window = true background-attachment:fixed effect.
   clip-path:inset(0) on the section acts as a moving viewport over the fixed image.
   overflow:hidden cannot be used here — it breaks Safari's view() tracking and also
   does NOT clip fixed-position children (clip-path does). */
@media (max-width: 768px) {
  section.animal-welfare-section {
    position: relative;
    clip-path: inset(0); /* clips fixed img to section bounds as section scrolls past */
    background: none;
  }

  section.animal-welfare-section .animal-welfare-bg {
    position: fixed; /* viewport-fixed = image stays still while section scrolls past */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
  }
}

/* Universal — text over background needs legibility */
section.animal-welfare-section h1,
section.animal-welfare-section h2,
section.animal-welfare-section h3,
section.animal-welfare-section h4,
section.animal-welfare-section h5,
section.animal-welfare-section p,
section.animal-welfare-section li,
section.animal-welfare-section a,
section.animal-welfare-section span {
  color: #FFD700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.animal-welfare-section .ag-section-inner {
  position: relative;
  z-index: 1;
}


/* ---- Sources & Further Reading — parallax (mirrors Animal Welfare pattern) ---- */

/* Desktop: CSS background-attachment:fixed, contain so full portrait is visible */
@media (min-width: 769px) {
  section.sources-section {
    position: relative;
    background-image: url('/view/images_preprocessed/chicken-experience/sources-backdrop.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
    background-attachment: fixed;
    background-color: #f7f3e8; /* original ag-citations background — shows left of image */
  }

  section.sources-section .sources-bg {
    display: none; /* CSS background does the work on desktop */
  }

  /* Constrain citation content to left side so it clears the right-anchored portrait.
     Image width = viewport_height × 0.75 (portrait contain on landscape viewport).
     Formula: 100vw - 75vh - 24px (section padding) - 60px (visual gap) = 100vw - 75vh - 84px.
     Produces exactly 60px clearance at 1024×768, 1440×900, 1920×1080, 2560×1440.
     !important overrides the inline max-width:820px;margin:0 auto on the inner div. */
  section.sources-section > div {
    max-width: calc(100vw - 75vh - 84px) !important;
    margin: 0 !important;
  }
}

/* Mobile: position:fixed image + clip-path viewport window */
@media (max-width: 768px) {
  section.sources-section {
    position: relative;
    clip-path: inset(0);
    background-color: #f7f3e8; /* original ag-citations background */
  }

  section.sources-section .sources-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;   /* full portrait, no crop or stretch */
    background-color: #f7f3e8; /* fills behind contained portrait */
    z-index: 0;
    pointer-events: none;
  }

}

/* Sources section text — yellow on photo background, matching Animal Welfare pattern */
section.sources-section h2,
section.sources-section h3,
section.sources-section p,
section.sources-section li,
section.sources-section span,
section.sources-section em {
  color: #FFD700 !important;
  text-shadow: none;
}

section.sources-section a,
section.sources-section a:hover {
  color: #a5d6a7 !important; /* light green — readable over dark photo */
  text-shadow: none;
}

section.sources-section .ag-cite-list li::before {
  color: #a5d6a7 !important;
  text-shadow: none;
}

/* Separator and h2 underline updated to match yellow scheme */
section.sources-section .ag-cite-list li {
  border-bottom-color: rgba(255, 215, 0, 0.3) !important; /* subtle yellow separator */
}

section.sources-section h2 {
  border-bottom-color: #FFD700 !important;
}

/* ---- Ecological Impact — three-panel parallax ---- */

/* Desktop: three background-images side-by-side via comma-separated declarations.
   background-position math (with background-size: 33.33% auto, background-attachment:fixed):
     pixel_offset = (viewport_w - img_w) × position_pct
     img_w = 33.33% of viewport_w
     Panel 1 at viewport left:   (vw - vw/3) × 0%   = 0      ✓
     Panel 2 at 1/3 from left:   (vw - vw/3) × 50%  = vw/3   ✓
     Panel 3 at 2/3 from left:   (vw - vw/3) × 100% = 2vw/3  ✓
   Images are 750×600 (5:4). Auto height at 1920px = 512px, 1440px = 384px, 1024px = 273px.
   Cream #fff3d9 shows above/below where images don't cover section height. */
@media (min-width: 769px) {
  section.ecology-section {
    background-image:
      url('/view/images_preprocessed/chicken-experience/ecology-backdrop-1.jpg'),
      url('/view/images_preprocessed/chicken-experience/ecology-backdrop-2.jpg'),
      url('/view/images_preprocessed/chicken-experience/ecology-backdrop-3.jpg');
    background-size: 33.33% auto, 33.33% auto, 33.33% auto;
    background-position: 0% center, 50% center, 100% center;
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-color: #2c4018; /* dark forest green fills above/below images */
  }

  section.ecology-section .ecology-bg-mobile {
    display: none;
  }
}

/* Mobile: single centered image (center panel as representative) using
   position:fixed + clip-path:inset(0) — Safari-safe parallax pattern. */
@media (max-width: 768px) {
  section.ecology-section {
    position: relative;
    clip-path: inset(0);
    background-color: #2c4018;
  }

  section.ecology-section .ecology-bg-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #2c4018;
    z-index: 0;
    pointer-events: none;
  }
}

/* Text sits above mobile fixed image */
section.ecology-section .ag-section-inner {
  position: relative;
  z-index: 1;
}

/* Static yellow text throughout — dark green background ensures legibility
   whether text falls over the parallax images or the section background. */
section.ecology-section h2,
section.ecology-section h3,
section.ecology-section p,
section.ecology-section li,
section.ecology-section a {
  color: #FFD700 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* .ag-highlight-box: direct text only (no p/li children), and color:#fff3d9
   is set via its own rule — div not matched above, so box stays cream on dark green. */

/* Mute button — fixed top-left, appears when video ends, gone on first scroll or click */
#chicken-mute-btn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 400ms ease, background 200ms ease;
}

#chicken-mute-btn.visible {
  opacity: 1;
}

#chicken-mute-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

#chicken-mute-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 3px;
}

/* Prevent CTA buttons from overflowing viewport on mobile */
@media (max-width: 768px) {
  .ag-btn-primary {
    max-width: 100%;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: break-word;
    font-size: 14px;
  }
}