No Limit Decoupled Camera

<center><img src="https://github.com/DellAquila/Layout/raw/main/New/CABECALHO.png"></center><br/>
<style>
.multiplayer-banner {
background-color: #4caf50;
border-top: 4px solid #000;
border-bottom: 4px solid #000;
margin: 20px 0;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
}
.multiplayer-text {
color: #ffffff !important;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.1rem;
text-shadow: 2px 2px 0px #000;
}
.multiplayer-sub {
background: #000;
color: #4caf50 !important;
padding: 2px 10px;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
border: 2px solid #fff;
}
.thumb-icon {
font-size: 1.5rem;
filter: drop-shadow(2px 2px 0px #000);
}
</style>

<div class="multiplayer-banner">
<span class="thumb-icon">👍</span>
<div class="multiplayer-text">Multiplayer Compatible</div>
<div class="multiplayer-sub">Everyone!</div></div>
<!-- //------------------------------------------------------------ END MULTIPLAYER YES --->

<style>
.camera-banner {
background-color: #2b6cb0;
border-top: 4px solid #000;
border-bottom: 4px solid #000;
margin: 20px 0;
padding: 10px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
}
.camera-text {
color: #ffffff !important;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 1.1rem;
text-shadow: 2px 2px 0px #000;
}

.mod-container {
--cam-blue: #4299e1;
--cam-ui: #edf2f7;
--sf-bg: #1a202c;
--sf-border: #000;
max-width: 850px;
margin: 20px auto;
background-color: var(--sf-bg);
color: #e2e8f0;
padding: 30px;
border: 4px solid var(--sf-border);
box-shadow: 10px 10px 0px var(--sf-border);
}

.mod-container h1 {
color: var(--cam-blue);
text-transform: uppercase;
text-align: center;
border-bottom: 2px solid var(--cam-blue);
padding-bottom: 10px;
margin-bottom: 25px;
}

.viewfinder-box {
border: 2px solid #4a5568;
position: relative;
padding: 25px;
background: rgba(66, 153, 225, 0.05);
margin-bottom: 20px;
}

/ Viewfinder corners /
.viewfinder-box::before { content: "┌"; position: absolute; top: 5px; left: 5px; color: var(--cam-blue); font-size: 20px; }
.viewfinder-box::after { content: "┐"; position: absolute; top: 5px; right: 5px; color: var(--cam-blue); font-size: 20px; }

.feature-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}

.feature-item {
background: #2d3748;
padding: 15px;
border-left: 4px solid var(--cam-blue);
}

.feature-item b {
color: var(--cam-blue);
display: block;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 0.9rem;
}

.feature-item p {
font-size: 0.85rem;
margin: 0;
line-height: 1.4;
}

.tech-note {
background: #000;
padding: 15px;
border: 1px solid #4a5568;
font-family: monospace;
font-size: 0.8rem;
color: #a0aec0;
margin-top: 30px;
}
</style>

<div class="camera-banner">
<span style="font-size: 1.5rem;">📸</span>
<div class="camera-text">NO LIMIT DECOUPLED CAMERA</div>
</div>

<div class="mod-container">
<h1>Break the Tether</h1>

<div class="viewfinder-box">
<p style="text-align: center; font-style: italic; margin: 0;">
"Break free from the constraints of the standard photo mode. This mod removes the distance tether, allowing you to scout your entire factory or capture the perfect cinematic shot from anywhere on the map."
</p>
</div>

<div class="feature-list">
<div class="feature-item">
<b>🚀 Total Freedom</b>
<p>Go anywhere. The decoupled camera is no longer restricted to the area around the player.</p>
</div>
<div class="feature-item">
<b>🛠️ Instant Deployment</b>
<p>Use a specialized tool from the Equipment Workshop to immediately enter photo mode at your last flying position.</p>
</div>
<div class="feature-item">
<b>🛰️ Satellite View</b>
<p>Build the "Satellite View" structure to instantly jump to pre-defined camera coordinates.</p>
</div>
<div class="feature-item">
<b>👻 Noclip Navigation</b>
<p>Effortlessly pass <b>through</b> walls, machines, and terrain to get the exact angle you need.</p>
</div>
</div>

<div class="tech-note">
> FICSIT SATELLITE UPLINK: STABLE<br>
> DISTANCE_LIMIT: DISABLED<br>
> COLLISION_LOGIC: BYPASSED
</div>

<style>
.emergency-box {
background: #2d1a1a;
border: 2px solid #f56565;
max-width: 850px;
margin: 30px auto;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 6px 6px 0px #000;
}
.emergency-icon {
font-size: 2.2rem;
animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.emergency-content {
color: #e2e8f0;
font-size: 0.95rem;
}
.emergency-content b {
color: #f56565;
text-transform: uppercase;
}
.key-hint {
background: #000;
color: #f6e05e;
padding: 2px 8px;
border: 1px solid #444;
font-family: monospace;
font-weight: bold;
font-size: 1rem;
}
</style>

<div class="emergency-box">
<div class="emergency-icon">🚨</div>
<div class="emergency-content">
<b>Stuck in a strange view?</b><br>
If the camera behaves unexpectedly or your view gets locked, don't panic. Simply tap the <span class="key-hint">P</span> and <span class="key-hint">R</span> keys a few times.
<br>
<i>This force-resets the camera state and usually solves the issue instantly!</i>
</div>
</div>

<div style="border-top: 1px solid #444; padding-top: 15px; font-size: 0.8rem; color: #718096; margin-top: 25px; text-align: center;">
<i>Capture the scale of your ambition.</i>
</div>

<style>
.setup-alert {
background: #1a202c;
border: 2px solid #4299e1;
max-width: 850px;
margin: 30px auto;
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 6px 6px 0px #000;
}
.setup-icon {
font-size: 2rem;
background: #4299e1;
color: #fff;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 10px rgba(66, 153, 225, 0.5);
}
.setup-content {
color: #e2e8f0;
font-size: 0.95rem;
line-height: 1.5;
}
.setup-content b {
color: #4299e1;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.setup-content i {
color: #a0aec0;
font-size: 0.85rem;
}
</style>

<div class="setup-alert">
<div class="setup-icon">1</div>
<div class="setup-content">
<b>Session Initialization Required:</b><br>
Before using the <b>Satellite Buildable</b> or the <b>Link Equipment</b>, you must activate the <b>Decoupled Camera</b> at least once in your current play session.
<br>
<i>This allows the system to register your position and ensure the camera transition is seamless.</i>
</div>
</div>

<div style="text-align:center; margin: 30px 0;">
<img src="https://github.com/DellAquila/Layout/raw/main/Videos_Up.png" style="width:100%; border:none; margin:0;">
<a href="https://www.youtube.com/watch?v=mr7x6KmdiJE" target="_blank"><img src="http://img.youtube.com/vi/mr7x6KmdiJE/0.jpg" style="width:100%; border:4px solid #000; margin:0;"></a>
<img src="https://github.com/DellAquila/Layout/raw/main/Videos_Down.png" style="width:100%; border:none; margin:0;">
</div>

</div>

<div class="aquila-footer">
<style>
.aquila-footer {
--sf-bg: #1a1a1a; --sf-border: #000; --sf-gold: #f2c94c;
--discord: #3b4e8d; --patreon: #ff6058; --steam: #f2f2f2;
--pix: #f2d600; --paypal: #249ce2; --youtube: #ff0000;
max-width: 850px; margin: 40px auto; background-color: var(--sf-bg);
padding: 30px; border: 4px solid var(--sf-border); border-top: 6px solid var(--sf-gold);
box-shadow: 10px 10px 0px var(--sf-border); text-align: center; color: #fff;
}
.aquila-footer .btn-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.aquila-footer .full-btn { grid-column: span 2; }
.aquila-footer .social-btn {
display: flex; align-items: center; justify-content: center;
padding: 12px; border: 3px solid #000; box-shadow: 4px 4px 0px #000;
text-decoration: none; transition: transform 0.1s;
}
.aquila-footer .social-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px #000; }
.aquila-footer .btn-text { color: #ffffff !important; text-transform: uppercase; font-weight: bold; font-size: 0.9rem; line-height: 1.2; }
.aquila-footer .discord { background: var(--discord); }
.aquila-footer .patreon { background: var(--patreon); }
.aquila-footer .youtube { background: var(--youtube); }
.aquila-footer .steam { background: var(--steam); }
.aquila-footer .steam .btn-text { color: #d35400 !important; }
.aquila-footer .paypal { background: var(--paypal); }
.aquila-footer .sub-text { display: block; font-size: 0.65rem; opacity: 0.9; font-weight: normal; margin-top: 4px; text-transform: none; }
</style>
<p style="margin-bottom: 25px; font-weight: bold; color: var(--sf-gold);">
🎥 I can't wait to see the screenshots you take with this! Share them on Discord!
</p>

<div class="btn-container">
<a href="https://discord.gg/xkVJ73E" target="_blank" class="social-btn discord">
<div class="btn-text">AQUILA INDUSTRIAL<span class="sub-text">Join the Discord and show off your factory photos!</span></div>
</a>
<a href="https://store.steampowered.com/app/1958750/Hexfactory/" target="_blank" class="social-btn steam">
<div class="btn-text">HEXFACTORY ON STEAM<span class="sub-text" style="color:#000 !important">Check out the game I built with my own hands!</span></div>
</a>
<a href="https://www.patreon.com/AndreAquila" target="_blank" class="social-btn patreon">
<span class="btn-text">BECOME A PATRON<span class="sub-text">Help me keep the camera rolling and the code flowing.</span></span>
</a>
<a href="https://www.paypal.com/donate?hosted_button_id=TD7ME2KYDMT7G" target="_blank" class="social-btn" style="background: var(--pix);">
<div class="btn-text" style="color:#000 !important;">☕ BUY ME A COFFEE!<span class="sub-text" style="font-weight: bold; color: #000 !important;">Support my work with a small donation!</span></div>
</a>
<a href="https://www.youtube.com/@AndreAquila" target="_blank" class="social-btn youtube full-btn">
<span class="btn-text">▶ SUBSCRIBE TO MY YOUTUBE CHANNEL<span class="sub-text">See cinematic showcases using this exact mod!</span></span>
</a>
<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=U96NB4W469FR2&source=url" target="_blank" class="social-btn paypal full-btn">
<span class="btn-text">Donate with PayPal<span class="sub-text">Thank you for being part of this journey!</span></span>
</a>
</div>

<div class="footer-meta">
<p style="font-size: 0.75rem; color: #555; letter-spacing: 2px; margin-top: 5px; font-weight: bold;">AQUILA INDUSTRIAL // CINEMATIC TOOLS DIVISION</p>
</div>
</div>