/*
Theme Name: Hinson Li
Theme URI: https://hinsonli.info
Author: Hinson Li
Author URI: https://hinsonli.info
Description: Personal branding block theme — interactive hero, scroll animations, editorial layouts for film and keyboard work.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
Version: 3.6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hinsonli
*/

/* ================================================================
   BASE
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

img { height: auto; max-width: 100%; }
.wp-block-image img { display: block; }
.wp-block-separator { opacity: 1; }

/* ================================================================
   ANIMATED HERO — dark mesh gradient + particles
   ================================================================ */

.hinsonli-hero-animated {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 60% at 20% 40%, rgba(196, 149, 106, 0.15) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 80% 30%, rgba(26, 26, 46, 0.8) 0%, transparent 50%),
		radial-gradient(ellipse 70% 50% at 50% 90%, rgba(196, 149, 106, 0.1) 0%, transparent 50%),
		linear-gradient(160deg, #06060f 0%, #0e0e1e 30%, #151520 60%, #0a0a12 100%);
	background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-hero-animated {
		animation: mesh-drift 25s ease infinite;
	}
}

@keyframes mesh-drift {
	0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
	33% { background-position: 100% 50%, 0% 100%, 100% 0%, 0% 0%; }
	66% { background-position: 50% 100%, 50% 0%, 0% 50%, 0% 0%; }
}

.hinsonli-hero-animated .wp-block-group,
.hinsonli-hero-animated .wp-block-heading,
.hinsonli-hero-animated .wp-block-paragraph,
.hinsonli-hero-animated .wp-block-buttons,
.hinsonli-hero-animated .wp-block-image,
.hinsonli-hero-animated .wp-block-columns {
	position: relative;
	z-index: 2;
}

/* Hero profile photo */
.hinsonli-hero-animated .wp-block-image.is-style-rounded img {
	border-radius: 50% !important;
	border: 3px solid rgba(196, 149, 106, 0.4);
	box-shadow: 0 0 40px rgba(196, 149, 106, 0.15), 0 0 80px rgba(10, 10, 26, 0.5);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-hero-animated .wp-block-image.is-style-rounded img:hover {
		transform: scale(1.08);
		box-shadow: 0 0 60px rgba(196, 149, 106, 0.25), 0 0 120px rgba(10, 10, 26, 0.6);
	}
}

/* Hero buttons — equal width */
.hinsonli-hero-buttons .wp-block-button__link {
	min-width: 140px;
	text-align: center;
}

/* Hero button glow */
.hinsonli-hero-animated .wp-block-button__link {
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-hero-animated .wp-block-button__link:hover {
		box-shadow: 0 0 30px rgba(196, 149, 106, 0.35), 0 0 60px rgba(196, 149, 106, 0.15);
		transform: translateY(-2px);
	}

	.hinsonli-hero-animated .hinsonli-btn-film .wp-block-button__link:hover {
		background-color: #009148 !important;
		box-shadow: 0 0 28px rgba(0, 161, 81, 0.45), 0 0 56px rgba(0, 161, 81, 0.2);
	}

	.hinsonli-hero-animated .hinsonli-btn-bokkey .wp-block-button__link:hover {
		background-color: #c9a432 !important;
		box-shadow: 0 0 28px rgba(212, 175, 55, 0.45), 0 0 56px rgba(212, 175, 55, 0.2);
	}
}

/* Scroll indicator */
.hinsonli-scroll-hint {
	animation: bounce-down 2s ease-in-out infinite;
}

@keyframes bounce-down {
	0%, 100% { transform: translateY(0); opacity: 0.5; }
	50% { transform: translateY(8px); opacity: 1; }
}

/* ================================================================
   SCROLL REVEAL — fade up (default)
   ================================================================ */

.hinsonli-reveal {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hinsonli-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger children */
.hinsonli-reveal:nth-child(2) { transition-delay: 0.08s; }
.hinsonli-reveal:nth-child(3) { transition-delay: 0.16s; }
.hinsonli-reveal:nth-child(4) { transition-delay: 0.24s; }

/* ================================================================
   SCROLL REVEAL — slide from left
   ================================================================ */

.hinsonli-reveal-left {
	opacity: 0;
	transform: translateX(-50px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hinsonli-reveal-left.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ================================================================
   SCROLL REVEAL — slide from right
   ================================================================ */

.hinsonli-reveal-right {
	opacity: 0;
	transform: translateX(50px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hinsonli-reveal-right.is-visible {
	opacity: 1;
	transform: translateX(0);
}

/* ================================================================
   SCROLL REVEAL — scale up
   ================================================================ */

.hinsonli-reveal-scale {
	opacity: 0;
	transform: scale(0.9);
	transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
	            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hinsonli-reveal-scale.is-visible {
	opacity: 1;
	transform: scale(1);
}

/* ================================================================
   SCROLL REVEAL — pure fade
   ================================================================ */

.hinsonli-reveal-fade {
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hinsonli-reveal-fade.is-visible {
	opacity: 1;
}

/* ================================================================
   SCROLL REVEAL — stagger gallery children
   ================================================================ */

.hinsonli-reveal-stagger > figure,
.hinsonli-reveal-stagger > .wp-block-image {
	opacity: 0;
	transform: translateY(24px);
}

/* Reduced motion: disable all transitions */
@media (prefers-reduced-motion: reduce) {
	.hinsonli-reveal,
	.hinsonli-reveal-left,
	.hinsonli-reveal-right,
	.hinsonli-reveal-scale,
	.hinsonli-reveal-fade {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.hinsonli-reveal-stagger > figure,
	.hinsonli-reveal-stagger > .wp-block-image {
		opacity: 1;
		transform: none;
	}
}

/* ================================================================
   NAVIGATION
   ================================================================ */

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.8125rem;
	font-weight: 500;
}

/* ================================================================
   PHOTO GRID — Darkroom-style square tiles (1:1)
   ================================================================ */

.hinsonli-photo-grid {
	gap: 8px !important;
}

/*
 * Use core gallery grid (don’t fight it with display:grid !important).
 * Nested gallery column count is driven by this variable in block CSS.
 */
.wp-block-gallery.has-nested-images.hinsonli-photo-grid {
	--wp--style--gallery--columns: 3;
}

@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.hinsonli-photo-grid {
		--wp--style--gallery--columns: 2;
	}
}

.hinsonli-photo-grid figure.wp-block-image {
	overflow: hidden;
	margin: 0 !important;
}

.hinsonli-photo-grid figure.wp-block-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-photo-grid figure.wp-block-image img {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		            filter 0.5s ease;
		filter: brightness(0.95);
	}
	.hinsonli-photo-grid figure.wp-block-image:hover img {
		transform: scale(1.06);
		filter: brightness(1.05);
	}
}

/* ================================================================
   KEYBOARD GALLERY
   ================================================================ */

.hinsonli-keyboard-grid .wp-block-image img,
.hinsonli-keyboard-gallery figure.wp-block-image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-keyboard-gallery figure.wp-block-image {
		overflow: hidden;
	}
	.hinsonli-keyboard-gallery figure.wp-block-image img {
		transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.hinsonli-keyboard-gallery figure.wp-block-image:hover img {
		transform: scale(1.05);
	}
}

/* ================================================================
   GALLERY — general
   ================================================================ */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	object-fit: cover;
}

/* ================================================================
   COVER BLOCKS
   ================================================================ */

.wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-cover img.wp-block-cover__image-background {
		transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.wp-block-cover:hover img.wp-block-cover__image-background {
		transform: scale(1.03);
	}
}

/* ================================================================
   CONTACT CARDS — slide right on hover
   ================================================================ */

.hinsonli-contact-card {
	transition: background-color 0.3s ease, transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.hinsonli-contact-card:hover {
		background-color: var(--wp--preset--color--surface) !important;
		transform: translateX(6px);
	}
}

/* ================================================================
   DARK HERO SECTION — inner pages (default)
   ================================================================ */

.hinsonli-dark-hero {
	background:
		radial-gradient(ellipse 60% 50% at 30% 50%, rgba(196, 149, 106, 0.08) 0%, transparent 60%),
		linear-gradient(160deg, #0e0e1e 0%, #1a1a2e 100%);
}

/* ================================================================
   BOKKEY HERO — warm yellow/amber tone
   ================================================================ */

.hinsonli-bokkey-hero-animated {
	/* Override the default dark mesh colors for the animated Bokkey hero. */
	background:
		radial-gradient(ellipse 80% 60% at 20% 40%, rgba(212, 175, 55, 0.18) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 80% 30%, rgba(26, 26, 46, 0.7) 0%, transparent 50%),
		radial-gradient(ellipse 70% 50% at 50% 90%, rgba(212, 175, 55, 0.12) 0%, transparent 50%),
		linear-gradient(160deg, #1a1508 0%, #2a2210 40%, #1e1a0e 70%, #12100a 100%);
}

.hinsonli-bokkey-hero {
	background:
		radial-gradient(ellipse 70% 60% at 25% 45%, rgba(194, 160, 70, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse 50% 70% at 80% 60%, rgba(180, 140, 50, 0.06) 0%, transparent 50%),
		linear-gradient(160deg, #1a1508 0%, #2a2210 40%, #1e1a0e 70%, #12100a 100%);
}

.hinsonli-bokkey-hero .hinsonli-brand-logo {
	display: block;
	text-align: center;
	margin-left: auto !important;
	margin-right: auto !important;
	width: fit-content;
}

.hinsonli-bokkey-hero .hinsonli-brand-logo img {
	width: 56px !important;
	height: 56px !important;
	object-fit: contain;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	opacity: 0.9;
}

/* ================================================================
   FOCUS / A11Y
   ================================================================ */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-film);
	outline-offset: 2px;
}

a:focus:not(:focus-visible) {
	outline: none;
}

/* ================================================================
   GALLERY LIGHTBOX (theme)
   ================================================================ */

body.hinsonli-lightbox-open {
	overflow: hidden;
}

.hinsonli-lightbox {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 8, 12, 0.94);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
	z-index: 99999;
	padding: 2rem;
}

.hinsonli-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.hinsonli-lightbox-image {
	max-width: min(92vw, 1800px);
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 20px 80px rgba(0, 0, 0, 0.45);
}

.hinsonli-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.hinsonli-lightbox-prev,
.hinsonli-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.hinsonli-lightbox-prev {
	left: 1rem;
}

.hinsonli-lightbox-next {
	right: 1rem;
}