:root{
  --od-ink:#1a2c34; --od-deep:#105163; --od-mid:#5794a5;
  --od-sky:#b7dce7; --od-paper:#f4f8f9; --od-ok:#1e7a4d;
}

/* ===== embed wrapper: sizes to its container, keeps 4:3 ===== */
.us-dooranim{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border-radius:14px;
}

/* fixed design canvas, scaled by JS */
.da-stage{
  position:absolute;top:0;left:0;
  width:1280px;height:960px;
  transform-origin:top left;
  background:
    radial-gradient(85% 75% at 42% 6%, rgba(16,81,99,.6) 0%, transparent 62%),
    var(--od-ink);
  overflow:hidden;
}
.da-stage::before{
  content:"";position:absolute;
  width:65%;height:65%;top:-14%;left:-8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(87,148,165,.28) 0%, rgba(87,148,165,0) 70%);
  filter:blur(70px);
  animation:da-drift 20s ease-in-out infinite alternate;
}
@keyframes da-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(20%,12%,0) scale(1.14)}
}

.da-row{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  gap:70px;
  padding:0 60px 40px;
  z-index:2;
}

/* ---------------- phone ---------------- */
.da-phone{
  position:relative;flex:0 0 auto;
  width:392px;
  background:#22262a;border-radius:50px;padding:13px;
  box-shadow:0 60px 110px -45px rgba(0,0,0,.9), 0 0 0 1px rgba(183,220,231,.14);
}
.da-pill{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  width:100px;height:26px;border-radius:13px;background:#14171a;z-index:3;
}
.da-screen{
  background:var(--od-paper);border-radius:39px;overflow:hidden;
  height:762px;display:flex;flex-direction:column;
}
.da-topbar{
  background:var(--od-ink);color:rgba(244,248,249,.6);
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:2.4rem 1rem .7rem;text-align:center;flex:0 0 auto;
}
.da-wrap{padding:1.4rem 1rem}
.da-entry{
  text-align:center;font-size:.84rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--od-mid);margin:0 0 1rem;
}
.da-card{
  background:#fff;border:1px solid rgba(26,44,52,.1);border-radius:17px;
  padding:1.35rem 1rem;box-shadow:0 20px 44px -28px rgba(26,44,52,.55);
}
.da-desc{font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--od-ink);margin:0 0 .28rem;text-align:center}
.da-day{text-align:center;font-size:.85rem;color:rgba(26,44,52,.6);margin:0 0 .08rem}
.da-time{
  text-align:center;font-size:1.35rem;font-weight:700;color:var(--od-deep);
  margin:0 0 1.15rem;font-variant-numeric:tabular-nums;
}
.da-doors{display:flex;flex-direction:column;gap:.6rem}
.da-btn{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:58px;padding:.9rem 1rem;
  border:1px solid var(--od-deep);border-radius:12px;
  background:var(--od-deep);color:#fff;
  font-family:inherit;font-size:1.02rem;font-weight:700;line-height:1.2;
  overflow:hidden;
  transition:background-color .22s ease,border-color .22s ease,transform .14s ease;
}
.da-btn.is-press{transform:scale(.97)}
.da-btn.is-working{background:var(--od-mid);border-color:var(--od-mid)}
.da-btn.is-open{background:var(--od-ok);border-color:var(--od-ok)}
.da-sweep{
  position:absolute;left:0;bottom:0;height:4px;width:100%;
  background:rgba(255,255,255,.55);transform-origin:left;transform:scaleX(0);
}
.da-btn.is-open .da-sweep{animation:da-sweep 5s linear forwards}
@keyframes da-sweep{from{transform:scaleX(1)}to{transform:scaleX(0)}}

.da-devices{margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid rgba(26,44,52,.1)}
.da-btn2{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;min-height:48px;padding:.7rem 1rem;
  border:1px solid rgba(26,44,52,.22);border-radius:12px;background:#fff;
  color:var(--od-ink);font-size:.94rem;font-weight:600;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .14s ease;
}
.da-btn2.is-press{transform:scale(.97)}
.da-btn2.is-on{background:var(--od-deep);border-color:var(--od-deep);color:#fff}

/* ---------------- door + reader ---------------- */
.da-doorwrap{position:relative;flex:0 0 auto;width:300px;height:620px}

.da-door{
  position:absolute;inset:0;z-index:1;
  border-radius:14px 14px 4px 4px;
  background:linear-gradient(160deg, rgba(87,148,165,.16) 0%, rgba(26,44,52,.5) 60%);
  border:2px solid rgba(183,220,231,.28);
  overflow:hidden;
  transition:border-color .5s ease, box-shadow .5s ease;
}
.da-door.is-open{
  border-color:rgba(30,122,77,.9);
  box-shadow:0 0 60px -10px rgba(30,122,77,.55), inset 0 0 80px -30px rgba(30,122,77,.6);
}
/* glass panes */
.da-door::before{
  content:"";position:absolute;left:22px;right:22px;top:26px;bottom:112px;
  border:1px solid rgba(183,220,231,.2);
  border-radius:6px;
  background:linear-gradient(150deg, rgba(183,220,231,.09) 0%, rgba(183,220,231,.02) 55%);
}
/* kick plate */
.da-door::after{
  content:"";position:absolute;left:22px;right:22px;bottom:26px;height:74px;
  border:1px solid rgba(183,220,231,.16);
  border-radius:4px;
  background:rgba(183,220,231,.05);
}
.da-handle{
  position:absolute;right:34px;top:50%;
  width:8px;height:62px;margin-top:-31px;
  border-radius:4px;
  background:rgba(183,220,231,.55);
  box-shadow:0 0 0 5px rgba(183,220,231,.08);
  z-index:2;
}
.da-doorlabel{
  position:absolute;left:0;right:0;bottom:-36px;
  text-align:center;
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(183,220,231,.5);
  z-index:2;
}

/* wall reader */
.da-reader{
  position:absolute;right:-40px;top:50%;
  width:42px;height:66px;margin-top:-33px;
  border-radius:8px;
  background:#1c2b33;
  border:1px solid rgba(183,220,231,.3);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
  display:flex;align-items:center;justify-content:center;
  z-index:3;
}
.da-led{
  width:11px;height:11px;border-radius:50%;
  background:rgba(183,220,231,.35);
  box-shadow:0 0 0 0 rgba(183,220,231,0);
  transition:background-color .35s ease, box-shadow .35s ease;
}
.da-reader.is-listening .da-led{
  background:var(--od-mid);
  animation:da-led 1s ease-in-out infinite;
}
@keyframes da-led{
  0%,100%{box-shadow:0 0 0 0 rgba(87,148,165,.55)}
  50%{box-shadow:0 0 0 9px rgba(87,148,165,0)}
}
.da-reader.is-ok .da-led{
  background:#3ddc84;
  box-shadow:0 0 16px 3px rgba(61,220,132,.65);
  animation:none;
}

/* ---------------- signal path ---------------- */
.da-signal{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
}
.da-signal.on{opacity:1}
.da-signal path{
  fill:none;
  stroke:var(--od-sky);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:0.1 26;
  filter:drop-shadow(0 0 6px rgba(183,220,231,.75));
}
.da-signal.flow path{animation:da-flow 1.05s linear infinite}
@keyframes da-flow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-26}
}
.da-signal .da-track{
  stroke:rgba(183,220,231,.14);
  stroke-width:2;
  stroke-dasharray:none;
  filter:none;
  animation:none;
}

/* ---------------- tap + caption ---------------- */
.da-tap{
  position:absolute;z-index:6;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.75);
  opacity:0;pointer-events:none;
}
.da-tap.go{animation:da-tap .5s ease forwards}
@keyframes da-tap{
  0%{opacity:0;transform:scale(1.6)}
  40%{opacity:1;transform:scale(.85)}
  100%{opacity:0;transform:scale(1.25)}
}

@media (prefers-reduced-motion:reduce){
  .da-stage::before,.da-signal.flow path,.da-reader.is-listening .da-led{animation:none}
  .da-btn,.da-btn2,.da-door,.da-led{transition:none}
}