/* =========================================================
   ART8 · films.css
   Página Art8 Films (cinematográfica: vídeo em tela cheia).
   ========================================================= */
.f-hero { position: relative; overflow: hidden; min-height: min(780px, 100svh); display: flex; align-items: flex-end; background: radial-gradient(ellipse at 70% 38%, rgba(255, 201, 0, .2), transparent 58%), #070707; }
.f-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.f-hero .shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)); }
.f-hero .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; background: linear-gradient(transparent, #050505 84%); }
.f-hero .bar-t { position: absolute; left: 0; right: 0; top: 0; height: var(--header-h); background: #000; }
.f-hero .bar-b { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #000; }
.f-hero .rec { position: absolute; left: var(--pad); top: calc(var(--header-h) + 22px); font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--gold-3); }
.f-hero .tc { position: absolute; right: var(--pad); top: calc(var(--header-h) + 22px); font-size: 11px; font-weight: 500; color: #9a9a9a; }
.f-hero .container { position: relative; z-index: 2; padding-bottom: 96px; padding-top: 260px; }
.f-hero .area-logo { height: 78px; width: auto; }
.f-hero h1 { margin-top: 28px; max-width: 900px; font-size: clamp(34px, 5vw, 64px); line-height: 1.06; font-weight: 800; }
.f-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
@media (max-width: 760px) { .f-hero .container { padding-bottom: 72px; padding-top: 200px; } .f-hero .area-logo { height: 60px; } .f-hero-actions .btn { width: 100%; } }

.f-intro { border-top: 1px solid #1a1a1a; padding: 56px 0; background: #050505; }
.f-intro .container { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); }
.f-intro p { flex: 1; max-width: 980px; font-size: clamp(20px, 2.2vw, 29px); font-weight: 300; line-height: 1.5; color: #ececec; }
.f-intro p b { font-weight: 500; }
@media (max-width: 860px) { .f-intro .container { flex-direction: column; align-items: flex-start; } .f-intro .dc { align-self: center; } }

.f-services { background: #050505; padding: 76px 0 84px; border-top: 1px solid #1a1a1a; }
.f-services h2 { margin: 16px 0 40px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 800; }
.f-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.f-card { background: #0f0f0f; border: 1px solid #222; transition: border-color .25s ease, transform .25s ease; }
.f-card:hover { border-color: var(--gold-2); transform: translateY(-3px); }
.f-cover { aspect-ratio: 16 / 9; background: #080808 center / cover no-repeat; border-bottom: 1px solid #222; }
.f-card .t { padding: 20px 22px 26px; }
.f-card h3 { font-size: 19px; line-height: 1.25; font-weight: 700; }
.f-card p { margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 1.6; color: #bdbdbd; }
@media (max-width: 980px) { .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .f-grid { grid-template-columns: 1fr; } }

.f-work { background: #080808; padding: 76px 0 84px; border-top: 1px solid #1a1a1a; }
.f-work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.f-work h2 { margin-top: 16px; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; font-weight: 800; }
.f-work-head span.soon { font-size: 13px; font-weight: 500; color: var(--dim); }
.f-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.f-tile { position: relative; aspect-ratio: 16 / 10; border: 1px solid #222; padding: 0; background: #0c0c0c center / cover no-repeat; overflow: hidden; text-align: left; transition: border-color .25s ease; }
.f-tile:hover { border-color: var(--gold-2); }
.f-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .82)); }
.f-tile svg { position: absolute; z-index: 1; right: 18px; top: 18px; width: 42px; height: 42px; }
.f-tile b { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.f-tile small { position: absolute; z-index: 1; left: 18px; top: 18px; padding: 4px 8px; background: rgba(0, 0, 0, .6); border-left: 3px solid var(--gold-2); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
@media (max-width: 980px) { .f-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .f-tiles { grid-template-columns: 1fr; } }

/* --- drone e câmera animados --- */
.dc{width:340px;height:240px;flex:none}
.dc .fly{animation:fly 6s ease-in-out infinite alternate}
@keyframes fly{0%{transform:translate(-55px,12px)}50%{transform:translate(0,-10px)}100%{transform:translate(55px,12px)}}
.dc .tilt{animation:tt 6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes tt{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.dc .pan{transform-origin:100px 168px;animation:pn 6s ease-in-out infinite alternate}
@keyframes pn{from{transform:rotate(-2deg)}to{transform:rotate(-15deg)}}
.dc .rt{transform-box:fill-box;transform-origin:center;animation:rt .16s linear infinite}
@keyframes rt{50%{transform:scaleX(.5)}}
.dc .rec{animation:rc 1.2s steps(1) infinite}
@keyframes rc{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.dc *{animation:none!important}}