/*
Theme Name: PA Studios
Author: PA Studios
Description: Brand and web design studio. A one-page journey: a summer sky seen from above, a descent through the clouds and an island where every place shows a project.
Version: 0.6.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pa-studios
*/

:root {
	--pa-ink: var(--wp--preset--color--tinta, #1f3b3d);
	--pa-paper: var(--wp--preset--color--papel, #fbf9f4);
	--pa-coral: var(--wp--preset--color--coral, #e8604c);
	--pa-mint: var(--wp--preset--color--menta, #a9e4d7);
	--pa-sea: var(--wp--preset--color--mar, #6cc5b8);
	--pa-sig: var(--wp--preset--color--firma, #1d4a5a);
	--pa-pixel: var(--wp--preset--font-family--pixel, Silkscreen, monospace);
	--pa-header-h: 76px;
	--pa-admin: var(--wp-admin--admin-bar--height, 0px);
	--pa-ease: cubic-bezier(.16, 1, .3, 1);
}

body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * { margin-block-start: 0; }
::selection { background: var(--pa-mint); color: var(--pa-ink); }
:focus-visible { outline: 3px solid var(--pa-coral); outline-offset: 3px; border-radius: 4px; }
.pa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── header ─────────────────────────────────────────── */
.pa-header {
	position: fixed; inset: var(--pa-admin) 0 auto; z-index: 20; height: var(--pa-header-h);
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 0 56px; background: var(--pa-paper);
}
.pa-header > * { margin: 0 !important; }
.pa-brand { display: block; line-height: 0; }
.pa-sig { display: block; height: 44px; width: auto; fill: var(--pa-sig); }
.pa-nav { display: flex; align-items: center; gap: 40px; font-size: 15px; font-weight: 500; }
.pa-nav > * { margin: 0 !important; }
.pa-nav a { color: var(--pa-ink); text-decoration: none; text-underline-offset: 6px; }
.pa-nav a:hover { text-decoration: underline; text-decoration-color: var(--pa-coral); }
.pa-lang { font-family: var(--pa-pixel); font-size: 12px; color: #4d6666; }
.pa-lang a[aria-current] { border-bottom: 2px solid var(--pa-coral); }

/* ── buttons ────────────────────────────────────────── */
.pa-cta .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 12px;
	box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35);
	transition: transform .4s var(--pa-ease), box-shadow .4s var(--pa-ease);
}
.pa-cta .wp-block-button__link::after {
	content: ""; width: 18px; height: 18px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h11M10 4.5 14.5 9 10 13.5'/%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 18 18' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h11M10 4.5 14.5 9 10 13.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .4s var(--pa-ease);
}
.pa-cta .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .4); }
.pa-cta .wp-block-button__link:hover::after { transform: translateX(3px); }

/* ── journey: still version (no script, or motion reduced) ── */
.pa-home { margin: 0; }
.pa-home > * { margin-block: 0 !important; }
.pa-journey {
	background:
		repeating-linear-gradient(-34deg, rgb(234 255 249 / .12) 0 110px, transparent 110px 260px, rgb(234 255 249 / .07) 260px 420px, transparent 420px 600px),
		linear-gradient(135deg, #a9e4d7 0%, #78cdc1 55%, #4fa9a5 100%);
}
.pa-stage { position: relative; padding: calc(var(--pa-header-h) + var(--pa-admin) + 64px) 56px 72px; }
.pa-stage > * { margin: 0 !important; }
.pa-hero-copy { max-width: 400px; }
.pa-hero-copy p { font-size: 19px; line-height: 1.5; color: #173d3f; }
/* the plane's banner text: a small label when still, painted on the banner when moving */
.pa-hero-copy .pa-banner-text { font-family: var(--pa-pixel); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #1f5153; margin-bottom: 12px !important; }
.pa-js .pa-hero-copy .pa-banner-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pa-hero-copy p strong { font-weight: 600; color: var(--pa-ink); }
.pa-hero-copy .wp-block-buttons { margin-top: 24px; }
.pa-island { margin: 48px auto 0 !important; max-width: 760px; }
.pa-island img { display: block; width: 100%; height: auto; }
.pa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 24px; margin-top: 32px !important; }

/* ── cards ──────────────────────────────────────────── */
.pa-card {
	background: var(--pa-paper); padding: 8px 8px 14px;
	box-shadow: 0 18px 30px -16px rgb(0 0 0 / .4), 0 2px 5px rgb(0 0 0 / .08);
}
.pa-card > * { margin: 0 !important; }
.pa-card__img img { display: block; width: 100%; height: 108px; object-fit: cover; object-position: 50% 30%; }
.pa-card__title { font-size: 19px !important; letter-spacing: -.01em; margin: 10px 6px 0 !important; }
.pa-card__meta { font-family: var(--pa-pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b5a3c; margin: 6px 6px 0 !important; }
.pa-card__text { font-size: 14px; line-height: 1.45; color: #2c4446; margin: 6px 6px 0 !important; }
.pa-card .wp-block-buttons { margin: 12px 6px 0 !important; }
.pa-card .pa-cta .wp-block-button__link { padding: 11px 18px; font-size: 14px; }
.pa-card__soon { height: 72px; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, #f2c230 0 14px, #2a2a2a 14px 28px); }
.pa-card__soon span { background: var(--pa-paper); padding: 6px 10px; font-family: var(--pa-pixel); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ── journey: animated version ──────────────────────── */
.pa-js .pa-journey { height: 100vh; background: none; }
.pa-js .pa-stage { position: relative; height: 100vh; overflow: hidden; padding: 0; background: var(--pa-sea); }
.pa-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; will-change: transform, opacity; }
.pa-layer--sea {
	background:
		repeating-linear-gradient(-34deg, rgb(234 255 249 / .12) 0 110px, transparent 110px 260px, rgb(234 255 249 / .07) 260px 420px, transparent 420px 600px),
		linear-gradient(135deg, #a9e4d7 0%, #78cdc1 55%, #4fa9a5 100%);
}
.pa-layer img { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; will-change: transform; }
.pa-layer--shadows img { filter: brightness(0) blur(10px); opacity: .14; transform: translate(4vw, 9vh); }
.pa-layer--deck { opacity: 0; transform: scale(.35); transform-origin: 50% 55%; }
.pa-layer--veil { background: radial-gradient(ellipse at 50% 50%, #fff 0%, #f3fbf8 55%, #e4f5f0 100%); opacity: 0; z-index: 7; }
.pa-layer--grain { background: url(assets/img/grain.png); mix-blend-mode: multiply; opacity: .35; z-index: 8; }
.pa-js .pa-hero-copy { position: absolute; left: 56px; bottom: 64px; width: min(400px, calc(100% - 32px)); z-index: 9; }
.pa-js .pa-island {
	position: absolute; inset: 0; z-index: 6; max-width: none; margin: 0 !important;
	display: grid; place-items: center; padding-top: calc(var(--pa-header-h) + var(--pa-admin)); opacity: 0; pointer-events: none;
}
.pa-js .pa-island img { height: calc(100vh - var(--pa-header-h) - var(--pa-admin) - 6vh); width: auto; max-width: 100%; transform: scale(.8); transform-origin: 50% 50%; will-change: transform; }
.pa-leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; overflow: visible; }
.pa-leaders path { fill: none; stroke: var(--pa-paper); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0; transition: opacity .6s ease; }
.pa-leaders circle { fill: var(--pa-paper); stroke: var(--pa-ink); stroke-width: 2; opacity: 0; transition: opacity .6s ease; }
.pa-leaders.is-on path, .pa-leaders.is-on circle { opacity: 1; }
.pa-js .pa-cards { position: absolute; inset: 0; display: block; z-index: 11; pointer-events: none; margin: 0 !important; }
.pa-js .pa-card {
	position: absolute; left: 0; top: 0; width: 232px; pointer-events: auto;
	opacity: 0; visibility: hidden; translate: 0 14px; rotate: var(--tilt, 0deg);
	transition: opacity .5s var(--pa-ease), translate .7s var(--pa-ease), visibility 0s .5s;
}
.pa-js .pa-card.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: var(--delay, 0s); }
.pa-scroll-hint { position: absolute; right: 56px; bottom: 64px; z-index: 9; margin: 0; font-family: var(--pa-pixel); font-size: 11px; letter-spacing: .08em; color: #1f5153; }

/* phone: the cards follow the island as a list */
.pa-js .pa-cards.pa-cards--list {
	position: static; display: grid; gap: 20px; padding: 40px 16px 56px; margin: 0 !important;
	background: var(--pa-sea); pointer-events: auto;
}
.pa-js .pa-cards--list .pa-card { position: relative; left: auto; top: auto; width: auto; opacity: 1; visibility: visible; translate: none; rotate: 0deg; }
.pa-cards--list .pa-card__img img { height: 190px; }
.pa-cards--list .pa-card__title { font-size: 22px !important; }
.pa-cards--list .pa-card__text { font-size: 16px; }

/* ── contact ────────────────────────────────────────── */
.pa-contact { background: var(--pa-sea); padding: 96px 56px 104px; display: grid; justify-items: start; }
.pa-contact > * { max-width: 560px; }
.pa-contact__title { font-size: clamp(2rem, 4vw, 3rem) !important; letter-spacing: -.02em; color: #123234; }
.pa-contact__text { font-size: 18px; color: #173d3f; }
.pa-contact .wp-block-buttons { margin-top: 24px; }
.pa-contact__addr { font-size: 15px; color: #173d3f; }

/* ── footer ─────────────────────────────────────────── */
.pa-footer { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 40px 56px; background: var(--pa-paper); }
.pa-footer > * { margin: 0 !important; }
.pa-sig--footer { height: 36px; }
.pa-footer__line { font-size: 15px; }
.pa-footer__small { margin-left: auto !important; font-family: var(--pa-pixel); font-size: 11px; color: #4d6666; }

/* ── other pages ────────────────────────────────────── */
.pa-page { padding: calc(var(--pa-header-h) + var(--pa-admin) + 64px) 24px 96px; min-height: 70vh; }
.pa-page__title { font-size: clamp(2rem, 5vw, 3.25rem) !important; letter-spacing: -.02em; }

/* ── small screens (refined in step 6) ──────────────── */
@media (max-width: 760px) {
	.pa-header { padding: 0 16px; }
	.pa-sig { height: 34px; }
	.pa-nav { gap: 16px; font-size: 14px; }
	.pa-nav > p:not(.pa-lang) { display: none; }
	.pa-stage { padding-left: 16px; padding-right: 16px; }
	.pa-js .pa-hero-copy { left: 16px; bottom: 40px; }
	.pa-hero-copy p { font-size: 17px; }
	.pa-scroll-hint { display: none; }
	.pa-js .pa-island img { height: auto; width: min(100vw, calc(100vh - var(--pa-header-h) - var(--pa-admin) - 6vh)); }
	.pa-contact, .pa-footer { padding-left: 16px; padding-right: 16px; }
}