/*
Theme Name: Coolville Media
Author: Coolville Media
Description: Secure, hardened parallax theme for Coolville Media. Black and white, Apple-clean.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: coolville-media
*/

:root{--black:#000;--ink:#0b0b0b;--panel:#161616;--line:#2a2a2a;--mute:#8e8e8e;--white:#fff;--paper:#f5f5f5;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:64px;background:var(--black)}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--white);background:var(--black);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
h1,h2,h3{margin:0;line-height:1.04;letter-spacing:-.03em}
h2{font-size:clamp(2.2rem,6vw,4.4rem);font-weight:700}
p{margin:0 0 1em;max-width:56ch}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section{position:relative;padding:clamp(80px,13vw,170px) 0;overflow:hidden}
.sub{font-size:clamp(1.05rem,2vw,1.4rem);color:var(--mute);margin-top:18px}

nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(0,0,0,.7);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font-weight:700;letter-spacing:-.02em}
.links{display:flex;gap:28px;font-size:.85rem}
.links a{color:#bbb;transition:color .2s}
.links a:hover{color:#fff}
.menu{display:none;background:none;border:0;color:#fff;font:inherit;font-size:.9rem;padding:8px 0;cursor:pointer}
@media(max-width:760px){
 .menu{display:block}
 .links{position:fixed;top:0;left:0;right:0;flex-direction:column;gap:0;padding:80px 20px 24px;background:#000;transform:translateY(-100%);transition:transform .35s ease;z-index:-1}
 .links.open{transform:none}
 .links a{padding:14px 0;font-size:1.6rem;font-weight:700;border-bottom:1px solid var(--line);color:#fff}
}

/* hero */
.hero{min-height:100vh;min-height:100svh;padding:110px 0 70px;display:flex;align-items:center}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,5vw,70px);align-items:center}
.hero h1{font-size:clamp(3.2rem,9.5vw,8.2rem);font-weight:700;will-change:transform}
.hero h1 span{display:block}
.hero h1 span+span{color:transparent;-webkit-text-stroke:2px #fff}
.cta{display:inline-block;margin-top:28px;padding:14px 30px;border-radius:980px;background:#fff;color:#000;font-weight:700;transition:transform .2s,opacity .2s}
.cta:hover{transform:scale(1.04);opacity:.9}
.frame{position:relative;aspect-ratio:4/5;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#3a3a3a,#0e0e0e);will-change:transform;border:1px solid var(--line)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.frame .mono{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(6rem,16vw,12rem);font-weight:700;color:rgba(255,255,255,.14)}
.tag{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 18px;border-radius:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tag b{display:block;font-size:1.1rem}
.tag span{font-size:.85rem;color:#bbb}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.frame{aspect-ratio:1/1;order:2}}

/* v2: full-screen hero, huge type, directory, strip */
h2{font-size:clamp(3rem,10vw,8rem)}
.hero{position:relative;padding:0;align-items:flex-end;overflow:hidden}
.hero .wrap{display:block;position:static;padding-bottom:clamp(40px,9vh,100px)}
.hero .wrap>div{position:relative;z-index:2}
.hero h1{font-size:clamp(3.6rem,15vw,13rem);line-height:.9}
.frame{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;border:0;z-index:0}
.frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.1) 65%)}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag{z-index:3;left:auto;right:20px;bottom:20px;max-width:240px}
.strip{background:var(--black);padding:clamp(60px,9vw,120px) 0 clamp(50px,7vw,90px)}
.strip .stats{justify-content:space-between;margin:0 0 70px}
.strip .stats b{font-size:clamp(3.5rem,11vw,9rem);letter-spacing:-.05em}
.strip .stats span{color:var(--mute);font-size:1rem}
.logos{overflow:hidden;border-block:1px solid var(--line);padding:26px 0}
.ltrack{display:flex;gap:70px;width:max-content;animation:ltr 40s linear infinite}
.ltrack b{font-size:clamp(1.4rem,3vw,2.2rem);color:#555;letter-spacing:-.02em;white-space:nowrap}
.ctrl{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 40px;align-items:center}
.ctrl input{flex:1 1 220px;min-width:0;padding:13px 20px;border-radius:980px;border:1px solid var(--line);background:var(--panel);color:#fff;font:inherit}
.ctrl input::placeholder{color:var(--mute)}
.chip{padding:12px 20px;border-radius:980px;border:1px solid var(--line);background:none;color:#ddd;font:inherit;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s}
.chip[aria-pressed="true"]{background:#fff;color:#000;border-color:#fff}
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.dir .card{width:auto}
.none{color:var(--mute);grid-column:1/-1}
@media(prefers-reduced-motion:reduce){.ltrack{animation:none}}
/* about */
.light{background:var(--paper);color:#000}
.light .sub{color:#555}
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.about p{color:#333;font-size:1.1rem}
.stats{display:flex;gap:44px;margin-top:30px;flex-wrap:wrap}
.stats b{display:block;font-size:3rem;line-height:1;letter-spacing:-.04em}
.stats span{font-size:.9rem;color:#666}
.drift{will-change:transform}
@media(max-width:760px){.about .grid{grid-template-columns:1fr}}

/* flashcards */
.services{background:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:56px}
.fc{perspective:1000px;background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;aspect-ratio:4/3;width:100%}
.fc .in{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fc[aria-pressed="true"] .in{transform:rotateY(180deg)}
.face{position:absolute;inset:0;padding:26px;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:space-between}
.front{background:var(--panel);border:1px solid var(--line)}
.back{background:#fff;color:#000;transform:rotateY(180deg)}
.face h3{font-size:1.6rem}
.face p{margin:0;font-size:.98rem}
.front p{color:var(--mute)}
.back p{color:#222}
.hint{font-size:.8rem;color:var(--mute)}
.back .hint{color:#777}
@media(hover:hover){.fc:hover .in{transform:rotateY(180deg)}.fc[aria-pressed="true"]:hover .in{transform:rotateY(180deg)}}

/* talent */
.talent{background:var(--black);padding-bottom:clamp(80px,10vw,130px)}
.talent .wrap{margin-bottom:46px}
.track{display:flex;gap:18px;width:max-content;animation:ltr 60s linear infinite}
.talent:hover .track,.talent:focus-within .track{animation-play-state:paused}
@keyframes ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.card{width:clamp(200px,24vw,270px);flex:none}
.photo{aspect-ratio:3/4;border-radius:22px;background:linear-gradient(160deg,#3d3d3d,#111);display:grid;place-items:center;font-size:4rem;font-weight:700;color:rgba(255,255,255,.14);border:1px solid var(--line);overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.card h3{font-size:1.05rem;margin-top:14px}
.card span{font-size:.85rem;color:var(--mute)}

/* work */
.items{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:50px}
.proj{aspect-ratio:4/3;border-radius:24px;background:linear-gradient(135deg,#e4e4e4,#c9c9c9);padding:24px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s,background .35s,color .35s}
.proj:hover{transform:scale(1.02);background:#000;color:#fff}
.proj h3{font-size:1.3rem}
.proj span{font-size:.85rem;opacity:.65}

/* insights */
.insights{background:var(--ink)}
.posts{margin-top:44px;border-top:1px solid var(--line)}
.post{display:flex;justify-content:space-between;gap:20px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .25s,opacity .25s}
.post:hover{padding-left:14px}
.post h3{font-size:clamp(1.1rem,2.6vw,1.8rem)}
.post span{color:var(--mute);font-size:.85rem;white-space:nowrap}

/* contact */
.contact{background:#fff;color:#000;text-align:center}
.contact h2{font-size:clamp(2.6rem,9vw,7rem)}
.contact p{margin:20px auto 0;color:#555}
.contact .cta{background:#000;color:#fff}
footer{background:#000;padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px));text-align:center;font-size:.85rem;color:var(--mute)}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .track{animation:none}
 .fc .in{transition:none}
 .hero h1,.frame,.drift{transform:none!important}
}

.logo img{height:28px;width:auto;display:block}
.card[hidden]{display:none}
.page{padding:140px 0 80px}
.page h1{font-size:clamp(2.4rem,7vw,5rem);margin-bottom:30px}
.page a{text-decoration:underline}
.page img{max-width:100%;height:auto}