/* Automatic door styles: frosted glass, frame, sensor, responsive */
:root{ --door-height:320px; --door-border:6px; --door-max-width:720px }

.auto-door-section{ padding:40px 20px; display:flex; justify-content:center; position:relative }
.door-frame{ display:flex; align-items:center; gap:16px; width:100%; max-width:1200px; position:relative }
.door-ad{ width: 22%; display:flex; align-items:center; justify-content:center; }
.door-ad img{ max-width:100%; height:auto; border:6px solid #111; box-sizing:border-box; display:block }

.door-main{ flex:1; display:flex; flex-direction:column; align-items:center; }

.door-container{ position:relative; width:100%; max-width:var(--door-max-width); height:var(--door-height); border:var(--door-border) solid rgba(30,30,30,0.9); border-radius:10px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(250,250,250,0.02)); box-shadow:0 12px 40px rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:center }

/* frosted glass doors (two panes) */
.glass-door{ position:absolute; top:0; bottom:0; width:50%; background:rgba(250,250,250,0.24); backdrop-filter: blur(8px) saturate(110%); -webkit-backdrop-filter: blur(8px) saturate(110%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); border-left:1px solid rgba(255,255,255,0.04); border-right:1px solid rgba(0,0,0,0.06); transition: transform 3.2s cubic-bezier(.2,.85,.12,1), opacity 1.4s ease; z-index:3 }
.left-door{ left:0; transform:translateY(8px) translateX(0); }
.right-door{ right:0; transform:translateY(8px) translateX(0); }

/* fog overlay that we'll animate to reduce fog when opening */
.glass-door::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)); transition: opacity 3.2s ease, filter 3.6s ease; opacity:0.96; backdrop-filter: blur(6px) }

/* metallic inner frame for each glass pane */
.glass-door::after{ content:''; position:absolute; inset:6px; border-radius:6px; pointer-events:none; 
	/* inner metallic frame: base shadows + subtle gradient */
	box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 18px rgba(0,0,0,0.06) inset; 
	background: linear-gradient(180deg, rgba(245,245,247,0.85), rgba(220,220,225,0.6));
	border:2px solid rgba(200,200,200,0.22);
	transition: box-shadow .9s ease, border-color .9s ease, background .9s ease;
	overflow:hidden;
}

/* moving sheen (diagonal highlight) */
.glass-door::after::before{ content:''; position:absolute; left:-60%; top:-40%; width:220%; height:180%; background:linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.18) 48%, rgba(255,255,255,0.0) 60%); transform:rotate(6deg); transition:opacity .9s ease; opacity:0.9; pointer-events:none; animation: frameSheen 5.2s linear infinite; }

@keyframes frameSheen{
	0%{ transform:translateX(-40%) rotate(6deg); opacity:0 }
	10%{ opacity:0.9 }
	50%{ transform:translateX(0%) rotate(6deg); opacity:0.9 }
	90%{ opacity:0.9 }
	100%{ transform:translateX(40%) rotate(6deg); opacity:0 }
}

/* open state: slide outward and reduce fog */
.door-open .left-door{ transform: translateX(-105%) translateY(0); }
.door-open .right-door{ transform: translateX(105%) translateY(0); }
.door-open .glass-door::before{ opacity:0.02; filter:blur(2px) }

/* when open, reduce frame contrast slightly */
.door-open .glass-door::after{ box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.04) inset; border-color: rgba(200,200,200,0.16); background: linear-gradient(180deg, rgba(250,250,252,0.9), rgba(230,230,235,0.7)); }

/* content area sits behind glass */
.door-content{ position:relative; z-index:2; max-width:72%; text-align:center; padding:12px; color:#111; }
.door-content p{ margin:0; font-size:1rem; line-height:1.5; }

/* sensor above the door */
.sensor{ width:100%; display:flex; justify-content:center; margin-bottom:8px }
.sensor-dot{ width:100px; height:14px; display:inline-block; border-radius:8px; background:linear-gradient(90deg,#4a4a4a,#111); box-shadow:0 6px 18px rgba(0,0,0,0.2); position:relative; transition: transform .4s ease }
.sensor-dot::after{ content:''; position:absolute; left:50%; top:-10px; transform:translateX(-50%); width:12px; height:12px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #9be0a6, #2fa86f); box-shadow:0 6px 14px rgba(47,168,111,0.18) }
.sensor-dot.active{ transform:translateY(-4px) }
.sensor-dot.active::after{ box-shadow:0 10px 24px rgba(47,168,111,0.28); filter:drop-shadow(0 8px 16px rgba(47,168,111,0.08)) }

/* sensor pulse when active */
.sensor-dot.active{ animation: sensorPulse 1.8s ease-in-out infinite; }
@keyframes sensorPulse{
	0%{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
	50%{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(47,168,111,0.12); }
	100%{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.18); }
}

/* subtle top rim highlight on door container to add depth */
.door-container::before{ content:''; position:absolute; left:0; right:0; top:0; height:8px; background:linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0)); pointer-events:none; z-index:4 }

/* subtle reflection line on the glass when closed */
/* end of file */

/* global framed border around the section */
.auto-door-section .door-frame::before{ content:''; position:absolute; inset:0; border:8px solid rgba(20,20,20,0.06); border-radius:12px; pointer-events:none }

/* alignment helpers: ensure ads visually match door height */
.left-ad img, .right-ad img{ width:100%; height:auto; object-fit:cover }

/* responsive */
@media (max-width:900px){
	.door-frame{ gap:12px }
	.door-ad{ display:none }
	.door-container{ max-width:100%; height:280px }
	.sensor-dot{ width:68px }
	.auto-door-section{ padding: 30px 15px; }
}

@media (max-width:600px){
	.door-container{ height:220px }
	.auto-door-section{ padding: 25px 10px; }
	.door-content{ max-width: 80%; padding: 8px; }
	.door-content p{ font-size: 0.9rem; line-height: 1.4; }
	.sensor{ margin-bottom: 6px; }
	.sensor-dot{ width: 60px; height: 12px; }
}

@media (max-width:480px){
	.door-container{ height:200px; border: 4px solid rgba(30,30,30,0.9); }
	.door-content{ max-width: 85%; }
	.door-content p{ font-size: 0.85rem; }
	.sensor-dot{ width: 50px; height: 10px; }
	.sensor-dot::after{ width: 10px; height: 10px; top: -8px; }
}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce){
	.glass-door{ transition:none }
}