/*
 * Licensed under the GNU General Public License version 2 or later.
 * See LICENSE.txt for the full license text.
 *
 * Purpose: styles for the Page Transitions overlay.
 * Role: fixed full viewport overlay that holds either a track of panels
 * (panels and comb styles) or one or two full sheets (curtain, circle,
 * fade). All motion is driven by GSAP; this file only provides layout,
 * the colour token and the half pixel seam overlap against subpixel gaps.
 */

.yc-pt-overlay {
    --yc-pt-color: #1a1a2e;

    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    visibility: hidden;
}

.yc-pt-overlay.yc-pt-active {
    visibility: visible;
}

/* Visually hidden live region for screen reader announcements. */
.yc-pt-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Focus target after a swap: no visible ring on the programmatic focus
   itself, the normal ring stays for keyboard users tabbing onward. */
[data-yc-pt-focus]:focus:not(:focus-visible) {
    outline: none;
}

.yc-pt-track {
    position: absolute;
    inset: 0;
    display: flex;
}

.yc-pt-track.yc-pt-axis-x {
    flex-direction: column;
}

.yc-pt-panel {
    flex: 1 1 auto;
    background: var(--yc-pt-color, #1a1a2e);
    will-change: transform;
}

.yc-pt-panel.yc-pt-seam-y {
    margin: 0 -0.5px;
}

.yc-pt-panel.yc-pt-seam-x {
    margin: -0.5px 0;
}

.yc-pt-sheet {
    position: absolute;
    inset: 0;
    background: var(--yc-pt-color, #1a1a2e);
    will-change: transform, opacity, clip-path;
}

.yc-pt-sheet.yc-pt-trail {
    opacity: 0.55;
}

/* Image fill: panels each show their slice so the picture reassembles;
   sheets show the image edge to edge. The trail sheet stays the solid
   colour as an accent behind the image. */

.yc-pt-overlay.yc-pt-has-image .yc-pt-panel {
    background-image: var(--yc-pt-image);
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
}

.yc-pt-overlay.yc-pt-has-image .yc-pt-sheet:not(.yc-pt-trail) {
    background-image: var(--yc-pt-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Message layer: centred over the covering panels, above every panel and
   sheet. The UIkit heading class supplies the site font and size; the soft
   shadow keeps it legible on any colour or image. */

.yc-pt-message-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6vw;
    pointer-events: none;
    text-align: center;
}

.yc-pt-message {
    margin: 0;
    max-width: 20em;
    text-align: inherit;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Nine placement options. The flex wrap positions the text block; the
   text alignment follows the horizontal side. */

.yc-pt-pos-top-left,
.yc-pt-pos-top-center,
.yc-pt-pos-top-right {
    align-items: flex-start;
}

.yc-pt-pos-bottom-left,
.yc-pt-pos-bottom-center,
.yc-pt-pos-bottom-right {
    align-items: flex-end;
}

.yc-pt-pos-top-left,
.yc-pt-pos-middle-left,
.yc-pt-pos-bottom-left {
    justify-content: flex-start;
    text-align: left;
}

.yc-pt-pos-top-right,
.yc-pt-pos-middle-right,
.yc-pt-pos-bottom-right {
    justify-content: flex-end;
    text-align: right;
}

.yc-pt-pos-middle-left,
.yc-pt-pos-middle-center,
.yc-pt-pos-middle-right {
    align-items: center;
}

.yc-pt-pos-top-center,
.yc-pt-pos-middle-center,
.yc-pt-pos-bottom-center {
    justify-content: center;
}

/* Brand logo shown during the hold, above the panels. Placement comes
   from the shared .yc-pt-pos-* class (always applied by the script), so
   no default alignment is set here: a base value would win over the
   position class by source order, since this block comes after it. */

.yc-pt-brand-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    padding: 4vw;
    pointer-events: none;
}

.yc-pt-brand {
    width: auto;
    height: auto;
    max-height: 40vh;
}

.yc-pt-brand-small {
    max-width: 120px;
}

.yc-pt-brand-medium {
    max-width: 220px;
}

.yc-pt-brand-large {
    max-width: 340px;
}