diff --git a/index.html b/index.html
index ae1e838..9b744ed 100644
--- a/index.html
+++ b/index.html
@@ -2,184 +2,265 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">	
 	<meta name="google" content="notranslate">
     <title>Eclipse Countdown</title>
 	<style>
+		:root {
+			--eclipse-size: 40vmin;
+			--eclipse-offset: 55vmin;
+		}
+
 		body {
-			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+			font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 			margin: 0;
 			padding: 0;
 			color: white;
-			overflow-x: hidden;
+			background-color: #0a0a1a;
 			display: flex;
-			justify-content: center;
+			flex-direction: column;
 			align-items: center;
+			justify-content: center;
 			min-height: 100vh;
+			min-height: 100dvh;
 			position: relative;
+			transition: background-color 3s ease-in-out;
+			overflow-x: hidden;
+			box-sizing: border-box;
 		}
 
-		.content-wrapper {
-			width: 80%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			position: relative;
-			z-index: 20;
+		body.totality-mode {
+			background-color: #000005 !important;
 		}
 
-		h1 {
-			margin: 0px;
-			width: 100%;
-			height: 25vh;
-			text-align: center;
-			font-size: 7vh;
-			font-weight: 300;
-			text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: row;
+		.nebula {
+			position: fixed;
+			top: -50%;
+			left: -50%;
+			width: 200%;
+			height: 200%;
+			z-index: 0;
+			opacity: 0;
+			background:
+				radial-gradient(circle at 20% 30%, rgba(70, 0, 150, 0.15) 0%, transparent 40%),
+				radial-gradient(circle at 80% 70%, rgba(0, 100, 200, 0.15) 0%, transparent 40%),
+				radial-gradient(circle at 50% 50%, rgba(100, 0, 100, 0.1) 0%, transparent 50%);
+			filter: blur(50px);
+			transition: opacity 3s;
+			pointer-events: none;
+			animation: nebulaMove 120s infinite linear;
 		}
 
-		.countdown {
-			display: flex;
-			width: 100%;
-			padding: 30px;
-			box-sizing: border-box;
-			position: relative;
-			text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
-			flex-wrap: wrap;
+		@keyframes nebulaMove {
+			0% { transform: rotate(0deg); }
+			100% { transform: rotate(360deg); }
 		}
 
-		.time-block {
-			text-align: center;
-			padding: 15px;
-			box-sizing: border-box;
-			flex: 1;
+		.stars {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+			opacity: 0;
+			transition: opacity 2s;
+			pointer-events: none;
 		}
 
-		.time-value {
-			font-size: 10vmin;
-			font-weight: bold;
-			margin-bottom: 5px;
+		.star {
+			position: absolute;
+			background-color: white;
+			border-radius: 50%;
 		}
 
-		.time-label {
-			font-size: 4vmin;
-		}
-		
-		.location-info {
-			font-size: 4vh;
-			position: relative;
-			text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);
-			width: 100%;
-			height: 25vh;
-			text-align: center;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: row;
-		}
-		
-		.location-label {
-			margin-right: 10px;
+		@keyframes twinkle {
+			0%, 100% { opacity: 0.3; transform: scale(0.8); }
+			50% { opacity: 1; transform: scale(1.2); }
 		}
 
 		.eclipse-animation {
-			position: fixed;
+			position: relative;
 			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
+			height: 45vh;
 			z-index: 5;
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			pointer-events: none;
+			margin-top: 2vh;
 		}
 
-		.sun {
+		.sun, .moon, .corona, .diamond-ring {
 			position: absolute;
-			width: 200px;
-			height: 200px;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
 			border-radius: 50%;
-			background: radial-gradient(circle, #ffee00 30%, #ff9900 70%, #ff6600 100%);
-			box-shadow: 0 0 50px #ff6600;
-			z-index: 1;
+			pointer-events: none;
+		}
+
+		.sun {
+			width: var(--eclipse-size);
+			height: var(--eclipse-size);
+			background: radial-gradient(circle, #fff9e6 0%, #ffee00 20%, #ff9900 60%, #ff6600 100%);
+			box-shadow: 0 0 6vmin #ff6600, 0 0 12vmin rgba(255, 153, 0, 0.4);
+			z-index: 10;
 			transition: all 1s ease-in-out;
+			cursor: pointer;
+			pointer-events: auto;
 		}
 
 		.moon {
-			position: absolute;
-			width: 201px;
-			height: 201px;
-			border-radius: 50%;
-			background-color: #232323;
-			transform: translateX(200px);
-			z-index: 2;
+			width: calc(var(--eclipse-size) + 0.6vmin);
+			height: calc(var(--eclipse-size) + 0.6vmin);
+			background: radial-gradient(circle, #232323 0%, #111 100%);
+			transform: translate(calc(-50% + var(--eclipse-offset)), -50%);
+			z-index: 12;
 			transition: transform 1s ease-in-out;
+			box-shadow: inset 0 0 2vmin rgba(0,0,0,0.5);
+			will-change: transform;
 		}
 
-		.stars {
-			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100%;
-			height: 100%;
-			z-index: 0;
+		.corona {
+			width: calc(var(--eclipse-size) + 4vmin);
+			height: calc(var(--eclipse-size) + 4vmin);
+			background: transparent;
+			box-shadow: 0 0 5vmin 2vmin #fff, 0 0 10vmin 5vmin rgba(255, 255, 255, 0.4);
+			z-index: 5;
 			opacity: 0;
-			transition: opacity 2s;
-			pointer-events: none;
+			transition: opacity 1s ease-in-out;
 		}
 
-		.star {
-			position: absolute;
-			background-color: white;
+		@keyframes coronaFlare {
+			0% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 0.8; }
+			50% { transform: translate(-50%, -50%) scale(1.05) rotate(180deg); opacity: 1; }
+			100% { transform: translate(-50%, -50%) scale(1) rotate(360deg); opacity: 0.8; }
+		}
+
+		.diamond-ring {
+			width: 5vmin;
+			height: 5vmin;
+			background: #fff;
 			border-radius: 50%;
+			box-shadow: 0 0 8vmin 3vmin #fff, 0 0 15vmin 6vmin rgba(255, 255, 255, 0.8), 0 0 30vmin 10vmin rgba(255, 255, 255, 0.3);
+			z-index: 15;
+			opacity: 0;
+			transition: opacity 0.3s ease-in-out, transform 0.1s linear;
+			filter: blur(1px);
+		}
+
+		.content-wrapper {
+			width: 92%;
+			max-width: 600px;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+			z-index: 20;
+			transition: opacity 1s ease-in-out;
+			background: rgba(255, 255, 255, 0.05);
+			backdrop-filter: blur(20px);
+			-webkit-backdrop-filter: blur(20px);
+			padding: clamp(15px, 3vh, 30px);
+			border-radius: 25px;
+			border: 1px solid rgba(255, 255, 255, 0.1);
+			margin-top: 2vh;
+			margin-bottom: 4vh;
+			box-sizing: border-box;
+		}
+
+		h1 {
+			margin: 0 0 20px 0;
+			width: 100%;
+			text-align: center;
+			font-size: clamp(1.2rem, 4vmin, 2rem);
+			font-weight: 300;
+			letter-spacing: 2px;
+			text-transform: uppercase;
+		}
+
+		.countdown {
+			display: flex;
+			width: 100%;
+			justify-content: center;
+			gap: clamp(10px, 3vw, 25px);
+		}
+
+		.time-block {
+			text-align: center;
+			flex: 1;
+		}
+
+		.time-value {
+			font-size: clamp(1.8rem, 8vmin, 4rem);
+			font-weight: 700;
+			margin-bottom: 2px;
+			font-variant-numeric: tabular-nums;
+			transition: all 0.3s ease;
 		}
 
+		.time-label {
+			font-size: clamp(0.6rem, 2vmin, 0.8rem);
+			opacity: 0.6;
+			letter-spacing: 1px;
+			text-transform: uppercase;
+		}
+
+		.location-info {
+			font-size: clamp(0.7rem, 2.5vmin, 1rem);
+			padding: 6px 15px;
+			margin-top: 20px;
+			background: rgba(255, 255, 255, 0.1);
+			border-radius: 50px;
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.location-label { opacity: 0.7; }
+
 		.settings-btn, .fullscreen-btn {
 			position: fixed;
-			background: none;
-			border: none;
+			background: rgba(255, 255, 255, 0.1);
+			backdrop-filter: blur(10px);
+			border: 1px solid rgba(255, 255, 255, 0.2);
 			color: white;
-			opacity: 0.8;
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
 			cursor: pointer;
-			font-size: 1.2rem;
+			font-size: 1.1rem;
 			z-index: 100;
-		}
-
-		.settings-btn {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			transition: all 0.3s;
 			top: 15px;
-			right: 15px;
 		}
 
-		.fullscreen-btn {
-			top: 15px;
-			left: 15px;
-		}
+		.settings-btn { right: 15px; }
+		.fullscreen-btn { left: 15px; }
 
 		.settings-panel {
 			position: fixed;
 			top: 0;
-			right: -350px;
-			width: 330px;
+			right: -100%;
+			width: 100%;
+			max-width: 320px;
 			height: 100%;
-			background-color: #232323;
-			padding: 60px 10px 20px;
-			transition: right 0.3s;
-			z-index: 99;
+			background: rgba(15, 15, 25, 0.95);
+			backdrop-filter: blur(20px);
+			padding: 50px 20px 20px;
+			transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+			z-index: 110;
 			overflow-y: auto;
 			box-sizing: border-box;
 		}
 
-		.settings-panel.open {
-			right: 0;
-		}
+		.settings-panel.open { right: 0; }
 
 		.close-btn {
 			position: absolute;
@@ -189,133 +270,65 @@
 			border: none;
 			color: white;
 			cursor: pointer;
-			font-size: 1.2rem;
-		}
-
-		.setting-item {
-			margin-bottom: 20px;
-		}
-
-		.setting-item label {
-			display: block;
-			margin-bottom: 5px;
-			opacity: 0.8;
+			font-size: 1.5rem;
 		}
 
+		.setting-item { margin-bottom: 15px; }
+		.setting-item label { display: block; margin-bottom: 5px; opacity: 0.8; font-size: 0.9rem; }
 		.setting-item input, .setting-item select {
 			width: 100%;
-			padding: 8px;
-			border-radius: 4px;
+			padding: 10px;
+			border-radius: 8px;
 			border: 1px solid #444;
-			background-color: #333;
+			background-color: #222;
 			color: white;
 			box-sizing: border-box;
 		}
-	    .time-with-seconds select {
-			padding: 8px;
-			border-radius: 4px;
-			border: 1px solid #444;
-			background-color: #333;
-			color: white;
-			margin: 0 2px;
-			width: auto;
-			min-width: 55px;
-			font-size: 16px;
-			padding-right: 30px;
-		}
-		
-		.time-with-seconds {
-			display: flex;
-			align-items: center;
-		}
 		
-		.switch {
-			position: relative;
-			display: inline-block;
-			width: 50px;
-			height: 24px;
-			margin-top: 5px;
-		}
-
-		.switch input {
-			opacity: 0;
-			width: 0;
-			height: 0;
-		}
-
+		.switch { position: relative; display: inline-block; width: 44px; height: 22px; }
+		.switch input { opacity: 0; width: 0; height: 0; }
 		.slider {
 			position: absolute;
 			cursor: pointer;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
+			top: 0; left: 0; right: 0; bottom: 0;
 			background-color: #444;
 			transition: .4s;
-			border-radius: 24px;
+			border-radius: 22px;
 		}
-
 		.slider:before {
 			position: absolute;
 			content: "";
-			height: 16px;
-			width: 16px;
-			left: 4px;
-			bottom: 4px;
+			height: 16px; width: 16px;
+			left: 3px; bottom: 3px;
 			background-color: white;
 			transition: .4s;
 			border-radius: 50%;
 		}
+		input:checked + .slider { background-color: #2196F3; }
+		input:checked + .slider:before { transform: translateX(22px); }
 
-		input:checked + .slider {
-			background-color: #2196F3;
+		@media (max-width: 600px) {
+			:root { --eclipse-size: 35vmin; }
+			.eclipse-animation { height: 35vh; }
+			.content-wrapper { width: 95%; padding: 15px 10px; }
+			h1 { font-size: 1.1rem; }
+			.time-value { font-size: 2.2rem; }
 		}
 
-		input:checked + .slider:before {
-			transform: translateX(26px);
-		}
-
-		.hide {
-			display: none !important;
-		}
-
-		@media (orientation: portrait) {
-			h1 {
-				height: 25vh;
-				font-size: 7vw;
-			}
-			.location-info {
-				flex-direction: column;
-				height: 25vh;
-				font-size: 4vw;
-			}
-			.location-label {
-				margin-bottom: 10px;
-				margin-right: 0px;
-			}
-			.time-block {
-				flex: 1 0 34%;
-			}
-		}
-
-		@keyframes sunPulse {
-			0% { transform: scale(1); }
-			50% { transform: scale(1.2); box-shadow: 0 0 70px #ff6600; }
-			100% { transform: scale(1); }
-		}
-
-		@keyframes moonSway {
-			0% { transform: translateX(200px); }
-			50% { transform: translateX(-200px) translateY(-15%); }
-			100% { transform: translateX(200px); }
+		@media (max-height: 500px) {
+			body { justify-content: flex-start; padding-top: 10px; }
+			.eclipse-animation { height: 30vh; }
+			.content-wrapper { margin-top: 10px; }
 		}
 
 	</style>
 </head>
 <body>
+<div class="nebula" id="nebula"></div>
 <div class="stars" id="stars"></div>
-<button class="settings-btn" id="settingsBtn">⚙️</button>
-<button class="fullscreen-btn" id="fullscreenBtn">⛶</button>
+<button class="settings-btn" id="settingsBtn" aria-label="Settings">⚙️</button>
+<button class="fullscreen-btn" id="fullscreenBtn" aria-label="Fullscreen">⛶</button>
+
 <div class="settings-panel" id="settingsPanel">
 	<button class="close-btn" id="closeBtn">✕</button>
 	<div class="setting-item">
@@ -357,28 +370,20 @@
 	</div>
 	<div class="setting-item">
 		<label id="dateLabel">Date:</label>
-		<div class="setting-item" id="eclipseDateContainer">
-			<input type="date" id="eclipseDate">
-			<label for="eclipseTimeHours" id="timeLabel">Time:</label>
-			<div class="time-with-seconds" id="eclipseTime">
-				<select id="eclipseTimeHours">
-					<!-- Options for hours 0-23 will be generated by JavaScript -->
-				</select>
-				<span>:</span>
-				<select id="eclipseTimeMinutes">
-					<!-- Options for minutes 0-59 will be generated by JavaScript -->
-				</select>
-				<span>:</span>
-				<select id="eclipseTimeSeconds">
-					<!-- Options for seconds 0-59 will be generated by JavaScript -->
-				</select>
-			</div>
-			<div class="setting-item" id="customLocationFields">
-				<label for="customLocation" id="customLocationLabel">Location name:</label>
-				<input type="text" id="customLocation" placeholder="e.g., Your city">
-			</div>
+		<input type="date" id="eclipseDate" style="margin-bottom: 10px;">
+		<label for="eclipseTimeHours" id="timeLabel">Time:</label>
+		<div style="display: flex; align-items: center; gap: 5px;">
+			<select id="eclipseTimeHours" style="flex: 1;"></select>
+			<span>:</span>
+			<select id="eclipseTimeMinutes" style="flex: 1;"></select>
+			<span>:</span>
+			<select id="eclipseTimeSeconds" style="flex: 1;"></select>
 		</div>
 	</div>
+	<div class="setting-item" id="customLocationFields" style="display: none;">
+		<label for="customLocation" id="customLocationLabel">Location name:</label>
+		<input type="text" id="customLocation" placeholder="e.g., Your city">
+	</div>
 	<div class="setting-item">
 		<label for="keepAwake" id="keepAwakeLabel">Keep screen on:</label>
 		<label class="switch">
@@ -393,24 +398,18 @@
 			<span class="slider"></span>
 		</label>
 	</div>
-	<div class="setting-item">
-		<button id="saveSettings" style="width: 100%; padding: 10px; background: #555; color: white; border: none; border-radius: 4px; cursor: pointer;">Save settings</button>
-	</div>
-	<div class="info-text" id="offlineInfo">
-		This app works offline - add to your home screen to use as an app
-	</div>
-	<div class="setting-item">
-		<button id="resetSettings" style="width: 100%; padding: 10px; background: #a33; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px;">Reset settings</button>
-	</div>
-</div>
+	<button id="saveSettings" style="width: 100%; padding: 12px; background: #2196F3; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 10px;">Save settings</button>
+	<button id="resetSettings" style="width: 100%; padding: 10px; background: transparent; color: #ff5555; border: 1px solid #ff5555; border-radius: 8px; cursor: pointer; margin-top: 15px;">Reset settings</button>
 </div>
 
 <div class="eclipse-animation">
-	<div class="sun" id="sun"></div>
+	<div class="corona" id="corona"></div>
+	<div class="sun" id="sun" onclick="triggerHourlyAnimation()"></div>
 	<div class="moon" id="moon"></div>
+	<div class="diamond-ring" id="diamondRing"></div>
 </div>
 
-<div class="content-wrapper">
+<div class="content-wrapper" id="content">
 	<h1 id="mainTitle">Solar Eclipse Countdown</h1>
 	<div class="countdown">
 		<div class="time-block">
@@ -431,15 +430,15 @@ <h1 id="mainTitle">Solar Eclipse Countdown</h1>
 		</div>
 	</div>
 	<div class="location-info" id="locationInfo">
-	  <div class="location-label" id="locationLabel">Location:</div>
-	  <div class="location-name" id="locationName">Cascante</div>
+	  <span class="location-label" id="locationLabel">Location:</span>
+	  <span class="location-name" id="locationName">Cascante</span>
 	</div>
 </div>
 
 <script>
-// Service Worker Registration
+// Service Worker
 if('serviceWorker' in navigator){
-  const c=`const c="e-v1";self.addEventListener("install",e=>{e.waitUntil(caches.open(c).then(c=>c.addAll(["/","/index.html"])))});self.addEventListener("fetch",e=>{e.respondWith(caches.match(e.request).then(n=>n||fetch(e.request).then(n=>{if(!n||200!==n.status||"basic"!==n.type)return n;let t=n.clone();return caches.open(c).then(c=>{c.put(e.request,t)}),n})))});self.addEventListener("activate",e=>{e.waitUntil(caches.keys().then(e=>Promise.all(e.map(e=>{if(e!==c)return caches.delete(e)}))))});`;
+  const c=`const c="e-v2";self.addEventListener("install",e=>{e.waitUntil(caches.open(c).then(c=>c.addAll(["/","/index.html"])))});self.addEventListener("fetch",e=>{e.respondWith(caches.match(e.request).then(n=>n||fetch(e.request).then(n=>{if(!n||200!==n.status||"basic"!==n.type)return n;let t=n.clone();return caches.open(c).then(c=>{c.put(e.request,t)}),n})))});self.addEventListener("activate",e=>{e.waitUntil(caches.keys().then(e=>Promise.all(e.map(e=>{if(e!==c)return caches.delete(e)}))))});`;
   const b=new Blob([c],{type:'text/javascript'});
   const u=URL.createObjectURL(b);
   navigator.serviceWorker.register(u).catch(e=>console.error(e));
@@ -447,713 +446,257 @@ <h1 id="mainTitle">Solar Eclipse Countdown</h1>
 
 let eclipseDate = new Date('2026-08-12T18:28:41Z');
 let locationName = "Cascante";
-let currentLanguage = "en";
+let isAnimating = false;
+let wakeLock = null;
+
+const requestWakeLock = async () => {
+	if (!('wakeLock' in navigator)) return;
+	try {
+		wakeLock = await navigator.wakeLock.request('screen');
+	} catch (err) {}
+};
+
+const releaseWakeLock = async () => {
+	if (wakeLock !== null) { await wakeLock.release(); wakeLock = null; }
+};
+
+document.addEventListener('visibilitychange', async () => {
+	if (wakeLock !== null && document.visibilityState === 'visible') await requestWakeLock();
+});
 
 const translations = {
-	en: {
-		title: "Solar Eclipse Countdown",
-		days: "DAYS",
-		hours: "HOURS",
-		minutes: "MINUTES",
-		seconds: "SECONDS",
-		location: "Location: ",
-		dateLabel: "Date:",
-		timeLabel: "Time:",
-		locationSelect: "Location:",
-		customOption: "Custom",
-		customLocation: "Location name:",
-		keepAwake: "Keep screen on:",
-		hourlyAnimation: "Hourly animation:",
-		saveSettings: "Save settings",
-		offlineInfo: "This app works offline - add to your home screen to use as an app.",
-		resetSettings: "Reset settings"
-	},
-	pl: {
-		title: "Odliczanie do zaćmienia słońca",
-		days: "DNI",
-		hours: "GODZIN",
-		minutes: "MINUT",
-		seconds: "SEKUND",
-		location: "Lokalizacja: ",
-		dateLabel: "Data:",
-		timeLabel: "Godzina:",
-		locationSelect: "Lokalizacja:",
-		customOption: "Własna",
-		customLocation: "Nazwa lokalizacji:",
-		keepAwake: "Ekran zawsze włączony:",
-		hourlyAnimation: "Animacja co godzinę:",
-		saveSettings: "Zapisz ustawienia",
-		offlineInfo: "Aplikacja działa również offline - dodaj do ekranu głównego, aby korzystać jak z aplikacji.",
-	    resetSettings: "Resetuj ustawienia"
-	},
-	es: {
-		title: "Cuenta atrás para el eclipse solar",
-		days: "DÍAS",
-		hours: "HORAS",
-		minutes: "MINUTOS",
-		seconds: "SEGUNDOS",
-		location: "Ubicación: ",
-		dateLabel: "Fecha:",
-		timeLabel: "Hora:",
-		locationSelect: "Ubicación:",
-		customOption: "Personalizada",
-		customLocation: "Nombre de la ubicación:",
-		keepAwake: "Mantener pantalla encendida:",
-		hourlyAnimation: "Animación por hora:",
-		saveSettings: "Guardar configuración",
-		offlineInfo: "Esta aplicación funciona sin conexión - añádela a tu pantalla de inicio para usarla como una aplicación.",
-		resetSettings: "Restablecer configuración"
-	},
-	de: {
-		title: "Countdown zur Sonnenfinsternis",
-		days: "TAGE",
-		hours: "STUNDEN",
-		minutes: "MINUTEN",
-		seconds: "SEKUNDEN",
-		location: "Standort: ",
-		dateLabel: "Datum:",
-		timeLabel: "Uhrzeit:",
-		locationSelect: "Standort:",
-		customOption: "Benutzerdefiniert",
-		customLocation: "Standortname:",
-		keepAwake: "Bildschirm anlassen:",
-		hourlyAnimation: "Stündliche Animation:",
-		saveSettings: "Einstellungen speichern",
-		offlineInfo: "Diese App funktioniert offline - füge sie deinem Startbildschirm hinzu, um sie als App zu nutzen.",
-	    resetSettings: "Einstellungen zurücksetzen"
-	},
-	fr: {
-		title: "Compte à rebours pour l'éclipse solaire",
-		days: "JOURS",
-		hours: "HEURES",
-		minutes: "MINUTES",
-		seconds: "SECONDES",
-		location: "Emplacement: ",
-		dateLabel: "Date:",
-		timeLabel: "Heure:",
-		locationSelect: "Emplacement:",
-		customOption: "Personnalisé",
-		customLocation: "Nom de l'emplacement:",
-		keepAwake: "Garder l'écran allumé:",
-		hourlyAnimation: "Animation horaire:",
-		saveSettings: "Enregistrer les paramètres",
-		offlineInfo: "Cette application fonctionne hors ligne - ajoutez-la à votre écran d'accueil pour l'utiliser comme une application.",
-		resetSettings: "Réinitialiser les paramètres"
-	},
-	it: {
-		title: "Conto alla rovescia per l'eclissi solare",
-		days: "GIORNI",
-		hours: "ORE",
-		minutes: "MINUTI",
-		seconds: "SECONDI",
-		location: "Posizione: ",
-		dateLabel: "Data:",
-		timeLabel: "Ora:",
-		locationSelect: "Posizione:",
-		customOption: "Personalizzato",
-		customLocation: "Nome della posizione:",
-		keepAwake: "Mantieni lo schermo acceso:",
-		hourlyAnimation: "Animazione oraria:",
-		saveSettings: "Salva impostazioni",
-		offlineInfo: "Questa app funziona offline - aggiungila alla schermata principale per usarla come un'app.",
-		resetSettings: "Ripristina impostazioni"
-	},
-	pt: {
-		title: "Contagem regressiva para o eclipse solar",
-		days: "DIAS",
-		hours: "HORAS",
-		minutes: "MINUTOS",
-		seconds: "SEGUNDOS",
-		location: "Localização: ",
-		dateLabel: "Data:",
-		timeLabel: "Hora:",
-		locationSelect: "Localização:",
-		customOption: "Personalizada",
-		customLocation: "Nome da localização:",
-		keepAwake: "Manter tela acesa:",
-		hourlyAnimation: "Animação por hora:",
-		saveSettings: "Salvar configurações",
-		offlineInfo: "Este aplicativo funciona offline - adicione à sua tela inicial para usá-lo como um aplicativo.",
-	    resetSettings: "Redefinir configurações"
-	},
-	is: {
-		title: "Niðurtalning til sólmyrkva",
-		days: "DAGAR",
-		hours: "TÍMAR",
-		minutes: "MÍNÚTUR",
-		seconds: "SEKÚNDUR",
-		location: "Staðsetning: ",
-		dateLabel: "Dagsetning:",
-		timeLabel: "Tími:",
-		locationSelect: "Staðsetning:",
-		customOption: "Sérsniðið",
-		customLocation: "Nafn staðsetningar:",
-		keepAwake: "Halddu skjánum vakandi:",
-		hourlyAnimation: "Klukkutíma animation:",
-		saveSettings: "Vista stillingar",
-		offlineInfo: "Þessi app virkar án nettengingar - bættu við á heimaskjá til að nota sem app.",
-	    resetSettings: "Endurstilla stillingar"
-	}
+	en: { title: "Solar Eclipse Countdown", days: "DAYS", hours: "HOURS", minutes: "MINUTES", seconds: "SECONDS", location: "Location:", dateLabel: "Date:", timeLabel: "Time:", locationSelect: "Location:", customOption: "Custom", customLocation: "Location name:", keepAwake: "Keep screen on:", hourlyAnimation: "Hourly animation:", saveSettings: "Save settings", resetSettings: "Reset settings" },
+	pl: { title: "Odliczanie do zaćmienia słońca", days: "DNI", hours: "GODZIN", minutes: "MINUT", seconds: "SEKUND", location: "Lokalizacja:", dateLabel: "Data:", timeLabel: "Godzina:", locationSelect: "Lokalizacja:", customOption: "Własna", customLocation: "Nazwa lokalizacji:", keepAwake: "Ekran zawsze włączony:", hourlyAnimation: "Animacja co godzinę:", saveSettings: "Zapisz ustawienia", resetSettings: "Resetuj ustawienia" },
+	es: { title: "Cuenta atrás para el eclipse solar", days: "DÍAS", hours: "HORAS", minutes: "MINUTOS", seconds: "SEGUNDOS", location: "Ubicación:", dateLabel: "Fecha:", timeLabel: "Hora:", locationSelect: "Ubicación:", customOption: "Personalizada", customLocation: "Nombre de la ubicación:", keepAwake: "Mantener pantalla encendida:", hourlyAnimation: "Animación por hora:", saveSettings: "Guardar configuración", resetSettings: "Restablecer configuración" },
+	de: { title: "Countdown zur Sonnenfinsternis", days: "TAGE", hours: "STUNDEN", minutes: "MINUTEN", seconds: "SEKUNDEN", location: "Standort:", dateLabel: "Datum:", timeLabel: "Uhrzeit:", locationSelect: "Standort:", customOption: "Benutzerdefiniert", customLocation: "Standortname:", keepAwake: "Bildschirm anlassen:", hourlyAnimation: "Stündliche Animation:", saveSettings: "Einstellungen speichern", resetSettings: "Einstellungen zurücksetzen" },
+	fr: { title: "Compte à rebours pour l'éclipse solaire", days: "JOURS", hours: "HEURES", minutes: "MINUTES", seconds: "SECONDES", location: "Emplacement:", dateLabel: "Date:", timeLabel: "Heure:", locationSelect: "Emplacement:", customOption: "Personnalisé", customLocation: "Nom de l'emplacement:", keepAwake: "Garder l'écran allumé:", hourlyAnimation: "Animation horaire:", saveSettings: "Enregistrer les paramètres", resetSettings: "Réinitialiser les paramètres" },
+	it: { title: "Conto alla rovescia per l'eclissi solare", days: "GIORNI", hours: "ORE", minutes: "MINUTI", seconds: "SECONDI", location: "Posizione:", dateLabel: "Data:", timeLabel: "Ora:", locationSelect: "Posizione:", customOption: "Personalizzato", customLocation: "Nome della posizione:", keepAwake: "Mantieni lo schermo acceso:", hourlyAnimation: "Animazione oraria:", saveSettings: "Salva impostazioni", resetSettings: "Ripristina impostazioni" },
+	pt: { title: "Contagem regressiva para o eclipse solar", days: "DIAS", hours: "HORAS", minutes: "MINUTOS", seconds: "SEGUNDOS", location: "Localização:", dateLabel: "Data:", timeLabel: "Hora:", locationSelect: "Localização:", customOption: "Personalizada", customLocation: "Nome da localização:", keepAwake: "Manter tela acesa:", hourlyAnimation: "Animação por hora:", saveSettings: "Salvar configurações", resetSettings: "Redefinir configurações" },
+	is: { title: "Niðurtalning til sólmyrkva", days: "DAGAR", hours: "TÍMAR", minutes: "MÍNÚTUR", seconds: "SEKÚNDUR", location: "Staðsetning:", dateLabel: "Dagsetning:", timeLabel: "Tími:", locationSelect: "Staðsetning:", customOption: "Sérsniðið", customLocation: "Nafn staðsetningar:", keepAwake: "Halddu skjánum vakandi:", hourlyAnimation: "Klukkutíma animation:", saveSettings: "Vista stillingar", resetSettings: "Endurstilla stillingar" }
 };
 
 const eclipseTimes = {
-  oviedo: "2026-08-12T20:27:05+02:00",
-  santander: "2026-08-12T20:26:57+02:00",
-  bilbao: "2026-08-12T20:27:23+02:00",
-  vitoria: "2026-08-12T20:27:43+02:00",
-  leon: "2026-08-12T20:28:20+02:00",
-  burgos: "2026-08-12T20:28:24+02:00",
-  zamora: "2026-08-12T20:30:53+02:00",
-  valladolid: "2026-08-12T20:29:53+02:00",
-  zaragoza: "2026-08-12T20:29:02+02:00",
-  castellon: "2026-08-12T20:31:19+02:00",
-  palma: "2026-08-12T20:31:05+02:00",
-  coruna: "2026-08-12T20:27:40+02:00",
-  soria: "2026-08-12T20:29:06+02:00",
-  tarragona: "2026-08-12T20:29:29+02:00",
-  reykjavik: "2026-08-12T17:48:16+00:00",
-  akranes: "2026-08-12T17:47:52+00:00",
-  keflavik: "2026-08-12T17:48:05+00:00",
-  olafsvik: "2026-08-12T17:45:54+00:00"
+	oviedo: "2026-08-12T20:27:05+02:00", santander: "2026-08-12T20:26:57+02:00", bilbao: "2026-08-12T20:27:23+02:00", vitoria: "2026-08-12T20:27:43+02:00", leon: "2026-08-12T20:28:20+02:00", burgos: "2026-08-12T20:28:24+02:00", zamora: "2026-08-12T20:30:53+02:00", valladolid: "2026-08-12T20:29:53+02:00", zaragoza: "2026-08-12T20:29:02+02:00", castellon: "2026-08-12T20:31:19+02:00", palma: "2026-08-12T20:31:05+02:00", coruna: "2026-08-12T20:27:40+02:00", soria: "2026-08-12T20:29:06+02:00", tarragona: "2026-08-12T20:29:29+02:00", reykjavik: "2026-08-12T17:48:16+00:00", akranes: "2026-08-12T17:47:52+00:00", keflavik: "2026-08-12T17:48:05+00:00", olafsvik: "2026-08-12T17:45:54+00:00"
 };
 
 function updateLanguage(lang) {
-	currentLanguage = lang;
-	document.getElementById('mainTitle').textContent = translations[lang].title;
-	document.getElementById('daysLabel').textContent = translations[lang].days;
-	document.getElementById('hoursLabel').textContent = translations[lang].hours;
-	document.getElementById('minutesLabel').textContent = translations[lang].minutes;
-	document.getElementById('secondsLabel').textContent = translations[lang].seconds;
-	document.getElementById('locationLabel').textContent = translations[lang].location
-	document.getElementById('locationName').textContent = locationName;
-	document.getElementById('dateLabel').textContent = translations[lang].dateLabel;
-	document.getElementById('timeLabel').textContent = translations[lang].timeLabel;                
-	document.getElementById('locationSelectLabel').textContent = translations[lang].locationSelect;
-	document.getElementById('customOption').textContent = translations[lang].customOption;
-	document.getElementById('customLocationLabel').textContent = translations[lang].customLocation;
-	document.getElementById('keepAwakeLabel').textContent = translations[lang].keepAwake;
-	document.getElementById('hourlyAnimationLabel').textContent = translations[lang].hourlyAnimation;
-	document.getElementById('saveSettings').textContent = translations[lang].saveSettings;
-	document.getElementById('offlineInfo').textContent = translations[lang].offlineInfo;
-	document.getElementById('resetSettings').textContent = translations[lang].resetSettings;
+	const trans = translations[lang] || translations.en;
+	document.getElementById('mainTitle').textContent = trans.title;
+	['days', 'hours', 'minutes', 'seconds'].forEach(id => document.getElementById(id + 'Label').textContent = trans[id]);
+	document.getElementById('locationLabel').textContent = trans.location;
+	document.getElementById('dateLabel').textContent = trans.dateLabel;
+	document.getElementById('timeLabel').textContent = trans.timeLabel;
+	document.getElementById('locationSelectLabel').textContent = trans.locationSelect;
+	document.getElementById('customOption').textContent = trans.customOption;
+	document.getElementById('customLocationLabel').textContent = trans.customLocation;
+	document.getElementById('keepAwakeLabel').textContent = trans.keepAwake;
+	document.getElementById('hourlyAnimationLabel').textContent = trans.hourlyAnimation;
+	document.getElementById('saveSettings').textContent = trans.saveSettings;
+	document.getElementById('resetSettings').textContent = trans.resetSettings;
 	localStorage.setItem('language', lang);
 }
 
-function populateTimeDropdowns() {
-	const hoursSelect = document.getElementById('eclipseTimeHours');
-	const minutesSelect = document.getElementById('eclipseTimeMinutes');
-	const secondsSelect = document.getElementById('eclipseTimeSeconds');
-
-	hoursSelect.innerHTML = '';
-	minutesSelect.innerHTML = '';
-	secondsSelect.innerHTML = '';
-	
-	for (let i = 0; i < 24; i++) {
-		const option = document.createElement('option');
-		option.value = i;
-		option.textContent = String(i).padStart(2, '0');
-		hoursSelect.appendChild(option);
-	}
-	for (let i = 0; i < 60; i++) {
-		const minuteOption = document.createElement('option');
-		minuteOption.value = i;
-		minuteOption.textContent = String(i).padStart(2, '0');
-		minutesSelect.appendChild(minuteOption);
-		
-		const secondOption = document.createElement('option');
-		secondOption.value = i;
-		secondOption.textContent = String(i).padStart(2, '0');
-		secondsSelect.appendChild(secondOption);
-	}
-}
-
-function updateEclipseDateFromInput() {
-	const eclipseDateInput = document.getElementById('eclipseDate').value;
-	const hours = parseInt(document.getElementById('eclipseTimeHours').value) || 0;
-	const minutes = parseInt(document.getElementById('eclipseTimeMinutes').value) || 0;
-	const seconds = parseInt(document.getElementById('eclipseTimeSeconds').value) || 0;
-
-	if (eclipseDateInput) {
-		const dateParts = eclipseDateInput.split("-");
-		const year = parseInt(dateParts[0]);
-		const month = parseInt(dateParts[1]) - 1;
-		const day = parseInt(dateParts[2]);
-
-		const localDate = new Date(year, month, day, hours, minutes, seconds);
-		const utcDate = new Date(localDate.getTime() - localDate.getTimezoneOffset() * 60000);
-		eclipseDate = localDate;
-		localStorage.setItem('eclipseDate', eclipseDate.toISOString());
-	}
-}
-
-function setDefaultDateTimeValues() {
-	const defaultDate = new Date('2026-08-12T18:28:41Z');
-	
-	const year = defaultDate.getFullYear();
-	const month = String(defaultDate.getMonth() + 1).padStart(2, '0');
-	const day = String(defaultDate.getDate()).padStart(2, '0');
-	const hours = defaultDate.getHours();
-	const minutes = defaultDate.getMinutes();
-	const seconds = defaultDate.getSeconds();
-	
-	document.getElementById('eclipseDate').value = `${year}-${month}-${day}`;
-	document.getElementById('eclipseTimeHours').value = hours;
-	document.getElementById('eclipseTimeMinutes').value = minutes;
-	document.getElementById('eclipseTimeSeconds').value = seconds;
-	document.getElementById('customLocation').value = "Cascante";
-}
-
 function loadSettings() {
-	const savedDate = localStorage.getItem('eclipseDate');
-	const savedLocation = localStorage.getItem('locationName');
-	const savedLanguage = localStorage.getItem('language');
+	const hSelect = document.getElementById('eclipseTimeHours'), mSelect = document.getElementById('eclipseTimeMinutes'), sSelect = document.getElementById('eclipseTimeSeconds');
+	for (let i = 0; i < 24; i++) hSelect.add(new Option(String(i).padStart(2, '0'), i));
+	for (let i = 0; i < 60; i++) { mSelect.add(new Option(String(i).padStart(2, '0'), i)); sSelect.add(new Option(String(i).padStart(2, '0'), i)); }
 
-	populateTimeDropdowns();
+	const savedDate = localStorage.getItem('eclipseDate'), savedLoc = localStorage.getItem('locationName'), savedLang = localStorage.getItem('language');
+	updateLanguage(savedLang || (translations[navigator.language.split('-')[0]] ? navigator.language.split('-')[0] : "en"));
+	if (savedLang) document.getElementById('languageSelect').value = savedLang;
 
-	if (savedLanguage && translations[savedLanguage]) {
-		updateLanguage(savedLanguage);
-	} else {
-		updateLanguage("en");
-	}
+	eclipseDate = savedDate ? new Date(savedDate) : new Date('2026-08-12T18:28:41Z');
+	document.getElementById('eclipseDate').value = eclipseDate.toISOString().split('T')[0];
+	hSelect.value = eclipseDate.getHours(); mSelect.value = eclipseDate.getMinutes(); sSelect.value = eclipseDate.getSeconds();
 
-	if (savedDate) {
-		eclipseDate = new Date(savedDate);
-		const dateObj = new Date(savedDate);
-		const year = dateObj.getFullYear();
-		const month = String(dateObj.getMonth() + 1).padStart(2, '0');
-		const day = String(dateObj.getDate()).padStart(2, '0');
-		const hours = dateObj.getHours();
-		const minutes = dateObj.getMinutes();
-		const seconds = dateObj.getSeconds();
-		
-		document.getElementById('eclipseDate').value = `${year}-${month}-${day}`;
-		document.getElementById('eclipseTimeHours').value = hours;
-		document.getElementById('eclipseTimeMinutes').value = minutes;
-		document.getElementById('eclipseTimeSeconds').value = seconds;
-	} else {
-		setDefaultDateTimeValues();
-	}
+	locationName = savedLoc || "Cascante";
+	document.getElementById('locationName').textContent = locationName;
+	document.getElementById('customLocation').value = locationName;
+	if (savedLoc) document.getElementById('locationSelect').value = "custom";
 
-	if (savedLocation) {
-		locationName = savedLocation;
-		document.getElementById('customLocation').value = savedLocation;
-		document.getElementById('locationSelect').value = "custom";
-	} else {
-		locationName = "Cascante";
-		document.getElementById('customLocation').value = locationName;
-	}
+	const savedKA = localStorage.getItem('keepAwake');
+	document.getElementById('keepAwake').checked = savedKA !== 'false';
+	if (document.getElementById('keepAwake').checked) requestWakeLock();
 
-	document.getElementById('locationLabel').textContent = translations[currentLanguage].location;
-	document.getElementById('locationName').textContent = locationName;
-	document.getElementById('locationSelect').dispatchEvent(new Event('change'));
+	const savedHA = localStorage.getItem('hourlyAnimation');
+	document.getElementById('hourlyAnimation').checked = savedHA !== 'false';
 }
 
 function createStars() {
-	const starsContainer = document.getElementById('stars');
-	const numberOfStars = 400;
-	
-	for (let i = 0; i < numberOfStars; i++) {
+	const container = document.getElementById('stars');
+	const colors = ['#ffffff', '#fff4e6', '#e6f2ff', '#fff0f0', '#f0faff'];
+	for (let i = 0; i < 300; i++) {
 		const star = document.createElement('div');
-		star.classList.add('star');
-		
-		const left = Math.random() * 100;
-		const top = Math.random() * 100;
-		
-		const size = Math.random() * 3 + 1;
-		
-		star.style.left = `${left}%`;
-		star.style.top = `${top}%`;
-		star.style.width = `${size}px`;
-		star.style.height = `${size}px`;
-		
-		starsContainer.appendChild(star);
+		star.className = 'star';
+		const size = Math.random() * 1.5 + 0.5;
+		const color = colors[Math.floor(Math.random() * colors.length)];
+		star.style.cssText = `left:${Math.random()*100}%; top:${Math.random()*100}%; width:${size}px; height:${size}px; background-color:${color};`;
+		if (Math.random() > 0.4) star.style.animation = `twinkle ${Math.random()*3+2}s infinite ease-in-out ${Math.random()*5}s`;
+		container.appendChild(star);
 	}
 }
-let isAnimating = false;
+
 function updateCountdown() {
-	const now = new Date();
-	const timeLeft = eclipseDate - now;
+	const now = new Date(), timeLeft = eclipseDate - now;
+	const moon = document.getElementById('moon'), stars = document.getElementById('stars'), nebula = document.getElementById('nebula');
 
 	if (timeLeft <= 0) {
-		document.getElementById('days').textContent = '0';
-		document.getElementById('hours').textContent = '0';
-		document.getElementById('minutes').textContent = '0';
-		document.getElementById('seconds').textContent = '0';
-		document.getElementById('moon').style.transform = 'translateX(0)';
-		document.body.style.backgroundColor = '#070707';
-		document.getElementById('stars').style.opacity = '1';
+		['days', 'hours', 'minutes', 'seconds'].forEach(id => document.getElementById(id).textContent = '00');
+		moon.style.transform = 'translate(-50%, -50%)';
+		document.getElementById('corona').style.opacity = '1';
+		document.getElementById('corona').style.animation = 'coronaFlare 10s infinite linear';
+		document.body.style.backgroundColor = '#050510';
+		stars.style.opacity = '1'; nebula.style.opacity = '0.5';
 		return;
 	}
 
-	const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
-	const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-	const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
-	const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
-
-	document.getElementById('days').textContent = days;
-	document.getElementById('hours').textContent = hours;
-	document.getElementById('minutes').textContent = minutes;
-	document.getElementById('seconds').textContent = seconds;
-
-	const hourlyAnimationEnabled = document.getElementById('hourlyAnimation').checked;
-
-	if (hourlyAnimationEnabled && minutes === 0 && seconds < 4 && days >= 30) {
-		triggerHourlyAnimation();
-	}
-
-	const totalAnimationTime = 30 * 24 * 60 * 60 * 1000;
-	let animationProgress = 0;
-
-	if (timeLeft < totalAnimationTime) {
-		animationProgress = 1 - (timeLeft / totalAnimationTime);
-		const moonX = 200 - (animationProgress * 200);
-		document.getElementById('moon').style.transform = `translateX(${moonX}px)`;
-	} else {
-		document.getElementById('moon').style.transform = 'translateX(200px)';
-	}
-
-	const twentyDays = 20 * 24 * 60 * 60 * 1000;
-	const tenDays = 10 * 24 * 60 * 60 * 1000;
-
-	if (!isAnimating) {
-		if (timeLeft <= twentyDays) {
-			const remainingFraction = timeLeft / twentyDays;
-			const startColor = { r: 160, g: 160, b: 240 };
-			const endColor = { r: 10, g: 10, b: 32 };
-			const r = Math.floor(startColor.r + (endColor.r - startColor.r) * (1 - remainingFraction));
-			const g = Math.floor(startColor.g + (endColor.g - startColor.g) * (1 - remainingFraction));
-			const b = Math.floor(startColor.b + (endColor.b - startColor.b) * (1 - remainingFraction));
-			document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
-		} else {
-			const hourOfDay = now.getHours() + now.getMinutes() / 60 + now.getSeconds() / 3600;
-	const keyframes = [
-		[3,   [10, 10, 32]],
-		[5,   [32, 32, 64]],
-		[5.5,   [64, 64, 128]],
-		[6.5,   [180, 230, 255]],
-		[19,  [180, 230, 255]],
-		[19.5,  [255, 120, 80]],
-		[20,  [100, 80, 100]],
-		[21,  [10, 10, 32]],
-	];
-	function interpolateColor(time, keyframes) {
-				for (let i = 0; i < keyframes.length - 1; i++) {
-					const [t1, c1] = keyframes[i];
-					const [t2, c2] = keyframes[i + 1];
-
-					if (time >= t1 && time < t2) {
-						const ratio = (time - t1) / (t2 - t1);
-						const r = c1[0] * (1 - ratio) + c2[0] * ratio;
-						const g = c1[1] * (1 - ratio) + c2[1] * ratio;
-						const b = c1[2] * (1 - ratio) + c2[2] * ratio;
-						return [r, g, b];
-					}
-				}
-				return keyframes[keyframes.length - 1][1];
+	const d = Math.floor(timeLeft / 86400000), h = Math.floor((timeLeft % 86400000) / 3600000), m = Math.floor((timeLeft % 3600000) / 60000), s = Math.floor((timeLeft % 60000) / 1000);
+	const vals = {days:d, hours:h, minutes:m, seconds:s};
+	for (let id in vals) {
+		const el = document.getElementById(id), valStr = String(vals[id]).padStart(2, '0');
+		if (el.textContent !== valStr) {
+			if (el.textContent === "--") el.textContent = valStr;
+			else {
+				el.style.opacity = '0';
+				setTimeout(() => { el.textContent = valStr; el.style.opacity = '1'; }, 150);
 			}
-
-			const [r, g, b] = interpolateColor(hourOfDay, keyframes);
-
-			document.body.style.backgroundColor = `rgb(${Math.floor(r)}, ${Math.floor(g)}, ${Math.floor(b)})`;
 		}
 	}
 
+	if (document.getElementById('hourlyAnimation').checked && m === 0 && s < 1 && d >= 1) triggerHourlyAnimation();
+
 	if (!isAnimating) {
-		if (timeLeft <= tenDays) {
-			const starOpacity = 1 - (timeLeft / tenDays);
-			document.getElementById('stars').style.opacity = starOpacity.toFixed(2);
+		const monthMs = 2592000000, last10d = 864000000;
+		if (timeLeft < monthMs) {
+			const p = 1 - (timeLeft / monthMs);
+			moon.style.transform = `translate(calc(-50% + var(--eclipse-offset) - (var(--eclipse-offset) * ${p})), -50%)`;
+		} else moon.style.transform = 'translate(calc(-50% + var(--eclipse-offset)), -50%)';
+
+		if (timeLeft < last10d) {
+			const p = 1 - (timeLeft / last10d);
+			stars.style.opacity = p; nebula.style.opacity = p * 0.4;
+			document.body.style.backgroundColor = `rgb(${10 + (10 * (1-p))}, ${10 + (10 * (1-p))}, ${26 + (20 * (1-p))})`;
 		} else {
-			const hour = now.getHours();
-			document.getElementById('stars').style.opacity = (hour >= 21 || hour < 5) ? '0.6' : '0';
+			const hr = now.getHours(), isN = hr >= 21 || hr < 6;
+			stars.style.opacity = isN ? '0.6' : '0'; nebula.style.opacity = isN ? '0.3' : '0';
+			document.body.style.backgroundColor = isN ? '#050510' : '#0a0a1a';
 		}
 	}
 }
 
-function getStarsOpacityBasedOnCountdown() {
-	const now = new Date();
-	const timeLeft = eclipseDate - now;
-	const last10days = 10 * 24 * 60 * 60 * 1000;
-	if (timeLeft < last10days) {
-		const progress = 1 - timeLeft / last10days;
-		return progress.toFixed(1);
-	}
-	return '0';
-}
-
 function triggerHourlyAnimation() {
 	if (isAnimating) return;
 	isAnimating = true;
+	const body = document.body, stars = document.getElementById('stars'), nebula = document.getElementById('nebula'), sun = document.getElementById('sun'), moon = document.getElementById('moon'), corona = document.getElementById('corona'), dr = document.getElementById('diamondRing'), content = document.getElementById('content');
+	const origBg = body.style.backgroundColor;
 
-	const body = document.body;
-	const stars = document.getElementById('stars');
-	const sun = document.getElementById('sun');
-	const moon = document.getElementById('moon');
-	const originalBg = getComputedStyle(body).backgroundColor;
-
-	body.style.transition = 'background-color 3s ease-in-out';
-	stars.style.transition = 'opacity 3s ease-in-out';
-	stars.style.opacity = '1';
-
-	const styleSheet = document.createElement('style');
-	document.head.appendChild(styleSheet);
-	sun.style.animation = 'sunPulse 3s ease-in-out';
-	moon.style.animation = 'moonSway 4s ease-in-out';
-	body.style.backgroundColor = 'rgb(10, 10, 32)';
-	setTimeout(() => {
-		body.style.backgroundColor = originalBg;
-		stars.style.opacity = getStarsOpacityBasedOnCountdown();
-	}, 3000);
+	body.classList.add('totality-mode');
+	stars.style.opacity = '1'; nebula.style.opacity = '0.8'; content.style.opacity = '0.1';
+	moon.style.transition = 'transform 8s cubic-bezier(0.4, 0, 0.2, 1)';
+
+	// Calculate positions for diamond ring based on vmin
+	const size = Math.min(window.innerWidth, window.innerHeight) * 0.4; // 40vmin
+	const drOffset = size * 0.48; // Position it exactly on the edge
+
+	setTimeout(() => moon.style.transform = 'translate(-50%, -50%)', 100);
+
+	// First Diamond Ring (Entry) - Top Right
 	setTimeout(() => {
-		body.style.transition = '';
-		stars.style.transition = '';
-		sun.style.animation = '';
-		moon.style.animation = '';
-		document.head.removeChild(styleSheet);
-		isAnimating = false;
-	}, 6000);
-}
+		dr.style.transform = `translate(calc(-50% + ${drOffset * 0.7}px), calc(-50% - ${drOffset * 0.7}px)) scale(0.8)`;
+		dr.style.opacity = '1';
+	}, 3500);
 
-let wakeLock = null;
-let wakeLockSupported = false;
-let activeWakeLock = false;
-wakeLockSupported = 'wakeLock' in navigator;
+	setTimeout(() => { dr.style.opacity = '0'; }, 4200);
 
-async function keepScreenAwake(enabled) {
-	if (!wakeLockSupported) {
-		return;
-	}
-	
-	if (enabled) {
-		if (!activeWakeLock) {
-			try {
-				wakeLock = await navigator.wakeLock.request('screen');
-				activeWakeLock = true;
-				wakeLock.addEventListener('release', () => {
-					activeWakeLock = false;
-				});
-				
-				document.addEventListener('visibilitychange', handleVisibilityChange);
-			} catch (err) {
-				if (err.name === 'NotAllowedError') {
-				}
-			}
-		}
-	} else {
-		if (wakeLock !== null && activeWakeLock) {
-			try {
-				await wakeLock.release();
-				wakeLock = null;
-				activeWakeLock = false;
-				document.removeEventListener('visibilitychange', handleVisibilityChange);
-			} catch (err) {
-			}
-		}
-	}
-}
+	// Totality
+	setTimeout(() => {
+		corona.style.opacity = '1';
+		corona.style.animation = 'coronaFlare 10s infinite linear';
+		sun.style.boxShadow = '0 0 1vmin #000';
+	}, 4000);
 
-async function handleVisibilityChange() {
-	if (wakeLockSupported && document.getElementById('keepAwake').checked) {
-		if (document.visibilityState === 'visible' && !activeWakeLock) {
-			try {
-				wakeLock = await navigator.wakeLock.request('screen');
-				activeWakeLock = true;
-			} catch (err) {
-			}
-		}
-	}
-}
+	// Second Diamond Ring (Exit) - Bottom Left
+	setTimeout(() => {
+		dr.style.transform = `translate(calc(-50% - ${drOffset * 0.7}px), calc(-50% + ${drOffset * 0.7}px)) scale(1.2)`;
+		dr.style.opacity = '1';
+	}, 7500);
 
+	setTimeout(() => {
+		corona.style.opacity = '0';
+		sun.style.boxShadow = '';
+	}, 8000);
 
-function toggleFullscreen() {
-	if (document.fullscreenElement) {
-		document.exitFullscreen();
-	} else {
-		document.documentElement.requestFullscreen().catch(err => {
-		});
-	}
-}
+	// Moon moves away
+	setTimeout(() => {
+		dr.style.opacity = '0';
+		moon.style.transform = 'translate(calc(-50% - var(--eclipse-offset)), -50%)';
+	}, 8500);
 
-function setupSettingsPanel() {
-	const settingsBtn = document.getElementById('settingsBtn');
-	const closeBtn = document.getElementById('closeBtn');
-	const settingsPanel = document.getElementById('settingsPanel');
-	const saveBtn = document.getElementById('saveSettings');
-	const locationSelect = document.getElementById('locationSelect');
-	const customLocationFields = document.getElementById('customLocationFields');
-	const keepAwakeToggle = document.getElementById('keepAwake');
-	const fullscreenBtn = document.getElementById('fullscreenBtn');
-	const languageSelect = document.getElementById('languageSelect');
-	const resetBtn = document.getElementById('resetSettings');
-	
-	resetBtn.addEventListener('click', resetAllSettings);
-	
-	if (currentLanguage && translations[currentLanguage]) {
-		languageSelect.value = currentLanguage;
-	}
-	
-	languageSelect.addEventListener('change', () => {
-		const selectedLang = languageSelect.value;
-		if (translations[selectedLang]) {
-			updateLanguage(selectedLang);
-		}
-	});
-	
-	fullscreenBtn.addEventListener('click', toggleFullscreen);
-	
-	settingsBtn.addEventListener('click', () => {
-		if (currentLanguage) {
-			languageSelect.value = currentLanguage;
-		}
-		
-		if (locationSelect.value === "custom") {
-			document.getElementById('customLocationFields').style.display = 'block';
-		} else {
-			document.getElementById('customLocationFields').style.display = 'none';
-		}
-		
-		settingsPanel.classList.add('open');
-		settingsBtn.classList.add('hide');
-	});
-	
-	closeBtn.addEventListener('click', () => {
-		settingsPanel.classList.remove('open');
-		settingsBtn.classList.remove('hide');
-	});
-	
-	locationSelect.addEventListener('change', () => {
-		const selected = locationSelect.value;
-		const isCustom = selected === 'custom';
-		const dateFields = [
-			document.getElementById('eclipseDate'),
-			document.getElementById('eclipseTimeHours'),
-			document.getElementById('eclipseTimeMinutes'),
-			document.getElementById('eclipseTimeSeconds')
-		];
-		let locationText;
-
-		if (isCustom) {
-			customLocationFields.style.display = 'block';
-			dateFields.forEach(field => field.disabled = false);
-		} else {
-			customLocationFields.style.display = 'none';
-			dateFields.forEach(field => field.disabled = true);
-
-			if (eclipseTimes[selected]) {
-				const dateTimeStr = eclipseTimes[selected];
-				const [datePart, timeWithOffset] = dateTimeStr.split('T');
-				const [timePart] = timeWithOffset.split('+').length > 1
-					? timeWithOffset.split('+')
-					: timeWithOffset.split('-');
-				const [hours, minutes, seconds] = timePart.split(':');
-				const [year, month, day] = datePart.split('-');
-
-				document.getElementById('eclipseDate').value = `${year}-${month}-${day}`;
-				document.getElementById('eclipseTimeHours').value = parseInt(hours);
-				document.getElementById('eclipseTimeMinutes').value = parseInt(minutes);
-				document.getElementById('eclipseTimeSeconds').value = parseInt(seconds);
-			}
-			locationText = locationSelect.options[locationSelect.selectedIndex].text;
-		}
+	setTimeout(() => {
+		body.classList.remove('totality-mode');
+		content.style.opacity = '1';
+		corona.style.animation = 'none';
+		corona.style.opacity = '0';
+		sun.style.boxShadow = '';
+		updateCountdown();
+	}, 10000);
 
-		document.getElementById('locationLabel').textContent = translations[currentLanguage].location;
-		document.getElementById('locationName').textContent = locationText;
-	});
+	setTimeout(() => {
+		moon.style.transition = 'none';
+		moon.style.transform = 'translate(calc(-50% + var(--eclipse-offset)), -50%)';
+		isAnimating = false;
+	}, 15000);
+}
 
-	saveBtn.addEventListener('click', () => {
-		const selectedCity = locationSelect.value;
-		let newLocationName;
-		
-		if (selectedCity !== "custom" && eclipseTimes[selectedCity]) {
-			newLocationName = locationSelect.options[locationSelect.selectedIndex].text;
-		} else {
-			newLocationName = document.getElementById("customLocation").value || "Custom";
-		}
-		
-		locationName = newLocationName;
+function setupUI() {
+	const panel = document.getElementById('settingsPanel'), sBtn = document.getElementById('settingsBtn');
+	sBtn.onclick = () => { panel.classList.add('open'); sBtn.classList.add('hide'); };
+	document.getElementById('closeBtn').onclick = () => { panel.classList.remove('open'); sBtn.classList.remove('hide'); };
+	document.getElementById('fullscreenBtn').onclick = () => { if (document.fullscreenElement) document.exitFullscreen(); else document.documentElement.requestFullscreen(); };
+
+	document.getElementById('locationSelect').onchange = (e) => {
+		const val = e.target.value;
+		document.getElementById('customLocationFields').style.display = val === 'custom' ? 'block' : 'none';
+		if (val !== 'custom' && eclipseTimes[val]) {
+			const d = new Date(eclipseTimes[val]);
+			document.getElementById('eclipseDate').value = d.toISOString().split('T')[0];
+			document.getElementById('eclipseTimeHours').value = d.getHours();
+			document.getElementById('eclipseTimeMinutes').value = d.getMinutes();
+			document.getElementById('eclipseTimeSeconds').value = d.getSeconds();
+		}
+	};
+
+	document.getElementById('saveSettings').onclick = () => {
+		const locSel = document.getElementById('locationSelect');
+		locationName = locSel.value === 'custom' ? (document.getElementById('customLocation').value || "Custom") : locSel.options[locSel.selectedIndex].text;
 		localStorage.setItem('locationName', locationName);
-		
-		document.getElementById('locationLabel').textContent = translations[currentLanguage].location;
 		document.getElementById('locationName').textContent = locationName;
+
+		const [y, mon, d] = document.getElementById('eclipseDate').value.split("-").map(Number);
+		eclipseDate = new Date(y, mon - 1, d, parseInt(document.getElementById('eclipseTimeHours').value), parseInt(document.getElementById('eclipseTimeMinutes').value), parseInt(document.getElementById('eclipseTimeSeconds').value));
+		localStorage.setItem('eclipseDate', eclipseDate.toISOString());
+
+		localStorage.setItem('language', document.getElementById('languageSelect').value);
+		updateLanguage(document.getElementById('languageSelect').value);
 		
-		if (selectedCity !== "custom" && eclipseTimes[selectedCity]) {
-			eclipseDate = new Date(eclipseTimes[selectedCity]);
-			localStorage.setItem('eclipseDate', eclipseDate.toISOString());
-		} else {
-			updateEclipseDateFromInput();
-		}
-		
-		const selectedLang = languageSelect.value;
-		if (translations[selectedLang]) {
-			localStorage.setItem('language', selectedLang);
-		}
-		
+		const ka = document.getElementById('keepAwake').checked;
+		localStorage.setItem('keepAwake', ka);
+		if (ka) requestWakeLock(); else releaseWakeLock();
+
 		localStorage.setItem('hourlyAnimation', document.getElementById('hourlyAnimation').checked);
-		keepScreenAwake(keepAwakeToggle.checked);
-		localStorage.setItem('keepAwake', keepAwakeToggle.checked);
-		
-		settingsPanel.classList.remove('open');
-		settingsBtn.classList.remove('hide');
-	});
-	
-	const savedKeepAwake = localStorage.getItem('keepAwake');
-	if (savedKeepAwake !== null) {
-		keepAwakeToggle.checked = savedKeepAwake === 'true';
-		keepScreenAwake(keepAwakeToggle.checked);
-	}
-	
-	const savedHourlyAnimation = localStorage.getItem('hourlyAnimation');
-	if (savedHourlyAnimation !== null) {
-		document.getElementById('hourlyAnimation').checked = savedHourlyAnimation === 'true';
-	}
-}
+		panel.classList.remove('open'); sBtn.classList.remove('hide');
+	};
 
-function initAdRemoval() {
-	const isLikelyOnline = window.location.hostname !== 'localhost' && 
-						   window.location.hostname !== '127.0.0.1' && 
-						   !window.location.protocol.includes('file');
-	if (isLikelyOnline) {
-		const adObserver = new MutationObserver((mutations) => {
-			const adElement = document.querySelector('div[style*="position: fixed"][style*="bottom: 0px"][style*="width: 100%"][style*="height: 55px"][style*="z-index: 9999"]');
-			
-			if (adElement) {
-				adElement.remove();
-			}
-		});
-		
-		adObserver.observe(document.body, { 
-			childList: true, 
-			subtree: true 
-		});
-		
-		setTimeout(() => {
-			adObserver.disconnect();
-		}, 6000);
-	}
+	document.getElementById('resetSettings').onclick = () => { localStorage.clear(); location.reload(); };
 }
 
 document.addEventListener('DOMContentLoaded', () => {
 	createStars();
-	populateTimeDropdowns();
 	loadSettings();
-	setupSettingsPanel();
+	setupUI();
 	updateCountdown();
 	setInterval(updateCountdown, 1000);
-	
-	document.getElementById('eclipseDate').addEventListener('change', updateEclipseDateFromInput);
-	document.getElementById('eclipseTimeHours').addEventListener('change', updateEclipseDateFromInput);
-	document.getElementById('eclipseTimeMinutes').addEventListener('change', updateEclipseDateFromInput);
-	document.getElementById('eclipseTimeSeconds').addEventListener('change', updateEclipseDateFromInput);
-	initAdRemoval();
 });
-
-function resetAllSettings() {
-    localStorage.removeItem('eclipseDate');
-    localStorage.removeItem('locationName');
-    localStorage.removeItem('language');
-    localStorage.removeItem('hourlyAnimation');
-    localStorage.removeItem('keepAwake');
-    window.location.reload();
-}
 </script>
 </body>
 </html>
