/* ============================================
   Sassychat entrance — custom identity
   ============================================ */

@font-face {
	font-family: 'Baloo2';
	src: url('../../../fonts/baloo2-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'Baloo2';
	src: url('../../../fonts/baloo2-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'Baloo2';
	src: url('../../../fonts/baloo2-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

:root {
	--sc-ink: #1C1220;
	--sc-hot: #FF4FA3;
	--sc-deep: #C2185B;
	--sc-gold: #FFB74D;
	--sc-blush: #FFD9EC;
	--sc-glass: rgba(255,255,255,0.07);
	--sc-glass-line: rgba(255,255,255,0.14);
	--sc-panel: rgba(28,18,32,0.5);
	--sc-panel-line: rgba(255,255,255,0.18);
}

/*intro css */
#login_logo { height:70px; }
#intro_top {
	width:100%; height:100%; z-index:1; position:relative;
	background:var(--sc-ink) url('images/background.jpg');
	background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed;
	font-family:'Baloo2', sans-serif;
}
#intro_top::before {
	content:'';
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(28,18,32,0.08) 0%, rgba(28,18,32,0.12) 55%, rgba(28,18,32,0.55) 100%);
	pointer-events:none;
}
#login_wrap { width:100%; height:100%; position:relative; }
#login_all {
	width:440px; max-width:92%; border-radius:24px; display:block; color:#fff;
	background:var(--sc-panel);
	border:1px solid var(--sc-panel-line);
	box-shadow:0 24px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
	backdrop-filter:blur(6px);
	position:absolute !important; top:50% !important; left:50% !important;
	transform:translate(-50%, -50%) !important;
	margin:0 !important;
	z-index:2;
}
.login_not_member { text-align:center; padding-top:5px; }
#intro_lang { position:absolute; top:16px; right:20px; width:36px; height:36px; z-index:3; }

/* section css */
.section { width:100%; height:auto; margin:0 auto; position:relative; z-index:2; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}

.login_title_shine {
	font-size:38px !important;
	background:linear-gradient(90deg, var(--sc-deep) 0%, var(--sc-hot) 25%, var(--sc-blush) 45%, var(--sc-hot) 65%, var(--sc-deep) 100%);
	background-size:250% auto;
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:transparent;
	text-shadow:0 0 18px rgba(255,79,163,0.55);
	animation:shineSweep 3.5s linear infinite;
}
@keyframes shineSweep {
	0% { background-position:0% 50%; }
	100% { background-position:250% 50%; }
}

#intro_top p, #intro_top .text_med { font-family:'Baloo2', sans-serif; font-weight:500; }

#intro_top .ok_btn,
#intro_top .intro_login_btn,
#intro_top .intro_guest_btn {
	background:linear-gradient(135deg, var(--sc-hot), var(--sc-deep)) !important;
	font-family:'Baloo2', sans-serif !important;
	font-weight:700 !important;
	letter-spacing:0.3px;
	border-radius:14px !important;
	box-shadow:0 10px 26px rgba(255,79,163,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
	transition:transform 0.15s ease, box-shadow 0.15s ease;
}
#intro_top .ok_btn:hover,
#intro_top .intro_login_btn:hover,
#intro_top .intro_guest_btn:hover {
	transform:translateY(-1px);
	box-shadow:0 14px 32px rgba(255,79,163,0.45), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
#intro_top .intro_guest_btn {
	background:rgba(255,255,255,0.1) !important;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,0.22) !important;
}
#intro_top .intro_register_btn {
	background:linear-gradient(135deg, var(--sc-gold), #E5952C) !important;
	color:var(--sc-ink) !important;
	font-family:'Baloo2', sans-serif !important;
	font-weight:700 !important;
	letter-spacing:0.3px;
	border-radius:14px !important;
	box-shadow:0 10px 26px rgba(255,183,77,0.35), inset 0 1px 0 rgba(255,255,255,0.35) !important;
	transition:transform 0.15s ease, box-shadow 0.15s ease;
}
#intro_top .intro_register_btn:hover {
	transform:translateY(-1px);
	box-shadow:0 14px 32px rgba(255,183,77,0.45), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* floating sparkle particles */
.sc_sparkle_field { position:absolute !important; inset:0; overflow:hidden; pointer-events:none; z-index:50 !important; }
.sc_sparkle { position:absolute !important; bottom:-10px; border-radius:50%; background:radial-gradient(circle, #fff 0%, rgba(255,182,232,0.9) 60%, transparent 100%); opacity:0; animation-name:scFloat !important; animation-timing-function:linear !important; animation-iteration-count:infinite !important; box-shadow:0 0 6px 2px rgba(255,255,255,0.5); }
@keyframes scFloat {
	0% { transform:translateY(0) scale(0.6); opacity:0; }
	10% { opacity:1; }
	90% { opacity:0.8; }
	100% { transform:translateY(-100vh) scale(1); opacity:0; }
}

/* ============================================
   Why Sassychat — feature panel (col3)
   ============================================ */
#col3_section {
	position:relative; z-index:2;
	background:linear-gradient(180deg, var(--sc-ink) 0%, #241328 100%);
	padding:60px 20px 70px;
	font-family:'Baloo2', sans-serif;
}
.col3_heading {
	text-align:center; color:#fff; font-weight:700; font-size:26px;
	margin:0 0 8px; letter-spacing:0.2px;
}
.col3_heading span { color:var(--sc-hot); }
.col3_subheading {
	text-align:center; color:rgba(255,255,255,0.55); font-weight:500; font-size:14px;
	max-width:480px; margin:0 auto 40px;
}
.col3_container {
	display:flex; flex-wrap:wrap; justify-content:center; gap:22px;
	max-width:1000px; margin:0 auto;
}
.col3_element {
	background:var(--sc-glass);
	border:1px solid var(--sc-glass-line);
	border-radius:20px;
	padding:28px 22px;
	width:260px;
	text-align:center;
	transition:transform 0.2s ease, border-color 0.2s ease;
}
.col3_element:hover {
	transform:translateY(-4px);
	border-color:rgba(255,79,163,0.5);
}
.col3_element img {
	width:56px; height:56px; margin:0 auto 16px; display:block;
	filter:drop-shadow(0 6px 14px rgba(255,79,163,0.35));
}
.col3_title {
	color:#fff; font-weight:700; font-size:17px; margin:0 0 8px;
}
.col3_text {
	color:rgba(255,255,255,0.62); font-weight:500; font-size:13.5px; line-height:1.5; margin:0;
}