/* Tidebreak Preloader v1.0.2 – JHS-Design */

html.tbp-lock,
html.tbp-lock body { overflow: hidden !important; }
html.tbp-skip #tbp-preloader { display: none !important; }

#tbp-preloader {
	--tbp-bg: #05070b;
	--tbp-accent: #f5c542;
	--tbp-red: #ff2b2b;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	overflow: hidden;
	background: var(--tbp-bg);
	color: #e8edf2;
	font-family: "Rajdhani", "Oswald", "Bahnschrift", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	text-transform: uppercase;
	letter-spacing: .18em;
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
}
#tbp-preloader *,
#tbp-preloader *::before,
#tbp-preloader *::after { box-sizing: border-box; }

/* Hintergrund: Vignette + taktisches Raster */
.tbp-bg {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 50% 46%, rgba(40, 52, 70, .55) 0%, rgba(0, 0, 0, 0) 60%),
		radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .85) 100%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 48px);
}
.tbp.is-boom .tbp-bg { animation: tbp-bgheat 1.4s ease-out; }
@keyframes tbp-bgheat {
	0%   { filter: brightness(1.8) sepia(.6) saturate(2.2) hue-rotate(-15deg); }
	100% { filter: none; }
}

.tbp-shake { position: absolute; inset: 0; will-change: transform; }
.tbp-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Scanlines + Flimmern */
.tbp-scan {
	position: absolute; inset: 0; pointer-events: none;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px);
	mix-blend-mode: multiply;
	animation: tbp-flicker 3s steps(30) infinite;
}
.tbp-scan::after {
	content: ""; position: absolute; left: 0; right: 0; height: 22%;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05), transparent);
	animation: tbp-sweep 3.2s linear infinite;
}
@keyframes tbp-flicker { 0%, 100% { opacity: .85; } 47% { opacity: 1; } 50% { opacity: .7; } }
@keyframes tbp-sweep { from { top: -22%; } to { top: 100%; } }

.tbp-flash {
	position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 50% 46%, #fff 0%, #ffe9b0 35%, #ff9a3c 70%, rgba(255, 120, 40, .6) 100%);
	opacity: 0;
	mix-blend-mode: screen;
}

/* Fadenkreuz */
.tbp-reticle {
	position: absolute; left: 50%; top: 46%;
	width: min(56vh, 78vw, 400px); height: auto; aspect-ratio: 1;
	color: rgba(235, 240, 245, .85);
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.7) rotate(-60deg);
	transition: transform .65s cubic-bezier(.2, .9, .2, 1), opacity .3s, color .15s;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8));
}
.tbp.is-aim .tbp-reticle { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.tbp.is-locked .tbp-reticle { color: var(--tbp-red); animation: tbp-lock .35s ease-out; }
.tbp.is-locked .tbp-reticle circle:first-child { animation: tbp-spin 1.2s linear infinite; transform-origin: 100px 100px; }
.tbp.is-boom .tbp-reticle { opacity: 0; transform: translate(-50%, -50%) scale(2.4); transition-duration: .25s; }
@keyframes tbp-lock { 0% { transform: translate(-50%, -50%) scale(1.12); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes tbp-spin { to { transform: rotate(360deg); } }

/* Neues Logo */
.tbp-newwrap {
	position: absolute; left: 50%; top: 46%;
	width: min(84vw, 560px, 70vh * 1.234);
	aspect-ratio: 1393 / 1129;
	transform: translate(-50%, -50%) scale(1.9);
	opacity: 0;
	filter: blur(14px) brightness(3);
}
.tbp-new { display: block; width: 100%; height: 100%; object-fit: contain; }
.tbp-shine {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: 140% 0;
	-webkit-mask: var(--tbp-new-url) center / contain no-repeat;
	mask: var(--tbp-new-url) center / contain no-repeat;
	mix-blend-mode: overlay;
}
.tbp.is-reveal .tbp-newwrap { animation: tbp-slam .6s cubic-bezier(.18, 1.35, .4, 1) forwards, tbp-glow 2.4s .9s ease-in-out infinite; }
.tbp.is-reveal .tbp-shine { animation: tbp-shine 1.1s .45s ease-out forwards; }
@keyframes tbp-slam {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(1.9); filter: blur(14px) brightness(3); }
	55%  { opacity: 1; transform: translate(-50%, -50%) scale(.95); filter: blur(0) brightness(1.5); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0) brightness(1) drop-shadow(0 0 18px rgba(245, 197, 66, .35)); }
}
@keyframes tbp-glow {
	0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 14px rgba(245, 197, 66, .3)); }
	50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.012); filter: drop-shadow(0 0 30px rgba(245, 197, 66, .55)); }
}
@keyframes tbp-shine { from { background-position: 140% 0; } to { background-position: -40% 0; } }

/* Schockwelle */
.tbp-ring {
	position: absolute; left: 50%; top: 46%;
	width: min(60vh, 80vw, 440px); aspect-ratio: 1;
	border-radius: 50%;
	border: 3px solid var(--tbp-accent);
	box-shadow: 0 0 40px var(--tbp-accent), inset 0 0 40px var(--tbp-accent);
	transform: translate(-50%, -50%) scale(0);
	opacity: 0; pointer-events: none;
}
.tbp.is-reveal .tbp-ring { animation: tbp-ring .9s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes tbp-ring {
	0%   { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); border-width: 1px; }
}

/* HUD */
.tbp-hud { position: absolute; inset: clamp(12px, 3vw, 32px); pointer-events: none; }
.tbp-corner { position: absolute; width: clamp(22px, 4vw, 44px); height: clamp(22px, 4vw, 44px); border: 2px solid var(--tbp-accent); opacity: .8; }
.tbp-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tbp-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.tbp-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.tbp-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.tbp-hud-top {
	position: absolute; top: 6px; left: clamp(30px, 5vw, 58px); right: clamp(30px, 5vw, 58px);
	display: flex; justify-content: space-between;
	font-size: clamp(10px, 1.4vw, 13px); color: rgba(232, 237, 242, .6);
}
.tbp-rec { color: var(--tbp-red); animation: tbp-blink 1s steps(2) infinite; }
@keyframes tbp-blink { 50% { opacity: .15; } }

/* Status + Ladebalken */
.tbp-status {
	position: absolute; left: 50%; bottom: clamp(36px, 9vh, 90px);
	width: min(78vw, 420px); transform: translateX(-50%);
}
.tbp-status-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-size: clamp(12px, 1.8vw, 15px); font-weight: 600; margin-bottom: 8px;
}
.tbp-text { color: #e8edf2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbp-text::before { content: "› "; color: var(--tbp-accent); }
.tbp-text.is-alert { color: var(--tbp-red); animation: tbp-blink .25s steps(2) infinite; }
.tbp-text.is-final { color: var(--tbp-accent); text-shadow: 0 0 12px rgba(245, 197, 66, .6); }
.tbp-pct { color: var(--tbp-accent); font-variant-numeric: tabular-nums; }
.tbp-bar {
	position: relative; height: 4px; background: rgba(255, 255, 255, .1);
	clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.tbp-bar i {
	position: absolute; inset: 0 auto 0 0; width: 0%;
	background: linear-gradient(90deg, #8a6a1c, var(--tbp-accent), #fff6d6);
	box-shadow: 0 0 10px var(--tbp-accent);
}
.tbp-skiphint {
	position: absolute; left: 50%; bottom: clamp(12px, 3vh, 30px); transform: translateX(-50%);
	font-size: 10px; color: rgba(232, 237, 242, .35); white-space: nowrap;
}

/* Ausblenden */
.tbp.is-exit { animation: tbp-out .75s cubic-bezier(.6, 0, .4, 1) forwards; pointer-events: none; }
.tbp.is-exit .tbp-newwrap { animation: tbp-out-logo .75s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes tbp-out {
	0%   { opacity: 1; clip-path: inset(0 0 0 0); }
	60%  { opacity: 1; }
	100% { opacity: 0; clip-path: inset(50% 0 50% 0); }
}
@keyframes tbp-out-logo {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to   { opacity: 0; transform: translate(-50%, -50%) scale(1.25); filter: blur(6px) brightness(2); }
}

@media (prefers-reduced-motion: reduce) {
	.tbp-scan, .tbp-scan::after, .tbp-rec { animation: none !important; }
	.tbp.is-reveal .tbp-newwrap { animation: tbp-fadein .5s forwards !important; }
	.tbp.is-reveal .tbp-ring, .tbp.is-reveal .tbp-shine { animation: none !important; }
	.tbp.is-exit { animation: tbp-fadeout .4s forwards !important; }
	@keyframes tbp-fadein { to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; } }
	@keyframes tbp-fadeout { to { opacity: 0; } }
}

.tbp-hint-touch { display: none; }
@media (hover: none) {
	.tbp-hint-mouse { display: none; }
	.tbp-hint-touch { display: inline; }
}