/* Tamil Brothers - animations.css */
.tb-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); }
.tb-reveal--left { transform: translateX(-50px); }
.tb-reveal--right { transform: translateX(50px); }
.tb-reveal--scale { transform: scale(0.92); }
.tb-reveal.is-visible { opacity: 1; transform: none; }
.tb-reveal--delay-1 { transition-delay: 0.10s; }
.tb-reveal--delay-2 { transition-delay: 0.20s; }
.tb-reveal--delay-3 { transition-delay: 0.32s; }
.tb-reveal--delay-4 { transition-delay: 0.46s; }

.tb-shimmer { position: relative; display: inline-block; background: linear-gradient(100deg, #D4AF37 0%, #F5F1E8 40%, #D4AF37 55%, #B87333 100%); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: tb-shimmer-slide 4s linear infinite; }
@keyframes tb-shimmer-slide { 0% { background-position: 200% center; } 100% { background-position: -50% center; } }

.tb-glitch { position: relative; display: inline-block; }
.tb-glitch::before, .tb-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.tb-glitch::before { color: #ff3030; clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%); animation: tb-glitch-before 7s infinite; animation-delay: 2s; }
.tb-glitch::after { color: #00e0ff; clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); animation: tb-glitch-after 7s infinite; animation-delay: 2.08s; }
@keyframes tb-glitch-before { 0%, 88%, 100% { opacity: 0; transform: none; } 89% { opacity: 0.7; transform: translateX(-4px); } 90% { opacity: 0; transform: translateX(4px); } 91% { opacity: 0.7; transform: translateX(-2px); } 92% { opacity: 0; } }
@keyframes tb-glitch-after { 0%, 88%, 100% { opacity: 0; transform: none; } 89% { opacity: 0.6; transform: translateX(4px); } 90% { opacity: 0; transform: translateX(-4px); } 91% { opacity: 0.6; transform: translateX(2px); } 92% { opacity: 0; } }

.tb-magnetic { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important; will-change: transform; }

#tb-transition-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	pointer-events: none;
	overflow: hidden;
	display: block;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
	background: radial-gradient(circle at center, rgba(30, 42, 72, 0.22), rgba(4, 7, 16, 0.98) 62%, #02040a 100%);
}

#tb-transition-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

#pw-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0.96;
	cursor: none;
}

#pw-ui {
	position: absolute;
	left: 50%;
	bottom: clamp(40px, 8vh, 88px);
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	pointer-events: auto;
	min-width: min(280px, calc(100vw - 48px));
}

#pw-input {
	width: min(320px, calc(100vw - 64px));
	background: rgba(255, 255, 255, 0.07);
	border: 0.5px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 9px 18px;
	color: #fff;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

#pw-input::placeholder {
	color: rgba(255,255,255,0.28);
}

#pw-input:focus {
	border-color: rgba(255,255,255,0.38);
}

#tb-loader-bar {
	position: relative;
	width: min(320px, calc(100vw - 64px));
	height: 2px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 24px rgba(212,175,55,0.06);
}

#tb-loader-bar::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 35%, rgba(255,245,220,0.92) 62%, rgba(255,255,255,0.18) 82%, transparent 100%);
	transform: translateX(-100%);
	animation: tb-loader-bar-sheen 1.45s ease-in-out infinite;
	opacity: 0.95;
}

#tb-loader-fill {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(212,175,55,0.28), rgba(238,226,197,0.95) 58%, rgba(255,250,230,1));
	box-shadow: 0 0 18px rgba(212,175,55,0.28);
	transition: width 0.12s linear;
}

#tb-loader-word {
	font-family: Georgia, serif;
	font-size: 11px;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.42);
	text-shadow: none;
	padding: 0;
	line-height: 1;
}

@keyframes tb-loader-bar-sheen {
	0% { transform: translateX(-130%); }
	100% { transform: translateX(150%); }
}

@media (max-width: 768px) {
	#pw-ui {
		bottom: clamp(34px, 7.6vh, 72px);
	}

	#tb-loader-word {
		letter-spacing: 0.28em;
	}

	#pw-input {
		width: min(260px, calc(100vw - 32px));
	}

	#tb-loader-bar {
		width: min(260px, calc(100vw - 32px));
	}
}