/**
 * @file
 * Colorbox Overlay Customization
 *
 * Overrides the vendor Colorbox library's "example2" skin
 * (web/libraries/colorbox/example2/colorbox.css), which is not edited
 * directly since it belongs to the third-party library and could be
 * overwritten on update.
 */

/* The vendor library sets overflow:hidden on both of these (for its resize
   animations) — since they're ancestors of #cboxContent, that clips away
   any box-shadow on #cboxContent entirely, since a shadow paints outside
   its own box. Overriding to visible is what actually makes the shadow
   below render at all. */
#colorbox,
#cboxWrapper {
    overflow: visible !important;
}

#cboxContent {
    background: transparent !important;
}

/* Shadow deliberately withheld until the photo has actually finished
   growing into view (colorbox-custom.js adds this class once the reveal
   completes) — showing it immediately made the frame look like an
   already-finished box sitting there before the content had "arrived". */
#cboxContent.up-cbox-revealed {
    box-shadow: 0 24px 60px -14px rgba(0, 0, 0, 0.4), 0 8px 22px -8px rgba(0, 0, 0, 0.25);
}

#cboxLoadedContent {
    background: transparent !important;
    padding: 0 !important;
    position: relative; /* anchors .up-spiral-reveal below */
}

/* Opacity toggled via inline style in colorbox-custom.js (0 while the
   sunburst grows, fading to 1 near the end) — no transition, since an
   animated fade here got stuck at its start value in the environment this
   was tested in (same underlying cause as the CSS-transition issue
   documented below for the close button). Explicit stacking: a plain
   static element paints UNDER the absolutely positioned sunburst below
   regardless of DOM order or opacity, so without this the photo fading in
   would stay hidden behind it. */
#cboxLoadedContent img {
    opacity: 0;
    position: relative;
    z-index: 2;
}

#cboxTitle {
    display: none !important;
}

/* Vendor default is a black overlay + spinner gif shown while the image is
   still being fetched over the network (i.e. during the box's own opening
   zoom animation, before our sunburst reveal even starts on cbox_complete).
   Transparent rather than any solid color — a solid box here just creates
   a visible "box appears, THEN the sunburst/photo shows up" two-step,
   instead of nothing being there until the reveal itself begins. */
#cboxLoadingOverlay {
    background: transparent !important;
}
#cboxLoadingGraphic {
    background: none !important;
}

/* Close button: the vendor sprite (images/controls.png) has a solid white
   background baked into the PNG, which stood out once #cboxContent's own
   black background was removed. Replaced with a plain CSS "×" — same
   20x20 box/position as the vendor button, just no background at all. */
#cboxClose {
    background: none !important;
    font-size: 0;
    /* Vendor CSS sets text-indent:-9999px on this button (to hide its
       original sprite-icon text). text-indent is an inherited property,
       so without resetting it here, the "×" below inherits the same
       -9999px indent and renders completely off-screen. */
    text-indent: 0;
    /* Same reasoning as the shadow above: hidden until the photo has
       actually finished revealing itself. No transition — an animated
       opacity fade here got stuck at its start value in the environment
       this was tested in (same underlying cause as the CSS-transition
       issue documented for the scale animation elsewhere in this file's
       history); an instant toggle, like the shadow above, sidesteps it. */
    opacity: 0;
    pointer-events: none;
}
#cboxContent.up-cbox-revealed #cboxClose {
    opacity: 1;
    pointer-events: auto;
}
#cboxClose::before {
    content: '\00d7';
    display: block;
    width: 20px;
    height: 20px;
    line-height: 18px;
    font-size: 22px;
    font-family: Figtree, sans-serif;
    text-align: center;
    text-indent: 0;
    color: #333;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}
#cboxClose:hover::before {
    color: #000;
}

/* Sunburst reveal: grows from the center to full size on cbox_complete
   (colorbox-custom.js), then gets removed once the photo appears on top
   of it. Not a static decoration — the growing scale IS the animation. */
.up-spiral-reveal {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.up-cbox-spiral {
    width: 100%;
    height: 100%;
    transform: scale(0.02);
}