/**
 * @file
 * Styles for the Squircle Gallery component.
 *
 * This component displays a scroll-scrubbed gallery where:
 * 1. One image is shown at a time in a morphing container
 * 2. The container transitions from circle (border-radius: 50%) to square (border-radius: 0%)
 * 3. Scroll position controls both the shape transition and image visibility
 *
 * Key concepts:
 * - CSS custom properties (--scroll-progress, --image-count) are set via JavaScript
 * - Border-radius is calculated dynamically based on scroll progress
 * - Images are positioned absolutely and controlled via opacity/z-index
 * - Scroll spacer creates the vertical scroll space needed for the effect
 */


/* ============================================================================
   Main Gallery Wrapper
   ========================================================================= */

/**
 * Outer wrapper for the entire squircle gallery component.
 * Contains the title section and the scrolling gallery container.
 */
.buComponent__gallery--squircle {
  width: 100%;
  padding: 0;
  position: relative;
}

/* ============================================================================
   Title and Text Group
   ========================================================================= */

/**
 * Container for the gallery title and any additional text content.
 * Positioned above the scrolling gallery container.
 */
.buComponent__gallery--squircle .buComponent__textGroup {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
  text-align: center;
}

/*.buComponent__gallery--squircle .buComponent__gallery-title {*/
/*  font-size: 2rem;*/
/*  font-weight: 700;*/
/*  margin: 0 0 1rem;*/
/*  color: #000;*/
/*}*/

/* ============================================================================
   Squircle Container (Scroll Viewport)
   ========================================================================= */

/**
 * Main scrolling container that holds the morphing box and scroll spacer.
 * Uses standard positioning to contain the morphing box.
 * Box centering is handled by margin-inline: auto on the squircle-box.
 * Height is determined by the scroll spacer to provide enough vertical space
 * for scrolling through all images.
 */
.squircle-container {
  position: relative;
  width: 100%;

  /* Add this — gives Firefox a resolved containing block height */
  /*min-height: 100vh;*/

  /* CSS custom property set by JavaScript based on image count */
  --image-count: 1;
  /* Scroll progress: 0 = start (circle), 1 = end (square) */
  --scroll-progress: 0;
  /* Distance to scroll per image transition (adjustable) */
  --scroll-distance-per-image: 120vh; /* was 30vh — much too short for wheel mice */
  /* Dynamic morphing multiplier calculated by JavaScript based on image count */
  --gallery-morph-completion-multiplier: 1.5;

  /**
   * Remapped progress for morphing transitions (border-radius and size).
   * Uses a dynamic multiplier to control when morphing completes based on image count.
   * The multiplier is calculated as (imageCount - 1) / (imageCount - 2), so morphing 
   * completes when reaching the penultimate (second-to-last) image.
   * 
   * Formula: clamp(0, scroll-progress * morphing-multiplier, 1)
   * 
   * Examples:
   * - 2 images: multiplier = 1, morphing completes at scroll-progress = 1.0 (end, showing image 1)
   * - 3 images: multiplier = 2, morphing completes at scroll-progress = 0.5 (showing image 1)
   * - 4 images: multiplier = 1.5, morphing completes at scroll-progress = 0.67 (showing image 2)
   * - 5 images: multiplier = 1.33, morphing completes at scroll-progress = 0.75 (showing image 3)
   * 
   * This ensures morphing finishes at a progress ratio equal to:
   * (imageCount - 2) / (imageCount - 1) in scroll-progress terms, which corresponds
   * to the penultimate image being displayed.
   */
  --gallery-morph-progress: clamp(0, var(--scroll-progress, 0) * var(--gallery-morph-completion-multiplier, 1.5), 1);

  /* ==========================================================================
     Initial Gallery Size Configuration
     ========================================================================== */

  /**
   * Width and height of .squircle-box are now calculated and applied directly
   * by JavaScript (updateBoxDimensions()) as inline styles. This bypasses
   * Firefox's inability to resolve % units inside CSS custom properties on
   * position:sticky elements. The JS mirrors the fluid 70%→50% / 70vh→50vh
   * interpolation that was previously expressed here as custom properties.
   *
   * --gallery-morph-progress is still used by border-radius in .squircle-box,
   * so it is kept here.
   */

  /**
   * Entry animation for padding-top.
   *
   * During the entry phase (--entry-progress 0→1), padding-top animates from
   * a compact starting value up to the value the morphing formula would produce
   * at morphing-progress = 0 (i.e. 25vh). This is a lerp:
   *
   *   padding-top = start + entry-progress * (end - start)
   *
   * Where:
   *   start = 10vh  (desired padding when container first enters the viewport)
   *   end   = the morphing-driven value at the moment entry completes
   *           = ((100vh - 50vh) / 2) * (1 - 0) = 25vh
   *
   * After entry completes (--entry-progress = 1), the expression collapses to
   * the standard morphing formula, so the two phases connect seamlessly.
   *
   * If --height is later animated during entry, update --entry-padding-start
   * and --entry-padding-end to match the desired start/end states.
   */
  --entry-padding-start: max(1vh, var(--padding-standard));
  /**
   * Target padding-top once entry completes and before morphing begins.
   * Previously derived from --height (which is now set by JS as an inline style).
   * At morph-progress = 0 the box starting height is ~70vh (small) to ~50vh (large),
   * so the vertical gap above the box is (100vh - startingHeight) / 2.
   * We approximate this with --gallery-morph-progress driving it to 0 as morphing
   * progresses, using a fixed 15vh as a reasonable mid-point starting value that
   * matches the JS-computed starting height range of 50vh–70vh at typical viewports.
   */
  --entry-padding-end: calc(15vh * (1 - var(--gallery-morph-progress, 0)));
  padding-top: calc(
    var(--entry-padding-start)
    + var(--entry-progress, 1) * (var(--entry-padding-end) - var(--entry-padding-start))
  );
}

/* ============================================================================
   Morphing Box (Circle to Square Transition)
   ========================================================================= */

/**
 * The morphing box that contains all images and transitions from circle to square.
 * Uses position sticky with top: 0 to stay bounded within the container.
 * Centered horizontally via margin-inline: auto, which works correctly regardless
 * of whether the containing block is full-viewport-width (landing page) or a
 * narrower content column (basic page). Using `left` for centering breaks on
 * non-full-width containers because sticky `left` offsets from the containing
 * block edge rather than centering within it.
 * Border-radius is dynamically calculated using --gallery-morph-progress.
 * Width and height grow from 50% to 100% as user scrolls through the gallery.
 * Morphing completes when reaching the penultimate (second-to-last) image (dynamic based on image count).
 */
.squircle-box {
  position: sticky;
    /* top, width, and height are set as inline styles by JavaScript
       (updateBoxDimensions()) to work around a Firefox bug where % units
       inside CSS custom properties on sticky elements resolve to 0. */
    /* margin-inline: auto centers the box within any container width, unlike
       `left: calc((100% - width) / 2)` which only works when the container
       is full-viewport-width. */
    margin-inline: auto;
  overflow: hidden;
  background: #f0f0f0;
  z-index: 10;

    /**
     * Border-radius uses clamp-based steeper slope to delay the pill-to-square transition.
     * Uses --gallery-morph-progress which completes dynamically when reaching the penultimate image.
     * Multiplying the inverted progress by 5 creates a steeper curve that holds
     * the pill shape much longer before dropping rapidly near the end.
     * 
     * Curve behavior (relative to morphing-progress, from 0 to 1):
     * - At morphing-progress = 0 to ~0.8: border-radius = 30% (full pill - held constant)
     * - At morphing-progress = ~0.81: border-radius = ~28.5% (transition begins)
     * - At morphing-progress = 0.85: border-radius = ~22.5% (rapid drop)
     * - At morphing-progress = 0.9: border-radius = ~15% (halfway to square)
     * - At morphing-progress = 0.95: border-radius = ~7.5% (nearly square)
     * - At morphing-progress = 1.0: border-radius = 0% (perfect square)
     * 
     * Implementation: Single-line clamp() with multiplier for steeper slope.
     * 1. Invert morphing-progress: (1 - progress) so we start high and end low
     * 2. Multiply by 5 to create steeper curve (adjust this value to tune feel)
     * 3. Clamp between 0 and 1 to prevent overflow
     * 4. Multiply by max border-radius (30%)
     */
    border-radius: calc(30vmax * clamp(0, (1 - var(--gallery-morph-progress, 0)) * 5, 1));
}
@supports (corner-shape: squircle) {
    .squircle-box {
        corner-shape: squircle;
    }
}

/* ============================================================================
   Images Within the Morphing Box
   ========================================================================= */

/**
 * Individual image figures positioned absolutely within the morphing box.
 * All images are stacked on top of each other; visibility is controlled
 * by JavaScript setting opacity and z-index based on scroll position.
 */
.squircle-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 0s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/**
 * Active image state (set by JavaScript).
 * The currently visible image has opacity: 1 and higher z-index.
 */
.squircle-image.is-active {
  opacity: 1;
  z-index: 2;
}

/**
 * Images within figures are styled to fit the morphing container.
 * Object-fit: cover ensures images fill the space without distortion.
 */
.squircle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================================
   Image Captions
   ========================================================================= */

/**
 * Optional captions that appear below/over images.
 * Positioned at the bottom of each figure with semi-transparent background.
 */
.squircle-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/**
 * Show caption when parent image is active.
 * Caption fades in along with the image.
 */
.squircle-image.is-active .squircle-caption {
  opacity: 1;
}

/* ============================================================================
   Scroll Spacer
   ========================================================================= */

/**
 * Invisible element that creates vertical scroll space.
 * Height is calculated as: (image_count - 1) * scroll_distance_per_image.
 * This allows the gallery to have enough scroll distance to show all images
 * and complete the circle-to-square transition.
 * JavaScript sets the height dynamically via inline style or CSS variable.
 */
.squircle-scroll-spacer {
  width: 1px;
  height: calc((var(--image-count, 1) - 1) * var(--scroll-distance-per-image, 100vh));
  pointer-events: none;
  visibility: hidden;
}

/* ============================================================================
   Screen Reader Support
   ========================================================================= */

/**
 * Visually hidden element for screen readers.
 * Announces current image number as user scrolls through gallery.
 */
.squircle-current-image.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   Responsive Design
   ========================================================================= */

/**
 * Tablet and mobile adjustments.
 * Adjusts spacing and scroll distance for smaller screens.
 * Box remains edge-to-edge at all breakpoints.
 *
 * Scroll distance uses vw on mobile rather than vh because:
 * - On portrait phones, vw is the short dimension (~390px), so 150vw ≈ one
 *   deliberate swipe — enough to advance one image without skipping.
 * - vh on portrait mobile is tall (~844px), making vh-based distances too
 *   large: a single momentum swipe can cover 2–3 images at once.
 * - vw also scales naturally with device width, which correlates better
 *   with how far a thumb swipe travels than screen height does.
 */
@media (width < 768px) {
  .buComponent__gallery--squircle .buComponent__textGroup {
    margin-bottom: 1rem;
  }

  .buComponent__gallery--squircle .buComponent__gallery-title {
    font-size: 1.5rem;
  }

  .squircle-caption {
    padding: 0.75rem;
    font-size: 0.8rem;
  }

  /* Use vw so scroll distance scales with device width, not height.
     150vw ≈ one full deliberate swipe on a ~390px-wide phone. */
  .squircle-container {
    --scroll-distance-per-image: 150vw;
  }
}

/**
 * Small mobile devices.
 * Slightly tighter scroll distance for narrower screens where swipes
 * naturally cover less distance.
 */
@media (width < 480px) {
  .squircle-caption {
    padding: 0.5rem;
    font-size: 0.75rem;
  }

  /* Reduce slightly from the 768px breakpoint for the smallest screens. */
  .squircle-container {
    --scroll-distance-per-image: 120vw;
  }
}

/* ============================================================================
   Accessibility and Reduced Motion
   ========================================================================= */

/**
 * Respect user's motion preferences.
 * Disables animations and transitions for users who prefer reduced motion.
 */
@media (prefers-reduced-motion: reduce) {
  .squircle-box,
  .squircle-image,
  .squircle-caption {
    transition: none;
  }

}