/*
 * OAK 2026 enhancements: icon tiles, hover polish, scroll reveals and the
 * video player. Everything here is optional decoration: without it (or without
 * motion.js) every page still reads and works. Motion only runs for visitors
 * who have not asked their system for reduced motion.
 */

/* Icon tiles ---------------------------------------------------------------
 * "oak-ico oak-ico--<name>" puts a square tile with a line icon above the text;
 * the icon shapes live in icons.css. */

.oak-ico {
	--oak-ico-size: 3.5rem;
	--oak-ico-tile: color-mix(in srgb, var(--wp--preset--color--teal) 11%, transparent);
	--oak-ico-ink: var(--wp--preset--color--teal);
	padding-top: calc(var(--oak-ico-size) + 1.1rem);
	position: relative;
}

.oak-ico::before,
.oak-ico::after {
	content: "";
	left: 0;
	position: absolute;
	top: 0;
}

.oak-ico::before {
	background: var(--oak-ico-tile);
	height: var(--oak-ico-size);
	transition: background-color 0.3s ease;
	width: var(--oak-ico-size);
}

.oak-ico::after {
	background: var(--oak-ico-ink);
	height: calc(var(--oak-ico-size) * 0.5);
	left: calc(var(--oak-ico-size) * 0.25);
	-webkit-mask: var(--oak-ico) center / contain no-repeat;
	mask: var(--oak-ico) center / contain no-repeat;
	top: calc(var(--oak-ico-size) * 0.25);
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease;
	width: calc(var(--oak-ico-size) * 0.5);
}

.oak-ico.has-text-align-center::before {
	left: calc(50% - var(--oak-ico-size) / 2);
}

.oak-ico.has-text-align-center::after {
	left: calc(50% - var(--oak-ico-size) / 4);
}

.oak-dark .oak-ico,
.oak-ico.oak-dark {
	--oak-ico-tile: rgb(255 255 255 / 0.1);
	--oak-ico-ink: var(--wp--preset--color--gold);
}

/* A card's tile turns gold when the card is hovered. */
.oak-card:hover .oak-ico,
.oak-door:hover .oak-ico {
	--oak-ico-tile: var(--wp--preset--color--gold);
	--oak-ico-ink: var(--wp--preset--color--ink);
}

.oak-card:hover .oak-ico::after,
.oak-door:hover .oak-ico::after {
	transform: scale(1.08);
}

/* Inline: a small icon before the text, for contact and detail lines. */
.oak-ico.oak-ico--inline {
	--oak-ico-size: 1.25em;
	padding: 0 0 0 calc(var(--oak-ico-size) + 0.6em);
}

.oak-ico.oak-ico--inline::before {
	display: none;
}

.oak-ico.oak-ico--inline::after {
	height: var(--oak-ico-size);
	left: 0;
	top: 0.15em;
	width: var(--oak-ico-size);
}

/* Cards hold their icon inside the card's own padding. */
.oak-card > .oak-ico:first-child {
	margin-top: 1.5rem;
}

/* Hover polish ------------------------------------------------------------- */

.oak-card {
	transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.oak-card:hover {
	box-shadow: 0 1.5rem 3rem -1.75rem rgb(15 42 45 / 0.45);
	transform: translateY(-4px);
}

.oak-card > .wp-block-image,
.oak-story__img,
.wp-block-image.oak-crop {
	overflow: hidden;
}

.oak-card > .wp-block-image img,
.oak-story__img img,
.wp-block-gallery.oak-gallery img {
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.oak-card:hover > .wp-block-image img,
.oak-story__img a:hover img,
.wp-block-gallery.oak-gallery figure:hover img {
	transform: scale(1.04);
}

.wp-element-button {
	transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
}

.oak-door .oak-door__links a::after {
	display: inline-block;
	transition: transform 0.25s ease;
}

.oak-door .oak-door__links a:hover::after {
	transform: translateX(4px);
}

/* Video ----------------------------------------------------------------------
 * A YouTube link on an image (video cards, or any image with "oak-video")
 * shows a play badge; motion.js plays it here in a pop-up player. */

.oak-card--video > .wp-block-image a,
.wp-block-image.oak-video a {
	display: block;
	position: relative;
}

.oak-card--video > .wp-block-image a::after,
.wp-block-image.oak-video a::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%23F2C14E'/%3E%3Cpath d='M26 20l20 12-20 12z' fill='%230F2A2D'/%3E%3C/svg%3E") center / contain no-repeat;
	content: "";
	height: 4.5rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	width: 4.5rem;
}

.oak-card--video > .wp-block-image a:hover::after,
.wp-block-image.oak-video a:hover::after {
	transform: translate(-50%, -50%) scale(1.1);
}

/* Play buttons carry a small triangle. */
.oak-play .wp-element-button::before {
	background: currentColor;
	content: "";
	display: inline-block;
	height: 0.8em;
	margin-right: 0.55em;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z'/%3E%3C/svg%3E") center / contain no-repeat;
	width: 0.7em;
}

.oak-player {
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--white);
	max-height: 100vh;
	max-width: 100vw;
	overflow: visible;
	padding: 0;
	width: min(72rem, calc(100vw - 2rem));
}

.oak-player::backdrop {
	backdrop-filter: blur(4px);
	background: rgb(15 42 45 / 0.88);
}

.oak-player__frame {
	aspect-ratio: 16 / 9;
	background: #000;
	box-shadow: 0 2rem 5rem rgb(0 0 0 / 0.5);
	margin-inline: auto;
	max-height: calc(100vh - 7rem);
	max-width: 100%;
}

.oak-player.is-portrait {
	width: auto;
}

.oak-player.is-portrait .oak-player__frame {
	aspect-ratio: 9 / 16;
	height: calc(100vh - 7rem);
}

.oak-player iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

.oak-player__bar {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 0.75rem;
}

.oak-player__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 900;
	margin: 0;
}

.oak-player__close {
	background: var(--wp--preset--color--gold);
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	flex: none;
	font: inherit;
	font-weight: 700;
	padding: 0.6rem 1rem;
}

.oak-player__close:hover {
	background: var(--wp--preset--color--white);
}

html:has(.oak-player[open]) {
	overflow: hidden;
}

/* Scroll reveals --------------------------------------------------------------
 * motion.js adds .oak-reveal only to sections below the fold when the page
 * loads, so nothing on screen ever blinks, adds .is-in as each one scrolls
 * into view, and removes both once it has settled, so hover effects apply. */

@media (prefers-reduced-motion: no-preference) {
	.oak-reveal {
		opacity: 0;
		transform: translateY(1.75rem);
		transition: opacity 0.8s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--oak-delay, 0s);
	}

	.oak-reveal.is-in {
		opacity: 1;
		transform: none;
	}

	/* Photos settle into their frame as they appear. */
	.oak-reveal.wp-block-image img,
	.oak-reveal > .wp-block-image img {
		transform: scale(1.12);
		transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--oak-delay, 0s);
	}

	.oak-reveal.is-in.wp-block-image img,
	.oak-reveal.is-in > .wp-block-image img {
		transform: none;
	}

	/* Timeline and progress rules draw themselves in. */
	.oak-timeline.oak-reveal li::before {
		transform: scale(0);
		transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.4s;
	}

	.oak-timeline.oak-reveal.is-in li::before {
		transform: none;
	}

	/* The page's opening photo settles slowly on load; its text rises in.
	 * Transform only, so the largest image still paints immediately. */
	.oak-page-hero .wp-block-image img {
		animation: oak-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.oak-hero .oak-hero__box,
	.oak-page-hero :is(h1, .oak-lead, .wp-block-buttons) {
		animation: oak-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.oak-page-hero h1 {
		animation-delay: 0.08s;
	}

	.oak-page-hero .oak-lead {
		animation-delay: 0.16s;
	}

	.oak-page-hero .wp-block-buttons {
		animation-delay: 0.24s;
	}
}

@keyframes oak-settle {
	from {
		transform: scale(1.08);
	}
}

@keyframes oak-rise {
	from {
		transform: translateY(1.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oak-card:hover,
	.wp-element-button:hover {
		transform: none;
	}

	.oak-card:hover > .wp-block-image img,
	.oak-story__img a:hover img,
	.wp-block-gallery.oak-gallery figure:hover img {
		transform: none;
	}
}

/* The leaf curve ----------------------------------------------------------
 * The homepage photo's sweeping corner, repeated at a smaller size on the
 * main photo of each page and on the impact figures, so the curve reads as
 * part of the brand. */

.oak-page-hero .wp-block-image,
.oak-page-hero .wp-block-image img {
	border-bottom-right-radius: clamp(3rem, 8vw, 7rem);
}

.oak-page-hero .wp-block-image {
	overflow: hidden;
}

.oak-story .oak-story__img,
.oak-mosaic > .wp-block-image:first-child,
.oak-mosaic > .wp-block-image:first-child img {
	border-bottom-right-radius: clamp(2.5rem, 6vw, 5rem);
}

.oak-mosaic > .wp-block-image:first-child {
	overflow: hidden;
}

.oak-stat.has-background {
	border-bottom-right-radius: 2rem;
}