/* Page transition */
.page-transition {
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.6s var(--premium), transform 0.6s var(--premium);
    transform-origin: center top;
    will-change: opacity, transform;
}
.page-transition.is-ready {
    opacity: 1;
    transform: scale(1);
}
.page-transition.is-leaving {
    opacity: 0;
    transform: scale(1.15);
}

/* Scroll reveal — initial state */
.reveal {
    opacity: 0;
    transform: translate3d(var(--rx, 0), var(--ry, 60px), 0) scale(var(--rs, 1));
    filter: blur(var(--rb, 8px));
    transition: opacity 1s var(--premium), transform 1s var(--premium), filter 1s var(--premium), clip-path 1s var(--premium);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform, filter;
}
.reveal[data-blur="false"] { --rb: 0px; }
.reveal[data-direction="down"]  { --ry: -60px; }
.reveal[data-direction="left"]  { --ry: 0px; --rx: 60px; }
.reveal[data-direction="right"] { --ry: 0px; --rx: -60px; }
.reveal[data-direction="none"]  { --ry: 0px; --rx: 0px; }
.reveal[data-scale="true"]      { --rs: 0.95; }

.reveal[data-clip="left"],
.reveal[data-clip="right"],
.reveal[data-clip="top"],
.reveal[data-clip="bottom"] {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 1;
    filter: blur(0);
    transform: none;
}
.reveal[data-clip="left"]   { clip-path: inset(0 100% 0 0); }
.reveal[data-clip="right"]  { clip-path: inset(0 0 0 100%); }
.reveal[data-clip="top"]    { clip-path: inset(100% 0 0 0); }
.reveal[data-clip="bottom"] { clip-path: inset(0 0 100% 0); }

/* On mobile, skip the clip-path animation altogether — the image is shown
   immediately. Guarantees it never stays clipped if the IntersectionObserver
   somehow fails to fire (e.g. when the element loads inside an already-visible
   viewport area). */
@media (max-width: 1023px) {
    .reveal[data-clip="left"],
    .reveal[data-clip="right"],
    .reveal[data-clip="top"],
    .reveal[data-clip="bottom"] {
        clip-path: inset(0 0 0 0) !important;
        transition: none;
    }
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
}

/* Horizontal rule animation */
.rule-x {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--premium) var(--rd, 0s);
}
.rule-x.is-visible { transform: scaleX(1); }

/* Letter-spacing reveal */
.letterspace-reveal {
    opacity: 0;
    letter-spacing: 0.2em;
    transition: opacity 1.5s var(--premium) var(--rd, 0s), letter-spacing 1.5s var(--premium) var(--rd, 0s);
}
.letterspace-reveal.is-visible {
    opacity: 1;
    letter-spacing: 0.6em;
}

/* Parallax driven by JS (translateY in %) */
.parallax {
    will-change: transform;
    transition: transform 0.05s linear;
}

@media (prefers-reduced-motion: reduce) {
    .reveal, .rule-x, .letterspace-reveal, .page-transition {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        letter-spacing: normal !important;
    }
    .parallax { transform: none !important; }
}