/* ============================================================
   UHC Laupen — Page animations

   Everything is guarded by `.uhc-anim` on <html>, which
   assets/js/animations.js only sets when JavaScript runs and
   the visitor has NOT asked for reduced motion. Without that
   class every rule below is inert and the page renders exactly
   as it did before.
   ============================================================ */


/* ============================================================
   1. HERO INTRO
   Runs on both heroes — the home page hero block and the team
   page's team photo, which reads as a hero too:

     .hero-section   blocks/hero-section/render.php
     .team-hero      single-team.php

   Three stages, driven by classes on the hero root:

     .is-hero-rect     light-grey rectangle wipes in from the
                       top-right corner, growing down + left
                       (same easing/duration as the menu)
     .is-hero-image    background image + dark overlay fade in
     .is-hero-content  title, logo triangle and post triangle
                       fade in, slightly staggered
     .is-hero-done     intro finished — every override below
                       switches off so the block's own CSS
                       (slider cross-fades) takes over again
   ============================================================ */

/* The wiping rectangle. Anchored top-right, so growing width
   and height together sweeps the diagonal towards bottom-left.
   Sits at z-index 0, below the image layers. */
.uhc-anim .hero-section__reveal {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background-color: #E9E9E9;
	z-index: 0;
	pointer-events: none;
}

.uhc-anim .hero-section.is-hero-rect .hero-section__reveal {
	width: 100%;
	height: 100%;
	/* identical curve + duration to the menu container expansion */
	transition:
		width  0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		height 0.9s cubic-bezier( 0.77, 0, 0.175, 1 );
}

/* Image + dark overlay — hidden until the rectangle has landed.
   The `:not(.is-hero-done)` guard is also what lifts these rules
   above the block's own `.hero-section__background.is-active`
   rule; once the intro is over they stop applying entirely. */
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__background,
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__overlay {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.uhc-anim .hero-section.is-hero-image:not( .is-hero-done ) .hero-section__background.is-active,
.uhc-anim .hero-section.is-hero-image:not( .is-hero-done ) .hero-section__overlay {
	opacity: 1;
}

/* Title/tagline, yellow logo triangle and the latest-post glass
   triangle — after the image, staggered in reading order. */
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__text {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__text {
	opacity: 1;
}

/*
 * The two triangles build out from their own right-angle corner: the
 * yellow logo triangle from bottom-left, the glass post triangle from
 * bottom-right.
 *
 * This scales rather than animating the clip-path, on purpose. Each
 * triangle's clip-path changes between breakpoints — and below 1025px
 * the post triangle drops its clip-path entirely — so an animation
 * driven by clip-path would need the end shape restated for every
 * breakpoint, and could not interpolate to `none` at all. Scaling from
 * the corner grows whatever shape the theme has already defined, at
 * every size, and reverts cleanly with `transform: none`.
 */
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__logo-triangle {
	transform: scale( 0 );
	transform-origin: bottom left;
	transition: transform 0.55s cubic-bezier( 0.77, 0, 0.175, 1 ) 0.1s;
}

.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-triangle {
	transform: scale( 0 );
	transform-origin: bottom right;
	transition: transform 0.55s cubic-bezier( 0.77, 0, 0.175, 1 ) 0.25s;
}

.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__logo-triangle,
.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__post-triangle {
	transform: none;
}

/* What sits inside a triangle fades in once it has finished growing. */
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__logo,
.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-content {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__logo {
	opacity: 1;
	transition-delay: 0.65s;
}

.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__post-content {
	opacity: 1;
	transition-delay: 0.8s;
}

/*
 * Tablet and below: the post triangle is no longer a corner triangle
 * but a full-width grey band under the image, so growing it out of the
 * bottom-right corner makes no sense — it fades in as one piece, and
 * its contents stop fading separately.
 */
@media ( max-width: 1024px ) {

	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-triangle {
		opacity: 0;
		transform: none;
		transition: opacity 0.5s ease 0.25s;
	}

	.uhc-anim .hero-section.is-hero-content:not( .is-hero-done ) .hero-section__post-triangle {
		opacity: 1;
	}

	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-content {
		opacity: 1;
		transition: none;
	}
}


/* ── Team page hero — same three stages, team markup ──────────── */

.uhc-anim .team-hero__reveal {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	background-color: #E9E9E9;
	z-index: 0;
	pointer-events: none;
}

.uhc-anim .team-hero.is-hero-rect .team-hero__reveal {
	width: 100%;
	height: 100%;
	transition:
		width  0.9s cubic-bezier( 0.77, 0, 0.175, 1 ),
		height 0.9s cubic-bezier( 0.77, 0, 0.175, 1 );
}

/*
 * The team photo is a plain in-flow <img>, which paints in an earlier
 * step than the positioned rectangle and would end up hidden behind it.
 * Positioning it — deliberately WITHOUT a z-index — moves it into the
 * same paint step, where document order puts it above the rectangle and
 * still below the yellow triangle and the Bildlegende tab.
 */
.uhc-anim .team-hero__image {
	position: relative;
}

.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__image {
	opacity: 0;
	transition: opacity 0.6s ease;
}

.uhc-anim .team-hero.is-hero-image:not( .is-hero-done ) .team-hero__image {
	opacity: 1;
}

.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__name-wrap {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.uhc-anim .team-hero.is-hero-content:not( .is-hero-done ) .team-hero__name-wrap {
	opacity: 1;
}

/* Both triangles build out from their right-angle corner, exactly as on
   the home page hero — see the note there for why this scales. */
.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__triangle {
	transform: scale( 0 );
	transform-origin: bottom left;
	transition: transform 0.55s cubic-bezier( 0.77, 0, 0.175, 1 ) 0.1s;
}

.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__legend-tab {
	transform: scale( 0 );
	transform-origin: bottom right;
	/* Keeps the theme's own opacity transition, which is what cross-fades
	   the tab into the Bildlegende panel on hover. */
	transition:
		opacity 0.2s ease,
		transform 0.55s cubic-bezier( 0.77, 0, 0.175, 1 ) 0.25s;
}

.uhc-anim .team-hero.is-hero-content:not( .is-hero-done ) .team-hero__triangle,
.uhc-anim .team-hero.is-hero-content:not( .is-hero-done ) .team-hero__legend-tab {
	transform: none;
}

/* Nothing to hover before the tab has appeared. */
.uhc-anim .team-hero:not( .is-hero-content ) .team-hero__legend {
	pointer-events: none;
}

/* The logo fades in once its triangle has finished growing. */
.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__logo {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.uhc-anim .team-hero.is-hero-content:not( .is-hero-done ) .team-hero__logo {
	opacity: 1;
	transition-delay: 0.65s;
}


/* ============================================================
   2. SCROLL REVEALS
   Elements start slightly ABOVE their final position and drop
   into place while fading in. animations.js tags the elements
   with .uhc-reveal and flips .is-inview via IntersectionObserver.
   --uhc-reveal-delay staggers siblings within the same group.
   ============================================================ */
/*
 * Note where the transition is NOT declared: on .uhc-reveal itself.
 *
 * This markup starts out visible and only becomes hidden when the
 * deferred script adds the class. With a transition here, that would
 * animate the elements OUT over 0.7s — and anything the observer caught
 * during that window would never reach opacity 0, drifting back up
 * instead, which looks like no animation at all. Declaring it only on
 * the revealed state hides them in a single frame and animates the one
 * direction that should be seen.
 */
.uhc-anim .uhc-reveal {
	opacity: 0;
	transform: translateY( -32px );
}

.uhc-anim .uhc-reveal.is-inview {
	opacity: 1;
	transform: none;
	transition:
		opacity   0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ) var( --uhc-reveal-delay, 0s ),
		transform 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ) var( --uhc-reveal-delay, 0s );
}


/* ============================================================
   3. Reduced motion
   animations.js already refuses to set .uhc-anim in this case;
   this is the belt-and-braces fallback for anyone who changes
   the setting after load.
   ============================================================ */
@media ( prefers-reduced-motion: reduce ) {

	.uhc-anim .hero-section__reveal,
	.uhc-anim .team-hero__reveal {
		display: none;
	}

	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__background.is-active,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__overlay,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__text,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__logo-triangle,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-triangle,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__logo,
	.uhc-anim .hero-section:not( .is-hero-done ) .hero-section__post-content,
	.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__image,
	.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__name-wrap,
	.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__triangle,
	.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__legend-tab,
	.uhc-anim .team-hero:not( .is-hero-done ) .team-hero__logo,
	.uhc-anim .uhc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.uhc-anim .team-hero:not( .is-hero-content ) .team-hero__legend {
		pointer-events: auto;
	}
}