/*
=========================================================
HERO STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the shared hero styles used across joshuadaltonmedia.com. It is designed to support full-width hero sections with background media, overlay treatment, inner content positioning, a glass CTA panel, reveal animation, and an optional scroll cue for landing-style pages.

What belongs in this file
-------------------------
- Shared page background treatment when tied to the hero experience
- Shared hero section shell and media positioning
- Shared hero overlay treatment
- Shared hero inner layout spacing
- Shared CTA box styling within hero sections
- Shared reveal animation styling for hero content
- Shared scroll cue styling and animation
- Shared responsive breakpoint rules for hero layout and CTA scaling

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/hero.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet in the head
2. use the shared hero class system consistently
3. keep only truly page-specific hero image or video source decisions in the HTML or local styles

Maintenance rule
----------------
If a selector is not part of the shared hero system itself, it should not be added here. Keep this file focused on reusable hero structure, background media treatment, CTA box styling, reveal states, and scroll cue behaviour.
*/

/* ================= HERO ================= */
.hero{position:relative;isolation:isolate;min-height:350px;display:flex;align-items:center;overflow:clip;padding-bottom:40px}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.55) saturate(1.05)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,rgba(13,13,13,.95));z-index:-1}
.hero-inner{padding:32px 14px 16px}

/* ================= CTA BOX ================= */
.cta-box{display:inline-flex;flex-direction:column;padding:10px;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}
.cta-box h1{font-size:17px}
.cta-box h2{font-size:18px;line-height:1.08}
.cta-box h3{font-size:16px;line-height:1.2;color:var(--accent)}
.cta-box .lead{font-size:12px;line-height:1.45;margin-bottom:10px}
.cta-row{margin-top:5px;display:flex;gap:8px;flex-wrap:nowrap;justify-content:center}
.cta-row .btn{font-size:12px;white-space:nowrap}

/* ================= REVEAL ================= */
[data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;will-change:opacity,transform}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ================= SCROLL CUE ================= */
.down{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:var(--accent);color:#fff;border:1.5px solid #fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;animation:bounce 1.8s ease-in-out 3}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= HERO ================= */
	.hero{min-height:clamp(420px,110vw,480px);padding-bottom:52px}
	/* ================= CTA BOX ================= */
	.cta-box{max-width:min(340px,100%)}
	.cta-box h1{font-size:19px}
	.cta-box h3{font-size:20px}
}

@media(min-width:700px){
	/* ================= HERO ================= */
	.hero{min-height:clamp(65vw,75vw,600px)}
	/* ================= CTA BOX ================= */
	.cta-box{max-width:370px;padding:10px}
	.cta-box h1{font-size:21px}
	.cta-box h2{font-size:22px;line-height:1.06}
	.cta-box h3{font-size:24px}
	.cta-box .lead{font-size:15px;line-height:1.5}
	.cta-row{gap:clamp(10px,2vw,14px)}
	.cta-row .btn{font-size:clamp(.8rem,1.6vw,.9rem);padding:clamp(10px,1.8vw,12px) clamp(16px,2.4vw,18px)}
	/* ================= SCROLL CUE ================= */
	.down{bottom:48px}
}

@media(min-width:1024px){
	/* ================= HERO ================= */
	.hero{min-height:580px}
	/* ================= CTA BOX ================= */
	.cta-box{max-width:420px}
	.cta-box h1{font-size:24px}
	.cta-box h2{font-size:24px}
	.cta-box h3{font-size:28px}
	.cta-box .lead{font-size:16px;line-height:1.55}
	.cta-row .btn{font-size:.95rem;padding:12px 20px}
}